Does aria-label prevent the inner content being read out by assistive devices?
aria-label for links
aria-label vs alt text
The MDN docs say you should use
aria-label like this:
<button aria-label="Close" onclick="myDialog.close()">X</button>
I don't have access to a screenreader, but I've seen comments on Stack Overflow suggesting that an
aria-label does not replace the inner content, it only prefixes it. So in the above case it would read out "Close X", which is obviously not ideal.
Is this true? If so, what's the solution? I'm guessing it would make sense to wrap the inner content with an
[aria-hidden=true] element, like this:
<button aria-label="Close" onclick="myDialog.close()"><span aria-hidden="true">X</span></button>
...but I'm cautious because I can't test it on a real screenreader.
In most situations, the aria-label will be read out instead of the link's text.
This is actually a standard test scenario, and has extensive test results on powermapper: https://www.powermapper.com/tests/screen-readers/labelling/a-aria-label/
On the test results page, you can also hear the screen reader output.
Using the aria-label attribute, does not imply that the technology can be used in all situations to create content that meets WCAG 2.0. User Agent and Assistive Technology Support Notes In some situations, elements can be given the attribute aria-label to provide an 6 Async-loaded scripts with DOMContentLoaded or load event handlers not being called? Apr 25 '18 5 Does aria-label prevent the inner content being read out by assistive devices?
Instead of relying on blog posts or misinterpreting specs, I think it's better to actually test things rather than come to a conclusion and trying to remember everything about ARIA.
You can test what the accessible name of an element is, for e.g. if you use Google Chrome (hopefully other browsers include accessibility testing tools):
- Open dev tools (e.g. F12 on Windows).
- Select the element (with the pointer or ctrl + shift + c)
- Click the Accessibility tab (here you can view the Accessibility tree, ARIA attributes and Computed properties.
ARIA14: Using aria-label to provide an invisible label where a , Technologies supporting WAI-ARIA. of this technique is to describe the purpose of a link using the aria-label attribute. In some assistive technologies the aria-label value will show in the list of links aria-label allows us to specify a string to be used as the accessible label. This overrides any other native labeling mechanism, such as a label element — for example, if a button has both text content and an aria-label , only the aria-label value will be used.
Using aria-label for link purpose, If the role is a static role then aria-label will be ignored by all screen readers except It is clear that different assistive technologies are interpreting this differently. It is inside a fieldset element. In cases like this, you should use the aria-label attribute to provide text labels so that users of screen readers and other adaptive technologies can understand what the object is used for. In cases where we use an X, or X as a close button, it is especially important to have an aria label of “Close button” as a screen reader will otherwise read ‘multiplication’ or 'X’ to its user.
I came across this while fine-tuning an app to better support the JAWS screen reader.
I hope to help anyone else who comes across this question by pointing out that macOS has a perfectly functional screen reader built in called VoiceOver (VO) which can be activated with cmd+F5.
Alternatively, macOS users can install Windows (https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/) through free software like VirtualBox (https://www.virtualbox.org/), which is perfectly adequate for testing with the likes of NVDA and even JAWS if you or your organisation are willing to pay for the licence fee.
The moral of my answer is that you CAN just hop over to a Windows machine to check it works not just on a screenreader, but also the myriad Windows web browsers that I'm sure a varying percent of your visitors use - web dev DOES work like that.
UPDATE: while I understand the down votes due to my answer not actually answering callum's question, I feel comments such as on "Mar 22 at 11:41" have a negative impact on the community and need addressing. If I have opened just one developer's mindset to cross-OS and accessibility testing it was worth it.
What happens when aria-label, aria-labelledby and aria , Using ARIA labels to create accessible element Alice is a contributor to WebFundamentals if a button has both text content and an aria-label , only the aria-label of an element allows us to tell assistive technology that an No single treatment or intervention is the answer for every child or family. Good intervention plans will include close monitoring, follow-ups and any changes needed along the way. There are many different options for children with hearing loss and their families.
ARIA Labels and Relationships | Web Fundamentals, In situations where text that is different from the anchor text needs to be rendered to aid vision impaired The paper discusses reasons for abandonment of AT-devices (assistive technology-devices) and the shaping of action by technologies.
Text link Accessibilty: aria-label and title, Aria-label is a simple attribute to directly set the text that is read by the assistive technology. Aria-labelledby makes a Hearing loss can be a safety issue, but these special alerting devices are available to wake you, indicate a visitor at the door or warn you of an emergency. Learn about the types of alerting devices for people with hearing loss.
Assistive technologies, Doing so will visually hide content, as well as remove it from being discovered by assistive technologies. Semantics. In the previous section, we looked at semantics and all the benefits we get by writing semantic HTML.We touched briefly on accessibility, but there are a lot of accessibility wins to be had that we will see in more detail here.
- Why can't you test on a screenreader? NVDA is a free screenreader. I've tested it in IE, Chrome, and FF on Windows and it works great for testing your accessibility work. If you haven't tested your site/app using an actual screenreader, you're going to be in for some surprises.
- Like most web developers (in Europe/US at least), I use macOS to develop. It sucks that there is no good screenreader available for macOS. It's not a question of just hopping over to a Windows machine to check it works on a screenreader; web dev just doesn't work like that. The quality standard of accessibility is never going to get higher while no serious screenreader software is available for the OS that web developers actually use.
- Thanks for answering. But these official guidelines recommend using
[role=tablist]element to explain the purpose of the set of tabs. Such labelling would obviously be supplementary information; the intention is surely not to override the text nodes within (i.e. the individual tab titles), as that would make the tabs unusable in screenreaders. This makes me doubt your conclusion that
aria-labeloverrides inner text nodes.
- All UI components are expected to behave differently, I don't understand why you are making this about tabs all of a sudden. Also, what the aria-label in that context does, is it gives the [role="tablist"] element an accessible name. It does not override the text-node of the buttons.
- Here's a practical guide for developers on how to add accessibility to html: https://www.w3.org/TR/aria-in-html/
- I'm not making it about tabs all of a sudden. The question is about
aria-labelgenerally – does it replace or supplement inner content? I used
buttonas an example because it's a simple case, but I'm interested in anywhere the attribute can be used.
- Your Edit#2 suggests aria-label overrides only text nodes that are direct children of the aria-labelled element. What about something like
<button>Go to our <span class="big">homepage</span></button>? I can't believe it would treat the span as semantically separate from the direct text node.