ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e as aplicações Web mais acessíveis a pessoas com deficiência.

O atributo "oculto" é novo em HTML5 e diz aos browsers para não exibirem o elemento. A propriedade a oculta diz aos **leitores de tela*** se eles devem ignorar o elemento. Dê uma olhada nos documentos do w3 para mais detalhes:

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

A utilização destes padrões pode facilitar a utilização da web por pessoas com deficiência.

Um atributo oculto é um atributo booleano (Verdadeiro/Falso). Quando esse atributo é utilizado 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>

Atributos ocultos indicam que o elemento e TODOS os seus descendentes ainda são visíveis no navegador, mas serão invisíveis para ferramentas de acessibilidade, tais como leitores de tela.

Exemplo:

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

Dê uma olhada isto. Ele deve responder a todas as suas perguntas.

**ARIA significa "Accessible Rich Internet Applications" (Aplicativos Ricos Acessíveis para Internet)

Fontes: Grupo Paciello

Diferença Semântica

De acordo com HTML 5.2:

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

Exemplos incluem uma lista de abas onde alguns painéis não são expostos, ou uma tela de log-in que desaparece depois que um usuário faz o login. Eu gosto de chamar estas coisas de "temporalmente relevantes", ou seja, são relevantes com base no tempo.

Por outro lado, ARIA 1.1 diz:

[O estado `arítmico' indica se um elemento está exposto à API de acessibilidade.

Em outras palavras, elementos com aria-hidden="true" são removidos da árvore **accessibility tree***, que a maioria das tecnologias de assistência honram, e elementos com aria-hidden="false" serão definitivamente expostos à árvore. Elementos sem o atributo `aria-hidden' estão no "undefined (default)" state, 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ê-la se a cor do texto corresponder à cor de fundo.

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

Diferença Efetiva

Os semânticos têm efeitos previsíveis em navegadores/agentes de usuário. A razão pela qual eu faço uma distinção é que o comportamento do agente do usuário é recomendado, mas não requerido pelas especificações.

O atributo "oculto" deve esconder um elemento de todas apresentações, incluindo impressoras e leitores de tela (assumindo que estes dispositivos honram as especificações HTML). Se você quiser remover um elemento da árvore de acessibilidade como também mídia visual, o hidden faria o truque. No entanto, não utilize o hidden só porque você quer este efeito. Pergunte-se se o hidden é semanticamente correto primeiro (veja acima). Se o hidden não é semanticamente correto, mas você ainda quer ocultar visualmente o elemento, você pode utilizar outras técnicas, como CSS.

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

Diferença Sintáctica

Finalmente, existe uma diferença de sintaxe entre os dois atributos.

O "oculto" é um atributo booleano, ou seja, se o atributo estiver presente é verdadeiro - independentemente do valor que possa ter - e se o atributo estiver ausente é falso. Para o caso verdadeiro, a melhor prática é ou não utilizar nenhum valor (<div hidden>...</div>), ou o valor da string vazia (`