Semantic Markup with HTML & ARIA

In this workshop we will build parts of an accessible application from the ground up, following accessibility best practices every step of the way.

This workshop is intended for web developers of all skill and experience levels. Knowledge of the Web Platform would be helpful (HTML, CSS, and JavaScript).

Workshop topics include:

Headings & Landmarks

HTML provides a lot of accessibility wins for free– if you use the proper tags and structure. In this section we'll discuss headings, semantic structure, validation tools, and the impact our markup can have on people with disabilities.

The "When" and "How" of ARIA

The first rule of ARIA (Accessible Rich Internet Applications) is "Don't use ARIA". When the time comes and you do need it, you'll want to know you're doing it right. This part of the workshop discusses the various roles, states, and properties of ARIA. In addition, you'll learn about accessibility APIs, how JavaScript applies when updating the DOM, and how assistive technologies interact with web applications.

Accessible Names

Naming things is hard. Here you'll learn the about crafting accessible names and descriptions for assistive technology, as well as the best approach to working with labels and placeholders for forms.

Programmatic Accessibility Information

Accessibility has a cool benefit of making your pages machine readable, and ARIA has a big part to play in that. In this section you'll learn how to plumb accessibility information through other areas of your application to create programmatic associations and enable assistive technologies.

The Accessibility Object Model (AOM)

Just as we have the Document Object Model (DOM) and CSS Object Model (CSSOM), we also have the experimental Accessibility Object Model. Learn how to inspect a component and when the AOM will come in handy.