Web Application Accessibility 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.
• Pickering, Heydon: Menus & Menu Buttons, Inclusive Components, 10.05.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.
• Alvarado, Rocío: Accessible Components: The Hamburger Menu, LinkedIn, 01.06.2023.
• Roselli, Adrian: Don’t Use ARIA Menu Roles for Site Nav, Adrian Roselli, 23.10.2017, updated on 20.05.2022.
• Navigating the Maze of ARIA Menu Roles: A Comprehensive Guide, Zenyth, 18.10.2023.
• 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)

See also Dialogs (Modal and Nonmodal) on the Web Usability page.

• dialog element (html), Accessibility Support (no date; access on 30.06.2024).
  This website does not have accessibility support information for the dialog element. However, see the GitHub issue I've done testing for the <dialog> element, submitted in July 2022.
• Herrmann, Marcus: The Potentially Dangerous Non-Accessibility Of Cookie Notices, Smashing Magazine, 24.04.2023 (twelve-minute read).
• O'Hara, Scott: Use the dialog element (reasonably), scottohara.me, 26.01.2023.
• O'Hara, Scott: Having an open dialog (archival post), scottohara.me, 05.03.2019, updated on 26.01.2023.
• O'Hara, Scott: The current state of modal dialog accessibility, TPGI blog, 29.06.2018.
• Nguyen, Tim: Introducing the Dialog Element, WebKit blog, 07.02.2022.
• De Vries, Hidde: Using JavaScript to trap focus in an element, Hidde's Blog, 29.01.2017, last updated on 17.12.2020.
  The code in this article uses plain JavaScript.
• Kumar, Rahul: Focus Trapping for Accessibility (A11Y), Medium, 02.11.2018.
• Giraudel, Kitty: Creating An Accessible Dialog From Scratch, Smashing Magazine, 28.07.2021 (13-minute read).
  At the end of the article, the author claims that support for HTML's dialog is sub-par and inconsistent, referring to articles by Scott O'Hara and documentation that is no longer available at its original location.
• 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.

See Dialogs (Modal and Nonmodal) on the Usability page for aspects that are not related to accessibility.

Alert, Error and Status Messages

• Lauke, Patrick H.: Why are my live regions not working?, TetraLogical, 01.05.2024.
  The reasons why a live region may not be working include the following: unhiding a populated “live region” when needed, generating the live region dynamically and having it already present when the page loads. Only live regions with role="alert" are read when the page loads (for historical reasons). For other use cases, you should have an empty container with aria-live="assertive" ready in advance, so you can then inject the update later. The blog post does not discuss live regions with role="status".
  See also Clarification of when live regions are meant to be announced by AT #2154 (April 2024) in the W3C's WAI-ARIA issue tracker on GitHub.
• 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.
• Alvarado, Rocío: Accessible Components: The Toast, LinkedIn, 25.10.2023.
  Among the general considerations for non-critical toast messages is the following: Ensure a toast disappears after at least 60 seconds. The author does not discuss conformance to Success Criterion 2.2.1 Timing Adjustable. For critical toast messages, the keyboard focus should be moved to the message container when it opens. The author recommends focus management after the toast is dismissed, thus returning the focus to the trigger button but does not discuss where the keyboard focus should or may go if the user tabs out of the message container (since it is not modal).
• Cerovac, Bogdan: Potential dangers of status messages, Bogdan on Digital Accessibility (A11y), 14.12.2024.
• Soueidan, Sara: Accessible notifications with ARIA Live Regions (Part 1), Sara Soueidan, 15.01.2024.
  (This blog post does not use a role attribute on every live region.)
• 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.
• Live Regions, Web Accessibility for Developers (Pressbooks, The Chang School, Toronto Metropolitan University), accessed on 09.12.2024 (Creative Commons).

Tooltips

See also The title Attribute.

• Silver, Adam: The problem with tooltips and what to do instead, Adam Silver – designer, London, UK, 26.08.2019.
  Adam Silver gives six reasons for avoiding tooltips. First, they can be hard to spot. Second, they require effort from the user. Third, they may be displayed on top of other content, making that other content temporarily unreadable. Fourth, in smaller viewports, tooltips may be cropped. Fifth, when a tooltip consists of an icon, speech recognition users need to guess what its accessible name is. Finally, revealing content only on hover is not accessible for several user groups. Adam then gives some tips on what to use instead, which essentially involves displaying the relevant text by default.
• Tooltips & Toggletips, Inclusive Components, 25.07.2017.

  This article first discusses the title attribute, which is not great for accessible tooltips. It then points out that icons without permanently visual text are always in danger of confusing users. Tooltips are used when icons don't have permanently visible text. The article discusses how to make such icons accessible to assistive technologies, using attributes such as aria-describedby and role="tooltip". It also shows how a count of unread notifications attached to an icon can be coded, relying on aria-describedby's capability to accept a list of space-separated IDs.
  The article then describes how to code a tooltip that provides a supplementary description. It provides CSS code for displaying tooltips on hover and keyboard focus. The first part of the article ends with suggestions for making tooltip content accessible on touch screens.

  The second part of the article distinguishes tooltips from “toggletips”, which often look like “i” icons and serve to reveal information balloons. In contrast with tooltips, To work by touch just as well as by mouse or keyboard, toggletips are revealed by click rather than by hover and focus. The article suggests implementing toggle tips as a live region (using role="status").

• Soueidan, Sara: Building a fully-accessible help tooltip, Sara Soueidan, 24.01.2017 (seven-minute read).
  This blog post discusses various issues with tooltips (including their usabiity on mobile devices, where there is no mouse hover) and various challenges to an accessible implementation. This includes the choice between <a> and <button> and the feasibility of implementing a tooltip without JavaScript (which comes with downsides that affect the user experience). She concludes that, JavaScript is imperative to make fully-accessible interactive components but does not describe an accessible tooltip implementation.
• Higley, Sarah: Tooltips in the time of WCAG 2.1, Sarah Higley, 17.08.2019.
  Sarah discusses various accessibility issues related to toolips, takes a detour through the history of the alt and title attributes for images, takes another detour discussing how the term “menu” can refer to different things, points out that, visual patterns do not always have a one-to-one relationship with interaction patterns and proposes the following definition of tooltip to base the rest of the blogpost on: A "tooltip" is a non-modal (or non-blocking) overlay containing text-only content that provides supplemental information about an existing UI control. It is hidden by default, and becomes available on hover or focus of the control it describes. (Tooltip-style pop-ups that aren't conneced to an interactive control would benefit from the disclosure button pattern.) Based on this, Sarah discusses tooltip semantics, using the attributes aria-describedby, id and aria-hidden and avoiding the attributes role="tooltip", aria-haspopup and aria-live. (For role="tooltip", see Clarify the use of role=tooltip in the W3C issue tracker for WAI-ARIA.) She also discusses how users should be able to interact with it (mouse and keyboard) and points out that tooltips attached to buttons or links are inaccessible on touch devices.
  With regard to tooltip content, she writes, The best approach to writing tooltip content is to always assume it may never be read. She also points out that tooltip content should be concise, not contain rich content and not contain interactive content. She points to a demo on Codepen (Tooltip A11y) and to Scott O'Hara's GitHub repository about tooltips.
• O'Hara, Scott: a11y_tooltips: Accessible Tooltip Component, GitHub, last updated in October 2019; MIT licence.
  Scott points out that “tooltip” are often used to provide short, non-essential, description to an element. On the other hand, they are also used to reveal an element's accessible name. Scott defines several rules for tooltips. For example, an element should have only one “tooltip”, which is either the element's accessible name or a description. In addition, an element should have either a native toolitp or a custom tooltip, but not both. He also defines other rules that should sound familiar to people who have read other articles about accessible tooltips.
• Tooltip Pattern, ARIA Authoring Practices Guide (APG), (w3C) (no date; accessed on 29.09.2023, 05.03.2025).
  This design pattern is work in progress. See Issue 128: Draft tooltip design pattern and Issue 127: Develop example of tooltip design pattern in the W3C's ARIA Practices GitHub repository for progress on this pattern.
• Thread: best tooltip markup and behavior?, WebAIM E-mail List Archives, December 2011. (Referenced in Sara Soueidan's blog post.)

Drag and Drop

• Edwards, James: The Road to Accessible Drag and Drop (Part 1), TPGI, 19.12.2023.
• 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.

Carousels

• Should I Use A Carousel? by Jared Smith, presented as a carousel. See Jared Smith's article Accessibility expert warns: stop using carousels (Creative Bloq, 11.07.2013.)
• Heilmann, Christian: Keeping it simple: coding a carousel, 8 April 2015. (Remember the KISS principle?)
• 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.

Autocomplete, Combobox or Typeahead

• Horsford, Ed: We’re building an autocomplete, Design in government blog (UK), 20.04.2017.
• accessible-autocomplete, Government Digital Service (UK) on GitHub (regularly updated code repository; last accessed on 18.09.2024).
• Lewis, Whitney: Create an accessible combobox using ARIA, Pope Tech Blog, updated on 01.07.2024.
• Recommandations pour l'accessibilité d'un composant d'autocomplétion, Recommandations accessibilité numérique Orange, 23.12.2020 (accessed on 19.03.2023).

Pagination

• Alvarado, Rocío: Accessible Components: The Pagination, LinkedIn, 31.08.2023.

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.
• #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.
• Poltoratsky, Nikita: Angular a11y: 11 tips on how to make your apps more accessible, Angular inDepth, 20.02.2020.
• Trancart, Albéric: Improve accessibility on your Angular Apps with Jasmine and Axe, Theodo blog, 22.03.2021.
• jest-axe by Nick Colley: Custom Jest matcher for axe for testing accessibility. Licence: MIT. Accessed on 12.10.2023.

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.

React

• Vinkle, Scott: Creating accessible React apps, Simply Accessible, 19.10.2017.
• Accessibility, React (no date; accessed on 09.08.2022).
• Russell, Alex: If Not React, Then What?, Infrequently Noted, 29.11.2024.
  This long blog post is not specifically about accessibility but contains the following relevant quote: While I'd like to be spending most of this time working through improvements to web APIs, the majority of time spent with partners goes to remediating performance and accessibility issues caused by "modern" frontend frameworks (React, Angular, etc.) and the culture surrounding them. These issues are most pronounced today in React-based stacks.
  This is disquieting because React is legacy technology, but it continues to appear in greenfield applications.
• 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.

Components for React

• Ariakit: Ariakit is an open-source library that provides unstyled, primitive components for building accessible web apps, design systems, and component libraries.
  See the Ariakit repository on GitHub (MIT licence). (Accessed on 15.12.2023.)
• FDNS User Interface Library for React: This repository contains a front-end library built in React. The library is designed to help developers efficiently build user interfaces on top of the Foundation Services. The library is pre-release software and being made public to gain feedback from the open source community. (Apache 2.0 licence. Accessed on 15.12.2023.)

Other UI and Web Component Libraries

• Shoelace (by Cory LaViska) describes itself as a forward-thinking library of web components. It has an Accessibility Commitment but does not claim compliance to any specific accessibility standard. See its list of accessibility issues and its list of accessibility-related pull requests. For source code, see the Shoelace repository on GitHub, which has an MIT licence.
• Sonder UI by Microsoft is a collection of tested, accessible components and component pattern documentation. (MIT licence. Accessed on 15.12.2023.)
• Radix Primitives by Work OS: Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. (MIT licence. Accessed on 15.12.2023.)
• generic-components by Pascal Schilp: A collection of generic web components with a focus on accessibility, and ease of use. (MIT licence. Accessed on 15.12.2023.)
• Axponents by Dylan Barrell: This repository consosts of examples of Accessible Web Components implemented on different frameworks. (MIT licence. Not updated since 2015. Accessed on 15.12.2023.)

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.

Web Components and Shadow DOM

• Bidelman, Eric: Shadow DOM v1 - Self-Contained Web Components, web.dev, last updated on 01.08.2016. (Not about accessibility but a general introduction.)
• Kroes, Erik: The Guide to Accessible Web Components, ErikKroes.nl blog, 10.03.2020.
• 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.
• Boxhall, 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.
• Rylan, Cory: Accessibility with ID Referencing and Shadow DOM, Cory Rylan, 10.05.2021.
• Kroes, Erik: The Guide to Accessible Web Components, erikkroes.nl (blog), 10.03.2020.
• Watson, Léonie: Web Components and the Accessibility Object model (AOM), 24 Accessibility, 02.12.2019.
• How to Label Shadow DOM - A11ycasts #20 (Chrome for Developers on YouTube, 7:32 minutes, 07.07.2017, Creative Commons).
• Sutton, Marcy: Notes On Client-Rendered Accessibility, Smashing Magaziine, 06.05.2015 (12-minute read).
• Testing Shadow DOM with aXe Coconut - A11ycasts #26 (Chrome for Developers on YouTube, 7:33 minutes, 14.10.2017, Creative Commons).
  See also Test the leading edge of accessibility with axe Coconut and axe-core 3.0-alpha (02.10.2017), which points out that the axe Coconut extension is no longer available. (Accessed on 04.12.2023.)
• 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”, “ARIA combobox” or “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”.

Accessibility Object Model (AOM)

• The Accessibility Object Model (AOM), Web Incubator CG on GitHub, accessed on 22.12.2024.
• Watson, Léonie: Playing with the Accessibility Object Model (AOM), Tink, 15.09.2017.

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.
• Kay, Darek: The state of accessible web UI frameworks, Darek Kay, 24.03.2019, updated on 17.01.2024.
  This article picks three requirements (focus visibility, contrast ratio and WAI-ARIA conformance), rates thirty popular CSS UI or UI kits based on these criteria and ranks them by accessibility score.
• Roselli, Adrian: Where to Put Focus When Deleting a Thing, Adrian Roselli, 25.08.2023, updated on 28.08.2023.
• 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).
• 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.
• Damera, Suman: aria-busy(state), Suman’s Accessibility blog, 02.10.2019.
• Aria-disabled, Introduction to Accessibility / A11y-101 (no date; accessed on 06.08.2024).
• Pereira, Sandrina: Making Disabled Buttons More Inclusive, CSS-Tricks, 12.05.2021, updated on 24.05.2022.
• Berryhill, Daniel: The aria-description attribute and why you should avoid using it, UX Collective (on Medium), 11.02.2024.

Other Links

• MacDonald, Matthew: The Future Web: Will Canvas Rendering Replace the DOM?, Young Coder (on Medium), 17.05.2021 (six-minute read).
• MacManus, Richard: Google Docs Switches to Canvas Rendering, Sidelining the DOM, The New Stack, 24.05.2021.
  The change has implications for accessibility. The envisioned approach is to use a hidden DOM that caters just to accessibility. Google and others are also working on a specification entitled Accessibility Object Model (AOM, currently an unoffical draft at the W3C). The side DOM and the AOM are being used in the new Google Docs.
• Watson, Léonie: Playing with the Accessibility Object Model (AOM), Tink, 15.09.2017, updated on 27.02.2019.
• Dodson, Rob: The future of accessibility for custom elements, Dev Channel, 02.10.2017.
• Access & Use Components, Access & Use, last modified in August 2022.
  The components described on this site are following: modal dialogs, non-modal dialogs, drop-down menus, tabbed interfaces, carousels, disclosure widgets, content on hover & focus, and forms & error handling.
• Swan, Henny: Foundations: accessible names and descriptions, TetraLogical blog, 05.04.2023.
• de Vries, Hidde: Better accessible names, hidde.blog, 13.09.2022.
• Faulkner, Steve: Simple standalone toggletip widget pattern, TPGi, 15.01.2016.
• Higley, Sarah: Tooltips in the time of WCAG 2.1, Sarah Higley, 17.08.2019.
• How to Detect Escape Key Press in JavaScript and jQuery, iifx.dev, 12.04.2024.
  This article is not directly about accessibility but is relevant to keyboard accessibility for certain types of components, such as dialogs and menus.
• Libby, Todd: What I Have Learned With Ionic, Todd Libby, 17.03.2023.
  This blog post is mostly about the author's experiences with Ionic, a framework that seems to be good for accessibility. (Accessibility is not the blogpost's only topic. The blog post does not describe any technical tips.)