You are currently offline, so some features of this site may not work fully.

Your browser doesn’t support some of the latest CSS features used to build this site.

Read more about my usage of new CSS features.

Four easy to implement quick wins to improve accessibility in some common use cases.

I’ve been prototyping some examples of poor accessibility implemented in some of our projects at work.

They demonstrate easy to implement fixes to make our websites more user friendly to those dependant on assistive technology and to improve the experience for all users.

All of the examples have been found on real projects, and have come about due to a variety of reasons including:

  • Technical constraints (e.g. within a CMS integration)
  • Lack of time to implement accessible components fully
  • No time built in to project estimates to test for accessibility
  • Lack of shared knowledge and resources around accessibility best practises

The demos

The accessibility quick wins demos speak for themselves — showing the problems encountered and the solutions that we should all be keeping in mind when building components such as this.

They cover the four main types of impairments that we need to keep in mind whilst designing and developing inclusive experiences:

  • Cognitive (distracting! try this one with a screen reader as well)
  • Hearing (turn your sound off)
  • Motor (use your keyboard only)
  • Visual (use the browser plugins stated to emulate lower vision)

TL;DR

Some real-world examples of sub-optimal accessibility found in real projects and small, quick wins on how to address these issues to make them more accessible to users of assistive technology and improve the user experience for all.

View the accessibility quick win demos on my website.

Please open an issue on the GitHub repository to make a suggestion, add to these scenarios or create new demos.