O que é HTML5 ARIA?

Question

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

Answer 1

WAI-ÁRIA é um suporte que define especificações para aplicativos da web acessíveis.Ele define um monte de extensões de marcação (principalmente como atributos em 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 assistenciais, como leitores de tela.É claro que, 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 os agentes de usuário 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>

Note o role atributo no exterior <ul> elemento.Este atributo não afeta de forma alguma a forma como a marcação é renderizada na tela pelo navegador;no entanto, os navegadores que suportam ARIA adicionarão informações de acessibilidade específicas do sistema operacional ao elemento de UI 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, uma mensagem explícita dica de áudio do "menu") e é capaz de interagir com ele (por exemplo, navegação por voz).

Answer 2

Aria significa aplicativos de Internet ricos acessíveis.

O WAI -ARIA é uma tecnologia incrivelmente poderosa que permite que os desenvolvedores descrevam facilmente o objetivo, o estado e outras funcionalidades de interfaces de usuário visualmente ricas - de uma maneira que possa ser entendida pela tecnologia assistiva. Wai-Ara finalmente foi integrado ao projeto de trabalho atual da especificação HTML 5.

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

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

WAI = Iniciativa de Acessibilidade da Web

Pelo que parece, Aria é usada para tecnologias de assistência e principalmente leitura de tela.

A maioria de suas dúvidas será liberada se você ler este artigo

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

Answer 3

O que é isso?

Wai-Ara significa “Iniciativa de acessibilidade da Web - aplicativos de internet ricos acessíveis”. É um conjunto de atributos para ajudar a aprimorar a semântica de um site ou aplicativo da Web para ajudar as tecnologias de assistência, como os leitores de tela para cegos, entendem 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 ativar um link ou botão acabou de mostrar ou esconder mais itens, para widgets tão complexos quanto sistemas de menu inteiros ou vistas hierárquicas em árvores.

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

Uma pedra de canto de Wai-ia é o atributo de papel. Ele diz ao navegador para dizer à 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 para uma lista de itens de preenchimento automático; nesse caso, uma função de "ListBox" seria apropriada de usar. Da mesma forma, outro Div que é um filho desse contêiner Div e que contém um único item de opção deve ter um papel 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 desktop comumente usadas.

Uma exceção a isso são papéis de referência de documentos, 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 de canto são estados e propriedades de Wai-ia. Eles definem o estado de certos elementos nativos ou Wai-Ara, como se algo fosse colapso ou expandido, é necessário um elemento de formulário, algo tem um menu pop-up anexado a ele ou similar. Geralmente, são dinâmicos e alteram seus valores ao longo do ciclo de vida de um aplicativo da Web e geralmente são manipulados via JavaScript.

O que não é?

Wai-ia não se destina a influenciar o comportamento do navegador. Ao contrário de um elemento de botão real, por exemplo, uma div como você derrama o papel de "botão" não oferece focalização do teclado, um manipulador de cliques automático quando o espaço ou a entrada estão sendo pressionados e outras propriedades que são indiginosas a um botão. O navegador em si não sabe que uma div com o papel 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 do teclado, a focagem e outros padrões comportamentais conhecidos nos aplicativos de desktop. Você pode encontrar algumas técnicas avançadas de ária Aqui.

Quando não devo usá -lo?

Sim, isso está correto, esta seção vem primeiro! Porque a primeira regra de usar Wai-Ara é: Não use, a menos que você absolutamente precise! Quanto menos wai-vira você tiver, e quanto mais você pode contar com o uso de widgets nativos HTML, melhor! Há mais algumas regras a seguir, você pode conferi -las aqui.

Answer 4

O que é Aria?

Aria surgiu como uma maneira de resolver o problema de acessibilidade de usar um idioma de marcação destinado a documentos, HTML, para criar interfaces de usuário (UI). O HTML inclui muitos recursos para lidar com documentos (p, h3, ul, tabela), mas apenas elementos básicos da interface do usuário, como a, entrada e botão. O Windows e outros sistemas operacionais suportam APIs que permitem (tecnologia assistiva) a acessar a funcionalidade dos controles da interface do usuário. O Internet Explorer e outros navegadores mapeiam os elementos HTML nativos da API de acessibilidade, mas os controles HTML não são tão ricos quanto os controles comuns nos sistemas operacionais de desktop e não são suficientes para aplicativos da Web modernos controles personalizados podem estender elementos HTML para fornecer os ricos UI necessária para aplicativos da Web modernos. Antes de Aria, o navegador não tinha como expor essa riqueza extra à API de acessibilidade ou em. 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 do mouse, mas ainda é apenas uma imagem para um teclado ou usuário.

A solução foi criar um conjunto de atributos que permitam que os desenvolvedores estendam o HTML com a semântica da UI. O termo ARIA para um grupo de elementos HTML que possuem funcionalidade personalizada e usam atributos ARIA para mapear essas funções para as APIs de acessibilidade é um “widget. A ARIA também fornece um meio para os autores documentarem a função do próprio conteúdo, que por sua vez permite construir mecanismos de navegação alternativos para o conteúdo que são muito mais fáceis de usar do que ler o texto completo ou apenas iterando uma lista dos links.

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

Felizmente, a ARIA Markup pode ser adicionada aos sites existentes sem alterar o comportamento para os usuários convencionais. Isso reduz bastante o custo de modificar e testar o site ou aplicativo.

Answer 5

Eu corri outra pergunta sobre Aria. Mas o conteúdo parece mais promissor para essa questão. gostaria de compartilhá -los

O que é Aria?

Se você se esforçar para tornar seu site acessível aos usuários com uma variedade de hábitos de navegação e deficiências físicas diferentes, provavelmente reconhecerá o papel e os atributos Aria-*. O WAI-ARIA (Aplicativos Ricos da Internet acessível) é 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 sucesso com ele. Isso é feito por meio de funções que definem a estrutura do documento ou aplicação, ou por meio de atributos ARIA-* Definindo um controle de widget, relacionamento, estado ou propriedade.

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

E veja isso Vídeo do youtube Para Aria Live.