In the Microsoft Inclusive Design Toolkit Manual, accessibility is defined as "The qualities that make an experience open to all".
The result of the inclusive design process is accessible products.
Web Accessibility means that people with disabilities can use the web equally. The Web Content Accessibility Guidelines (WCAG) are governed by the World Wide Web Consortium (W3C) and are internationally recognised. They are built around four principles:
Listen to this video from the W3C Web Accesssibility Initiative to find out more about Web Accessibility and the benefits it brings.
The UN Convention on the Rights of Persons with Disabilities defines access to content on the Web as a basic human right.
The UK Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018 came into force for public sector bodies on 23 September 2018. Public Sector websites are required by law to meet accessibility standards.
US Government websites must meet Section 508 regulations. This requires all electronic and information technology developed, procured, maintained, or used by the federal government must be accessible to people with disabilities.
Although there is no UK or US law requiring non-government/public sector websites to comply to accessibility standards, it is strongly recommended. Designing for accessibility brings other benefits such as:
Users with visual impairments often use screen readers to navigate websites. A screen reader reads content on the screen out loud and allows users to navigate through websites and applications using just a keyboard.
Common screen readers include JAWS and NVDA. As these are tricky to setup, we recommend trying out a simple Chrome extension called Screen Reader. It takes some getting used to but you can generally navigate sites using these keyboard shortcuts.
Activity - Try out the screen reader on the BBC news website.
WCAG defines 3 levels of conformance, Level A, Level AA and Level AAA. UK public sector and US government websites must meet Level AA. Level AAA compliance is difficult to achieve across the whole of a website as it includes requirements such as sign language interpretation for audio or video content, therefore companies should aim to reach AA compliance.
There are a number of commercial and free tools which can be used to audit a website for conformance to WCAG standards. One opensource tool is Lighthouse which is built into Chrome Developer Tools. Lighthouse checks for most of the WCAG Level A and Level AA rules with a few exceptions.
Lighthouse will explain which HTML element fails the audit and how to resolve the issue. Some of the common issues Lighthouse will report are as follows:
| Issue | Meaning |
|---|---|
Image elements do not have alt attributes | Not all users can see the images on your website. Vision impaired users may be using screen readers which will "speak" the alt tag to describe the image |
| Contrast | Background and foreground colors do not have a sufficient contrast ratio |
| Links do not have a discernible name | Links must have a unique name. Where images are used on links, these must have alt text |
Chrome also supports checking whether a website is visible to users with colour vision deficiencies via the Rendering -> Emulate vision deficiencies pull-down:
Run Lighthouse against some of your favourite websites - study the issues it reports.
Review the ATG event ticketing website with a vision deficiency of "Achromatopsia" - are you able to discern the availability of tickets on each day? Study other sites mentioned in the wearecolourblind website.
Run Lighthouse against all pages on your project website. Note that Lighthouse needs to be run against each individual webpage. Store the generated reports in GitHub so your coach can see what issues need to be resolved.
Make the appropriate code changes to fix each issue. Re-run Lighthouse to check each issue is fixed. Store the final report in GitHub so your coach can see what issues were resolved.