Compartilhe esta publicação
Melhorando a acessibilidade de aplicações Web com ARIA
Acessibilidade não é um tema novo, mas infelizmente ainda pouco aplicado na prática. Vamos conhecer alguns passos básicos de como podemos melhorar a experiência dos usuários das nossas aplicações.
Na última edição da BrazilJS Conf¹ tivemos uma excelente palestra da Talita Pagani sobre Acessibilidade Web Cognitiva, que está disponível no canal da BrazilJS no YouTube.
Aproveitando o ensejo, já confere a admirável palestra sobre A saga dos 12 tópicos de acessibilidade ministrada pelo Reinaldo Ferraz no BrazilJS Conf do ano passado².
¹ BrazilJS Conf 2016 ² BrazilJS Conf 2015
Como trabalhamos com a Web, somos capazes de alcançar um público enorme, sendo assim é importante pensar em aplicações que estejam acessíveis a pessoas com diferentes necessidades. Pensando nisso, foram criadas inúmeras maneiras de tornar nossas aplicações acessíveis, e uma delas é a ARIA que hoje conheceremos um pouco mais. Vamos lá?
O que é ARIA
ARIA (Accessible Rich Internet Applications) é uma especificação do W3C que foi criada para melhorar a acessibilidade das aplicações, fornecendo informações extras para os leitores de tela através de atributos do HTML.
O ARIA não provoca efeito nenhum sobre como os elementos são apresentados ou se comportam nos navegadores. Também não adiciona novas funcionalidades e trabalha apenas como uma camada descritiva extra para os leitores de tela.
Os leitores de tela trabalham normalmente com o HTML, mas quando acrescentamos ARIA, acabamos fornecendo aos usuários de leitores de tela um maior contexto e uma maior interatividade com o nosso conteúdo.
ARIA Roles
O Role é um atributo predefinido do ARIA que em geral define tipos de objetos para fornecer propriedades úteis aos mesmos, como por exemplo uma descrição de um formulário ou o valor atual de uma barra de progresso.
Podemos adicionar um atributo role para nossos elementos da seguinte forma: role="<role type>". Vamos conhecer as quatro categorias da ARIA Roles:
Abstract
São utilizados apenas pelos navegadores para ajudar a organizar e dinamizar um documento e não devem ser utilizadas pelos desenvolvedores.
Document
São utilizados para oferecer uma descrição estrutural para uma seção. Não é necessário acrescentar ARIA roles para elementos que tenham a semântica significativa.
<!-- Um exemplo redundante --> <form role="form"> <!-- Um exemplo de uso interessante --> < div role="form"> Landmark
São utilizados na identificação de grandes áreas de conteúdos e são utilizados por leitores de tela para navegação. É o caso das áreas de acesso rápido como menus de navegação e buscas.
<nav id="nav" role="navigation"> <ul> <li><a href="/">Portal</a></li> <li><a href="/#eventos">Eventos</a></li> <li class="current"><a href="/blog">Artigos</a></li> <li><a href="/#weekly">Weekly</a></li> <li><a href="/conf">Conf</a></li> <li><a href="/sobre">Sobre</a></li> </ul> </nav> Widget
São utilizados para descrever padrões interativos comuns que atualmente necessitam de atributos semânticos equivalentes do HTML.
<!-- Simples exemplo de uma barra de progresso com valores em porcentagem --> <div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="66">66 %</div> Adicionando esses novos atributos, os leitores de tela serão capazes de "interpretar" o conteúdo que o usuário irá encontrar em cada seção das páginas, facilitando a navegação e interatividade do usuário. Se você ainda não está utilizando Aria Roles para tornar mais acessíveis as suas aplicações, você está ignorando parte dos possíveis usuários delas.
Se você nunca teve a oportunidade de implementar Aria Roles, que tal começar pelo seu blog pessoal? Pense nisso e torne suas aplicações mais acessíveis, a web agradece!
Conclusão
Essa foi uma breve introdução sobre alguns tópicos importantes relativos à acessibilidade. Se você ficou curioso e quer aprender mais, dê uma atenção para os seguintes tópicos: