One of the foundations of web development is writing an accessible, semantic structure in your pages and components. This is important for multiple reasons, primarily for exposing accessibility information for people using screen readers and other assistive technology.
Semantic structure has a cool benefit of making your page content more machine readable, and both HTML and ARIA have big parts to play in that.
What is programmatic accessibility information?
In Testing Accessibility, one of the areas we’ll dive into is programmatic accessibility information. Another way to phrase this is “programmatically determinable”.
According to our trusted resource the Web Content Accessibility Guidelines, programmatically determinable means:
Determined by software from author-supplied data provided in a way that different user agents, including assistive technologies, can extract and present this information to users in different modalities.
Determined in a markup language [such as HTML] from elements and attributes that are accessed directly by commonly available assistive technology.
Here is an example of programmatically determinable information in a page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Language Select</title>
<meta name="charset" content="utf8" />
</head>
<body>
<h1>Select A Language</h1>
<ul>
<li><a href="/fr" lang="fr">Français</a></li>
<li><a href="/es" lang="es">Español</a></li>
</ul>
</body>
</html>In the above example, the language of the page is set to English on the HTML element. When a screen reader reads the page aloud, the pronunciation changes when it gets to “Français” and “Español”. This is possible because of the programmatic information provided by the lang attributes on the HTML tag and individual language links.
By using semantic HTML elements and attributes as well as ARIA roles, states, and properties, information can be easily extracted and presented in multiple ways. This includes screen reading software, voice navigation, and more. How cool is that??
Learn the rules of ARIA (Accessible Rich Internet Applications)
With budding knowledge of a tool like ARIA, it is imperative that I also teach you the rules of how and when to use it. This is because incorrect usage can make a page less accessible than if there was no ARIA at all.
I fell into this trap myself, early in my career! I used ARIA attributes that were poorly supported at the time and missed required attributes on related elements.
In Testing Accessibility, you'll learn the building blocks of ARIA and you’ll be more successful at plumbing accessibility information through HTML to Accessibility APIs and assistive technologies.
