Fixing Accessibility: Cautionary Tales About ‘aria-describedby’
Jonar Sabilano
Web accessibility, at its best, makes every effort to empower every user, regardless of their disabilities. It means that everyone is able to fully engage with digital content – with the use of assistive technology such as screen readers. This is where the power of Accessible Rich Internet Applications (ARIA) and its attribute, ARIA ‘describedby’ comes into play.
In this blog, we’ll explain the ins and outs of all things ARIA and, more specifically, ARIA describedby. Our goal is to demystify the jargon and technical aspects, making the information accessible not just to web developers but to anyone interested in understanding how web accessibility works. So let’s get started.
What is the difference between ARIA and aria ‘describedby’?
The difference between ARIA as a whole and the specific attribute `aria-describedby` lies in its scope and function. Here’s a quick breakdown:
ARIA
- ARIA is a suite of attributes used in HTML to enhance web accessibility.
- It includes a range of attributes designed to make web content and web applications more accessible to people with disabilities.
- ARIA helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.
aria–describedby
- ‘aria-describedby ‘ is one of the attributes within the ARIA suite.
- The specific function of aria-describedby is to provide descriptive text for an element, offering additional context or explanation. This is particularly useful for elements where the existing content might not fully convey their purpose or usage.
- `aria-describedby` can be used to associate a text description with a form input to give users more information about what is expected.
While ARIA refers to the broader framework of accessibility attributes, `aria-describedby` is a specific attribute within this framework that provides extended descriptions to elements for users of assistive technologies.
What is aria-describedy?
aria-describedy is one of several ARIA attributes that offers special labeling or instructions for anyone using a screen reader. Consider a simple form field for “Start Date” that requires a two-digit month, four-digit year format for entry:
The <label> and <input> elements can be associated with the widely-supported “for” attribute. But what about the information pertaining to format? Some developers would suggest using aria-describedby to associate that additional instruction to the <input> as in the code below:
<div>
<label for=”sdate”>Start Date:</label>
<input type=”text” id=”sdate” name=”sdate” aria-describedby=”sdate_description”>
</div>
<p id=”sdate_description”>Please use mm/yyyy format</p>
Some combinations of browsers and screen readers will not read the description at all. Although this code would likely work for many combinations of browsers and screen readers, we want the most robust solution possible. Potential problems with this solution include:
- A few combinations will read the description, but not the label (aria-describedby is not supposed to override the HTML label, but sometimes it does).
- Some will read the description, but only after a pause long enough that users might begin typing data into the field, interrupting the screen reader, and never hearing the description.
- While aria-describedby often works well with simple text boxes like this, support for it with more sophisticated form fields like dropdowns or radio buttons is lacking.
An easy solution to this problem would be to do away with the separate description and include the extra instruction in the label itself. Support for the association of <label> and <input> elements using the for attribute is very strong:
<div>
<label for=”sdate”>Start Date (in mm/yyyy format):</label>
<input type=”text” id=”sdate” name=”sdate”>
</div>
It isn’t as appealing to look at, but it’s simple and robust. We could even improve this by using a sibling to aria-describedby called ‘ aria-label.’
QUICK INSIGHT: When using `aria-label` for links, it provides descriptive text for screen readers, enhancing accessibility; for example, `<a href=”https://www.example.com” aria-label=”Visit our homepage”>Click here</a>` will be read as “Visit our homepage” instead of just “Click here,” offering clearer guidance to visually impaired users.
What is Aria-label?
Aria-label allows an alternate, enhanced label to be read to screen readers without disturbing the HTML label that appears to sighted users. Two critical differences between aria-label and aria-describedby:
- Aria-label enjoys much wider and more robust support.
- Aria-label overrides the HTML label rather than supplementing it. In other words, screen reader users will hear the aria-label only.
Why would aria-label be an improvement in this situation? Because, depending on a user’s settings, screen readers sometimes attempt to read acronyms and abbreviations as words, resulting in a slurred mess. In this example, screen readers may stumble over the “mm/yyyy.”
We could use aria-label to deliver a more easily understandable label to screen reader users:
<div>
<label for=”sdate”>Start Date:</label>
<input type=”text” id=”sdate” name=”sdate” aria-label=”Start date in two digit month, four digit year format”>
</div>
Sighted users will still see the “mm/yyyy” within the HTML label. Screen reader users, however, will hear “Start date in two-digit month, four-digit year format.” Note that the aria-label repeats the same text (“Start date”) that appears in the HTML label. Remember that the screen reader user will hear only what the aria-label contains because the aria-label overrides and replaces the HTML label.
Unfortunately, aria-describedby does not yet enjoy the extensive and robust support of aria-label and many other ARIA attributes.
Some believe that the official ARIA specification should be more explicit about how aria-describedby should be supported. Many think that browser and screen reader makers are to blame. And, often, the different ways to code form fields that are common to different frameworks and content management systems can muddle things by introducing lots of extra <divs> and other code into the mix, possibly confusing the browser or screen reader.
QUICK INSIGHT: The `aria-label` attribute in HTML is essential for accessibility. It provides a text description for screen readers, particularly for elements without visible text. For example, `<button aria-label=”Submit Form”>Submit</button>` tells screen readers to announce “Submit Form button,” aiding users with visual impairments by giving clear context to interactive elements.
Why is Alt text important?
Interactive content is usually more important than static content. If one image on one page lacks quality alt text, it’s a strike against accessibility, but it won’t make or break the experience for the user. In contrast, being able to activate buttons, follow links, interact with widgets, and submit forms can much more easily become a showstopper if they’re not made highly accessible.
The importance of forms, in particular, should never be underestimated. Forms often represent the culmination of a web experience for both user and site creator — think about submitting an application or completing an e-commerce transaction as examples. Forms are not a place where site creators want to take chances with user experience. Although aria-describedy can be an excellent tool in the right circumstances, it’s one to approach with caution – at least until it’s more widely and robustly supported.
QUICK INSIGHT: Alt text and ARIA tags, though distinct, work together to enhance web accessibility. Alt text describes images, while ARIA tags provide context for other elements. Used in tandem, they create a web experience that’s more accessible and user-friendly, particularly for screen reader users.
What is an ARIA tag?
This technique is all about making sure that people using screen readers or other assistive tech can understand what different parts of a website are for. Think of `aria-label` like a hidden description tag that you can add to things like buttons. When someone using a screen reader hovers over a button with `aria-label`, the screen reader will read out whatever text you put in that label, so the user knows what the button does.
But, there’s a catch. Sometimes, if you use another tag called `aria-labelledby` on the same thing, the screen reader might ignore your `aria-label`. It’s like having two different name tags on a single item – the screen reader might get confused about which one to read.
If you want to dive deeper into how these tags work together, check out the ARIA specification and the guide on how HTML turns into screen reader-friendly text.
QUICK INSIGHT: An example of using `aria-label` could be for a search button on a website. If the button only displays a magnifying glass icon with no text, you can add an `aria-label` like this: `<button aria-label=”Search”>🔍</button>`. This way, screen readers will announce “Search button” to users, making it clear what the button is for, even though there’s no visible text.
UserWay: For ARIA made easier
Step into the world of digital accessibility with UserWay, a pioneer in championing the best practices of ARIA and aria describedby for web accessibility.
At the heart of UserWay’s ethos is a commitment to making the web welcoming for everyone.
Take advantage of our products and services to build clarity into your site’s descriptions to make your digital content more accessible to people with disabilities. Get started with a demo today and make ARIA easier for everyone.
FAQ
Why do we use ‘aria-label’ in websites?
“Aria-label” is used to provide a text label for elements, especially for those without visible text, making them understandable to screen readers.
What exactly are ‘aria tags’?
Aria tags are special attributes in HTML that improve web accessibility by describing elements and their purpose to assistive technologies.
What’s the difference between ‘button aria-label’ and ‘aria-label for link’?
Button aria-label” describes the purpose of a button, while “aria-label for link” provides a clear description of where a link will take you, both crucial for screen reader users.
Share