Skip main navigation

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.

  1. Once you have opened the page, click on the ‘Home’ tab. You’ll find this towards the top left of the page.
  2. Then, select the option ‘Inaccessible’ and select Home Page. This shows the inaccessible version of a website, in this case from CityLights.
  3. 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.
  4. 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.
  5. 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.
This article is from the free online

Introduction to UX and Accessible Design

Created by
FutureLearn - Learning For Life

Our purpose is to transform access to education.

We offer a diverse selection of courses from leading universities and cultural institutions from around the world. These are delivered one step at a time, and are accessible on mobile, tablet and desktop, so you can fit learning around your life.

We believe learning should be an enjoyable, social experience, so our courses offer the opportunity to discuss what you’re learning with others as you go, helping you make fresh discoveries and form new ideas.
You can unlock new opportunities with unlimited access to hundreds of online short courses for a year by subscribing to our Unlimited package. Build your knowledge with top universities and organisations.

Learn more about how FutureLearn is transforming access to education