O que é HTML5 ARIA?

O que é HTML5 ARIA? Eu não entendo como implementá-lo.

WAI-ARIA é um suporte que define especificações para aplicativos da web acessíveis. Ele define várias extensões de marcação (principalmente como atributos nos elementos HTML5), que podem ser usadas pelo desenvolvedor de aplicativos da web para fornecer informações adicionais sobre a semântica dos vários elementos para tecnologias auxiliares, como leitores de tela. Obviamente, para que o ARIA funcione, o agente do usuário HTTP que interpreta a marcação precisa oferecer suporte ao ARIA, mas a especificação é criada de maneira a permitir que os agentes de nível inferior ignorem a marcação específica do ARIA com segurança, sem afetar o funcionalidade do aplicativo da web.

Aqui está um exemplo da especificação ARIA:

<ul role="menubar">

  <!-- Rule 2A: "File" label via aria-labelledby -->
  <li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel"><span id="fileLabel">File</span>
    <ul role="menu">

      <!-- Rule 2C: "New" label via Namefrom:contents -->
      <li role="menuitem" aria-haspopup="false">New</li>
      <li role="menuitem" aria-haspopup="false">Open…</li>
      ...
    </ul>
  </li>
  ...
</ul>

Observe o roleatributo no <ul>elemento externo . Este atributo não afeta de maneira alguma como a marcação é renderizada na tela pelo navegador; no entanto, os navegadores que suportam o ARIA adicionam informações de acessibilidade específicas do SO ao elemento de interface do usuário renderizado, para que o leitor de tela possa interpretá-lo como um menu e lê-lo em voz alta, com contexto suficiente para o usuário final entender (por exemplo, um explícito dica de áudio do "menu") e pode interagir com ela (por exemplo, navegação por voz).

ARIA significa Aplicativos Acessíveis da Internet Rico.

O WAI-ARIA é uma tecnologia incrivelmente poderosa que permite aos desenvolvedores descrever facilmente o objetivo, estado e outras funcionalidades de interfaces de usuário visualmente ricas - de uma maneira que pode ser entendida pela Tecnologia Assistiva. O WAI-ARIA foi finalmente integrado ao rascunho de trabalho atual da especificação HTML 5.

E se você está se perguntando o que é o WAI-ARIA, é a mesma coisa.

Observe que os termos WAI-ARIA e ARIA se referem à mesma coisa. No entanto, é mais correto usar o WAI-ARIA para reconhecer suas origens no WAI.

WAI = Iniciativa de Acessibilidade na Web

Pelo que parece, o ARIA é usado para tecnologias assistivas e principalmente para leitura de tela.

A maioria das suas dúvidas será esclarecida se você ler este artigo

http://www.w3.org/TR/aria-in-html/

O que é isso?

WAI-ARIA significa "Iniciativa de acessibilidade na Web - aplicativos ricos para acesso à Internet" . É um conjunto de atributos para ajudar a aprimorar a semântica de um site ou aplicativo da Web para ajudar tecnologias assistivas, como leitores de tela para cegos, a entender certas coisas que não são nativas do HTML. As informações expostas podem variar de algo tão simples quanto dizer a um leitor de tela que a ativação de um link ou botão acabou de mostrar ou ocultar mais itens, a widgets tão complexos quanto sistemas de menus inteiros ou visualizações de árvore hierárquica.

Isso é conseguido aplicando funções e atributos de estado à marcação HTML 4.01 ou posterior que não influencia o layout ou a funcionalidade do navegador, mas fornece informações adicionais para tecnologias de assistência.

Uma pedra angular do WAI-ARIA é o atributo role. Ele diz ao navegador para informar à tecnologia assistiva que o elemento HTML usado não é realmente o que o nome do elemento sugere, mas outra coisa. Embora originalmente seja apenas um elemento div, esse elemento div pode ser o contêiner de uma lista de itens de preenchimento automático; nesse caso, seria apropriado usar uma função de "caixa de listagem". Da mesma forma, outra div que é filha dessa div de contêiner e que contém um único item de opção deve receber a função de "opção". Duas divs, mas através dos papéis, significado totalmente diferente. As funções são modeladas após as contrapartes de aplicativos de área de trabalho usadas com freqüência.

Uma exceção a isso são as funções de referência do documento, que não alteram o significado real do elemento em questão, mas fornecem informações sobre esse local específico em um documento.

A segunda pedra angular são os estados e propriedades WAI-ARIA. Eles definem o estado de certos elementos nativos ou WAI-ARIA, como se algo fosse recolhido ou expandido, um elemento de formulário fosse necessário, algo tivesse um menu pop-up anexado a ele ou algo semelhante. Geralmente, eles são dinâmicos e alteram seus valores ao longo do ciclo de vida de um aplicativo Web, e geralmente são manipulados via JavaScript.

O que não é isso?

O WAI-ARIA não se destina a influenciar o comportamento do navegador. Ao contrário de um elemento de botão real, por exemplo, uma div na qual você coloca o papel de "botão" não oferece foco no teclado, um manipulador de cliques automático quando Space ou Enter estão sendo pressionados, e outras propriedades que são indiginas a um botão. O próprio navegador não sabe que uma div com função de "botão" é um botão, apenas sua parte da API de acessibilidade.

Como conseqüência, isso significa que você absolutamente precisa implementar a navegação no teclado, a focabilidade e outros padrões de comportamento conhecidos dos aplicativos de desktop. Você pode encontrar algumas técnicas avançadas do ARIA aqui .

Quando não devo usá-lo?

Sim, está correto, esta seção vem em primeiro lugar! Porque a primeira regra de uso do WAI-ARIA é: Não use a menos que você precise! Quanto menos WAI-ARIA você tiver, e mais poderá contar com o uso de widgets HTML nativos, melhor! Existem mais algumas regras a seguir, você pode vê-las aqui .

O que é o ARIA?

O ARIA surgiu como uma maneira de resolver o problema de acessibilidade do uso de uma linguagem de marcação destinada a documentos, HTML, para criar interfaces de usuário (UI). O HTML inclui muitos recursos para lidar com documentos (P, h3, UL, TABLE), mas apenas elementos básicos da interface do usuário, como A, INPUT e BUTTON. O Windows e outros sistemas operacionais oferecem suporte a APIs que permitem que a AT (Tecnologia Assistiva) acesse a funcionalidade dos controles da interface do usuário. O Internet Explorer e outros navegadores mapeiam os elementos HTML nativos para a API de acessibilidade, mas os controles html não são tão ricos quanto os controles comuns em sistemas operacionais de desktop e não são suficientes para aplicativos Web modernos. Os controles personalizados podem estender os elementos html para fornecer aos ricos Interface do usuário necessária para aplicativos da web modernos. Antes do ARIA, o navegador não tinha como expor essa riqueza extra à API de acessibilidade ou AT. O exemplo clássico desse problema é adicionar um manipulador de cliques a uma imagem. Ele cria o que parece ser um botão clicável para um usuário de mouse, mas ainda é apenas uma imagem para um usuário de teclado ou AT.

A solução foi criar um conjunto de atributos que permitissem aos desenvolvedores estender o HTML com a semântica da interface do usuário. O termo ARIA para um grupo de elementos HTML que possuem funcionalidade personalizada e usam atributos ARIA para mapear essas funções para APIs de acessibilidade é um “Widget. O ARIA também fornece um meio para os autores documentarem o papel do próprio conteúdo, o que, por sua vez, permite que a AT construa mecanismos de navegação alternativos para o conteúdo que é muito mais fácil de usar do que ler o texto completo ou apenas iterar sobre uma lista de links.

É importante lembrar que, em casos simples, é muito preferido usar controles HTML nativos e estilizá-los, em vez de usar o ARIA. Ou seja, não reinvente rodas, ou caixas de seleção, se você não precisar.

Felizmente, a marcação ARIA pode ser adicionada aos sites existentes sem alterar o comportamento dos usuários comuns. Isso reduz muito o custo de modificar e testar o site ou aplicativo.

Fiz outra pergunta sobre a ARIA. Mas o conteúdo parece mais promissor para esta questão. gostaria de compartilhá-los

O que é o ARIA?

Se você se esforçar para tornar seu site acessível a usuários com uma variedade de hábitos de navegação e deficiências físicas, provavelmente reconhecerá a função e os atributos aria- *. O WAI-ARIA (aplicativos ricos da Internet acessíveis) é um método de fornecer maneiras de definir seu conteúdo e aplicativos dinâmicos da Web, para que as pessoas com deficiência possam identificar e interagir com êxito. Isso é feito por meio de funções que definem a estrutura do documento ou aplicativo ou por atributos aria- * que definem uma função, relacionamento, estado ou propriedade de widget.

O uso do ARIA é recomendado nas especificações para tornar os aplicativos HTML5 mais acessíveis. Ao usar elementos HTML5 semânticos, você deve definir a função correspondente.

E veja este vídeo no YouTube para o ARIA live.