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.

DOWNLOAD AUDIT AS PDF

Website: dogsforgood.org

Accessibility Standards Auditing - Why it is important

In the UK, one in five people have a disability – with many more living with a temporary disability.
Under UK law, organisations have a legal responsibility to ensure their website is accessible to this audience. If it isn’t, organisations could be breaking the law and losing out on a bigger online market share. The Web Content Accessibility Guidelines are published by the Web Accessibility Initiative of
the World Wide Web Consortium (W3.org) to help organisations meet their legal responsibility for web accessibility.

Using the WCAG 2.1 guidelines, I conducted an accessibility audit of Dogs for Good's website in order 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 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 is 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. Best practice is to incorporate accessibility from the very beginning of projects, so you don’t need go back and to re-do work.

Homepage Top Section After Re-design

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