Eu tenho visto o atributo ária por todo o lado enquanto trabalhava com material angular. Alguém pode me explicar, o que o prefixo ária significa? mas o mais importante é que estou tentando entender a diferença entre aria-hiddene hiddenatributo.

O ARIA (Aplicativos Acessíveis da Internet Rico) define uma maneira de tornar o conteúdo e os aplicativos da Web mais acessíveis às pessoas com deficiência.

O hiddenatributo é novo no HTML5 e diz aos navegadores para não exibir o elemento. A aria-hiddenpropriedade informa aos leitores de tela se eles devem ignorar o elemento. Veja os documentos do w3 para obter mais detalhes:

https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden

O uso desses padrões pode facilitar o uso da web por pessoas com deficiência.

Um atributo oculto é um atributo booleano (Verdadeiro / Falso). Quando esse atributo é usado em um elemento, ele remove toda a relevância para esse elemento. Quando um usuário visualiza a página html, os elementos com o atributo oculto não devem estar visíveis.

Exemplo:

    <p hidden>You can't see this</p>

Os atributos ocultos por ária indicam que o elemento e TODOS os seus descendentes ainda estão visíveis no navegador, mas serão invisíveis para ferramentas de acessibilidade, como leitores de tela.

Exemplo:

    <p aria-hidden="true">You can't see this</p>

Dê uma olhada nisso . Deve responder a todas as suas perguntas.

Nota: ARIA significa Aplicativos Acessíveis da Internet Rico

Fontes: Grupo Paciello

Diferença Semântica

De acordo com o HTML 5.2 :

Quando especificado em um elemento, [o hiddenatributo] indica que o elemento ainda não é, ou não é mais, diretamente relevante para o estado atual da página ou que está sendo usado para declarar que o conteúdo será reutilizado por outras partes da página como em vez de ser acessado diretamente pelo usuário.

Os exemplos incluem uma lista de guias em que alguns painéis não são expostos ou uma tela de logon que desaparece após o usuário efetuar login. Gosto de chamar essas coisas de "relevante temporalmente", ou seja, são relevantes com base no tempo.

Por outro lado, o ARIA 1.1 diz:

[O aria-hiddenestado] indica se um elemento está exposto à API de acessibilidade.

Em outras palavras, os elementos com aria-hidden="true"são removidos da árvore de acessibilidade , que a maioria das tecnologias assistenciais honra, e os elementos com aria-hidden="false"certeza serão expostos à árvore. Elementos sem o aria-hiddenatributo estão no estado "indefinido (padrão)", o que significa que os agentes do usuário devem expô-lo à árvore com base em sua renderização. Por exemplo, um agente do usuário pode decidir removê-lo se a cor do texto corresponder à cor do plano de fundo.

Agora vamos comparar a semântica. É apropriado usar hidden, mas não aria-hidden , um elemento que ainda não é "relevante temporalmente", mas que pode se tornar relevante no futuro (nesse caso, você usaria scripts dinâmicos para remover o hiddenatributo). Por outro lado, é apropriado usar aria-hidden, mas não hidden, um elemento sempre relevante, mas com o qual você não deseja desorganizar a API de acessibilidade; esses elementos podem incluir “talento visual”, como ícones e / ou imagens que não são essenciais para o usuário consumir.

Diferença efetiva

A semântica tem efeitos previsíveis em navegadores / agentes de usuário. A razão pela qual faço uma distinção é que o comportamento do agente do usuário é recomendado , mas não exigido pelas especificações.

O hiddenatributo deve ocultar um elemento de todas as apresentações, incluindo impressoras e leitores de tela (supondo que esses dispositivos respeitem as especificações HTML). Se você deseja remover um elemento da árvore de acessibilidade e da mídia visual, hiddenseria necessário. No entanto, não use hidden apenas porque você deseja esse efeito. Pergunte a si mesmo se hiddené semanticamente correto primeiro (veja acima). Se hiddennão estiver semanticamente correto, mas você ainda quiser ocultar visualmente o elemento, poderá usar outras técnicas, como CSS.

Elementos com aria-hidden="true"não são expostos à árvore de acessibilidade; portanto, por exemplo, os leitores de tela não os anunciarão. Essa técnica deve ser usada com cuidado, pois fornecerá experiências diferentes para diferentes usuários: agentes acessíveis não os anunciarão / renderizarão, mas ainda serão renderizados em agentes visuais. Isso pode ser uma coisa boa quando feito corretamente, mas tem o potencial de ser abusado.

Diferença sintática

Por fim, há uma diferença na sintaxe entre os dois atributos.

hiddené um atributo booleano , ou seja, se o atributo está presente, é verdadeiro - independentemente do valor que possa ter - e, se o atributo estiver ausente, é falso. Para o caso real, a melhor prática é não usar nenhum valor ( <div hidden>...</div>) ou o valor da sequência vazia ( <div hidden="">...</div>). Eu não recomendaria hidden="true"porque alguém lendo / atualizando seu código pode inferir que hidden="false"isso teria o efeito oposto, o que é simplesmente incorreto.

aria-hidden, por outro lado, é um atributo enumerado , permitindo um de uma lista finita de valores. Se o aria-hiddenatributo estiver presente, seu valor deverá ser "true"ou "false". Se você deseja o estado "indefinido (padrão)", remova o atributo completamente.

Leitura adicional: https://github.com/chharvey/chharvey.github.io/wiki/Hidden-Content

definir aria-hidden como false e alterná-lo em element.show () funcionou para mim.

por exemplo

<span aria-hidden="true">aria text</span>

$(span).attr('aria-hidden', 'false');
$(span).show();

e quando se escondendo

$(span).attr('aria-hidden', 'true');
$(span).hide();