Improving Accessibility for Mary S. Roberts Pet Adoption Center
The Mary S. Roberts Pet Adoption Center non-profit who helps homeless kittens and puppies find loving homes. This is an audit of the digital accessibility of their website.
OVERVIEW
The accessibility audit was conducted in six (6) stages:
Initial observation based on WCAG 2.1 guidelines
Color contrast analysis with Color Contrast Checker
Color blindness analysis with Colorblindness Emulator Chrome Extension
Screen reader compatibility test with accessibility menu provided on the website and “Read Aloud” Chrome Extension
Website analysis with WAVE
Website analysis was Axe DevTools
Stage 1: Observation based on WCAG 2. 1 guidelines
WCAG separates their guidelines into 4 broad principles in which a website needs to be accessible: perceivable, operable, understandable, and robust.
Satisfactory
Website is responsive at all viewpoints
Navigation in header
No flashing content (can sometimes cause seizures)
Website can be viewed without 2 dimensional scrolling
Dissatisfactory
Website is missing alt-text for images
Contrast is very low
Font is very small
No “to main content” link with tabbing through website
Tab skips navigation links
Stage 2: Check color contrast with Color Contrast Checker
A total of four color combinations where checked, but 3 of the 4 had similar color combinations.
Stage 3: Color blindness analysis with Colorblindness Emulator Chrome extension
Protanopia - red color blindness; can’t see red light
Deuteranopia - red-green color blindness; can’t see green light
Tritanopia - blue-yellow color blindness; difficulty distinguishing colors that contain blue or yellow
Top left to right: Protanopia (Red color blindness), deuteranopia (red-green color blindness)
Bottom left to right: Tritanopia (Blue-yellow color blindness), achromatopsia (total color blindness)
Stage 4: Screen reader compatibility test with accessibility menu and “Read Aloud” Chrome extension
The website was extremely incompatible with a screen reader. After navigating through the website with both the “Read Aloud” screen reader and the screen reader through the accessibility menu, it became very clear that the majority of the content on the website was being skipped over. Also, both screen readers picked up different things when going through the website.
The screen reader in the accessibility menu skips more content than the screen reader extension, and reads content that is nowhere to be seen on the page. The problem with the accessibility menu is that by offering it, it means that the site is inherently inaccessible. They shouldn’t need an accessibility menu if they made the site accessible.
Stage 5: Website analysis using WAVE
WAVE analysis was conducted on three (3) pages: homepage, Adopt a Dog, and Support Us.
The most significant errors that came up on these pages were small text, color contrast, headings, and tables. Visually, there are headings, but they were labeled as headings; it was just written as paragraph, just in a larger font.
Stage 6: Website analysis using Axe DevTools
Axe DevTools is a tool that can be used to catch accessibility errors while coding. After running an analysis on the same three pages as before, Homepage, Adopt a Dog, and Support Us, a total of 45 errors on the homepage, 30 errors on the Adopt a Dog page, and 140 errors on the Support Us page came up. The two most critical errors that came up on the pages were alternative text, and color contrast.
My Recommendations
Create real headings, instead of changing the font size to make it look like headings
Make font a readable size
Provide alt-text for all pictures; shorten long alt-text for pictures that already have them
Use more real text instead of having a lot of text on images
Better color contrast
My recommendations for contrast are to replace the current orange for the buttons with #A82400 and keep the font white. It changes the contrast ratio from 3.64 to 7.19. It keeps the CTA buttons bold and bright to give the important things such as donations emphasis. For all of the light grey/dark grey color combinations, I recommend using #F0E5E2 for the lighter shade (the background) and black for the text. Using this color combination changes the contrast from 4.48 to 17.01. These two color combination changes makes the website not only level AA compliant, but level AAA compliant.