Web Application Accessibility Resources

Devs don't get mad because you're asking them to make things accessible.

They get mad because you're asking them to do work over again.

They get mad because you could have asked earlier.

They get mad because you contradict yourself later on and recommend something different.

Derek Featherstone on Twitter, 09.03.2021

Introductory Articles

W3C Web Accessibility Initiative (WAI): WAI-ARIA Overview.
WAI-ARIA basics, MDN, last updated on 19.09.2022 (accessed on 02.10.2022).
Faulkner, Steve; McDonald, David: Using ARIA: a practical guide for developers (under development; accessed on 02.10.2022).
MacDonald, David: Demystifying WAI-ARIA: 19 WAI-ARIA attributes that every web developer should know, CanAdapt blog, updated in January 2020.
Zehe, Marco: What is WAI-ARIA, what does it do for me, and what not?, 27 March 2014.
Watson, Léonie & McCathie Nevile, Chaals: Accessibility APIs: A Key To Web Accessibility, Smashing Magazine, 16 March 2015.
Wilson, Ben: Accessible Web Development Using W3C’s WAI-ARIA, Usability Geek, 04.02.2015.
Heilmann, Christian: Progressive Enhancement is not about JavaScript availability, 18 February 2015. (Not about web applications as such, but very relevant.)
Heilmann, Christian: Keeping it simple: coding a carousel, 8 April 2015. (Remember the KISS principle?)
An overview of accessible web applications and widgets, Mozilla Developer Network (MDN).
Faulkner, Steve: Using ARIA in HTML (21.06.2014).
Schäferhoff, Nick: What is ARIA Markup? – A Beginner’s Guide, Torque Magazine, 27.08.2019.
Comerford, Rachel: Meet new singles in your ARIA: Swipe right for accessible HTML, BookNet Canada, 18.12.2017.

Standards and References

Accessible Rich Internet Applications (WAI-ARIA) 1.1: W3C Recommendation 14 December 2017.
Accessible Rich Internet Applications (WAI-ARIA) 1.0: W3C Recommendation 20 March 2014.
WAI-ARIA Authoring Practices 1.1: W3C Working Group Note 14 December 2017: explains how to use WAI-ARIA to create accessible rich internet applications.
Note: WAI-ARIA 1.0 Authoring Practices was retired in July 2016. (This draft is no longer relevant.)
ARIA Authoring Practices Guide (APG), Web Accessibility Initiative (WAI), W3C (accessed on 19.05.2022).
Mozilla Developer Network (MDN): ARIA - Accessibility: a big collection of useful resources.

Single-Page Applications

Sutton, Marcy: Accessibility Tips in Single-Page Applications, Deque blog, 07.11.2018.
Onsman, Ricky: Single Page Applications, TPGi, 25.05.2022.
Denton, Luke: How We Improved the Accessibility of Our Single Page App Menu, CSS Tricks, 25.02.2021.
Sweet, John: Accessibility in Single Page Apps (Part 1), John Sweet's Accessibility Blog, 31.05.2020.
Sweet, John: Accessibility in Single Page Apps (Part 2), John Sweet's Accessibility Blog, 31.05.2020.
Onsman, Ricky: Single Page Applications, TPGi, 25.05.2022.

Accessible User Interface Components or Widgets

Specific Widgets and WAI-ARIA Techniques

Menus

Pickering, Heydon: Building Accessible Menu Systems, Smashing Magazine, 23.11.2017.
Adobe Accessibility: Accessible Mega Menu (source code): available on GitHub; Apache 2.0 licence. (Live version: Accessible Mega Menu.)
Foskett, Mike: Animated ARIA hamburger menu. This menu aims to meet WCAG 2 Level AA and is available on codepen.io.
Roselli, Adrian: Don’t Use ARIA Menu Roles for Site Nav, Adrian Roselli, 23.10.2017, updated on 20.05.2022.
Creating Accessible Menus and Mega Menus, Level Access blog, last updated on 09.02.2018.

Date and Range Pickers

Sethfors, Hampus: Accessible datepickers, Axess Lab, 06.09.2017.
Datepicker, Deque University (no date; accessed on 12.09.2022).
Roselli, Adrian: Maybe You Don’t Need a Date Picker, Adrian Roselli, 05.07.2019, updated on 13.07.2021.
Adam, Paul J.: Datepickers - Accessibility Quick Guide, PaulJAdam.com (no date; accessed on 12.09.2022).
Paciello Group: Date and Date Range Pickers.
Datepicker et accessibilité, Atalan, le Blog, 02.01.2018.
Armfield, Graham: Is input type=”date” ready for use in accessible websites?, Hassell Inclusion blog, 12.02.2019.

Modal Dialogs (Including Cookie Consent Modals)

O'Hara, Scott: The current state of modal dialog accessibility, TPGI blog, 29.06.2018.
Giraudel, Kitty: A11y Dialog / a11y-dialog on GitHub. A very lightweight and flexible accessible modal dialog script. (Accessed on 14.05.2023.)
See also the documentation for a11y-dialog.
This modal dialog keeps the keyboard focus entirely in the dialog and does not even allow keyboard focus to move to the browser chrome. Not all modal dialog examples take this approach.
O'Hara, Scott: Accessible Modal Dialogs with Vanilla JS, Scott O'Hara — GitHub Pages, 2018. See also the Accessible Modal Dialog (on GitHub), which is no longer being actively developed. (The last code change dates from 2018.)
DEV 6.3 – Create accessible modal dialogues, Centre for Excellence in Universal Design (no date; accessed on 02.10.2022).
Klavenes, Lars Magnus: Accessible modal dialogs using inert, larsmagnus, 11.06.2022.
Cookie Notice Example, Accessible Widget Examples (University of Illinois Technology Services) (no date, accessed on 02.10.2022).
Cookie consent banners and overlays – thoughts on accessibility, usability and SEO, Bogdan on Digital Accessibility (A11y), 22.07.2020.
Are modal dialogs WCAG compliant?, User Experience Stack Exchange, question posted in September 2016. (The answers posted here are not entirely satisfactory.)
Heading levels in an accessible modal window, User Experience Stack Exchange, question posted in February 2017.
Zehe, Marco: Advanced ARIA Tip #2: Accessible modal dialogs, Marco's Accessibility Blog, 05.02.2015.

Alert, Error and Status Messages

Byrne-Haber, Sheri: Designing Toast Messages for Accessibility, Sheri Byrne-Haber, 21.01.2019 (seven-minute read).
This blog post discusses all sorts of WCAG success criteria that apply to toast messages, except the one that is most applicable to content with a time limit: Success Criterion 2.2.1 Timing Adjustable.
Provide helpful error messages, Digital Accessibility, Harvard University (no date; access on 13.10.2022).
Technique: Form error communication, Digital Accessibility, Harvard University (no date; access on 13.10.2022).
How to Provide Accessible Form Error Identification, Level Access blog, last updated on 04.08.2014.

Other Components

Hellbusch, Jan: ARIA schlägt HTML Aria-label bei verlinkten Grafiken, 3 March 2017.
Faulkner, Steve: Using WAI-ARIA Landmarks – 2013, PacielloGroup blog, 12.02.2013.
Heydon: ARIA Examples.
Roselli, Adrian: Sortable Table Columns, Adrian Roselli, 05.04.2021, updated on 26.06.2021 (accessed on 19.03.2023).
Roselli, Adrian: Multi-Column Sortable Table Experiment, Adrian Roselli, 13.06.2012, updated on 29.06.2022 (accessed on 19.03.2023).
Adam, Paul J.: Building Accessible Buttons with ARIA: A11y Support Series, Deque Blog, 28.09.2016.
Recommandations pour l'accessibilité d'un composant d'autocomplétion, Recommandations accessibilité numérique Orange, 23.12.2020 (accessed on 19.03.2023).
accessible-slick - the last (accessible) carousel you'll ever need, Accessible360 (no date; accessed on 07.07.2021).
See also the source code of accessible-slick on GitHub.
#26 HTMHell special: tasty buttons, HTMHell, 25.10.2021.
Myers, Ben: How (Not) to Build a Button, Ben Myers, 30.09.2019.

Frameworks and Libraries

CAST Figuration

Figuration: source code repository on GitHub.
CAST: Build Accessible Websites with CAST Figuration, 20 July 2016: announcement of the CSS/JavaScript framework, which is based on Bootstrap 3 and is available under the MIT licence.
National Center on Accessible Educational Materials: CAST Figuration: further information about the framework.

Web Experience Toolkit (WET)

The Web Experience Toolkit is front-end framework for building websites that are accessible, usable, interoperable, mobile friendly and multilingual. The source code is being developed and maintained as part of an open source project led by the Government of Canada. See the project website and the WET source code on GitHub. The toolkit is available under the MIT License. The project has a style guide. The toolkit also has a few variants: a Drupal variant, a Drupal 8 variant, a SharePoint variant, a PHP variant, a .NET variant, a DotNetNuke variant (last updated in February 2015), and a Java and Maven variant (work in progress).

jQuery UI

Hoffmann, Nicolas: Accessibility section - jQuery Plugins.
For example: jQuery Accessible tab panel system, using ARIA. See also the source code on GitHub (licence: MIT).
Hans Hillen: Accessible jQuery-ui Components Demonstration: demos of accessible widgets that were developed within the AEGIS project (2008–2012). The GitHub repository has no licence.
Bryan Garaventa: jQuery UI Accessibility Analysis, SSB BART Group blog, 3 July 2013. (Although this review dates from 2013, some of the issues mentioned in it still exist, for example, the accessibility issues in the datepicker, which are also listed in the jQuery wiki.

Cauldron

Cauldron is a fullyaccessible HTML, CSS, and Javascript front-end framework for creating web and mobile applications. For the source code, see the GitHub repository.

Bootstrap

Roselli, Adrian: Accessible Bootstrap Frameworks, Adrian Roselli, 09.06.2014.
At the time when this blog post was written, Bootstrap had accessibility issues. The Centers for Medicare & Medicaid Services in the USA, created their own Bootstrap fork, the Assets Framework, which complies with Section 508. Paypal created an Accessibility Plugin for Bootstrap 3 and Bootstrap 3, which was last updated in August 2018. The blog post also mentions the Web Experience Toolkit, Heydon Pickering's Revenge.css and CAST Figuration.
Cox, Dan: Working with Bootstrap and WCAG Color Contrast Ratios, Digital Ephemera, 24.01.2017.
Six years after this blog post was written, the documentation for Bootstrap 5.3 (the current version as of 24.01.2023) still admits that Some combinations of colors that currently make up Bootstrap’s default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to insufficient color contrast (below the recommended WCAG 2.1 text color contrast ratio of 4.5:1 and the WCAG 2.1 non-text color contrast ratio of 3:1), particularly when used against a light background.
Bootstrap accessibility plugin, PayPal GitHub pages (no date; accessed on 24.01.2023).
Bootstrap 3 was released on 2013; its successor, Bootstrap 4, was finalised iin 2018. This accessibility plugin is therefore outdated. The GitHub repository was last updated in 2020.

Angular

Accessibility in Angular, Angular Docs.
Accessibility / a11y package, Angular Material.
Kreuzer, Kevin: Make your Angular application accessible for everybody, Angular in Depth, 07.04.2020
Moore, Matt: Angular, Accessibility, and You, Pope Tech Blog, 25.10.2018.
Steadman, Mark: Angular and Accessibility: Issues and Strategies, Deque blog, 24.09.2019.
Khan Mohammed, Zama: Accessibility in Angular Applications, Angular Blog, 07.11.2019.
Ogston, Gavin: Single page applications, Angular.js and accessibility, Simply Accessible, 03.03.2015.
This article is based on the old AccessibleJS, so code samples are outdated.
Shaked, Uri: Angular and Accessibility, DailyJS on Medium, 07.04.2017.
Vinkle, Scott: Creating accessible forms with Angular, Simply Accessible, 18.05.2017.
Moore, Matt: Angular, Accessibility, and You, Pope Tech Blog, 25.10.2018.
Syncfusion: Essential JS 2 for Angular: a collection modern TypeScript based true Angular Components. The documentation has a section on Accessibility.
Sutton, Marcy: Accessibility Testing with Angular, Marcy Sutton (no date; accessed on 09.08.2022; possibly outdated).
Shaked, Uri: Angular and Accessibility, DailyJS on Medium, 07.04.2017.
Ward, Chris: 7 Ways to Make Your Angular App More Accessible, Progress blog, 20.08.2019.

Ember

Weber, Jen: Ember accessibility and a11y tools, Ember.js blog, 17.06.2018.
Sumner, Melanie: The Ember JS Framework Takes the GAAD Pledge, Ember blog, 20.05.2021.

HTML5 and ARIA Accessibility Support

Accessibility Support (a11ysupport.io): a community-driven website that aims to help inform developers about what code features (roles, states, properties, elements, etc.) are supported by assistive technologies, and what that support looks like. (Accessed on 19.03.2023.)
WAI-ARIA - Screen reader compatibility, PowerMapper Software, last updated on 11.09.2022 (accessed on 19.03.2923).
JAWS ARIA Role Support, Freedom Scientific, last updated on 30.06.2020 (accessed on 19.03.2923).
Faulkner, Steve: HTML5 Accessibility: documentation about the accessibility support for HTML5 in the most important browsers. This is not directly about web applications, but the semantics of HTML5 is relevant to web applications that are ultimately based on HTML5.
You can contribute to this resource by making pull requests to Steve Faulkner's GitHub repository.
aria-hidden, Tests de restitution par les lecteurs d’écran – Access42, last updated on 11.06.2018.
Motif ARIA disclosure, Tests de restitution par les lecteurs d’écran – Access42, 17.01.2019.
Pickering, Heydon: Aria-Controls is Poop, Heydonworks, 21.08.2016.
The aria-controls attribute was barely supported when this article was written. Several years later, the screen reader support chars for aria-controls showed no improvement.
Liew, Zell: Element.focus vs aria-activedescendant, Zell Liew, 18.03.2020.
This article reports on a lot of trials and testing and ends with recommending element.focus and a roving tabindex over aria-activedescendant. In other words, aria-activedescendant is poop.

Shadow DOM

Lawson, Nolan: Dialogs and shadow DOM: can we make it accessible?, Read the Tea Leaves, 14.06.2022.
Lawson, Nolan: Shadow DOM and accessibility: the trouble with ARIA, Read the Tea Leaves, 28.11.2022.
Alice: How Shadow DOM and accessibility are in conflict, alice's blog, 22.02.2023.
Bellamy-Royds, Amelia: Shadow DOM and the accessibility tree, public-aria@w3.org mailing list, 18.07.2016.
Sutton, Marcy: Accessibility and the Shadow DOM, 5 February 2014.

Terminology

Roselli, Adrian: Stop Using ‘Drop-down’, Adrian Roselli, 01.03.2020, updated on 13.07.2021.
The term ‘drop-down’ is inaccurate and potentially misleading. Depending on the exact nature of the user interface component, other terms should be preferred, such as “select”, “ARIA listbox”, “datalist”, “abbr>ARIA combobox” or “abbr>ARIA menu”.
Roselli, Adrian: Stop Using ‘Pop-up’, Adrian Roselli, 01.07.2021, updated on 07.07.2021.
The term ‘pop-up’ is inaccurate and potentially misleading. Depending on the exact nature of the user interface component, other terms should be preferred, such as “new window”, “browser alert dialog”, “browser confirmation dialog”, “modal dialog”, “disclosure widget” or “tool-tip”.

Other Useful Resources

A Complete Guide To Accessible Front-End Components, SEO Web Design, 22.03.2021.
Friedman, Vitaly: A Complete Guide To Accessible Front-End Components, Smashing Magazine, 25.05.2022 (43-minute read).
Whatsock: AccDC Technical Style Guide: designed to provide reliable and consistent interaction designs that are accessible to the highest percentage of people possible, and to establish a baseline for Functional Accessibility that can be utilized, built upon, studied, and tested against.
See also The Accessibility Tree: A Training Guide for Advanced Web Development.
Garaventa, Bryan: ARIA Widget Checklist: For Screen Reader Testing, Level Access, 24.02.2017.
Pickering, Heydon: Apps For All: Coding Accessible Web Applications, e-book published by Kobo (2014).
fluid: Fluid is an open, collaborative project to improve the user experience and inclusiveness of open source software. (Accessed on 08.02.2022.)
See especially Infusion: Developed by an international group of software developers and interaction designers, Fluid Infusion combines JavaScript, CSS, HTML and user-centered design, rolling them all into a single package that sits on top of the popular jQuery toolkit. Infusion includes ready-to-use components as well as a framework to build your own.
Watson, Léonie; Gunnarson, Birkir; Garaventa, Bryan; King, Matt: Danger! Testing Accessibility with real people, Medium, 08.05.2016. Four blind accessibility experts respond to the article Danger! ARIA tabs by Jeff Smith (14.04.2016). (See also the comments on Jeff Smith's article by Bryan Garaventa (22.04.2016), Matt King (25.04.2016) and Birkir Gunnarsson (25.04.2016).)
See also the accompanying article Tabs – a 3-step journey from HTML to ARIA by Bryan Garaventa (10.05.2016).
Watson, Léonie: The difference between aria-label and aria-labelledby, Tink, 24.08.2020.
de Vries, Hidde: Accessible front-end components: claims vs reality, hiddedevries.nl, 02.04.2021.
Storsletten, Tor-Martin: WAI-ARIA and its true impact on assistive technologies, FINN Technology blog, 7 June 2017.
Accessibility, Electron (no date; accessed on 11.07.2022).
Watson, Léonie: Using the tabindex attribute, The Paciello Group blog, 04.08.2014.
Garaventa, Bryan: The Visual ARIA Bookmarklet: a bookmarklet that makes ARIA markup visible to sighted users, for teaching and training purposes. See also the background article Visual ARIA now allows anyone with sight to see how ARIA works, from anywhere in the world on LinkedIn (18 August 2015).
ARIA-Live-Regionen, Tollwerk, last updated on 02.04.2021 (accessed on 09.04.2021).
INCOBS: WAI-ARIA Techniken.
IBM Accessibility: Va11ys (pronounced “valleys”): Testing the accessibility of HTML & ARIA samples. This is a collection of code samples with the results of tests with assistive technologies (both for desktop and mobile devices). The samples are available under the MIT licence. For background about this project, see Va11ys on the IBM developerWorks site. To test the samples with your own assistive technologies, go to the Va11ys website.
aria-query: Programmatic access to the ARIA specification. Licence: Apache 2.0.
Web Incubator CG: AOM: Accessibility Object Model (draft specification). See the specification Accessibility Object Model, Phase 1 (licence: Creative Commons Attribution 3.0).
Atkinson, Matthew: Improving access to landmark navigation, The Paciello Group blog, 11 May 2017. Post about a new WebExtension. See also Matthew Tylee Atkinson's Landmarks, a browser extension for Firefox, Chrome and Opera that enables navigation of WAI-ARIA landmarks.
Eggert, Eric: ARIA Serious?, recording of a 50-minute presentation (uploaded on 9 June 2017). The presentation focuses on incorrect uses of ARIA that some developers erroneously think improve accessibility.
Palinkas, Frank M.: Replacing "noscript" with accessible, unobtrusive DOM JavaScript. (Published on GitHub; 05.02.2016).
Palinkas, Frank M.: Using WAI ARIA Roles with JSON LD. (Published on GitHub; 05.02.2016).
Vinkle, Scott: Creating accessible React apps, Simply Accessible, 19.10.2017.
Accessibility, React (no date; accessed on 09.08.2022).
Ghezala, Seif: How to create an accessible React modal, Tinloof blog, 01.04.2019.
Accessibility code examples for React Native apps, Accessibility code examples for mobile apps (no date; accessed on 15.08.2022).
Mawa, Joseph: React Accessibility Tools – How to Build More Accessible React Apps, freeCodeCamp, 27.09.2021.
Dias, David: Outils et astuces pour rendre accessible et performante son application React, 24 jours de web, 23.12.2018.
Kopacz, Lindsey: How Accessibility Taught me to be Better at JavaScript - Part One a11y with Lindsey, 15.10.2019.
Grundy, Julie: Making a Better Custom Select Element, 24 Ways, 01.12.2019.
WAI-ARIA Techniken, INCOBS (no date).
Roselli, Adrian: Be Careful with Dynamic Accessible Names, Adrian Roselli, 21.12.2020.
Real-time text in Instant Messaging utilizing XEP-0301, Gallaudet University, last updated in 2013 (accessed on 17.03.2021).
This page also links to the trophyjs GitHub repository, which contains a JavaScript implementation of XEP-0301 real-time text as a plugin to Strophe.js. This repository has not been updated since June 2013.
Hellbusch, Jan: ARIA in HTML – ARIA-Attribute sind nicht überall erlaubt, hellbusch.de, 10.05.2022.

Drag and drop:

Are there any drag and drop UI development techniques that are WCAG compliant? Question posted on User Experience Stack Exchange in October 2016.
Lemon, Gez: Accessible Drag and Drop Using WAI-ARIA, Dev.Opera, 08.07.2009.
WAI-ARIA: aria-dropeffect (Property), Digital A11Y, 29.08.2018.
The WAI-ARIA 1.0 Authoring Practices contained a section on drag-and-drop support; this section was removed from WAI-ARIA Authoring Practices 1.1. (WAI-ARIA 1.1 still lists the attributes aria-dropeffect and aria-grabbed.) According to this article, the prior ARIA 1.0 guidance for making drag and drop accessible still remains valid at this time.
Senneff, Darin: Designing a reorderable list component, DS, 11.08.2021.