4

Regarding making something like the following accessible, currently I have the following:

<div tabindex="0" aria-labelledby="key1" aria-describedby="value1">
    <label id="key1">Current User:</label>
    <span id="value1">BBRENNAN</span>
</div>

Is it necessary for this block to be focusable with tabindex="0"? Or can screen readers infer this relationship more naturally? I understand screen readers can usually find and read text, but it's not clear to me how to ensure that I convey the relationship between Current User and BBRENNAN.

EDIT: I was just looking into definition lists, which seem closer to what I need. You could also perhaps argue that this is tabular data, and should use a table. Totally fine if these solutions are indeed the best practices, but one thing I like about aria-labelledby and aria-describedby is that focusing the outer div reads the whole thing nicely in NVDA. So the above would read as "Current User, BBRENNAN."

Definition lists for some reason read as "List with 2 items, current user." Tables just let me use arrow keys to move the reader between cells, which also doesn't achieve what I describe above. Link for a 5 year old thread on this very topic: https://webaim.org/discussion/mail_thread?thread=7089

TylerH
  • 20,799
  • 66
  • 75
  • 101
bbrennan
  • 41
  • 3

2 Answers2

1

The general rule is only interactive elements should be tabbable. So unless your user list item is clickable, then you should remove the tabindex. Having too many things tabbable can make navigating your site unnecessarily difficult. Here's a guide that has some good recommendations for keyboard navigation:

https://webaim.org/techniques/keyboard/

Sighted mouse users are able to visually scan a web page and directly click on any item. Keyboard users must press the Tab key or other navigation keys to navigate through the interactive elements that precede the item the user wants to activate. Tabbing through lengthy navigation may be particularly demanding for users with motor disabilities.

frodo2975
  • 10,340
  • 3
  • 34
  • 41
  • Thanks! This makes sense to me, but I'm still left wondering about how to communicate this key-value relationship. Any suggestions for best practices there? – bbrennan Jan 31 '20 at 19:16
  • Hmm, not sure, but maybe check out this question here: https://stackoverflow.com/questions/29305534/proper-aria-attribute-for-field-value-pairs-outside-of-a-table – frodo2975 Jan 31 '20 at 19:38
0

Web accessibility is about more than people with visual disabilities that have to rely on screen readers like NVDA.
Web accessibility should encompass all disabilities that affect access to the Web and there are a lot of possible disabilities – and having one disability does not necessarily mean a person has no other disabilities. Sadly, screen readers do not always behave the same way (as this example on required input fields shows and as it is mentioned in the email list you linked) and some browsers work better with certain screen readers (here and here is more information about screen readers and what you should keep in mind).

Even though the definition list (<dl>) does not seem to work properly, using <label> is not the proper way to do this, as labels are intended for labeling input fields.

Text does not need to be focusable as frodo2975 already answered correctly "[t]he general rule is [that] only interactive elements should be tabbable". However, that does not necessarily mean it should be clickable – interactive can also mean scrollable, for example.

I think the best solution would be to simply use a generic element like a <div> or a <span>: 

<div>Current user: <span class="current-user">BBRENNAN</span></div>

Separating the actual user name in its own <span> is not necessary but would allow you to easily identify the element using JavaScript or CSS, if needed.

However this really depends on the concrete use case: What is the intended use of this? Is it a hint for users so they know with which user they are currently logged in? Or something like a marker that tells users who is currently working on a task or something like that?

Update:
Regarding your comment that you want a reusable component for displaying "key value pairs, usually in a row" I would suggest using a <table>:

<table>
  <tr>
    <th>Current user:</th>
    <td>BBRENNAN</td>
  </tr>
</table>

It is the natural choice, as tables are intended to represent data.

qutax
  • 828
  • 1
  • 11
  • 20
  • To comment on the use-case, this is for a reusable component that displays some high level key value pairs, usually in a row. Most usages have no more than 2 or 3 such "data wells," which is part of why I want them to be highly discoverable. – bbrennan Jan 31 '20 at 18:57
  • okay, I thought it was just this one element. How about a ``? It can have `
    ` elements describing labels like "Current user" and `` elements for the data. If you are displaying data, tables are the natural choice, as representing data is what they're supposed to do.
     – qutax Jan 31 '20 at 19:30