“O poder da Web está em sua universalidade. O acesso de todos, independentemente da deficiência, é um aspecto essencial. ”
– Tim Berners-Lee, diretor do W3C e inventor da World Wide Web
Nos últimos dois anos, o WebAIM realizou uma avaliação de acessibilidade das páginas iniciais dos principais 1.000.000 de sites. Seus resultados mostram que os erros de acessibilidade ainda são incrivelmente predominantes, mesmo em sites populares.
- “No milhão de páginas iniciais, foram detectados 60.909.278 erros de acessibilidade distintos – uma média de 60,9 erros por página”.
- “Os usuários com deficiência esperam encontrar erros detectáveis em 1 em cada 14 elementos da página inicial com os quais se envolvem.”
No total, 98,1% das home pages apresentaram falhas detectáveis nas WCAG 2 – um aumento de 97,8% no ano anterior.
Como parte de sua análise, o WebAIM compartilhou quais foram as seis falhas mais comuns das WCAG.
| Tipo de falha das WCAG | % de páginas iniciais em fevereiro de 2020 | % de páginas iniciais em fevereiro de 2019 |
|---|---|---|
| Texto de baixo contraste | 86,3% | 85,3% |
| Texto alternativo ausente para imagens | 66,0% | 68,0% |
| Links vazios | 59,9% | 58,1% |
| Etiquetas de entrada de formulário ausentes | 53,8% | 52,8% |
| Botões vazios | 28,7% | 25,0% |
| Idioma do documento ausente | 28,0% | 33,1% |
Neste post, descreverei cada uma dessas falhas e responderei por que são importantes e como podemos corrigi-las. Demonstrações ao vivo para cada uma das falhas podem ser vistas com o aplicativo de demonstração .
Texto de baixo contraste
“Em média, as páginas iniciais tinham 36 instâncias distintas de texto de baixo contraste”.
Os sites devem ter um alto contraste de cores entre todo o texto e a cor do plano de fundo. Em outras palavras, o brilho do texto não deve estar muito próximo do brilho do fundo.
O texto de baixo contraste torna mais difícil para o leitor distinguir as formas e bordas dos caracteres, reduzindo a velocidade e a compreensão da leitura. Esse problema é enfatizado à medida que o tamanho do texto diminui, tornando esse problema cada vez mais importante à medida que o número de usuários móveis continua a crescer.
(Passe o mouse sobre o parágrafo anterior para ver por si mesmo.)
As dificuldades com o texto de baixo contraste são ampliadas para quem sofre de baixa visão. Uma em cada doze pessoas não consegue ver todo o espectro de cores. Muitos idosos perdem a sensibilidade ao contraste com o envelhecimento. Uma pessoa com baixa visão será incapaz de ler o texto em um fundo sem contraste suficiente.
Como corrigi-lo
Uma das razões pelas quais o texto de baixo contraste é tão comum é que é tão difícil de detectar. Ao escrever ou revisar algum código, você pode ver que o texto possui um valor hexadecimal #f2f2f2e o plano de fundo possui um valor igual a #808dd1. Isso é um contraste de cores suficiente? Mesmo verificando a aparência da tela, é difícil determinar se o contraste é suficiente para pessoas com baixa visão ou em telas menores.Olá Mundo
Felizmente, existem várias ferramentas que podem medir o contraste da cor automaticamente e destacar qualquer uma que não atenda ao critério de sucesso.
O Lighthouse é uma ferramenta criada pelo Google e já está embutida no navegador se você estiver usando o Google Chrome (também existem extensões de navegador para outros navegadores). A execução de uma auditoria gerará um relatório que sinalizará os problemas de acessibilidade no site. Ele listará todos os elementos que detectar, cujas cores de plano de fundo e primeiro plano do texto não tenham uma taxa de contraste suficientemente alta.
Depois de conhecer os elementos que não atendem aos critérios de sucesso, você pode ajustar as cores de segundo plano e de primeiro plano para aumentar o contraste.
Existem vários analisadores de contraste de cores que podem ajudá-lo a encontrar duas cores com contraste suficiente. Se você estiver usando o Google Chrome, poderá usar o seletor de cores do Chrome DevTools , que exibirá duas linhas brancas para mostrar os limites de AA e AAA.
As WCAG definem o critério de sucesso para o contraste do texto como uma taxa de contraste de 4,5: 1. Para o nosso exemplo do Hello World acima, podemos ver que o contraste da cor é de apenas 2,82, o que não atinge o limite. Ao aumentar o contraste, podemos melhorar a legibilidade e acessibilidade do elemento.Olá MundoRatio Relação de contraste 2,82Olá MundoRatio Relação de contraste 6,87
Texto alternativo ausente para imagens
“31,3% de todas as imagens da página inicial (12 por página, em média) tinham texto alternativo ausente…
“Esses dados mostram que se pode esperar que quase metade das imagens na web tenha texto alternativo ausente, questionável ou repetitivo”.
Todas as imagens devem ter texto alternativo para transmitir seu significado aos usuários de leitores de tela.
Um leitor de tela é usado por pessoas cegas ou com deficiência visual. Ele transmite as informações visuais na tela de outra forma, como a leitura do texto em voz alta.
Os leitores de tela não têm como traduzir uma imagem em palavras. Portanto, é necessário fornecer a cada imagem um texto alternativo curto e descritivo que será usado pelo leitor de tela para transmitir o conteúdo e a finalidade da imagem.
Como corrigi-lo
O texto alternativo deve ser curto e descritivo. Ele deve descrever o conteúdo e a finalidade da imagem, evitando detalhes irrelevantes que diluirão os detalhes úteis.
Existem três maneiras principais de adicionar texto alternativo a uma imagem:
- Se a imagem for mostrada usando uma
imgtag, você poderá usar oaltatributo - Se a imagem for mostrada com outra tag, como a imagem de segundo plano de a
div, você poderá usar oaria-labelatributo - Se a imagem for descrita pelo conteúdo de outro elemento, você poderá usar o
aria-labelledbyatributo
<!-- ❌ Missing alternative text -->
<img src="cow.jpg" />
<div class="cool-bg-image" />
<div class="another-cool-bg-image" aria-labelledby="non-existent" />
<!-- ✅ With alternative text -->
<img src="cow.jpg" alt="a sad seal" />
<div class="cool-bg-image" aria-label="an angry alligator" />
<div class="another-cool-bg-image" aria-labelledby="my-label" />
<div id="my-label">a happy hyena</div>
Se uma imagem é puramente decorativa, você pode fornecer um texto alternativo ""para indicar ao leitor de tela que não deve ser lido em voz alta. Isso impede que o leitor de tela leia informações que não são úteis.
<img src="decoration.jpg" alt="" />
Links vazios e botões vazios
O texto do link e do botão deve ser discernível por um leitor de tela. Isso inclui texto alternativo para imagens quando usado como links ou botões.
É comum na web que links e botões sejam mostrados como símbolos ou imagens. Isso é particularmente útil quando o espaço é limitado, como em telas menores e dispositivos móveis. No entanto, os leitores de tela terão dificuldade em traduzir o objetivo desses elementos para o usuário.
Por exemplo, estamos muito acostumados a ver botões com um sinal de “+” para representar a adição de algo a uma lista ou um logotipo para representar um link.+
<!-- ❌ Missing descriptive labels -->
<button>+</button>
<a href="...">
<img src="twitter.svg" />
</a>
Quando lido por um leitor de tela:
- o botão será lido como “botão de adição”.
- o link será lido como o nome do arquivo de imagem ou o URL da página que está sendo vinculada.
Essas descrições podem ser boas quando você pode ver a tela inteira e entender o contexto do botão / link, mas um leitor de tela não poderá fornecer esses detalhes adicionais.
Como corrigi-lo
As descrições podem ser adicionados a botões e links usando o aria-labele aria-labelledbyatributos. Essas descrições serão lidas pelo leitor de tela, oferecendo ao usuário uma compreensão mais clara da finalidade do elemento.
<!-- ✅ With descriptive labels -->
<button aria-label="Add a playlist">+</button>
<a href="..." aria-label="View our Twitter page">
<img src="twitter.svg" />
</a>
Etiquetas de entrada de formulário ausentes
“55% dos 4,2 milhões de formulários identificados não foram devidamente rotulados”
– O milhão de WebAIM
Cada elemento de um formulário deve ter um elemento de rótulo associado programaticamente.
Rótulos de formulário úteis são necessários para entender a finalidade de cada elemento do formulário. Esse objetivo geralmente pode ser inferido por usuários com visão, usando informações como a proximidade do rótulo ao elemento ou o espaço reservado do elemento. No entanto, um leitor de tela não pode fazer essas suposições, portanto, exige que o rótulo seja associado programaticamente ao elemento.
Clicar em um elemento de rótulo associado programaticamente também ativa o controle. Isso beneficia usuários com habilidades motoras prejudicadas, ou qualquer usuário que utilize uma tela pequena, fornecendo uma área maior clicável.
Como corrigi-lo
Existem três maneiras principais de adicionar um rótulo a um elemento do formulário:
- Aninhe o elemento de entrada dentro do elemento de rótulo.
- Atribua ao rótulo um
foratributo, que é igual ao doidelemento de entrada. - Atribua ao elemento de entrada um
aria-labelledbyatributo, que é igual aoiddo elemento que atua como um rótulo.
<!-- ❌ Missing input labels -->
<label>Name</label>
<input />
<div>Name</div>
<input />
<!-- ✅ With input labels -->
<label>Name: <input /></label>
<label for="name">Name</label>
<input id="name" />
<div id="name">Name</div>
<input aria-labelledby="name" />
Idioma do documento ausente
O elemento do documento HTML deve conter um langatributo válido .
Quando os usuários configuram um leitor de tela, eles selecionam um idioma padrão. Se o idioma de um site não for especificado, o leitor de tela utilizará o idioma padrão definido pelo usuário.
Se o usuário fala vários idiomas, ele pode estar visitando um site escrito em um idioma diferente do padrão no leitor de tela. Se a biblioteca de idiomas errada for usada, as pronúncias das palavras serão estranhas, impossibilitando o uso do site.
Como encaixar
Adicione um langatributo ao elemento html cujo valor represente o idioma principal do site. Os valores possíveis para o atributo podem ser encontrados no Registro de sub-etiquetas de idioma da IANA ou usando a ferramenta Pesquisa de sub-etiquetas de idioma .
<!-- ❌ Missing lang attribute -->
<html>
<!--document head and body-->
</html>
<!-- ✅ With lang attribute -->
<html lang="en">
<!--document head and body-->
</html>
Se o idioma mudar dentro do site, você poderá especificar isso com outro langatributo. Se o idioma estiver escrito da direita para a esquerda, você também deve especificar isso com o diratributo
<p>Text in one language <span lang="es">texto en otro idioma</span></p>
<p lang="ar" dir="rtl">النص العربي هنا</p>
Conclusão
“A acessibilidade é essencial para desenvolvedores e organizações que desejam criar sites e ferramentas da Web de alta qualidade, e não excluir as pessoas do uso de seus produtos e serviços.”
Pode ser difícil lembrar de incluir acessibilidade em seu site enquanto você o cria, principalmente como uma pessoa que pode não ser afetada pelas falhas. Felizmente, ferramentas e recursos podem nos ajudar.
Como mencionado acima, o Lighthouse é uma ferramenta incrível para verificar a qualidade de um site. Ele pode criar uma auditoria em várias categorias, incluindo desempenho, SEO e acessibilidade. Eles oferecem extensões de navegador e, se você estiver usando o Google Chrome, ele já está incorporado no Chrome DevTools.
Deque também oferece a extensão do navegador Ax para Chrome e Firefox . Como o Lighthouse, esta extensão listará os problemas de acessibilidade da página atual. Se você selecionar um problema, poderá realçar cada um dos elementos com esse problema. Ele também fornece detalhes como qual é o problema, a gravidade do problema e fornece um link onde você pode aprender mais sobre ele.
Ao usar essas ferramentas, podemos melhorar facilmente a acessibilidade de nossos sites e ajudar a atingir o objetivo da Web de “trabalhar para todas as pessoas, independentemente de seu hardware, software, idioma, local ou capacidade”.