Melhorando a acessibilidade de aplicações Web com ARIA

Em:

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:

Patrocinadores BrazilJS

Bronze

BrazilJS® é uma iniciativa NASC.