Learn more about this course.

Accessibility guidelines in practice

In this article, learners explore examples of accessible and inaccessible websites via the W3C demonstration tool.

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.

Want to keep
learning?

This content is taken from
UAL Creative Computing Institute online course,

Introduction to UX and Accessible Design

View Course

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.