CASPCA Accessibility Inspection
The Charlottesville Albemarle SPCA is a no kill animal shelter that I used to work with when I was pursuing my undergraduate degree at the University of Virginia. I fostered and volunteered with through them often, so this organization holds a special place in my heart. I have done a usability inspection on their website, but I also wanted to test the website in terms of its accessibility. Specifically, I wanted to look at their adoption page as it is a frequently visited part of the website.
Project Overview
Type
Graduate Project, Manual Accessibility Inspection, Automated Accessibility Inspection
Team
Tien Tran
Timeframe
2 weeks
Tools
JAWS - Version 2022.2110.60 ILM
Google Chrome - Version 96.0.4664.45 (Official Build) (64 bit)
HTML
WAVE
Defining The Typical User
For the adoption page, the users fall into the category of people wanting to get involved through an adoption. With that being said, the ages of the potential adopters can range from 18-60+ years old having at least a high school diploma. Given the wide range of ages, computing experience and job responsibility may also vary among the older and younger age groups. Most tasks on this webpage would likely be done in a desktop setup with the possibility of viewing the webpage on a mobile device. For this inspection, the webpage will be evaluated on a desktop setup
Process
Manual Inspection
For the manual inspection of the CASPCA adoption page, I used the JAWS screen reader to do a first pass and identify potential WCAG violations. Then, I followed up that process with an inspection of the HTML code on the page.
Automated Inspection
For the automated inspection, I did an automated scan of the same adoption page using WAVE.
Manual Inspection Results
Link has animation that is not stoppable
WCAG Violation: 2.3.3 - Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.
At the top of the adoption page, there is a link labeled “Tell us about your visit to the SPCA” which has an animation effect. However, the animation is not essential to the functionality or the information being displayed, and the animation itself cannot be disabled. Some users could experience distraction or nausea from the animated content, so having the option to disable this animation would help prevent that.
Unable to bypass navigation items
WCAG Violation: 2.4.1 - A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
While JAWS was reading out the contents on the screen, the screen reader read out all the navigation items before getting to the main content of the adoption page. Since the navigation bar and logo are repeated on every page of the website, there should be a mechanism available to bypass the blocks of repeated content, but there is none present on the CASPCA website. Especially in the case of the CASPCA where there are large amounts of links located within the navigation which takes a significant amount of time to go through.
Buttons do not have descriptions
WCAG Violations:
2.4.4: The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
2.4.9: A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general.
4.1.2: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
On the adoption webpage, there are a series of buttons at the top of the page relating to reviewing the adoption process and dog, cat, and small animal adoption applications. After looking at the HTML of the adoption webpage, the buttons were actually images which did not have an accessible description for what the buttons are. When the screen reader was reading out the buttons, the reader simply said “link” instead of the name of the buttons which would be an issue for users of the website.
Pet pricing does not have alt text
WCAG Violation: 1.1.1 - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.
Located under the application button is the pricing for adopting the various pets at the shelter. The pricing is displayed in an image which does not have alt text listing out the prices for adopting pets at the shelter. The users missing this piece of key information would not allow them to know how much it would cost to adopt a pet at the CASPCA.
Pictures do not specify the type of pet
WCAG Violation: 1.1.1 - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.
Although not technically a WCAG violation, when JAWS went through the list of pets, the screen reader read out the name of the pet without specifying the species the pet was. Because the initial results shown for pets are a combination of cats, dogs, and other small animals, this could leave the users having to guess what species the pet belongs to after the screen reader reads out a pet name. Shown to the right is how the page presents the adoptable pets.
Automated Inspection Results
After running the WAVE application, there were 8 accessibility violations and 71 contrast errors identified. The errors identified aside from the contrast errors were: missing alternative text (1) and linked image missing alternative text (7).
Missing Alternative Text
WCAG Violation: 1.1.1 - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.
At the top of the adoption page, there is a banner image that did not have alternative text.
Linked Image Missing Alterative Text (x7)
WCAG Violations:
1.1.1: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.
2.4.4: The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
There were a series of images that acted as buttons and did not have alternative text to identify them.
Contrast Errors (x71)
WCAG Violation: 1.4.3 - The visual presentation of text and images of text has a contrast ratio of at least 4.5:1.
The contrast errors were all located in the navigation bar. Specifically the links that followed after a mouse hovered over a main item.
Features
Something that I found interesting was that the adoption fees image was considered a feature. The image contains content that is important to the users, but it has empty alt text (alt=””). The description on the WAVE application states that:
“If an image does not convey content or if the content of the image is conveyed elsewhere (such as in a caption or nearby text), the image should have empty/null alternative text (alt="") to ensure that it is ignored by a screen reader and is hidden when images are disabled or unavailable.”
However, I do not agree with this as it contains important information that the users should know. Shown to the right is an image of the adoption pricing and its corresponding code.
Recommendations
Upon completing the accessibility inspection on the adoption page of the CASPCA website, I was tasked with creating specific suggestions on what fixes should be done to address the issues found. Due to the short timeframe of this project, I focused on the top three most important accessibility improvements.
Create Adoption Fee Tables
Suggested Improvement:
The easiest solution would be to add alt text explaining all the different pricings.
A solution I would recommend is to create a table in HTML that splits the three pricing categories. Listing out all the pricing information in alt text for an image would be too long in my opinion, so having a table that the users can navigate through would make it easier to skip around for information. Shown to the right is an example of how this would look like.
Make Image Buttons Actual Buttons
Suggested Improvement:
Use <button> elements for all instances of the images that appears to be buttons.
Allow Users to Skip Navigation Items
Suggested Improvement:
Create a skip navigation link option at the top of the page to give users the option to skip having to listen to redundant information. The key is to have the link be the first thing the screen reader reads and the first thing that keyboard users navigate to using the keyboard.
Takeaways
Aside from learning how to use different methods of accessibility testing, I learned that the two methods can complement each other. If I were to do this assignment again, I would actually do the automated scan first to get a quick overview of the issues on the website. I would then do a manual inspection to get a deeper dive into the webpage to find other accessibility issues. Although both methods have their strengths and weaknesses, I feel that the strengths of each method covers up the weaknesses of the other making them a strong duo for doing accessibility testing.
While my personal experience with the screen reader does not compare to the experiences of real users with disabilities, I was able to get some insight on how people with disabilities would browse webpages. Additionally, the automated scan is very efficient at finding general accessibility issues making identifying WCAG violations a lot easier, but there is still the issue of false positives which makes it important that the tester reviews the violations presented by the scan.
Overall, this assignment has made me more aware of the importance of accessibility. Through using the screen reader and automated scan, I can see how an inaccessible website can make a website unusable for people with disabilities. Technology should be accessible to everyone, and not developing these technologies to accommodate people with disabilities would be leaving out a large portion of the human population. Moving forward, I am now determined to ensure that the products that I develop meet accessibility standards. Lastly, an interesting thing that I learned was that even though a website doesn’t look the nicest or isn’t the most usable, that does not mean that it is inaccessible. Coming into this assignment, I was expecting to find a ton of accessibility issues, but I was pleasantly surprised to find that there were actually a few that were easily fixable