ACCESSIBILITY

PROJECT 1. ACCESSIBILITY AUDIT & RE-DESIGN



 

For my UX design case study I chose the website of a charity called Dogs for Good as I wanted
to conduct an Accessibility audit using the W3C Web Accessibility Initiative Content Accessibility Guidelines (WCAG) 2.1 standards. Please see download link above to view the audit document. 
Once I had conducted the audit and defined the improvements and fixes, I then applied them in
a re-design of the homepage to illustrate how slight adjustments to the colour, contrast and text
size, renders the website more readable and accessible. 

Dogs for Good is a charity that helps make life-changing differences for people with disabilities through the power of expertly trained dogs. Its target audience is a diverse group, many of whom 
have some form of physical or cognitive disability. A typical user could be an adult wheelchair user, the family of a child with autism or a community group, such as a school or care home.
 As their website is targeting users with disabilities, and in order that it ensures a good user experience for all, it is really important that it meets the W3C Web Accessibility Initiative Content Accessibility Guidelines (WCAG) 2.1 standards at a minimum level AA.

Website: dogsforgood.org 
dogs for good homepage image
Accessibility Standards Auditing - Why it is important

I conducted an accessibility audit using the WCAG 2.1 guidelines to determine the current level of conformance and, where it did not meet the requirements, what improvements and code fixes could
be made in order to meet them at level AA. 

I therefore selected a couple of automated accessibility evaluation tools in order to perform part of the audit, including AXE and WAVE, which are Google Chrome extensions commonly used by web developers to test for accessibility.

In addition to automated developer tools, I also performed manual testing in order to see how easy the site is to access for keyboard only users and users of assistive technology. I disconnected my mouse and, using the keyboard only to navigate, I tabbed through the site to test elements such as skip links, focus rings, page structure & visual hierarchy and landmark elements, which are very important for users of screen readers.This layered testing approach of using automated and manual user-model testing is considered best practice in accessibility auditing. It's important to make the distinction between accessibility and usability. They are not the same thing and there is no substitute for user-model testing. You cannot automate accessibility.

Homepage Top Section After Re-design
dogsforgoodafter.png
Rationale Behind Re-design
With the re-design I wanted to address the issues flagged in the audit relating to colour, contrast and text size. The WAVE evaluation tool reported that there are currently 81 contrast errors with ‘very low’ contrast ratio between text colour and background colour, having a ratio of only 2.55:1 which means the site does not currently meet the WCAG 2 guidelines Contrast (minimum) 1.4.3 requirement to meet level AA:

Text and images of text should have a contrast ratio of at least 4.5:1 

The recommended fix is to increase the contrast between the foreground text and the background colours.
In addition, where background images are used with text, WCAG requires that page elements have both foreground AND background colours defined (or inherited) that provide sufficient contrast when the background image is disabled or unavailable.

For example, in the homepage top section shown below, I increased the text size overall for all labels and made the menu headings all caps in order to create a higher ratio of contrast. I created buttons with a deeper orange fill and larger label text. I also added a shade box over the hero image to increase contrast behind the text to make it more readable. Lastly, I added a 'dog lead-effect' banner in green to go above
the hero image to create a higher contrast with the banner text. I also added an Accessibility link to the header for ease of access by screen reader users. 
Dogs for Good Homepage Before
Dogs for Good Homepage After
DogsforGood-AFTER.png