aria-scribedby 和多级 html 标签

Question

Here is an example using aria-describedby

<div role="application" aria-labelledby="calendar" aria-describedby="info">
    <h1 id="calendar">Calendar</h1>
    <p id="info">
        This calendar shows the game schedule for the Boston Red Sox.
    </p>
    <div role="grid">
        ...
    </div>
</div>

Say I changed to this:

<div role="application" aria-labelledby="calendar" aria-describedby="info">
    <h1 id="calendar">Calendar</h1>
    <div id="info">
        <svg />
        <div></div>
        <div>
          <p>This calendar shows the game schedule for the Boston Red Sox.</p>
        </div>
    </div>
    <div role="grid">
        ...
    </div>
</div>

Is screen reader like NVDA still announces This calendar shows the game schedule for the Boston Red Sox same as the first example?

Answer 1

Short Answer

The examples would both be announced as " calendar , This calendar shows the game schedule for the Boston Red Sox.** in the majority of screen reader / browser combos . This is assuming the SVG is handled correctly and the empty div you added is indeed empty (see end of this answer).

Long Answer

aria-labelledby would be announced first, with aria-describedby announced second in most screen readers .

They are not normally used together on the same element as both can contain a list of IDs to announce.

I would suggest that for ease of maintenance you change it to:-

aria-labelledby="calendar info" , this would ensure reading order is consistent across all browser / screen reader combinations.

Although they would (should) be announced the same from your given example, this is assuming that you hide the SVG from screen readers with aria-hidden="true" . It also assumes that the <div> you added is indeed empty (and not just a placeholder).

As an aside make sure you also add focusable="false" to your SVG to account for Internet Explorer users (otherwise they can focus the SVG). Nothing to do with the announcement issue in this question just a good practice.

I would suggest your second example should be marked up as follows to save a lot of hassle and to allow the SVG to be part of the document if you wish:-

<div role="application" aria-labelledby="calendar info">
    <h1 id="calendar">Calendar</h1>
    <div>
        <svg focusable="false" aria-hidden="true"/>
        <div></div>
        <div id="info">
          <p>This calendar shows the game schedule for the Boston Red Sox.</p>
        </div>
    </div>
    <div role="grid">
        ...
    </div>
</div>

Final thought

Do you really need the <h1 id="calendar" to be read out at all? Your description says "This calendar ` at which point stating "Calendar" before is redundant.

Always try to avoid repetition.

If this is the case then you can simplify your example further to just have aria-labelledby="info" .

Also one last observation role="application" is something that should be used sparingly as it causes all keyboard events to skip the screen reader and go straight to your application. Be very careful using this as in most circumstances it is not needed and can cause a lot of accessibility headaches. Here is a brief article that explains a bit more about the pros and cons of the role.

If you remove role="application" then the aria-labelledby may not work on a static div so replace it with an appropriate role.