1

I am struggling to make the div with aria-label accessible.

<main>
    <h1>Heading</h1>
    <input type="text" placeholder="text">
    <p>Lorem ipsum dolor sit amet labore culpa! Ipsam.</p>
    <div role="region" aria-label="content summary">
        summary
    </div>
    <button>Go back</button>
</main>

I tried aria-describedby and aria-labelledby, but those did not work either.

Improve this question
1
  • Hello. Would you mind taking a look at the two answers that remain? tabindex is not really a valid solution here. I just noticed that in the example code, the <input> is lacking a label. It’s not important to your issue, but a very fundamental usability issue. Commented Jun 5, 2024 at 7:36

2 Answers 2

Reset to default
1

Very quick answer

The label/description isn't read because the div isn't focusable/interactive nor landmark. Attributes aria-label/aria-description/aria-labelledby/aria-describedby are only guaranteed to be read if the element is whether focusable/interactive or a landmark.

About focusable/interactive elements

To answer to the other answer, making an element focusable with tabindex=0 is the right way to do only if the element is interactive, for example if clicking on it perform some action. Typical interactive elements include buttons, links and form fields.

Simple paragraphs of text are usually not interactive, nothing happens when clicking on them. Elements that aren't interactive shouldn't be focusable. Otherwise, keyboard-only and screen reader uses navigating with tab won't understand and will think that the page isn't working properly. They expect a focusable element to react on user action such as click, key press, etc.

But it isn't correct to artificially make the element focusable with tabindex=0 if the element isn't really interactive. As explained above, it creates a bad UX for keyboard-only or screen reader users who will believe that it doesn't work.

IF you wonder how a screen reader can read non-focusable elements, remember that screen rader users have specific keyboard shortcuts or gestures to go through the contents, and keep also in mind that system focus and reading focus aren't the same. Jaws call them respectively form mode and virtual cursor, NVDA call them focus mode and document mode. I don't know the official names given by Apple, but the same difference exists.

ABout headings and landmarks

IN the example presented above, it looks like the element is just ordinary text, it isn't interactive. It even quite strongly smells a false heading, i.e. it's a heading, but not tagged with the appropriate markup (H1-H6).

So a more appropriate solution would probably be to effectively make it a heading, or maybe a landmark.

IF you go for making a heading, naturally, your div will become H1-H6. The label/description won't be read, as currently (as headings aren't interactive and shouldn't usually be). You will need to put it into a visually hidden text (search for .sr_only/.visually-hidden) to make the text readable.

If you go for making a landmark, you can simply add an appropriate role. But by the first rule of ARIA, it is much better to don't put any explicit role and use a more specific element having a landmark function, such as section, article, header, footer, aside, instead of div. These elements don't need any role because they have an implicit one. If the element is a landmark, the label and description will be read, it's even a good practice for a landmark to have a label.

Screen reader users can navigate quickly through headings and landmarks, from one to the next or by choosing one in a list. They are very important for the structure of the page.

For the best accessibility, you should use both, so all screen reader users can use their preferred way to navigate (by heading or by landmark).

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

In the question, the div is a landmark. Maybe it was changed afterwards?
Oh, well, maybe, maybe not. I haven't noticed it before, thank you! But isn't "region" a generic/abstract role? This could also explain while it still doesn't work.
I thought so too, but it isn’t. And I believe it did work, but the poster didn’t know how to use it, as they accepted adding a tabindex as the correct answer.
It's very well possible. Outside directly concerned people, very few know the basics of screen readers, and so don't know well how to test either. Your answer is a good complement to mine. I have no mac so I can't test myself.
0

The issue here is not in the markup, but in usage of the screen reader. The example from the question is already accessible.

Landmarks like role="region" are not meant to be navigated to by means of Tab. Only interactive elements should be focusable.

Screen readers provide other means of navigation, mainly landmark navigation. In VoiceOver, landmarks can be navigated to with the Rotor.

As the First rule of ARIA use states, you should use a HTML element, instead of a role attribute, whenever one is existing:

<section aria-label="content summary">
  summary
</section>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.