Internet Acessível

Guia de Acessibilidade para Desenvolvedores Web

Contribua com o projeto

Olá! Você já parou para pensar em como um deficiente visual consegue acessar um conteúdo web em seu site? Ou como um deficiente auditivo pode entender um vídeo no YouTube, ou no seu site? Há muita gente trabalhando para que pessoas com deficiência (e não são poucas) possam acessar a internet de forma que o conteúdo, o “rei da cocada preta”, possa ser acessível a elas. Mas se você já pesquisou um pouco sobre o tema, sabe que ele é muito difuso na rede, e meio complicado de compreende-lo, isso sem contar a documentação extensa da W3C. Este guia se destina a qualquer pessoa que queira compreender como transformar o conteúdo da rede em um conteúdo acessível. E só te peço um favor: compartilhe esta informação e contribua, aumentando o conteúdo ou o compartilhando, para que ela possa crescer mais e mais.

“O poder da web está em sua universalidade. Ser acessada por todos, independente de deficiência, é um aspecto essencial” Tim Berners-Lee

O que acessibilidade na Web?

Acessibilidade é a capacidade de tornar um conteúdo acessível à diferentes dispositivos ou diferentes usuários. É aqui que entra uma questão interessante: tornar a web acessível não vai beneficiar somente deficientes. Mas também, qualquer usuário que, por acaso, esteja com uma internet lenta em um determinado momento. Ou um outro usuário que precisa utilizar um smartphone com somente uma mão. Ou um outro usuário que esteja com uma deficiência provisória, como uma cirurgia no olhos. Ou seja, tornar a internet acessível, não é somente para leitores de tela ou braile. É uma necessidade. Há diferentes usuários em diferentes situações e disponibilizar o conteúdo de forma que todos possam acessá-lo é uma contribuição para que a internet se torne universal. Há mais exemplos de situações em que uma aplicação ser acessível é importante na introdução a Acessibilidade da W3C

Por que um site deve ser acessível?

Segundo o censo do IBGE (Instituto Brasileiro de Geografia e Estatística), em 2010, há 45.606.048 de brasileiros, 23,9% da população total, com algum tipo de deficiência. Se formos para uma amplitude mundial, há mais de 650 milhoes de pessoas com alguns tipo de deficiência Logo, é importante não deixar que o conteúdo web não seja acessível a essas pessoas. A obrigatoriedade de um site ser acessível não deve ser só uma responsabilidade de sites governamentais, antes de toda uma web que pretender ser universal

Quais as tecnologias para acessibilidade?

Boas práticas em desenvolvimento de sites

Especifique o idioma do seu site

Use o atributo lang do HTML 5 na página, de preferência, no elemento html. Se caso, em alguma parte do site, houver um texto de linguagem diferente da linguagem principal, também especifique o idioma de leitura daquele texto

Use a semântica do HTML 5

Alguns leitores de tela leem um parágrafo da seguinte forma: “paragrafo: [ texto que você colocou ]”. Ou seja, eles foram programados para entenderem a semântica HTML, portanto, a

Coloque âncoras no topo da página para partes importantes do seu site

Imagine um leitor de tela ter que ler cada menu e submenu da página, em um site de notícias que o usuário entrou para uma notícia específica? Por isso, é importante colocar, no topo, um link para a parte mais importante do site, no caso, a notícia principal

Coloque uma barra de acessibilidade no topo do site

Itens que precisam estar lá: alto contraste (colocar o fundo preto com letras brancas) e recurso para aumenta ou diminuir a fonte.

Recurso de alto contraste

Fundo preto, links geralmente amarelos, e contornos e linhas brancas, e letras brancas. Experimente, use este recurso neste site

Possibilite uma navegação via teclado

Ofereça uma navegação via teclado, a partir de teclas de atalhos e afins. Alguns leitores de tela, já vem com algumas teclas de atalho importantes, como vá para o conteúdo principal etc. Use também o atributo tabindex do HTML para possibilitar uma navegação hierárquica pela tecla TAB

Verifique o contraste textual do seu site

Há ferramentas interessantes, uma delas é o Check My Colours

Coloque uma linguagem de sinais (libras) no site

Segundo a Lei 10.436/2002, libras é a segunda língua oficial no país e para muitos surdos é a principal língua. Há uma plugin, o ProfDeaf Web Libras que faz isso para você. Há planos gratuitos a pagos

Não dependa de cores!

Assegure que a informação de um determinado elemento, como um link, não depende cores. Por exemplo, um botão que seja verde indicando uma ação positiva, poderá não ser interpretado completamente por um daltônico

A seguir, algumas recomendações da W3C para o desenvolvimento de sites acessíveis

WCAG – Recomendações de Acessibilidade para o conteúdo Web

A WCAG é um conjunto de recomendações da W3C para que o conteúdo Web seja acessível. Ela tem como objetivo fornecer técnicas de codificação para que o conteúdo se torne acessível. Sua primeira versão, de 1999, já previa inúmeras técnicas. Atualmente, em 2016, estamos na versão WCAG 2.0, que modificou estruturalmente a versão anterior e está dividida em:


Abaixo, segue um resumo de cada princípio com as diretrizes principais e técnicas para as cumprir:

Perceptível: o usuário deve poder perceber o conteúdo. Este, não pode ser invisível para alguns sentidos

Diretriz 1.1 – É necessário ter uma alternativa em texto

Diretriz 1.2 - conteúdo em áudio e vídeo
  • Dica 1: ofereça um texto alternativo, como uma transcrição do vídeo ou do áudio, próximo à mídia. Exemplo disso é o site de palestra TED
  • Dica 2 : como já exposto aqui, ofereça uma possibilidade de colocar linguagem de sinais

Diretriz 1.3 – adaptável
  • Dica 1 : use bastante a semântica HTML. Dicas e mais dicas não caberiam aqui. No final da página, há artigos sobre a semântica HTML
  • Dica 2 : como já dito aqui e repito: não faça com que o conteúdo dependa da sua forma, cor ou qualquer característica sensorial

Diretriz 1.4 – discernível
  • Dica 1 : forneça formas para que o usuário possa modificar o tamanho das fontes
  • Dica 2 : forneça formas para que o usuário dê alto contraste na página
  • Dica 3 : caso o site tenha áudio automático, após 3 segundos o usuário deve ter uma forma de controlar este áudio
  • Dica 4 : a página deve possuir um contraste para leitura. Link de referência: Site da W3C

Operável: o conteúdo deve ser acessível de forma que qualquer usuário possa interagir com ele

Diretriz 2.1 – acessível via teclado

Diretriz 2.2 – tempo suficiente: dê ao usuário tempo suficiente para navegar pela página e ler o conteúdo

Diretriz 2.3 – convulsões: não coloque elementos na página que pisquem mais de 3 vezes num segundo. Quem não se lembra do caso polêmico envolvendo o desenho animado Pokémon

Diretriz 2.4 – tempo suficiente: dê ao usuário tempo suficiente para navegar pela página e ler o conteúdo

Compreensível: toda a interface precisa ser intuitiva, compreensível

Diretriz 3.1 – legível: utilize o atributo lang do HTML para que os mecanismo de leitura de tela possam saber em qual linguagem está aquela página

Diretriz 3.2 – previsível:
  • Dica 1: não crie menus dropdowns que ao usuário passar o mouse, os links relacionados sejam mostrados abaixo, dificultando sua interação
  • Dica 2: não modifique um estado automaticamente a menos que você avise ao usuário que isso irá acontecer

Diretriz 3.3 – Assistência de entrada
  • Dica 1: forneça mecanismos para que o usuário não cometa erros
  • Dica 2: caso o usuário cometa erros, o informe qual erro cometeu e como corrigi-lo

Robusto: O conteúdo deve ser colocado de forma que qualquer usuário possa acessa-lo com qualquer tecnologia de acesso a web

Diretriz 4.1 – compatível: use e abuse da semântica HTML e construa páginas que possam ser compatíveis com a maioria dos dispositivos, inclusive com tecnologias assistivas

Até agora, você já viu inúmeras recomendações e outras há no site da W3C. Porem, há situações em que a semântica HTML nãpo dá conta. É necessário estender essa semântica. O próxim tópico trata da solução para este problema: a WAI-ARIA

WAI-ARIA – Tornando a Web ainda mais semântica

O HTML 5 tornou a web muito semântica, trazendo tag novas como header, footer, nav, section, aside entre outras. Porem, há situações em que estes elementos são insuficientes para leitores de tela, como por exemplo, um menu drop-down. Ai surgiu o WAI-ARIA. O objetivo dela é fazer com que o conteúdo web seja mais acessível às tecnologias assistivas, como leitores de tela. Ela é uma recomendação da W3C, e independe de versão do HTML, sendo usada fora do HTML 5. A WAI-ARIA contém as roles e as arias:

Roles:

Estados e propriedades:

Um determinado elemento pode assumir um determinado estado. Para tanto, há as arias, que definem uma determinada propriedade e para tal, um determinado estado. Exemplo: uma popup modal, ela terá a propriedade haspopup que poderá estar como true ou false. Isso facilita ao leitor de tela identificar que aquele elemento, uma div por exemplo, é um modal popup, que está ativado ou não

A seguir, links interessantes para você estudar e ver alguns exemplos práticos de como aplicar a WAI-ARIA no seu HTML, e também o link da documentação da W3C (em inglês)

Onde encontrar mais conteúdo?