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

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

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, legend)

The placeholder Attribute

Other Aspects of Forms

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 (Language)

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

Special Characters and Fake Formatting

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