Quais são esses atributos: `aria-labelledby` e` aria-hidden`

Usando o modal Bootstrap, eu já vi ariamuitos desses atributos, mas nunca soube usá-los.

Alguém sabe quais casos usar esses atributos? Pesquisei no Google - apenas não encontrei respostas diretas.

O atributo HTML5 ARIA é o que você está procurando. Ele pode ser usado no seu código mesmo sem a inicialização.

Os aplicativos ARIA (Rich Internet Accessible) acessíveis definem maneiras de tornar o conteúdo e os aplicativos da Web (especialmente aqueles desenvolvidos com Ajax e JavaScript) mais acessíveis às pessoas com deficiência.

Para ser preciso para sua pergunta, eis como seus atributos são chamados de estados e modelo de atributos ARIA

aria-labelledby: Identifica o elemento (ou elementos) que rotula o elemento atual.

aria-hidden (state): Indica que o elemento e todos os seus descendentes não são visíveis ou perceptíveis para qualquer usuário, conforme implementado pelo autor.

Os principais consumidores dessas propriedades são agentes de usuários, como leitores de tela para pessoas cegas. Portanto, no caso de um modal Bootstrap, o modal divpossui role="dialog". Quando o leitor de tela perceber que a divtorna - se visível e que tem esse papel, ele falará o rótulo para isso div.

Existem várias maneiras de rotular as coisas (e algumas novas com a ARIA), mas em alguns casos é apropriado usar um elemento existente como uma etiqueta (semântica) sem usar a <label>tag HTML. Nos modais HTML, o rótulo geralmente é um <h>cabeçalho. Portanto, no caso modal do Bootstrap, você adiciona aria-labelledby=[IDofModalHeader], e o leitor de tela falará esse cabeçalho quando o modal aparecer.

De um modo geral, um leitor de tela notará sempre que os elementos DOM se tornarem visíveis ou invisíveis, portanto a aria-hiddenpropriedade é frequentemente redundante e provavelmente pode ser ignorada na maioria dos casos.

aria-hidden="true"ocultará itens decorativos, como ícones de glifo, dos leitores de tela, que não possuem pronúncia significativa para não causar confusão. É uma boa coisa fazer por boas práticas.

O ARIA não altera a funcionalidade, apenas altera as funções / propriedades apresentadas para os usuários do leitor de tela. A barra de ferramentas WAVE do WebAIM identifica funções ARIA na página.

Aria é usado para melhorar a experiência do usuário de usuários com deficiência visual. Usuários com deficiência visual navegam pelo aplicativo usando software leitor de tela como JAWS, NVDA, etc. Enquanto navegam pelo aplicativo, o software leitor de tela anuncia o conteúdo para os usuários. O Aria pode ser usado para adicionar conteúdo ao código, o que ajuda os usuários de leitores de tela a entender a função, o estado, o rótulo e a finalidade do controle.

Aria não muda nada visualmente. (Aria também tem medo de designers).

oculto por ária:

O atributo aria-hidden é usado para ocultar o conteúdo de usuários com deficiência visual que navegam no aplicativo usando leitores de tela (JAWS, NVDA, ...).

O atributo aria-hidden é usado com valores true, false.

Como usar:

<i class = "fa fa-books" aria-hidden = "true"></i>

usar aria-hidden = "true" no <i>conteúdo oculto para usuários de leitores de tela sem nenhuma alteração visual no aplicativo.

rótulo de ária

O atributo aria-label é usado para comunicar o rótulo aos usuários do leitor de tela. Normalmente, o campo de entrada de pesquisa não possui rótulo visual (graças aos designers). ária-label pode ser usada para comunicar o rótulo de controle aos usuários de leitores de tela

Como usar:

<input type = "edit" aria-label = "search" placeholder = "search">

Não há alteração visual no aplicativo. Mas os leitores de tela podem entender o propósito do controle

aria-labelledby

Tanto o rótulo da ária quanto o rótulo da ária são usados ​​para comunicar o rótulo. Porém, aria-labelledby pode ser usado para fazer referência a qualquer rótulo já presente na página, enquanto aria-label é usado para comunicar o rótulo que eu não exibi visualmente

Abordagem 1:

<span id = "sd"> Search </span>

<input type = "text" aria-labelledby = "sd">

aria-labelledby também pode ser usado para combinar duas etiquetas para usuários de leitores de tela

Abordagem 2:

<span id = "de"> Billing Address </span>

<span id = "sd"> First Name </span>

<input type = "text" aria-labelledby = "de sd">