This document gives information about the related Monsido checks:
Menuitem has non-empty accessible name
Link has non-empty accessible name
Iframe element has non-empty accessible name
Button has non-empty accessible name.
What
User input controls, including links, buttons, menu items, and iframes need to have an accessible name that is defined within the HTML code of the web page. The assigned accessible name should clearly indicate the purpose of the user input control for assistive software like screen readers.
Why
Accessible names for user input controls help users of assistive software understand the function or purpose of each control. Add descriptive accessible names to ensure that all users, including those with disabilities, can effectively interact with and navigate through the information and functionalities in your website.
Without accessible names, users that rely on assistive technologies may struggle to understand or use the controls, which leads to frustration, confusion, and potentially prevents them from accessing essential features or content on your website.
Affected Users
This check affects individuals with
Sight-impairments; Who access the site contents with a screen reader or screen magnification software.
Motion-impairments; Who navigate the page with speech recognition software.
User Story
Sandra is 38 years old. At the age of 16, her life took an unexpected turn during a sports accident on the basketball court. While attempting a daring dunk, she landed in an awkward manner, resulting in a spinal cord injury. Unfortunately, this event left her paralyzed from the waist down.
“I prefer to use voice commands for my computer rather than a mouse. It really hurts if I have to mess around with the mouse too much. When everything works well, I can just tell the computer what button to click, like "Click new appointment" when I'm setting up a new booking for one of my clients. But sometimes, it just doesn’t work on websites. I don’t know all the technical stuff, but it’s something about the buttons not being labeled properly, so I can’t tell the computer to activate them. When that happens, I have to use the mouse. I can do it, but it takes me three times as long, and if I overdo it, the pain kicks in.”
Examples
Example – buttons with describing accessible names
A service website includes a chat function that allows users to ask questions to the company’s customer service. The user interface features buttons with icons that provide access to the following functions: Start Chat, Attach File, Add Emoji, Clear Chat, and Send. Because the user interface controls have accessible names, screen reader programs used by blind individuals can communicate button functions in a meaningful way to users who cannot visually see the icons.
The image shows how the screen reader presents a list of named elements that match the icons in the chat function's user interface.
Example – buttons with none-describing accessible names
A service website includes a chat function that allows users to ask questions to the company’s customer service. The user interface features buttons with icons for functions like Start Chat, Attach File, Add Emoji, Clear Chat, and Send. However, the user interface controls do not have accessible names. As a result, the screen reader only shows a list of unnamed buttons. This means that users who rely on screen readers hear only generic descriptions like "Unlabelled button," which makes it impossible for them to understand the specific function of each icon.
The image shows how the screen reader presents these buttons without meaningful descriptions, which leads to confusion and difficulty in navigating the chat function.
How
How to fix it?
The Monsido platform highlights user input controls that do not have an accessible name.
There are several ways to add accessible names to user input controls. Here are some examples of how you can do it.
The aria-label can be used to set an accessible name for a button.
<button aria-label="Send email">
<img src="send-email-icon.png" alt=""/>
</button>
The aria-label can be used to set an accessible name for a link that doesn’t have text in it.
<a aria-label="Contact us at">
<img src="social-media-icon.png" alt=""/>
</a>
The aria-label can be used to set an accessible name for a menu item that doesn’t have text in it.
<a role=”menuitem” aria-label="Get more info">
<i class=”info icon”></i>
</a>
The title attribute can be used to set an accessible name for an iframe.
<iframe src="https://example.com" title="Good describing accessible name for embedded content"></iframe>
Note: There may be other ways to fix errors in these checks. For a comprehensive technical description of the error checks, see the "ACT rules" section below.
Additional Resources
For instructions on how to review an accessibility issue and set it to Reviewed, see the user guide article:
WCAG success criteria
ACT rules
Related accessibility conformance testing rules.