Acessibilidade

Como melhorar a acessibilidade para páginas da Web

Alice boxhall
Alice Boxhall
Dave gash
Dave Gash
Meggin kearney
Meggin Kearney

Este conjunto de documentos é uma versão baseada em texto de parte do conteúdo abordado no curso da Udacity sobre acessibilidade (link em inglês). Em vez de uma transcrição direta do curso em vídeo, ele precisa ser um tratamento mais conciso dos princípios e práticas de acessibilidade, usando o conteúdo original do curso como base.

Resumo

  • Saiba o que significa acessibilidade e como ela se aplica ao desenvolvimento da Web.
  • Aprenda a tornar sites acessíveis e utilizáveis para todos.
  • Aprenda a incluir a acessibilidade básica com impacto mínimo no desenvolvimento.
  • Saiba quais recursos HTML estão disponíveis e como usá-los para melhorar a acessibilidade.
  • Aprenda sobre técnicas avançadas de acessibilidade para criar experiências de acessibilidade sofisticadas.

Entender a acessibilidade, o escopo e o impacto dela pode tornar você um desenvolvedor da Web melhor. O objetivo deste guia é ajudar você a entender como tornar seus sites acessíveis e utilizáveis para todos.

"Acessibilidade" pode ser difícil de soletrar, mas não precisa ser difícil de realizar. Neste guia, você vai aprender a conseguir algumas vitórias fáceis para ajudar a melhorar a acessibilidade com o mínimo de esforço, como usar o que está integrado ao HTML para criar interfaces mais acessíveis e robustas e como aproveitar algumas técnicas avançadas para criar experiências acessíveis e sofisticadas.

Você também descobrirá que muitas dessas técnicas ajudam a criar interfaces que são mais agradáveis e fáceis de usar para todos os usuários, não apenas para pessoas com deficiência.

É claro que muitos desenvolvedores têm apenas uma compreensão nebulosa do que significa acessibilidade. Algo a ver com contratos governamentais, listas de verificação e leitores de tela. e há muitos equívocos por aí. Por exemplo, muitos desenvolvedores sentem que lidar com a acessibilidade os forçará a escolher entre criar uma experiência agradável e atraente por uma experiência desajeitada e feia, mas acessível.

Obviamente, esse não é o caso, então vamos esclarecer isso antes de entrar em qualquer outra coisa. O que queremos dizer com acessibilidade e o que estamos aqui para aprender?

O que é acessibilidade?

De modo geral, quando dizemos que um site é acessível, significa que o conteúdo dele está disponível e que a funcionalidade dele pode ser operada, literalmente, por qualquer pessoa. Como desenvolvedores, é fácil presumir que todos os usuários podem ver e usar um teclado, mouse ou touchscreen e interagir com o conteúdo da página da mesma maneira que você. Isso pode levar a uma experiência que funciona bem para algumas pessoas, mas cria problemas que variam de simples aborrecimentos a interrupções para outras.

Acessibilidade, portanto, refere-se à experiência de usuários que podem estar fora do limite restrito do usuário "típico", que pode acessar ou interagir com as coisas de maneira diferente do que você espera. Especificamente, ela diz respeito a usuários que estão enfrentando algum tipo de deficiência ou inaptidão, e tenha em mente que essa experiência pode ser não física ou temporária.

Por exemplo, embora a tendência seja centrar nossa discussão sobre acessibilidade em usuários com deficiências físicas, todos podemos nos identificar com a experiência de usar uma interface que não é acessível por outros motivos. Você já teve um problema ao usar um site para computador em um celular, ou viu a mensagem "Este conteúdo não está disponível na sua área" ou não conseguiu encontrar um menu familiar em um tablet? Esses são os problemas de acessibilidade.

Conforme você aprender mais, vai descobrir que resolver problemas de acessibilidade neste sentido mais amplo e geral quase sempre melhora a experiência do usuário para todos. Vejamos um exemplo:

Um formulário com acessibilidade ruim.

Este formulário tem vários problemas de acessibilidade.

  • O texto está em baixo contraste, que é difícil para usuários com baixa visão lerem.
  • Com rótulos à esquerda e campos à direita dificulta a associação de muitas pessoas, e quase impossível para alguém que precise aumentar o zoom para usar a página. Imagine olhar para isso em um smartphone e ter que movimentar a tela para descobrir o que acontece com o quê.
  • O rótulo "Lembrar detalhes?" não está associado à caixa de seleção, então você precisa tocar ou clicar apenas no quadrado pequeno em vez de apenas clicar no rótulo. Além disso, alguém que usa um leitor de tela teria problemas para descobrir a associação.

Agora, vamos acenar com a varinha de acessibilidade e conferir o formulário com esses problemas corrigidos. Vamos escurecer o texto, modificar o design para que os rótulos fiquem próximos das coisas que eles estão rotulando e corrigir o rótulo a ser associado à caixa de seleção para que você possa alternar clicando no rótulo também.

Um formulário com acessibilidade aprimorada.

Qual você prefere usar? Se disse "a versão acessível", você está a caminho de entender a premissa principal deste guia. Muitas vezes, algo que bloqueia completamente alguns usuários também é um aspecto problemático para muitos outros. Portanto, ao corrigir o problema de acessibilidade, você melhora a experiência de todos.

Diretrizes de Acessibilidade para Conteúdo Web

Neste guia, vamos nos referir às Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.0 (link em inglês), um conjunto de diretrizes e práticas recomendadas reunidas por especialistas em acessibilidade para abordar o que significa "acessibilidade" de forma metódica.

As WCAG são organizadas em torno de quatro princípios frequentemente chamados pela sigla POUR:

  • Perceptível: os usuários conseguem notar o conteúdo? Isso nos ajuda a ter em mente que só porque algo é perceptível com um sentido, como a visão, não significa que todos os usuários podem percebê-lo.

  • Operável: os usuários podem usar componentes da interface e navegar pelo conteúdo? Por exemplo, algo que requer uma interação de passar o cursor não pode ser operado por alguém que não pode usar o mouse ou touchscreen.

  • Compreensível: os usuários conseguem entender o conteúdo? Os usuários conseguem entender a interface, e ela é consistente o suficiente para evitar confusão?

  • Robusto: o conteúdo pode ser consumido por uma grande variedade de user agents (navegadores)? Ele funciona com tecnologia adaptativa?

Embora as WCAG forneçam uma visão geral abrangente do que significa que o conteúdo é acessível, elas também podem ser um pouco esmagadoras. Para ajudar a atenuar isso, o grupo WebAIM(Web Accessibility in Mind) definiu as diretrizes WCAG em uma lista de verificação fácil de seguir, voltada especificamente para conteúdo da Web.

A lista de verificação WebAIM pode fornecer um breve resumo de alto nível do que você precisa implementar, além de usar links para a especificação WCAG subjacente, caso precise de uma definição ampliada.

Com essa ferramenta em mãos, você pode traçar uma direção para seu trabalho de acessibilidade e ter certeza de que, desde que seu projeto atenda aos critérios descritos, seus usuários terão uma experiência positiva ao acessar seu conteúdo.

Entender a diversidade dos usuários

Ao aprender sobre acessibilidade, é útil compreender a diversidade de usuários no mundo e os tipos de temas de acessibilidade que os afetam. Para explicar melhor, aqui está uma sessão informativa de perguntas/respostas com Victor Tsaran, gerente técnico de programa do Google, que é totalmente cego.

Victor Tsaran
Victor Tsaran

Com o que você trabalha no Google?

Aqui no Google, meu trabalho é ajudar a garantir que nossos produtos funcionem para todos os nossos diversos usuários, independentemente de deficiência ou habilidade.

Que tipos de deficiências os usuários têm?

Quando pensamos sobre os tipos de deficiências que dificultam o acesso de alguém ao nosso conteúdo, muitas pessoas imaginam imediatamente um usuário cego como eu. E é verdade, essa deficiência pode realmente tornar frustrante ou mesmo impossível usar muitos sites.

Muitas técnicas modernas da Web têm o efeito colateral de criar sites que não funcionam bem com as ferramentas usadas por usuários cegos para acessar a Web. No entanto, a acessibilidade é muito mais do que isso. É útil pensar em deficiências classificadas em quatro grupos abrangentes: visual, motora, auditiva e cognitiva.

Vamos analisar um de cada vez. Você pode dar alguns exemplos de deficiência visual?

As deficiências visuais podem ser divididas em algumas categorias: usuários sem visão, como eu, podem usar um leitor de tela, braille ou uma combinação dos dois.

Um leitor de braille.
Um leitor de braille

Na verdade, é muito incomum não ter literalmente nenhuma visão, mas ainda assim, há uma boa chance que você conheça ou tenha conhecido pelo menos uma pessoa que não consegue enxergar. No entanto, também há um número muito maior do que chamamos de usuários com baixa visão.

Essa é uma faixa ampla, de alguém como minha esposa, que não tem córneas - embora ela possa ver as coisas que tem dificuldade para ler impressões e é considerada legalmente cega - a alguém que pode ter apenas visão ruim e precisa usar óculos muito fortes.

Há uma grande variedade, e, portanto, há uma grande variedade de acomodações que as pessoas dessa categoria usam: algumas usam um leitor de tela ou uma linha braille (Eu já ouvi falar de uma mulher que lê braille exibido na tela porque é mais fácil de ver do que texto impresso), ou elas podem usar a tecnologia de conversão de texto em voz sem a funcionalidade do leitor de tela cheia, ou podem usar uma lupa ou apenas uma lupa para zoom em partes maiores do navegador ou Eles também podem usar opções de alto contraste, como um modo de alto contraste do sistema operacional, uma extensão de navegador de alto contraste ou um tema de alto contraste para um site.

Modo de alto contraste.
Modo de alto contraste

Muitos usuários até usam uma combinação disso, como minha amiga Laura, que usa uma combinação do modo de alto contraste, zoom do navegador e conversão de texto em voz.

A baixa visão é algo com que muitas pessoas se identificam. Para começar, todos nós tivemos a deterioração da visão à medida que envelhecemos. Portanto, mesmo que você não tenha passado por isso, há uma boa chance de ter ouvido seus pais reclamarem. No entanto, muitas pessoas têm a frustração de levar o laptop para uma janela ensolarada e descobrir que, de repente, não conseguem ler nada. Ou qualquer pessoa que tenha feito cirurgia a laser ou talvez apenas tenha que ler algo do outro lado da sala pode ter usado uma dessas acomodações que mencionei. Acho que é muito fácil para os desenvolvedores ter alguma empatia por usuários de baixa visão.

Ah, e não devo esquecer de mencionar pessoas com visão ruim das cores: cerca de 9% dos homens têm algum tipo de deficiência de visão de cores. Além de cerca de 1% das mulheres. Eles podem ter dificuldade em distinguir vermelho e verde ou amarelo e azul. Pense nisso da próxima vez que projetar a validação de formulário.

E quanto a deficiências motoras?

Sim, deficiências motoras ou deficiências de destreza. Esse grupo varia desde pessoas que preferem não usar um mouse, porque talvez tenham tido alguma RSI ou algo doloroso, até alguém que pode estar fisicamente paralisado e ter amplitude limitada de movimento em determinadas partes do corpo.

Uma pessoa usando um dispositivo de rastreamento ocular.
Um dispositivo de rastreamento ocular

Usuários com deficiência motora podem usar teclado, interruptor, controle de voz ou até mesmo um dispositivo de rastreamento ocular para interagir com o computador.

Assim como as deficiências visuais, a mobilidade também pode ser um problema temporário ou situacional: talvez você tenha um pulso quebrado na mão do mouse. Talvez o trackpad do laptop esteja quebrado ou você esteja apenas viajando em um trem instável. Pode haver muitas situações em que a mobilidade de um usuário é impedida e, ao garantir que atendemos a eles, melhoramos a experiência geral, tanto para pessoas com deficiências permanentes quanto para pessoas que temporariamente não podem usar uma interface baseada em ponteiro.

Ótimo, vamos falar sobre deficiência auditiva.

Esse grupo pode variar de pessoas surdas até aquelas com deficiência auditiva. E, assim como a visão, a audição tende a piorar com a idade. Muitos de nós usam affordances comuns, como aparelhos auditivos para nos ajudar.

Uma televisão com legendas na parte de baixo.
Legendas da tela

Para usuários com deficiência auditiva, precisamos ter certeza de que não dependemos do som. Por isso, usamos recursos como legendas e transcrições de vídeos, além de fornecer algum tipo de alternativa, caso o som faça parte da interface.

Como vimos nas deficiências visual e motora, é muito fácil imaginar uma situação em que alguém com ouvidos bem-sucedidos também se beneficiaria dessas acomodações. Muitos dos meus amigos dizem que adoram quando os vídeos têm legendas e transcrições, porque isso significa que, se estiverem em um escritório aberto e não tiverem seus fones de ouvido, poderão assistir ao vídeo!

Tudo bem, você pode nos contar um pouco sobre deficiências cognitivas?

Há uma série de condições cognitivas como TDA, Dislexia e Autismo, o que pode significar que as pessoas querem ou precisam acessar os itens de forma diferente. As acomodações para esses grupos são naturalmente extremamente diversificadas, mas definitivamente encontramos alguma sobreposição com outras áreas, como o uso da funcionalidade de zoom para facilitar a leitura ou a concentração. Além disso, esses usuários podem achar que um design realmente mínimo funciona melhor, porque minimiza a distração e a carga cognitiva.

Acho que todos podem se identificar com o estresse da sobrecarga cognitiva, então é óbvio que, se criarmos algo que funciona bem para alguém com uma deficiência cognitiva, vamos criar algo que será uma experiência agradável para todos.

Então, como você resumiria sua opinião sobre acessibilidade?

Ao observar a ampla gama de habilidades e deficiências que as pessoas podem ter, podemos ver que projetar e criar produtos apenas para pessoas com visão, audição, destreza e cognição perfeitas parece incrivelmente restrito. É quase autodestrutivo, porque estamos criando uma experiência mais estressante e menos usável para todos e, para alguns, criar uma experiência que realmente os exclui completamente.

Nesta entrevista, Victor identificou uma variedade de deficiências e as classificou em quatro categorias amplas: visuais, motoras, outas e cognitivas. Ele também apontou que cada tipo de deficiência pode ser situacional, temporária ou permanente.

Vamos conferir alguns exemplos reais de deficiências de acesso e saber onde elas se encaixam nessas categorias e tipos. Algumas deficiências podem se enquadrar em mais de uma categoria ou tipo.

Situacional Temporária Permanente
Visual concussão cegueira
Motor segurando um bebê braço quebrado, LER* RSD*
Audição escritório barulhento
Cognição concussão

Lesão por esforço repetitivo: por exemplo, síndrome do túnel do carpo, cotovelo de tenista, dedo em gatilho

Próximas etapas

Já avançamos um pouco! Você leu sobre

  • o que é acessibilidade e por que ela é importante para todos
  • as WCAG e a lista de verificação de acessibilidade do WebAIM
  • diferentes tipos de deficiências que você deve considerar

No restante do guia, vamos mergulhar nos aspectos práticos da criação de sites acessíveis. Organizaremos este esforço em três assuntos principais:

  • Foco: veremos como criar coisas que podem ser operadas com um teclado em vez de um mouse. Isso é importante para usuários com deficiências motoras, obviamente, mas também garante que a interface esteja em boa forma para todos os usuários.

  • Semântica: expressamos nossa interface do usuário de maneira robusta e que funcione com várias tecnologias adaptativas.

  • Estilo: vamos considerar o design visual e analisar algumas técnicas para tornar os elementos visuais da interface o mais flexível e usável possível.

Cada um desses assuntos poderia preencher um curso inteiro, então não abordaremos todos os aspectos da criação de sites acessíveis. No entanto, forneceremos informações suficientes para começar e indicaremos bons lugares em que você poderá aprender mais sobre cada tópico.