Web Accessibility Techniques

I had to call a bank today about an account I opened a long time ago, but was having trouble accessing. I mentioned on the call that their website was inaccessible.

Their response? Blind people don’t use websites.

I’m closing the account. 😤

JavaScript developer Sarah Higley on Twitter, 25.04.2019

Web Accessibility: General / Introductions

Myths and Misconceptions about Accessibility

Simple Tests

Basic Concepts

Accessible Name

The Accessibility Tree

Support in Assistive Technologies

Screen reader detection:

Hiding / Hidden Content

Page Structure

Images and Other Non-Text Content

Text Alternatives

Long Descriptions

Note: some of the articles and blog posts listed below are only of historical interest and document a number of attempts to support long descriptions after the HTML 5 specification deprecated the longdesc attribute. The WHATWG's HTML specifcation lists longdesc among the non-conforming features.

Accessible SVG

Mathematical and Scientific Formulas

canvas Accessibility

Hyperlinks and Navigation


Breadcrumb Trails


Navigation Menus and Fly-Out Menus

Form Accessibility

Labelling Form Controls

required and aria-required

Form Field Validation and Error Messages

Grouping Form Controls (fieldset, legende

The placeholder Attribute

Other Aspects of Forms


CSS-Generated Content (Including Counters)

Other CSS-Related Topics


Issues with CAPTCHA

Accessible CAPTCHAs and CAPTCHA Alternatives

Colour and Contrast

Dark Modes, Dark Themes and High Contrast

It is important to distinguish high-contrast dark modes from dark modes for people with light sensitivity (and for dark environments). In high-contrast dark modes, which usually have white text (or sometimes yellow text) on a black background, users with light sensitivity find that letters get blown out. Unfortunately, most operating systems that provide high contrast modes don't provide an alternative dark mode for people with light sensitivity.

Web Applications and WAI-ARIA

WAI-ARIA: Introductions and Overviews

Tab Panel



Modal and Non-Modal Dialogs

The inert Attribute

Other User Interface Components or Widgets

Abbreviations and Acronyms

Readability (Language)

Readability of web content in German:

Gender-Neutral Language

Legibility (Fonts and Design)

Pixels versus Relative Font Sizes

Viewport Width

Web Design for Dyslexia

Font Faces for People with Dyslexia

Cognitive Accessibility

Accessibility for Older Users


Animations and Motion

Web Accessibility Books

The books below are listed by date of publication. Most of them are already out of date.

Failures and Anti-Patterns

Overlay Tools

Overlay Tools: Articles

Overlay products are sold as tools that magically solve a website's accessibility issues.

Overlay Tools: List of Tools

Below is a list of overlay tools (with some of their overblown and misleading claims). Since making a website accessible is a process that cannot be automated, the claims by these vendors are misleading.

Keyboard Access and Accesskeys

Keyboard Focus / Focus Visibility

Note: For many years, Firefox had a poor default focus indicator that consisted of a thin dotted black outline. Firefox 100.0 replaced this with a better one:

Firefox has a new focus indicator for links which replaces the old dotted outline with a solid blue outline. This change unifies the focus indicators across form fields and links, which makes it easier to identify the focused link, especially for users with low vision.

Accesskeys, a Failed Accessibility Feature

Language Markup

Auditing and Reporting

The Most Common Errors

The title Attribute

Unsorted Web Accessibility Links