Introdução

Por que pensar em acessibilidade?

Pensar na acessibilidade é fundamental para mantermos uma sociedade mais inclusiva e justa. Quando falamos em deficiência, não falamos somente de problemas de visão ou audição, mas também de problemas cognitivos e de mobilidade. Todos nós teremos alguma limitação algum dia, mesmo que seja de forma temporária, como um osso quebrado, por exemplo. Além disso, cerca de 25% da população brasileira possui alguma deficiência.

Como devemos chamar essas pessoas?

Os termos mais usados atualmente são: PCD (pessoas com deficiência) e PNE (pessoas com necessidades especiais). Termos como especial, excepcional, pessoa com problema, palavras no diminutivo e inclusive deficiente podem ser vistos de forma desrespeitosa, além de caracterizarem a pessoa pela deficiência que ela tem: existe uma diferença entre ser e ter uma deficiência.

Quem determina os padrões de acessibilidade?

Os padrões são estabelecidos na WCAG - Diretrizes de Acessibilidade para Conteúdo Web. Essas diretrizes são determinadas pela organização W3C: Site da W3C.

Autismo:

O que é?

O autismo é uma síndrome e não uma deficiência, os "sintomas" apresentados variam de acordo com a pessoa, mas existem algumas características mais comuns: sentidos mais aguçados, dificuldade de interpretação e preocupação com padronização.

Cuidados que devem receber atenção:

  • Evitar cores muito brilhantes.
  • Usar uma linguagem direta e clara, sem muitas metáforas ou figuras de linguagem.
  • Procure deixar o design do site mais padronizado.
  • Crie botões e links de forma clara, além de alertar o usuário qual a sua função.
  • Não deixe blocos muito extensos de texto puro, divida-o em parágrafos, use títulos, subtítulos, imagens e ícones para facilitar a leitura.
  • Exagerar no uso de verbos no imperativo é má prática, pois é como se estivéssemos dando ordens aos usuários.
  • Confira os exemplos abaixo:

➜

➜

Não durma no ponto ➜ Preste atenção.

Estar de parar o trânsito ➜ Chamar atenção / Ficar bom.

Experiência de mercado ➜ Experiência profissional.

➜

➜

Surdez:

Trocar textos mais longos por imagens:

Como a língua portuguesa, seja ela escrita ou falada, é diferente de Libras, usar muito texto na página torna a leitura mais difícil para uma pessoa que não tenha o português como primeira língua. Por isso, é bom trocar textos mais longos por imagens, o que torna a página mais atrativa não só para pessoas com deficiência auditiva, mas também para o público geral. É importante também mostrar outras formas de contato, que sejam alternativas ao telefone.

Legendas:

Quando queremos colocar um vídeo na página, é importante verificar se o vídeo tem legendas. Isso é importante não só para a inclusão de pessoas com deficiência auditiva, mas também por uma questão de comodidade, às vezes, quando estamos em público ou não temos um fone à disposição pode ser preferível assistir o vídeo pela legenda.

Dislexia:

O que é a dislexia?

A dislexia não é uma deficiência, mas sim um transtorno. Esse transtorno pode apresentar diferentes sintomas de acordo com a pessoa, mas no geral, pessoas com dislexia têm dificuldade em ler e escrever textos. Além disso, outra dificuldade comum é na hora de memorizar certas informações, como números de telefone, nomes e entre outros.

Considerações importantes:

  • É recomendável usar o alinhamento de texto à esquerda, pois é a ordem natural de leitura no português.
  • Textos justificados acabam criando espaçamentos irregulares, que podem formar o que é conhecido como "caminhos de rato".
  • Utilize o alinhamento central somente em algumas situações, como nos títulos principais.
  • Padronize o texto, de forma a evitar decorações, como o underline, assim como palavras com letras maiúsculas, que dificultam a leitura.
  • No geral, evite textos muito longos.

ALGUM TEXTO QUALQUER

Algum texto qualquer.

Formulários e cores:

É boa prática colocar não só placeholders, mas também labels nos inputs, por conta da possível dificuldade na memorização, também é recomendável que os inputs tenham maneiras de fazer correções ou sugestões em caso de erros. Outra característica possível é a sensibilidade a cores com contraste muito alto, que podem causar dor de cabeça em alguns dislexos. Tente usar cores com contraste menor, por exemplo:

➜

Vídeos e animações:

Colocar vídeos de fundo pode tirar a atenção de pessoas neurotípicas no geral, dificultando ainda mais a leitura. É preferível tirar um print do vídeo e colocar de fundo.

Baixa visão:

Contraste e fonte mínima

Para pessoas com baixa visão, o contraste mínimo entre a cor da fonte e o texto deve ser de 4.5 : 1. O nível de contraste pode ser verificado com uma ferramenta constrast checker, que pode ser encontrada em diversos sites. Além disso, o tamanho mínimo de fonte varia de acordo com as diretrizes seguidas, mas no geral o mínimo varia entre 14 e 16.

Você pode verificar o contraste pelo site: contrastchecker.com

Informações escondidas e zoom

Procure deixar todas as informações necessárias no seu site, evite fazer com que o usuário tenha que baixar um pdf ou algo do tipo, pois isso pode dificultar a navegação. É importante lembrar que o zoom, principalmente no celular, é uma ferramenta fundamental para qualquer pessoa que apresenta alguma dificuldade na visão, por isso nunca bloqueie o zoom dos usuários.

initial-scale=1.0, maximum-scale=1.0, user-scalable=no : Essas propriedades que podem ser colocadas na tag meta viewport da head bloqueiam o zoom da página para usuários mobiles, portanto jamais faça isso.

Daltonismo

Pensando em pessoas com daltonismo, é importante não passar informação somente por cor e dar mensagens de erro descritivas, pois é possível que a pessoa não consiga discernir o vermelho do verde, portanto só a mudança de cor em caso de erro em formulários não seria suficiente, por exemplo.

Deficiências físicas:

Pontos importantes:

Quando falamos melhorar a acessibilidade para pessoas com deficiência física, estamos pensando em vários tipos de limitação, desde casos de Parkinson e pessoas que precisam usar adaptadores para navegar na internet até pessoas com lesões como ossos quebrados ou queimaduras.

São algumas boas práticas:

  • Não crie botões muito pequenos, o tamanho mínimo de um botão varia entre 44px e 50px de acordo com as diretrizes seguidas.
  • Facilite a navegação do site, crie uma barra de navegação clara.
  • Proporcione outras formas de navegar, de modo que o uso de mouse não seja obrigatório (possibilitar o uso do teclado, por exemplo).
  • Tome cuidado com pop-ups que aparecem do nada.
  • Evite campos de input desnecessários, digitar muito pode ser um desafio para algumas pessoas. Por exemplo, usar o CEP para pegar o endereço automaticamente.
  • Coloque um espaçamento adequado entre os elementos.
Botão muito pequeno - 10px : 10px
Botão com tamanho bom - 45px : 45px
Quando o input e o label estão ligados, é possível selecionar o botão clicando no texto, o que melhora a usabilidade.

Pessoas com deficiência visual:

O atributo lang:

Atributo que define a linguagem de determinado elemento, em leitores de tela, muda o sotaque utilizado, assim é fundamental marcar devidamente a linguagem que está sendo utilizada no momento. Lembre-se também de escrever corretamente e respeitar as regras de acentuação e ortografia.

Perceba como fica estranho usar o leitor de tela com as langs invertidas:

This has been written in English.

Isto está escrito em português do Brasil.

Imagens:

  • Descreva as imagens devidamente com o atributo alt, isto é, se elas possuírem um significado maior, além do visual. Tentar descrever os sentimentos que queremos passar com a imagem é uma boa prática para acessibilidade. Outra função desse atributo é descrever a foto caso algum problema aconteça e ela não consiga ser renderizada.
  • Evite começar a escrever o alt com palavras como Imagem, Ícone, Foto e entre outras, pois os leitores de tela normalmente já avisam de que se trata de uma imagem, assim ficando redundante. Ainda assim, é válido dizer quando trata-se de um desenho ou ilustração.
  • Quando temos uma imagem dentro de um link, a descrição com o alt acaba não sendo possível, para resolver esse problema, podemos utilizar o atributo title. Também é podemos usar title e alt ao mesmo tempo em uma imagem, contudo isso provavelmente irá dificultar o entendimento ao invés de ajudar.

Semântica das tags:

Evite usar vários h1s na mesma página, procure usar tags que melhor definam o que você deseja expressar e organizar de acordo com o que é mais importante. Podemos utilizar tags mais específicas para cada situação com a finalidade de melhorar a semântica do código, como usar address para endereços, figure como container para imagens, code para código, article para artigos, summary para índice e resumos, entre outras.

Influência do CSS:

O CSS pode interferir na forma como os leitores de tela leêm a página, por exemplo:

  • Listas: a propriedade list-style influencia na leitura, usar disc, por exemplo, faz com que o leitor leia 'bolinha'. Para evitar isso, podemos usar pseudoelementos CSS.
  • Escondendo elementos: as propriedades display: none e visibility: hidden escondem os elementos não só visualmente, mas também para os leitores de tela. Podemos substituí-las por opacity: 0 ou position: absolute; left: -9999px;
  • Lista com list-style
  • Lista com pseudoelemento
.listaComListStyle {
list-style: disc;
}
.listaComListStyle li::before {
content: "";
}
.listaComPseudoelemento li::before {
content: "• ";
}

Melhorando a navegação:

É importante pensar na navegação para pessoas que necessitam de um teclado ou adaptador para navegar na internet, por isso dê a opção de pular menus de navegação e ir direto para o conteúdo e organize bem uma tabela de conteúdos para seu site.

WAI-ARIA:

API da W3 criada para facilitar a acessibilidade, com a definição de roles, states e properties.

Principais roles:

  • banner : referente ao header, onde normalmente ficam logo, barra de pesquisa, etc.
  • main : conteúdo principal, correspondente à tag main.
  • complementary : conteúdo complementar, corresponde à tag aside.
  • search : corresponde ao componente de pesquisa.
  • contentinfo : refere-se a informações extras, normalmente corresponde ao footer.

State:

  • Define o estado atual de um elemento.
  • Exemplo: input aria-invalid="true", dirá ao leitor de tela que o input está invalido.

Algumas properties:

  • aria-haspopup="true" : avisa que um botão chama um pop-up.
  • aria-label : rótulo a ser mostrado no leitor de tela.
  • aria-labelledby : informa que elemento está rotulando este, funciona de forma parecida com o label - input ligados com for - id.

Formulários:

Não se esqueça de usar placeholders e labels ligados a inputs com for e id, essas boas práticas facilitam a utilização para pessoas que usam leitores de tela. Outro ponto considerável é que inputs disabled não podem ser focados por eles, então caso o campo esteja certo, pode ser melhor colocá-lo como readonly ao invés de disabled.