Accessibility guidelines in practice
As we’ve seen in the previous step, the World Wide Web Consortium (W3C) develops international standards for the Web: HTML, CSS, and many more. Their mission is to develop strategies, standards, and supporting resources to help you make the Web more accessible to people with disabilities.
Their Web Accessibility Initiative (WAI) website offers a range of guidelines for developers. One of the most useful tools is the Before and After Demonstration for developers. This is a multi-page resource that shows an inaccessible website and a retrofitted version of this same website.
As an exercise to help you understand how these guidelines can be simply applied in practice, take a look at the Before and After example they have provided. You may want to open this page in another tab on your browser, so that you can refer to the instructions and questions as you look through it.
- Once you have opened the page, click on the ‘Home’ tab. You’ll find this towards the top left of the page.
- Then, select the option ‘Inaccessible’ and select Home Page. This shows the inaccessible version of a website, in this case from CityLights.
- You will also see a button called ‘Show Annotations’. Clicking this reveals notated examples of elements on each page that do not meet the WAI’s accessibility guidelines.
- Go through the inaccessible versions of each of the pages – Home, News, Tickets and Survey. You can click on any of the annotations to see more detail on how each element has failed.
- Finally, select the accessible version of each page, and reflect on what changes have been suggested.
Over to you
Once you have looked through the inaccessible version of each page, have a look at the retrofitted accessible versions provided on the demonstration.
- What key issues stood out for you on each page?
- What simple solutions to the issues identified were suggested, for example in layout, markup language, use of colour?
- How easy was it to follow and interpret the guidance and examples provided?
Share your thoughts in the Comments section below.
Introduction to UX and Accessible Design
Reach your personal and professional goals
Unlock access to hundreds of expert online courses and degrees from top universities and educators to gain accredited qualifications and professional CV-building certificates.
Join over 18 million learners to launch, switch or build upon your career, all at your own pace, across a wide range of topic areas.
