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

Html – Referencing an input with a label by aria-labelledby

If I have an input with its aria-label set to 1 and an associated label set to 2, what will be calculated as aria label of an element, referencing the input?

<input type="radio" id="cpp-search-video-btn" aria-label="1" role="tab">
<label for="cpp-search-video-btn" aria-hidden="true">2</label>
<div id="cpp-search-video-tab" aria-labelledby="cpp-search-video-btn" role="tabpanel">…</div>

What’s the aria label of the div#cpp-search-video-tab: 1, 2, or, maybe, unset? (I want it to be "1").

As far as I see, there is no information on substitutions at MDN.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Well, if I get it right and “Accessibility” pane in DevTools shows the aria label in the “Computed Properties” → “Name” section, the answer is “1”.


  2. 0

    The answer is indeed 1. ATtribute aria-labelledby has priority over aria-label, which itself has priority over <label>. See MDN

    If an element has both attributes set, aria-labelledby will be used. aria-labelledby takes precedence over all other methods of providing an accessible name, including aria-label, <label>, and the element’s inner text.

    However, if I can add another comment on your code:

    <input type="radio" id="cpp-search-video-btn" aria-label="1" role="tab">
<label for="cpp-search-video-btn" aria-hidden="true">2</label>

    It would be better to avoid using aria-hidden and ARIA at all if possible. The following code would be qualitatively better as pair the first rule of ARIA: don’t use it, unless you really need.

    <input type="radio" id="cpp-search-video-btn" role="tab">
<label for="cpp-search-video-btn">1</label>

    Or maybe at least:

    <input type="radio" id="cpp-search-video-btn" role="tab">
<label for="cpp-search-video-btn"><span class="sr_only">1</span><span aria-hidden="true">2</span></label>

    More generally, if you have a real <label>, there shouldn’t be any need to override it with aria-label. Otherwise it doesn’t make much sense to have the <label> at the first place.

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

Back To Top
Search