Início / coding / Perguntas / 79224620
Accepted
Shtole
Asked: 2024-11-26 05:17:11 +0800 CST

Referenciando uma entrada com um rótulo por aria-labelledby

  • 772

Se eu tiver uma entrada com seu aria-labelconjunto definido como 1e um rótulo associado definido como 2, o que será calculado como rótulo de ária de um elemento, referenciando a entrada?

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

Qual é o rótulo da ária div#cpp-search-video-tab: 1, 2 ou, talvez, não definida? (Quero que seja "1").

Até onde vejo, não há informações sobre substituições no MDN .

html

2 respostas

  1. Best Answer

    A resposta é de fato 1. O atributo aria-labelledby tem prioridade sobre aria-label, que por sua vez tem prioridade sobre <label>. Veja MDN

    Se um elemento tiver ambos os atributos definidos, aria-labelledby será usado. aria-labelledby tem precedência sobre todos os outros métodos de fornecimento de um nome acessível, incluindo aria-label, <label>e o texto interno do elemento.

    Entretanto, se eu puder adicionar outro comentário ao seu código:

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

    Seria melhor evitar usar aria-hidden e ARIA se possível. O código a seguir seria qualitativamente melhor como par da primeira regra do ARIA: não use, a menos que você realmente precise.

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

    Ou talvez pelo menos:

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

    De forma mais geral, se você tem um real <label>, não deve haver necessidade de sobrescrevê-lo com aria-label. Caso contrário, não faz muito sentido ter o <label>em primeiro lugar.

    • 1

  2. Bem, se eu entendi direito e o painel “Acessibilidade” no DevTools mostra o rótulo aria na seção “Propriedades Computadas” → “Nome”, a resposta é “1”.

    • 0

relate perguntas