Jump to content

You are here:

  1. Examples

Examples of accessibility patterns

There often exist various approaches to solving an accessibility requirement, but usually one specific solution stands out clearly. The chapters in this 4th part of our guide, the Examples part, contain our collection of such rock-solid and inspiring solutions. They are available as real-life code examples (ready for copy&paste), and as such can be executed and played with directly in the browser.

How to go through this part

First of all, before you continue reading, be sure you have gone through the previous parts already:

The current part is the one you will probably head to most during your accessibility ambitions. There are a lot of topics that are relevant to pretty much every kind of website, while others maybe are not very relevant to some specific ones. For example, if the website in question does not offer any tabular data, then the chapter about tables probably will not be of interest at the time being.

Still, we recommend you to get at least a broad overview of all available content. Then, whenever during your daily workflow you stumble over a topic that you remember you spotted in our guide, we advise you to check back here and read through the respective chapter(s) thoroughly.

There's no specific sequence or internal dependency between the chapters. So every chapter can be read on its own. Whenever other chapters are related to the current one, we offer links pointing to them.

Code examples

Seeing is believing: this part contains more than hundred code examples, all of which can be experienced live within our guide.

Play with them!

Our examples are made to play with them using all the assistive devices described throughout this guide (mainly keyboard only usage and screen readers).

You will learn by far the most if you thorougly dive into each example and try to map your own experiences to the text content surrounding each example.

Manipulation on CodePen.io

Examples can be sent directly to CodePen.io, where they can be manipulated and experimented with.

Compatibility log

All our examples are heavily tested on accessibility. The compatibility results are displayed below each example.

There are results of the currently relevant assistive devices:

Special results

There are some special types of examples though:

  • "Bad" examples aim to demonstrate typical mis-uses or misconceptions of a concept, bad code, or similar.
    • Such examples are inaccessible by design, and do not offer any results.
  • A starting point (or interim step) within a sequence of examples that aim to demonstrate how to deal with and optimise a certain accessibility requirement.
    • Such sequences always result in a final (and fully accessible) example.
  • An example showing a technique that is valid according to standards, but not (yet?) accessibility supported.
    • Alas, such results have failing results.

In general: only copy&paste code from examples that have fully passing compatibility results!

Additional tests

We have conducted additional compatibility tests, all with assistive devices that are expected to play a role in future:

  • Desktop screen readers:
    • JAWS with Edge
    • VoiceOver/macOS with Safari
    • Narrator with Edge
  • Mobile screen readers:
    • VoiceOver/iOS with Safari
    • TalkBack with Chrome

While some of these devices still show problems, the general outlook confirms that our examples are as future-proof as possible.

To avoid cluttering the Accessibility Developer Guide, these results are not displayed at the time being.

Previous/next navigation