We are excited to announce the launch of a redesign of the ARIA Authoring Practices Guide (APG), an essential resource that shows web developers how to make accessible versions of common user interface design patterns, such as comboboxes, dialog modals, and menu bars. In coordination with the W3C APG Task Force and Education and Outreach Working Group, we designed a dramatically simplified website with a new interface for browsing a deep catalog of design patterns, code examples, and guidance on fundamentals. This relaunch also introduces a new home for the APG as part of the W3C Web Accessibility Initiative, alongside other accessibility-related resources, tools, and instructional materials.

A screenshot of the APG home page
The new APG home page introduces newcomers to the resource.

Accessibility is a fundamental part of the web. For people with disabilities, the ability to access websites with a screen reader, reliably control functionality with the keyboard, and render text and media in alternative formats is an equity and inclusion issue, without which they may be disadvantaged or even excluded from using the web. Moreover, all users benefit from accessible websites since temporary impairments, situational limitations, and access issues can necessitate relying on accessibility affordances.

Unfortunately, many websites have accessibility barriers and making new accessible websites requires careful consideration across all aspects of web design and development. Since its first publication in 2006, the W3C WAI-ARIA standard has specified the way that web developers can add semantic information to websites, in order to allow assistive technologies (ATs) to render the website for persons with disabilities. For example, while a visual user might know a particular icon to be a button, ARIA shows how to convey that semantic information to ATs like screen readers, as well. However, as the capabilities of the web continue to expand and web content demands increasingly sophisticated user interfaces, the difficulty of applying ARIA in practice has only increased. Similarly, as the landscape of ATs and browsers has grown, it has become more difficult to test that UI patterns are interoperable across the expanding matrix of device and software combinations. Web developers and designers have needed an additional reference to help codify a set of best practices for using ARIA on modern websites.

A screenshot of a list of UI design patterns
The Patterns page helps users find guidance on common UI design patterns.

The ARIA Authoring Practices Guide comprises over 60 examples for 30 different types of UI design patterns, from an editable combobox with list autocomplete (useful for selecting a particular country from a long list of options, for example) to a treegrid widget (an essential part of any application that requires browsing a hierarchical file system). These examples contain code samples, an explanation of how ARIA Roles, States, and Properties must be added to elements, and a description of the required support for keyboard functionality. APG also includes a section of fundamental practices which provide high-level guidance for applying ARIA and information about how to develop additional design patterns from scratch. In order to make sure that guidance remains relevant and correct, APG includes automated regression testing for examples. Over time, APG has helped document the ARIA specification and reveal bugs in both the specification and browser implementations of the specification.

Since its introduction in 2014, APG has been published as a W3C technical note, a resource intended to be read primarily as a single text-based document. Our redesign marks a significant change in format to a browsable, multi-page website with site-wide navigation and a new interface for browsing the deep catalog of content. This update included a swath of usability improvements designed to make it easier to find, navigate, and read the full extent of APG guidance. In addition, the conversion to a website allowed us to relocate APG to the W3C Web Accessibility Initiative. This new home will allow more developers to discover APG and contextualize its guidance as part of a larger ecosystem of resources, tools, and instructional materials. Perhaps most importantly, the redesign motivated a renewed focus on guidance for newcomers. The new APG includes a homepage which showcases the different resources within and provides a friendlier face for newcomers. We also added a readme which gives people a concrete place to start their journey as they browse the full website.

APG is part of a larger vision for making a more accessible web. It is a living resource that is continuously updated and expanded by the APG Task Force as the ARIA spec evolves and developers suggest new design patterns to include. We see APG design patterns and widgets as the foundation of any modern web application. That’s why we are also using APG design patterns as the source material for the sister ARIA-AT project, which tests the interoperability of screen readers and browsers (a challenge referenced above). ARIA-AT is a collection of tests for ATs and browsers that specifies the expected output of a device such as a screen reader when interacting with a particular APG example in a specific way. As the ARIA-AT project matures, it will provide the testing data to allow developers to see the support for APG examples across a matrix of different devices. This will allow developers to make informed choices about when to use particular examples, the same way that they can decide to use a new CSS feature, for example, based on current browser support. Moreover, APG examples are used as references for an extended ecosystem of component libraries, frameworks, and UI design tools. Libraries such as React Spectrum offer design patterns based on APG packaged in a more consumable format for developers who are already building React web applications.

By continuing to expand and improve APG, publish ARIA-AT test results, and work with a broader ecosystem of libraries, tools, and frameworks, we hope to make it easy for every web developer and designer to build an accessible website by default!