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

Making a Case for Accessibility

Business Case for Accessibility

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

Headings

HTML5's Document Outline Algorithm

Other Aspects of 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

Icon Fonts

Mathematical and Scientific Formulas

canvas Accessibility

Maps

Cards or Clickable Blocks

Landmarks

Form Accessibility

>See also Form Usability on the Web Usability page.

Labelling Form Controls

required and aria-required

Form Field Validation and Error Messages

Grouping Form Controls (fieldset, legend)

The placeholder Attribute

Other Aspects of Forms

Authentication

Tables

CSS-Generated Content (Including Counters)

Other CSS-Related Topics

CAPTCHA

Issues with CAPTCHA

Google reCAPTCHA

Accessible CAPTCHAs and CAPTCHA Alternatives

Outdated or historical resources about CAPTCHA:

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

WAI-ARIA versus Native HTML Attributes

Tab Panel

Sliders

Carousels

The inert Attribute

Other User Interface Components or Widgets

Abbreviations and Acronyms

Readability and Comprehension

Easy to Read

“Easy to Read” aims at a reading level that is lower than the reading level for the lower secondary education level that is required by Success Criterion 3.1.5 Reading Level in WCAG 2.0 and later versions of these guidelines. Easy to Read content therefore meets that success criterion.

Numbers

  • Onsman, Ricky: Making Numbers in Web Content Accessible, TPGi, 10.07.2023.
  • Telephone numbers and screen readers, Stack Overflow, question posted on 17.02.2014.
    This question has several answers, not necessarily by accessibility specialists.
  • Force screen reader to read numbers as individual digits, Stack Overflow, question posted on 27.02.2020.
    This question has two answers, not necessarily by accessibility specialists.
  • 2.4.9 phone number links #1949, WCAG issue tracking system on GitHub, 06.07.2021.
  • Halabi, Joni: Accessibility and phone number formatting, Joni Halabi, 02.11.2016.
    The solution based on aria-label is susceptible to the same criticism as Hector Osborne Rodriguez's LinkedIn post from January 2023 (see below).
  • Rodriguez, Hector Osborne: How to code accessible phone numbers?, LinkedIn, 17.01.2023.
    Recommends the following way to code a phone number: <a href="tel:18001234567" aria-label="1. 8 0 0. 1 2 3. 4 5 6 7">1-800-123-4567</a>. However, Jan Jaap de Groot pointed out in a comment that, it’s actually a worse experience for braille users and voice control users. Braille users now read spaces and dots between each number. And voice control might not work due to the visible label being different from the technical label. Arguably it’s also worse for screen reader users because the pronunciation is different from the default they are used to. Although the intentions are good, I’ve learnt it’s better to stick to the defaults. Cameron MacDonald pointed out in a comment that, some screenreader users are used to the way phone numbers are read today and can get confused when you deviate from the expected default. I personally agree that this would be the most straightforward reading of a phone number though.
  • Accessibility and phone number formatting, That Dev Girl, 02.11.2016.
    This blog post recommends using an aria-label attribute.
  • Smith, Matt: Phone number links and accessibility, Matt Smith, 29.01.2018.
    Note that at least one of the commenters advises against using the technique presented in this blog post: A quick warning: I hope no one reading this, decides to follows the advice in this article, I'm sure the author had the best intentions with sharing this technique, but if I where him, I would take this article down or at least add a warning (not everyone reads the comments). People stumbling across this article who follow this advice, will make their website *less* accessible.

Emojis

Special Characters and Fake Formatting

Readability Formulas

  • Jarrett, Caroline; Redish, Janice: Readability Formulas: 7 Reasons to Avoid Them and What to Do Instead, UXmatters, 29.07.2019.
    This article discusses various issues with readability formulas. Most of them are based on a limited set of features of a text, such as average sentence length, average number of syllables per word or the percentage of long words. Only one of the formulas in the article, the Dale-Chall formula, also uses a list of words that a specific audience should be familiar with (in this case, American fourth-graders in 1984). The criticism includes the following points.
    1. Readability formulas are not reliable in the sense that different formulas will assign a different reading level to the same text. In addition, different implementations of the same formula can also give different results.
    2. Readability scores are not valid because readability as based on understanding, which these formulas cannot “calculate”.
    3. Readability formulas count words and syllables instead of considering meaning. For example, formulas that don't use a word list will assign the same score to the sentences “I wave my hand” and “I waive my rights”. Formulas that include a word list can potentially score better here, but even these formulas cannot distinguish between different meanings of the same word. Jarrett and Redish give the example of “cookies”, which children know in the sense of the baked snack but not as browser cookie.
    4. Readability scores expressed as grade levels are meaningless for adults because an adult's life experience enables him or her to link words with many more real-life concepts.
    5. Readability formulas require a minimum number of sentences or words that might be higher than the number of words in short instructions or in forms.
  • Spivak, Gael: Readability formulas, programs and tools: Do they work for plain language?, The Our Languages blog (Government of Canada), 25.07.2022, updated on 10.07.2023.
    This blog post discusses various shortcomings and limitations of readability formulas, some of which have been known since the 1980s. These formulas are not always useful.
    • By the mid-1980s, research had shown that most readability formulas are outdated methods for assessing text quality.
    • Research by Richard Kern in the 1980s showed that readability formulas are unable to match texts to educational stages (or grade levels on the American continent).
    • Rewriting text to lower the reading-grade level score does not increase comprehension.
    • Ginny Redish pointed out that Most of what makes a document usable is not included in readability formulas.
    • Readability formulas don't measure the right things. For example, they assume that a shorter word is always a better choice than a longer synonym. In addition, they don't take into account many documented features of plain language.
    ISO 24495, the standard for plain language, excludes readability formulas.
  • Begeny, John C.; Greene, Diana J.: Can Readability Formulas Be Used to Successfully Gauge Difficulty of Reading Materials?, Psychology in the Schools, Volume 51, Issue 2, published on 18.11.2013 (abstract only).
    See also the news article Study Shows ‘Readability’ Scores Are Largely Inaccurate by Matt Shipman (NC State University, 08.01.2014).
  • Redish, Janice: Readability formulas have even more limitations than Klare discusses, ACM Journal of Computer Documentation, Volume 24, Number 3 (2000; free access).
  • 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 post 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 German Content (leichte Sprache)

Einfache Sprache

Plain Language in English

Plain Language (ISO Standard)

Readability: Other Articles

Readability: Tools

Readability Calculators

Warning: the reliability of readability calculators is limited. See the articles under Readability formulas.

  • 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 macOS 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

Zoom and Text Resizing

Viewport Width (and Reflow)

Web Design for Dyslexia

Font Faces for People with Dyslexia

Cognitive Accessibility

Accessibility for Older Users

Lists

Target Size

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

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

Avoding Ableist Language

Auditing and Reporting

See also Evaluation Methods.

The Most Common Errors

The title Attribute

See also Tooltips.

Unsorted Web Accessibility Links

Content That Has Moved Elsewhere

For Overlay Tools, see the new page Overlay Tools (January 2025).