O que é ARIA HTML5?

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

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

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

  • File
    • New
    • Open…
    • ...
  • ...

Observe o atributo role no elemento

    externo. Este atributo não afeta de forma alguma como a marcação é renderizada na canvas pelo navegador; no entanto, os navegadores que suportam ARIA adicionarão informações de acessibilidade específicas do sistema operacional ao elemento de interface do usuário renderizado, para que o leitor de canvas possa interpretá-lo como um menu e lê-lo em voz alta com contexto suficiente para o usuário final entender (por exemplo, um “menu” dica de áudio) e é capaz de interagir com ele (por exemplo, navegação por voz).

    ARIA significa Accessible Rich Internet Applications.

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

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

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

    WAI = Iniciativa de Acessibilidade na Web

    Pela aparência, o ARIA é usado para tecnologias assistivas e principalmente leitura de canvas.

    A maioria das suas dúvidas serão esclarecidas 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 de Internet Rica Acessíveis” . É um conjunto de atributos para ajudar a melhorar a semântica de um site ou aplicativo da Web para ajudar as tecnologias assistenciais, como leitores de canvas 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 canvas que ativar um link ou botão apenas mostrou ou ocultou mais itens, para widgets tão complexos quanto sistemas de menus completos ou exibições hierárquicas de trees.

    Isso é conseguido aplicando-se funções e atributos de estado à marcação HTML 4.01 ou posterior que não tem relação com o layout ou a funcionalidade do navegador, mas fornece informações adicionais para tecnologias assistivas.

    Uma pedra angular da WAI-ARIA é o atributo role. Ele diz ao navegador para informar à tecnologia assistiva que o elemento HTML usado não é, na verdade, o que o nome do elemento sugere, mas alguma outra coisa. Embora originalmente seja apenas um elemento div, esse elemento div pode ser o contêiner para uma lista de itens com preenchimento automático. Nesse caso, uma function de “listbox” seria apropriada para uso. Da mesma forma, outro div que é filho desse contêiner div e que contém um único item de opção deve, então, obter uma function de “opção”. Dois divs, mas através dos papéis, significado totalmente diferente. As funções são modeladas após as contrapartes de aplicativos de desktop comumente usados.

    Uma exceção a isso são as funções de referência de 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 da WAI-ARIA. Eles definem o estado de certos elementos nativos ou WAI-ARIA, como se algo é recolhido ou expandido, um elemento de formulário é necessário, algo tem um menu pop-up anexado a ele ou algo semelhante. Eles geralmente são dynamics e alteram seus valores durante todo o ciclo de vida de um aplicativo da Web e geralmente são manipulados via JavaScript.

    O que não é?

    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ê deriva o papel de “botão” não oferece foco no teclado, um manipulador de cliques automático quando Espaço ou Enter está sendo pressionado nele e outras propriedades que são indigestas a um botão. O navegador em si não sabe que um div com o papel de “botão” é um botão, apenas a sua parte da API de acessibilidade.

    Como conseqüência, isso significa que você precisa implementar a navegação pelo teclado, a focalização e outros padrões comportamentais conhecidos dos aplicativos da área de trabalho por conta própria. Você pode encontrar algumas técnicas avançadas de ARIA aqui .

    Quando não devo usá-lo?

    Sim, está correto, esta seção vem primeiro! Porque a primeira regra do uso do WAI-ARIA é: não use a menos que você tenha que fazê-lo! Quanto menos WAI-ARIA você tiver, e quanto mais você puder contar usando widgets HTML nativos, melhor! Existem mais algumas regras a seguir, você pode verificá-las aqui .

    O que é o ARIA?

    ARIA surgiu como uma maneira de resolver o problema de acessibilidade de usar uma linguagem de marcação destinada a documentos, HTML, para construir interfaces de usuário (UI). O HTML inclui muitos resources 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 suportam APIs que permitem que o (Assistive Technology) AT 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 da Web modernos Controles personalizados podem estender elementos html para fornecer os rich UI necessária para aplicações web modernas. 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 clique 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 permitisse 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 customizada 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, que por sua vez, permite que o AT construa mecanismos de navegação alternativos para o conteúdo muito mais fácil de usar do que ler o texto completo ou apenas repetir uma lista de links.

    É importante lembrar que, em casos simples, é preferível usar controles HTML nativos e estilizá-los em vez de usar o ARIA. Isso não é reinventar rodas ou checkboxs de seleção, se você não precisa.

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

    Eu fiz outra pergunta sobre o 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 diferentes hábitos de navegação e deficiências físicas, você provavelmente reconhecerá os atributos role e aria- *. O WAI-ARIA (Aplicativos de Internet Rica Acessível) é um método de fornecer maneiras de definir seu conteúdo da Web dynamic e aplicativos para que pessoas com deficiências possam identificar e interagir com êxito com ele. Isso é feito por meio de funções que definem a estrutura do documento ou aplicativo ou por meio de atributos aria- * que definem uma function, relação, estado ou propriedade de um widget.

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

    E veja este vídeo do seu tube para o ARIA live.