Operable Content

In short, the user should be able to interact effectively with your website. There are two primary tools we use to interact with websites - the mouse and the keyboard. Additionally, many assistive technologies mimic one or both of these.

Keyboard-Only Control

While most of us use a mouse as our primary control tool for working with any software, many users cannot use a mouse effectively. For these users, it is important that the entire web page can be controlled using the keyboard.

Tab Order

An important mechanism for replacing mouse movement in a keyboard-only control scheme is the use of the [Tab] key to move focus to a particular element on the page. Try using your tab key on this page - you’ll notice that different interactive elements of the page are highlighted in turn (i.e. links, buttons, videos, inputs, etc.). Pressing [Enter] while a link is focused will follow the link. Pressing [Space] will start or stop a media element (video or audio).

The order that the [Tab] key moves through the elements on the page is known as the tab order, and generally will be in the order the elements appear on the page. However, this can be overridden in HTML by the setting the tabindex attribute. This attribute can also make an element that is not normally in the tab order (like a <p> tag, tabbable).

Accessible Rich Internet Applications (ARIA)

Many web applications utilize regular HTML elements to create interactive experiences. When these rely on vision and mouse interaction (for example, image carousels), they can be inaccessible for many people. The roles and attributes defined by ARIA seeks to provide a mechanism to allow these widgets to interact more effectively with assistive technologies.

They do this in two ways - through the use of roles (which describe the role of the element in the page) and through attributes (which convey information to assistive technologies).

ARIA Roles

The roles describe the intent of an HTML tag that has no semantic meaning - i.e. a <div>. This can help convey through a screen reader what most users would deduce visually. For example, if we were displaying a math equation, we could use the math role:

<div role="math">
  y = 1/2x + 3
</div>

Likewise, an image containing an equation could be labeled with the math role:

<img src="line-eq.png" alt="The equation for the line y = 1/2x + 3" role="math">

ARIA began as an extension to HTML, but many of its ideas have now been integrated directly into HTML through semantic equivalents.Where possible, use HTML5 equivalents, i.e.

article use <article>
figure use <figure>
img use <image> or <picture>
main use <main>
navigation use <nav>
region use <section>

You can find a complete list of roles and recommendations for using them in the MDN documentation.

ARIA Attributes

ARIA attributes convey information to assistive technologies. For example, the aria-hidden attribute signals to assistive technologies that a particular element can be ignored by the assistive technology. Consider a product logo that appears in multiple locations on the page.

<img src="logo.png" alt="logo" aria-hidden="true"/>

The aria-hidden here indicates to a screen reader that it does not need to call out to the viewer the existence of the logo.

You can find a full list of ARIA attributes in the MDN Documentation.