Desenvolver sites ou aplicativos acessíveis não é a norma hoje. Isso ocorre porque a ideia de Acessibilidade Web é somente conhecida por desenvolvedores; na prática, é frequentemente negligenciada e não uma prática comum em desenvolvimento web.
Segundo estatísticas do Banco Mundial, cerca de 15% da população mundial experimenta alguma forma de deficiência. Isso equivale a (no momento) quase metade da população Web.
Neste artigo, vamos explicar o que a Acessibilidade Web é para nós, como desenvolvedores, como isso afeta os usuários da Web e também maneiras de melhorar nossos sites/apps e ferramentas para aproveitar para melhorar a acessibilidade em nosso fluxo de trabalho.
O que é Acessibilidade Web?
Acessibilidade Web — ou a11y, como geralmente é referenciada — é uma prática em que sites, ferramentas e tecnologias são projetados e desenvolvidos para que pessoas com deficiências possam usá-los.
Acessibilidade Web é sobre como tornar a Web acessível a todos. Isso inclui pessoas com todas as formas de deficiência, incluindo:
- Cognitiva
- Neurológica
- Física
- Discursiva
- Visual
- Auditiva
Acessibilidade abrange deficiência e ainda conta casos em que as pessoas que usam a Web têm as seguintes limitações:
- Má conectividade com a Internet
- Lesão temporária (ex: braço quebrado)
- Pessoas que usam dispositivos com telas menores, como smartwatches, smart TVs etc.
O princípio POUR
POUR é um acrônimo para:
- Perceivable (Perceptível ou Acessível)
- Operable (Operável ou Funcional)
- Understandable (Compreensível)
- Robust (Robusto ou Consistente)
O princípio POUR é o que orienta a construção de sites acessíveis. Este princípio ajuda a colocar as pessoas no centro do processo.
Detalhando, quando se leva em conta a Acessibilidade Web, cada site deve cumprir o seguinte:
Perceivable (Perceptível ou Acessível)
O conteúdo na Web deve ser perceptível. Isso significa que a Web deve estar disponível aos sentidos (visão, toque e audição) por meio do navegador ou por meio de tecnologias assistivas, como leitores de tela, ampliadores de tela etc.
Operable (Operável ou Funcional)
O conteúdo na Web deve ser operável. Isso significa que os usuários podem interagir com todos os controles e elementos interativos usando o mouse, o teclado ou um dispositivo auxiliar.
Se o conteúdo é impossível de navegar, então é inacessível.
Understandable (Compreensível)
O conteúdo da Web deve ser claro, conciso e fácil de entender. Tente o máximo possível para reduzir erros de ortografia e usar gramática complexa.
Isso porque, como desenvolvedores da Web, geralmente não devemos assumir o conhecimento do usuário.
Robust (Robusto ou Consistente)
É muito importante ter consistência na Web. O que isto significa é: você maximiza a compatibilidade com as ferramentas que você está construindo? Seu site funciona da mesma maneira em todas as plataformas, por exemplo, navegadores, sistemas operacionais e tamanhos de dispositivos etc.?
Dicas para tornar sites acessíveis na Web
Existem algumas dicas iniciais para ajudar a incorporar a acessibilidade à sua rotina habitual ao desenvolver websites. A maioria dessas dicas pode ser implementada com facilidade e não afetará a aparência geral do seus sites/apps.
Adicionar texto alternativo às imagens
Ao usar imagens em seus sites e apps, uma coisa importante que as pessoas se esquecem é adicionar o atributo alt às imagens.
Veja um exemplo de uma tag de imagem acessível.
|
1 |
<img src="gato.jpg" alt="Um gato sentado em uma cadeira"> |
A grande diferença entre ter o atributo alt em todas as imagens e não ter é que ele conta bastante no objetivo de garantir que seu site seja acessível, porque agora os leitores de tela podem ler as tags alt para pessoas com deficiências visuais e cognitivas.
Uma regra aqui é garantir que a descrição alternativa esteja no contexto, o que significa que ela deve descrever a intenção real da imagem; realmente descrever o que está nela. No exemplo acima, consta Um gato sentado em uma cadeira e não apenas Gato.
Usar HTML semântico
Esta é outra regra importante esquecida. A maioria dos desenvolvedores usa <div> para representar tudo e esquece a marcação apropriada para cabeçalhos, listas, tabelas e outros elementos que existem.
HTML5 fornece elementos adicionais, como <nav>, <section> e <aside> para melhor estruturar o conteúdo. Este é um exemplo de uma página bem estruturada usando HTML semântico.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<body> <header> <h1>Minha página</h1> </header> <main> <article> <h2>Subassunto da minha página</h2> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </article> </main> <footer> <p>© Credits</p> </footer> </body> |
Forneça uma opção para ignorar o conteúdo principal
Para pessoas que usam leitores de tela e teclado, esse recurso é muito importante, pois fornece a opção de pular para o conteúdo principal ao usar o teclado ou os leitores de tela para navegação.
A técnica para conseguir isso é adicionando um link para pular para o conteúdo principal e torná-lo invisível até que o elemento receba o foco do teclado.
Identifique o idioma da página e alterações de idioma
A maioria das pessoas se esquece disso, embora seja uma coisa muito importante ao desenvolver sites acessíveis.
Lembre-se sempre de indicar o idioma principal de cada página usando o atributo lang na tag <html>, por exemplo, <html lang="pt-br">.
Também, use o atributo lang em elementos específicos quando o idioma do elemento for diferente do resto da página.
|
1 2 3 4 5 6 7 8 9 10 11 |
<html lang="en"> <head> ... </head> <body> ... Está gostando deste <span lang="en">article</span>? ... </body> </html> |
Associe um label a todos os elementos de formulário
Sempre que possível, use o elemento label para associar o texto aos elementos do formulário explicitamente. O atributo for do label deve corresponder exatamente ao id do controle de formulário.
Em situações específicas, pode ser aceitável ocultar elementos <label> visualmente, mas, na maioria dos casos, os rótulos são necessários para ajudar todos os leitores a entender o input necessário.
|
1 2 3 4 5 6 7 |
<form> <label for="username">Username</label> <input type="text" name="username" id="username"> <label for="email">Email</label> <input type="email" name="email" id="email"> </form> |
Ferramentas úteis para desenvolver sites acessíveis
Existem inúmeras ferramentas disponíveis para ajudar na missão de criar sites acessíveis. A questão agora é: por que as pessoas não estão fazendo uso delas para criar websites acessíveis?
A razão pode ser porque começar a usar a acessibilidade pode parecer difícil e desafiador no início, especialmente para equipes que mantêm uma base de código herdada, mas, claro, também pode haver outros motivos.
Veja algumas ferramentas para levar em consideração ao pensar em acessibilidade.
- a11y.css
- Accessibility Insights
- aXe
- Chrome Vox
- Contrast Checker
- Lighthouse
- No Coffee
- Pa11y
- Tota11y
- Tenon
- Voice Over
- Wave
Essas ferramentas ajudarão a criar sites e aplicativos acessíveis. É possível encontrar mais ferramentas na Web Accessibility Evaluation Tools List.
Também temos nosso programa semanal no YouTube, dpw expo, em que semanalmente indicamos recursos Web diversos, e frequentemente indicamos recursos a11y no dpw expo. Assine nosso canal!
Aqui no dpw também temos artigos especialmente voltados à Acessibilidade Web, como este que você está lendo agora. Confira todos nossos artigos sobre acessibilidade.
Mais recursos de a11y
- Web Content Accessibility Guidelines (WCAG 2.1)
- W3C’s Web Accessibility Initiative
- WebAIM Checklist
- a11y Project Checklist
- a11y & Me
Se tiver mais algum bom recurso de Acessibilidade Web, por favor, coloque nos comentários para complementarmos essa lista.
Conclusão
Neste artigo, fizemos uma boa introdução sobre Acessibilidade Web e o que isso significa para usuários com deficiências/restrições.
Todos deveríamos unir forçar e sermos defensores da a11y. Com isso, certamente veríamos uma mudança significativa na maneira como a Web é abordada.
Devemos sempre lembrar de desenvolver pensando no visitante e isso inclui todos os usuários com qualquer tipo de deficiência e/ou restrição.
Ajude a espalhar a boa semente da Acessibilidade Web entre os devs brasileiros. Compartilhe este artigo e ajude a conscientizar sobre a importância fundamental de todos termos uma Web mais acessível!