Html Question posted in
Some basic documentation can be found here.

Html – Making a Div element accessible to voice over on Mac

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.

Tags:

2

Answers


  1. 0

    Without the tabindex attribute, a <div> element is not inherently focusable. This means that most screen readers, including VoiceOver, may not navigate to it.

    Here’s how you can ensure that the VoiceOver reads the div:

    <div role="region" aria-label="content summary" tabindex="0">
    summary
</div>
    Login or Signup to reply.
  2. 0

    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).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search