Observe que o WAI-ARIA é anterior ao HTML5 e não o exige, embora os atributos ARIA sejam considerados válidos apenas por um validador HTML5 ou quando comparados com um DTD estendido pela ARIA. No entanto, o rascunho do HTML5 atualmente não permite algumas construções WAI-ARIA.
Alohci
Eu já vi isso no html do Facebook.
Classificador
Respostas:
213
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:
<ulrole="menubar"><!-- Rule 2A: "File" label via aria-labelledby --><lirole="menuitem"aria-haspopup="true"aria-labelledby="fileLabel"><spanid="fileLabel">File</span><ulrole="menu"><!-- Rule 2C: "New" label via Namefrom:contents --><lirole="menuitem"aria-haspopup="false">New</li><lirole="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).
Qual é a diferença entre atributo de dados e ária?
JackMahoney
55
ariaé especificamente para acessibilidade e não deve ser usado para armazenar dados aleatórios. dataé para dados aleatórios que o aplicativo precisa associar ao nó.
Franci Penov
2
Lembre-se: role="menu"e "menuitem"estão corretos para o APPS (= software com menus como File > Openou Edit > Copy to clipboard. Para um site clássico, provavelmente é melhor permanecer no habitual <ul>(= lista de funções por padrão), pois você está fornecendo apenas links para outras páginas da Web e sem funções como "salvar" ou "copy / paste" Se você está usando. role="menu"você também tem que adicionar suporte para navegar pelo menu com as setas do seu teclado como menus habituais software / app
Opa D'oh
62
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
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 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.
Correção pequena: ao usar elementos semânticos de HTML5, você deve definir sua função correspondente apenas se a semântica do elemento escolhido não fornecer informações suficientes. Em outras palavras, se você tiver um elemento nav, não há necessidade de adicionar role = "navigation", porque a função já está clara na escolha do elemento. Mas se você tem um elemento de entrada para pesquisar o site, você deve adicionar role = "search" porque os elementos de entrada são usados para muitos outros que busca coisas, e isso marca-se que a entrada específica como tendo o papel de pesquisa.
Respostas:
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:
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).fonte
ariaé especificamente para acessibilidade e não deve ser usado para armazenar dados aleatórios.dataé para dados aleatórios que o aplicativo precisa associar ao nó.role="menu"e"menuitem"estão corretos para o APPS (= software com menus comoFile > OpenouEdit > Copy to clipboard. Para um site clássico, provavelmente é melhor permanecer no habitual<ul>(= lista de funções por padrão), pois você está fornecendo apenas links para outras páginas da Web e sem funções como "salvar" ou "copy / paste" Se você está usando.role="menu"você também tem que adicionar suporte para navegar pelo menu com as setas do seu teclado como menus habituais software / appARIA significa Aplicativos Acessíveis da Internet Rico.
E se você está se perguntando o que é o WAI-ARIA, é a mesma coisa.
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/
fonte
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 .
fonte
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.
fonte
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.
fonte