HTML - Accessibility Part 3

Instructors: Jess, Carmen, and Eda

Accessibility

Before this session, please:

• Read Introduction to ARIA: What Is the Purpose of WAI-ARIA, and How Does It Work? and take notes
• Read Introduction to ARIA: What Are ARIA Roles? and take notes
• Read Introduction to ARIA: What Are the Roles of the aria-label and aria-labelledby Attributes? and take notes
• Read Introduction to ARIA: What Is the aria-hidden Attribute, and How Does It Work? and take notes
• Read Introduction to ARIA: What Is the aria-describedby Attribute, and How Does It Work? and take notes
• Try to complete all the steps in Build an Accessible Audio Controller, recording your questions and new concepts introduced

During this session, we’ll:

• Review notes
• Review notes
• Review notes
• Review notes
• Review notes
• We’ll look at the steps from Build an Accessible Audio Controller together

After this session, please:

• Read Working with Accessible Media Elements: When Is the alt Attribute Needed, and What Are Some Examples of Good Alt Text? and take notes
• Read Working with Accessible Media Elements: What Are the Accessibility Benefits for Good Link Text, and What Are Examples of Good Link Text? and take notes
• Read Working with Accessible Media Elements: What Are Good Ways to Make Audio and Video Content Accessible? and take notes
• Read Working with Accessible Media Elements: What Are Some Ways to Make Web Applications Keyboard Accessible? and take notes
• Try to do as much of Build a Checkout Page as possible before class, you can extend or improve on your code from this lab at a later date
• Complete Design a Movie Review Page over the next few days. If you’re comfortable sharing your projects, we would love to know what movies you rated!

Instructor Notes

Introduction to ARIA: What Is the Purpose of WAI-ARIA, and How Does It Work?

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) is a specification developed by W3C. It proposes additional HTML attributes to improve accessibility specifically for dynamic content and UI (User Interface) components.

It’s not the same as WCAG. WCAG is general guidelines for web accessibility, WAI-ARIA is for making dynamic and interactive content accessible for users of assistive technologies.

The additional HTML attributes defined by WAI-ARIA are organized under three categories:

• Roles: Defining what an element is or does. Many of them duplicate the semantic value of some existing elements. For example, role="navigation" (<nav> element).
• States: Defining the current condition of elements. For example, aria-disabled="true" for form inputs that are currently disabled.
• Properties: Defining properties of elements to give them extra meaning. For example, aria-required="true" for required form inputs.

An example: We can give a div the role of a button, and add CSS and JavaScript to make it behave like a button:

1<div role="button">Click Me</div>

However, it’s always better to use the native button element and use semantic HTML elements because they already provide more accessibility.

Introduction to ARIA: What Are ARIA Roles?

ARIA (Accessible Rich Internet Applications) roles add semantic meaning to HTML elements so that screen readers and other assistive technologies can describe the content as intended.

Many HTML elements already have default roles, such as button having a “button” role.

But for non-semantic elements such as a div, we can specify an ARIA role by giving them a role attribute.

Giving a role attribute to an element doesn’t give it any functionality, but just defines the purpose of it. It’s the responsibility of the developer to add the expected behavior.

ARIA roles are organized under six categories:

1. Document structure roles
2. Widget roles
3. Landmark roles
4. Live region roles
5. Window roles
6. Abstract roles

Document structure roles are for providing structural descriptions of content and specifying different sections on the page. However, semantic HTML elements should be used instead of these, and only use these roles if there is not an equivalent semantic element, such as toolbar, tooltip, feed, math, presentation / none, note.

Widget roles are mostly for defining interactive elements, and they usually require adding JavaScript for interaction. Examples include scrollbar, searchbox, separator (when focusable), slider, spinbutton, switch, tab, tabpanel, and treeitem. Again, we should use semantic HTML whenever possible (for example, for elements such as button, progressbar, etc.)

Landmark roles provide a way to specify sections of a page. They can be helpful for screen readers to navigate the important sections of a page. Examples include banner, complementary, contentinfo, form, main, navigation, region. However, these have equivalent HTML elements (header, footer, aside, form, main, nav, section) and they should be prefered.

Live region roles are used for dynamically changing content. Screen readers can announce these dynamic content changes. Examples include alert, log, marquee, status, timer.

Window roles are for defining sub-windows within the same window, such as pop up modal dialogs. Examples are alertdialog and dialog.

Abstract roles help organize the document. However, they are for browsers to use internally, not by developers! So, we should avoid using command, composite, input, landmark, range, roletype, section, sectionhead, select, structure, widget, and window.

Introduction to ARIA: What Are the Roles of the aria-label and aria-labelledby Attributes?

The aria-label attribute adds a text label to an HTML element so that screen readers can describe it. This is especially for elements that don’t have visible text but still need to be described. For example, a button with an SVG icon that doesn’t have any text still needs to be described so that its purpose is understandable.

1<button aria-label="Search">
2  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path></svg>
3</button>

aria-label provides a label for input elements that don’t have a visible label associated with them.

The aria-labelledby attribute is very similar to the aria-label attribute, but we use a reference to a text element on the page by id instead of defining the text directly in the attribute.

1<input type="text" aria-labelledby="search-btn">
2<button type="button" id="search-btn">Search</button>

We can also define multiple elements for aria-labelledby:

 1<div>
 2  <span id="volume-label">Volume</span>
 3  <span id="volume-details">Adjust the volume level</span>
 4  <input
 5    type="range"
 6    min="0"
 7    max="100"
 8    value="30"
 9    aria-labelledby="volume-label volume-details">
10</div>

Some things to consider using aria-labelledby instead of aria-label:

• The text in aria-label may not always be translated if the people on our website are using a translation service.
• Updating the visible text element that’s referenced by aria-labelledby automatically updates the label read by screen readers.
• We can use multiple sources of text with aria-labelledby, and not with aria-label.

We should also avoid using both on the same element. In that case, the invisible label will be completely ignored by screen readers.

Introduction to ARIA: What Is the aria-hidden Attribute, and How Does It Work?

The aria-hidden attribute is useful for hiding content such as decorative icons/images from screen readers. An HTML element that has aria-hidden="true" will be hidden (along with its child elements) from the accessibility tree while still being visible on the page.

We should never use it to hide a focusable element. If we do that, screen reader users can still tab through the element but the screen reader won’t announce it. The reason is that aria-hidden doesn’t remove the element from DOM, only removes it from the accessibility tree.

In these cases, we don’t need to use aria-hidden (because the element will be removed from DOM and therefore hidden from the accessibility tree):

• The HTML element already has a hidden attribute.
• The element or the element’s ancestor is already hidden with display: none.
• The element or the element’s ancestor is already hidden with visibility: hidden.

Also, if an element has aria-hidden="true" and one of its child elements has aria-hidden="false", that child element will still be hidden.

Introduction to ARIA: What Is the aria-describedby Attribute, and How Does It Work?

The aria-describedby attribute is for describing an element with an already existing text content on the page. Similar to aria-labelledby, we associate the element with an id:

1<button aria-describedby="delete-message">Delete</button>
2
3<p id="delete-message">Warning! All deletions are permanent.</p>

While it’s mostly used for form controls, it can be used for other purposes such as associating text with other elements.

Build an Accessible Audio Controller

We’ll take a look at this exercise and practice working with ARIA by building an accessible audio controller.