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:

Text-Level Semantics

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

Maps

Cards or Clickable Blocks

Landmarks

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

Tables

CSS-Generated Content (Including Counters)

Other CSS-Related Topics

CAPTCHA

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.

CSS Media Queries for Contrast and Colour Schemes

Dark Mode

Web Applications and WAI-ARIA

WAI-ARIA: Introductions and Overviews

Tab Panel

Sliders

Carousels

The inert Attribute

Other User Interface Components or Widgets

Abbreviations and Acronyms

Readability (Language)

Readability Formulas

  • Readability tests, SiteImprove Help Center, 21.04.2022 (accessed on 30.10.2023).
    This page provides formulas for the following readability tests: Automated Readability Index (ARI, for English and Western European languages; based on characters per word and words per sentence), Coleman-Liau (esigned for English texts, based on average number of letters per 100 words and the average number of sentences per 100 words), Flesch-Kincaid Grade Level (designed for English texts, based on average number of words per sentence and averag number of syllables per word), Flesch-Kincaid Reading Ease (designed for English texts and using the same word and syllable counts as the previous formula), Gunning Fog (for English texts, based on the number of words per sentence and the number of polysyllabic words per sentence), LIX (which performs well on most of the Western European languages, based on the number of words per clause (?) and the frequency of complex words) and SMOG (for English texts, mainly based on the density of polysyllabic words).
    Even though this is not made explicit in the text, all of these formulas are based on counts for words, letters, syllables and sentences, and don't take syntacic complexity and semantics into account.
  • Readability Formulas Help, Readability Formulas (no date; accessed on 30.10.2023).
    This page contains links to articles about readability formulas published on the same site.
  • Madden, Blake: Readability Studio 2021: User Manual, Blake Madden's GitHub pages (accessed on 30.10.2023; Creative Commons Attribution-NonCommercial-NoDerivs 4.0 International License).
    Chapter 10 discusses English Readability Tests, chapter 11 Spanish Readability Tests and chapter 12 German Readability Tests.
  • Measure clarity with readability formulas: How to use Flesch-Kincaid, Gunning Fog indexes, Wylie Communications (no date).
  • Tip 6. Use Caution With Readability Formulas for Quality Reports, Agency for Healthcare Research and Quality, last reviewed in May 2015 (accessed on 30.10.2023).
  • Kind-Envy, Rita: Testing readability tests: Flesch–Kincaid, ARI, and Gunning Fog, UX Collective on Medium, 23.03.2023 (11-minute read).
    Subtitle: The lousy powers behind Hemingway Editor, Grammarly, and Readable.com. The blog posts last section lists reasons why readability tests are lousy. These reasons include the following: the tests obsess over sentence length and word difficulty, they don't account for factors such as paragraph structure, coherence and cohesion, they don't work for non-English languages, they are unreliable for short texts and they can't replace human judgement.
  • Readability tools: are they useful for medical writers? (MedComms on YouTube,17 minutes, 11.10.2017).
    From the video's description: John Dixon, independent medical writer and trainer in scientific writing skills, assesses readability tools for screening biomedical text. Recorded 4 October 2017 at a MedComms Networking event in Oxford. Produced by NetworkPharma.tv. (…) Among other things, John Dixon points out that readability formulas simply count words and the number of syllable in words and don't take grammar into account. Most of the presentation is about redability of biomedical texts and does not directly apply to websites in general. Tools shown in the presentation include the Hemingway Editor, Readable.io (now Readable.com) and Microsoft Word.
  • Griffiths, Laura: Learning Disability Wales releases free dictionary of easy read definitions, Learning Disability Wales, 17.09.2019.

Readability of Web Content in German

Readability: Tools

  • Flesch Kincaid Calculator, Calculate Here. (Accessed 30.10.2023.)
  • Tests Document Readability, Online-Utility.org. (Accessed 30.10.2023.)
    Description: This free online software tool calculates readability : Coleman Liau index, Flesch Kincaid Grade Level, ARI (Automated Readability Index), SMOG. The measure of readability used here is the indication of number of years of education that a person needs to be able to understand the text easily on the first reading. (…)
  • Hemingway Editor can help you write more readable texts by highlighting passages using the passive voice, unnecessary words or complex sentences.
  • Be Readable: Readable is an online toolkit that helps writers everywhere improve their readability and bring their audience closer. See Measure the Readability of Text - Text Analysis Tools. (Accessed on 30.10.2023.)
  • Passive Voice Detector, Datayze (no date; accessed on 22.04.2023).
  • Readability Scoring System, Readability Formulas (accessed on 30.10.2023).
    This page allows you to enter text or upload a file and then choose the readability formulas you would like to be used to evaluate the text's readability. The formulas include Automated Readability Index (ARI), Flesch Reading Ease, the Gunning Fog Index and the Flesch-Kincaid Grade Level.
  • Get your document's readability and level statistics, Microsoft Support (no date; accessed on 30.10.2023).
  • Microsoft Word Readability Reports (Technology for Teachers and Students on YouTube, 4 minutes, 16.03.2021).
    In Microsoft Word's proofing settings, you can enable the option “Show readability statistics”. You can then get readabiltiy statistics when you run a spell check. These statistics include three readability scores: Flesch Reading Ease, Flesch-Kincaid Grade Level and Passive Sentences. The video does not explain how well these measure translate to languages other than English.
  • Readability Studio, Oleander Software, 2012 (accessed on 30.10.2023).
    Commercial software for Windows and Mac OS that implements reading formulas for English, Spanish and German. The system requirements for Readability Studio mention Windows Vista and Mac OS 10.11, 256 MB RAM, so it is not clear when the software was last updated.

Gender-Neutral Language

Legibility (Fonts and Design)

Pixels versus Relative Font Sizes

Viewport Width (and Reflow)

Web Design for Dyslexia

Font Faces for People with Dyslexia

Cognitive Accessibility

Accessibility for Older Users

Lists

Animations and Motion

Accessibility for Speech Recognition Users

Web Accessibility Books

The books below are listed by date of publication. Most of them are out of date and are listed for historical reasons.

Failures and Anti-Patterns

Overlay Tools

Overlay Tools: Websites

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 many of 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

See also Evaluation Methods.

The Most Common Errors

The title Attribute

See also Tooltips.

Unsorted Web Accessibility Links