Tenho visto, desde o lançamento do HTML5, diversos atributos aria
nas tags HTML, como por exemplo aria-disabled
, aria-required
, aria-readonly
, dentre outros.
Para quê eles servem?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeEles estão relacionados a acessibilidade da página para pessoas que encontram dificuldades por alguma condição especial. O termo significa Accessible Rich Internet Applications.
Estes atributos dão melhor semântica ao que está sendo feito permitindo que os navegadores e softwares especiais (leitores de tela, por exemplo) ajudem a pessoa com necessidades especiais aproveitar o conteúdo.
Quando habilitado, eles são lidos e executam alguma coisa diferente para facilitar quem tem dificuldades. Pode ser uma explicação do que é aquilo, ou pode ter uma ação um pouco diferente para permitir usabilidade em condições adversas.
Curiosamente páginas mais simples costumam ser mais facilmente interpretadas por estas pessoas. Conforme o conteúdo vai ficando mais dinâmico, fica mais importante ter estes atributos. Mas é raro achar páginas assim, seja por ignorância dos profissionais da existência e necessidade deste recurso, ou mais raramente, por falta de orçamento e/ou vontade do cliente.
O principal atributo é o role
para dizer qual o papel daquele elemento na página. O HTML básico tem a intenção de indicar os mecanismos que o navegador deve executar, eles são pouco ou nada semânticos dentro do contexto da página.
Mas só ele não basta. É necessário informar com mais clareza todas as propriedades importantes que o elemento possui para que isto seja acessível por quem não consegue identificar na página "normal".
Por exemplo, aria-checked
indica se uma opção de um radio button está assinalada. Isso é importante para quem não consegue descobrir visualmente. Obviamente todo o código precisa saber manipular o DOM para atualizar estas informação de forma adequada.