About

Introduction

The ARIA Authoring Practices Guide (APG) explains how to create accessible web experiences for users of assistive technologies and keyboard interfaces by developing web sites that properly convey accessibility semantics and implement common keyboard conventions. It also provides guidance on some closely related topics, such as supporting operating system settings for high contrast and reduced motion.

Accessibility semantics refer to the meaning of user interface elements that need to be conveyed to assistive technology users in order for those users to understand and use the elements. For example, people who can visually perceive a search icon button understand the element can be activated to perform a search by the way it is styled and positioned. To make that icon accessible to a screen reader user, one of the semantics that needs to be communicated is that the element represents an interactive button. In addition, keyboard accessibility requires the button to be focusable, and keyboard conventions call for pressing Enter or Space to activate the button when it is focused. The APG describes how to convey accessibility semantics and implement keyboard accessibility for many common design patterns, ranging from typical buttons and popup menus to complex tree grids. It also explains essential practices related to these patterns, such as how to convey web page structure with ARIA landmark regions and effectively utilize the many ways of encoding accessible names.

The APG is organized into two major sections: patterns and practices. Each pattern explains how to make a common user interface element, such as a button, menu, or dialog, accessible, and provides functional example implementations of the pattern. The practices section gives in-depth explanation of how to satisfy a variety of accessibility needs that surface when making rich internet application experiences accessible. For instance, the practices section on providing accessible names and descriptions gives detailed descriptions of seven different naming techniques as well as a table providing guidance for naming more than 80 types of elements.

The APG assumes basic understanding of web development, especially of HTML and CSS. It may be particularly useful to designers and engineers who are working on site design systems and component libraries. However, it is important to understand that the APG only covers a portion of what is needed to create accessible experiences. To understand accessibility more broadly, it is advisable to start with the WAI Accessibility Fundamentals and WAI Overview of Design and Development.

The accessibility semantics used in the APG patterns and described in APG practices are defined in the WAI-ARIA 1.2 Specification. That is, the ARIA specification standardizes the meaning of the attributes that describe elements and their states to assistive technologies, such as the meaning of role="button". These attributes and other features required to make sites usable by people who rely on assistive technologies or keyboard navigation are not natively included in the languages used to create web sites, such as HTML, JavaScript, CSS, and SVG. The W3C Web Accessibility Initiative's (WAI) Accessible Rich Internet Applications working group (ARIA WG) is addressing these deficiencies through several W3C standards efforts. The WAI-ARIA Overview provides additional background on WAI-ARIA, summarizes those efforts, and lists the other documents included in the WAI-ARIA suite.

Change History

APG 1.1 supported ARIA 1.1, and this version, APG 1.2, includes changes to support version 1.2 of the ARIA specification. It also includes nearly 200 significant updates to improve the quality and breadth of content. A detailed log of all changes is available on the wiki of the w3c/aria-practices GitHub repository. Highlights of major changes to support ARIA 1.2 as well as some of the improvements include the following.

• Added section to provide guidance related to 38 document structure roles, 18 of which are new in ARIA 1.2.
• Revised guidance for roles where naming requirements changed in ARIA 1.2. ARIA 1.2 prohibits names on some roles. ARIA 1.2 removed naming requirements from some other roles.
• Added naming guidance for 18 roles that are new in ARIA 1.2.
• Revised the combobox pattern and 4 combobox examples to reflect the ARIA 1.2 revisions to combobox.
• Added example illustrating changes in ARIA 1.2 that enable creation of custom select-only comboboxes, which are similar to HTML select elements. This replaces the Collapsible Listbox example, which is now deprecated.
• Revised the listbox pattern to specify how to utilize the new ARIA 1.2 support for named groups of options and Added a new listbox example to demonstrate the named option group feature.
• Revised the editor menubar example to illustrate new ARIA 1.2 support for named groups of items in a menu.
• Updated the listbox and tree patterns to reflect current browser processing of aria-selected and provided guidance regarding the use of aria-checked to communicate selection.
• Added section providing guidance about properties used with range widgets, such as aria-valuemin and aria-valuemax.
• Added a design pattern and example implementation of the meter role, which is new in ARIA 1.2
• Added two examples that demonstrate how to create rating inputs, one based on slider and one based on radio group.
• Added two other slider examples: a vertical temperature slider and a media seek slider.
• Added a switch design pattern and three example implementations: one made from a div element, one based on HTML button, and one that uses HTML checkbox input.
• Added a button example that illustrates use of the new ARIA 1.2 IDL interface.
• Added a date picker example that illustrates choosing a date with a combobox.
• Added another example of a disclosure navigation menu that demonstrates how to include top-level links.
• Added example of a sortable table.
• Changed all example pages to include a Jump to menu, a button to open the example in CodePen, and added a prominently placed warning with guidance about testing before re-using example code.
• Improved support for high contrast settings and added detailed documentation of high contrast support in many examples.
• Improved support for touch-based screen readers in several examples, most notably in sliders.
• Due to change in ARIA 1.2, removed Math role from list of roles that have presentational children.
• Developed a comprehensive set of coding standards for HTML, CSS, and Javascript for the APG and updated a significant portion of content to conform with the standards.
• In response to feedback, fixed many documentation errors and functional bugs in examples.

Comprehensive lists of closed issues included in APG 1.2 release 1 are tracked in the following GitHub milestones.

• APG 1.2 Release 1 Milestone: Github issues closed in the first publication of APG 1.2 as a W3C Note in November 2021.
• APG 1.2 Working Draft 3 Milestone: Github issues closed in the third working draft of APG 1.2 published in November 2019.
• APG 1.2 Working Draft 1 milestone: GitHub issues closed in the first working draft of APG 1.2 published on July 17, 2018.

Acknowledgements

Editors

Current editors:

Matt King (Facebook)

JaEun Jemma Ku (University of Illinois)

James Nurthen (Adobe)

Zoë Bijl (Invited Expert)

Michael Cooper (W3C)

Former editors:

Joseph Scheuhammer (Inclusive Design Research Centre, OCAD University) - Until 01 October 2014

Lisa Pappas (SAS) - Until 01 October 2009

Rich Schwerdtfeger (IBM Corporation) - Until 01 October 2014

References