In order for screen reader users to be able to properly navigate and access content, you need to architect and develop navigation and content presentation with screen readers in mind.
To avoid much work afterwards, make sure you actually check your application with a screen reader regularly during development.
Also, screen readers behave differently on mobile phones than desktop browsers. So, use both in your frontend tooling.
Focus Highlight for NVDA
If you are using NVDA on Windows to test your application, there is an NVDA add-on, called Focus Highlight, showing the current focus visually. This makes it so much easier to navigate and understand where you currently are in the context.
Images and illustrations
Example usage of
aria-hidden. There is no one fits all. It depends on the situation what accessibility features you have to prefer over others. But in general:
Try to use HTML 5 first, and use ARIA as sugar on top.
Some random examples of image and illustration usage:
<a class="dnb-anchor" aria-label="descriptive text" href="/action"><svg aria-hidden="true">icon only ...</svg></a><a class="dnb-anchor" href="/action"><svg><title>descriptive text</title>icon only ...</svg></a><img role="presentation" aria-label="descriptive text" src="..." /><svg role="img" alt="descriptive text" src="..." /><figure><img alt="image alt" src="..." aria-hidden="true" /><figcaption>Descriptive text <cite>reference etc.</cite></figcaption></figure><object data="..." aria-labelledby="figure-id" /><label id="figure-id">descriptive text</label>
Usage of aria-label, aria-labelledby, and aria-describedby
There are limitation when on where you can use
aria-describedby attributes, because they do not work consistently with all HTML elements.
aria-labelledby attributes can be used to give an element an accessible name.
aria-describedby attribute can be used to give an element an accessible description.
Do not use
aria-describedby with any other elements like:
they generally won’t work across all assistive technology combinations (screen readers).
Where can I use them?
aria-describedby attributes can be used with:
- interactive HTML elements like
<a>(when the href attribute is present),
video(when the controls attribute is present),
input(unless they are of type="hidden"),
- elements that have a landmark role – either implicit (
form) or explicitly set via the role attribute.
- elements that have an explicit widget role applied, using the role attribute – there are 27 widget roles in ARIA 1.1, including
- elements like