How to relate two elements for accessibility?

Question

I have following layout in my web application:

To make it accessibility compliant, is there a need to relate "Al Allbrook" with "Requester" label? If so, how we can achieve that?

"Al Allbrook" is a link to user profile.

If they are not related, how come srceen reader will know "Al Allbrook" is a requester? Same in case of "Site".

Answer 1

In additon to what @andy said, you could also use a table. The first column could have a "requestor" table heading (<th scope="col">). The heading itself could be visually hidden if you don't want it to "clutter" the display but still be available to screen reader (SR) users. The second column would be something like "contact info" and the last column is "site". This allows a SR user to navigate across the row of the table and they'll hear the column heading before the data cell.

Of course, you can do a combination of these techniques. Have a table and have extra information on the links. I would recommend aria-labelledby instead of aria-describedby . While both attributes will cause the extra information to be read by a SR (*), only the aria-labelledby attribute will be displayed in the list of links.

(*) Some SRs announce the aria-describedby attribute directly but other SRs will just tell you that there is a description associated with the link and you have to hit a different shortcut key to hear the description.

The nice thing about both attributes is that the element can refer to itself as part of the label. Kind of a recursive labeling but the " Accessible Name and Description Computation " rules handle the recursion.

if computing a name, and the current node has an aria-labelledby attribute that contains at least one valid IDREF, and the current node is not already part of an aria-labelledby traversal , process its IDREFs in the order they occur

It's probably easier to see an example of this.

<span id="comma" style="display:none">,</span>
...
<span id="requestor">Requestor</span>
<a href="#" id="myself" aria-labelledby="myself comma requestor">Al Allbrook</a>

Several things to note.

• First is that the link is referring to itself in the aria-labelledby attribute (the 'myself' id).
• Second is that I'm using a trick with screen readers by adding a comma in the label, "Al Allbrook, Requestor" so that the SR has a slight pause when reading the label, "Al Allbrook <pause> Requestor", rather than hearing it as if the guy's name was "Al Allbrook Requestor". Note that the comma itself has display:none so it's not visible, but since the comma element's ID is listed in aria-labelledby , it'll still be used. (See rule 2A in the Accessible Name url above)
• Lastly, my example used a <span> for "Requestor" but you might want it to be a heading (<h3> or <h4> or whatever level is appropriate) instead.

For example:

<span id="comma" style="display:none">,</span>
...
<h3 id="requestor">Requestor</h3>
<a href="#" id="myself" aria-labelledby="myself comma requestor">Al Allbrook</a>

And then all this code could be in a <td> if you're using a table.

Answer 2

There is different ways to navigate through a site with a screenreader, so it depends on the navigation mode the user is using at the moment.

1. In DOM order

   In this case, if your "Requester" is before the link in DOM, it will be read before the person's name. Also, the text right before and after a link can be read by means of certain shortcuts.

2. By accessing a list of links

   There is different lists screen reader users can request, fe list of all headers, or a list of all links on the page.

If it's important to you to have the "requester" read when navigating to the link directly, you can link the two elements by means of aria-describedby or aria-labelledby .

Alternatively, you could add the text again to the link itself, hidden visually. Like "Al Allbrook, Requester".