Introdução à semântica e tecnologia assistiva
Você aprendeu como tornar um site acessível a usuários que não conseguem utilizar um mouse ou dispositivo apontador (devido a uma deficiência física, um problema de tecnologia ou preferência pessoal) abordando o uso apenas do teclado. Embora isso exija um pouco de cuidado e reflexão, não é muito trabalho se você planejar desde o início. Quando esse trabalho básico estiver concluído, você terá trilhado um longo caminho até um site totalmente acessível e mais sofisticado.
Nesta lição, vamos desenvolver esse trabalho e fazer você pensar sobre outros fatores de acessibilidade, por exemplo, como criar sites para oferecer suporte a usuários como Victor Tsaran, que não conseguem ver a tela.
Primeiro, vamos entender o contexto da tecnologia assistiva, o termo geral para ferramentas como leitores de tela que ajudam usuários com deficiências que podem impedi-los de acessar informações.
Em seguida, analisaremos alguns conceitos gerais de experiência do usuário, e os basearemos para nos aprofundarmos na experiência dos usuários de tecnologia adaptativa.
Por fim, veremos como usar o HTML de maneira eficaz para criar uma boa experiência para esses usuários e como isso se sobrepõe bastante à maneira como abordamos o foco anteriormente.
Tecnologia assistiva
Tecnologia assistiva é um termo abrangente para dispositivos, softwares e ferramentas que ajudam qualquer pessoa com deficiência a concluir uma tarefa. No sentido mais amplo, pode ser algo de baixa tecnologia, como uma muleta para andar ou uma lupa para leitura, ou algo de alta tecnologia como um braço robótico ou um software de reconhecimento de imagem em um smartphone.
A tecnologia assistiva pode incluir algo tão geral, como o zoom do navegador, ou tão específico quanto um controle de jogo personalizado. Ele pode ser um dispositivo físico separado, como uma linha braille, ou ser implementado totalmente em software como o controle de voz. Ele pode ser integrado ao sistema operacional, como alguns leitores de tela, ou um complemento, como uma extensão do Chrome.
A linha entre a tecnologia adaptativa e a tecnologia em geral é tênue. Afinal, toda a tecnologia destina-se a ajudar as pessoas com uma ou outra tarefa. E as tecnologias podem muitas vezes entrar e sair da categoria "assistiva".
Por exemplo, um dos primeiros produtos comerciais de síntese de fala foi uma calculadora falante para cegos. A síntese de fala está em todos os lugares, desde rotas de carro até assistentes virtuais. Por outro lado, uma tecnologia que era originalmente de uso geral muitas vezes encontra um uso assistivo. Por exemplo, pessoas com baixa visão podem usar o zoom da câmera do smartphone para enxergar melhor algo pequeno no mundo real.
No contexto do desenvolvimento da Web, precisamos considerar uma variedade de tecnologias. As pessoas podem interagir com seu site usando um leitor de tela, uma linha braille, uma lupa, um controle de voz, um interruptor ou outra forma de tecnologia adaptativa que adapte a interface padrão da página para criar uma interface mais específica.
Muitas dessas tecnologias adaptativas dependem de semânticas expressas de modo programático para criar uma experiência do usuário acessível, e é disso que trata a maior parte desta aula. Mas, antes de explicar a semântica expressa de maneira programática, precisamos falar um pouco sobre affordances.
Affordances
Quando usamos uma ferramenta ou um dispositivo feito pelo homem, geralmente observamos a forma e o design para ter uma ideia do que faz e como funciona. Uma affordance é qualquer objeto que oferece ao usuário a oportunidade de realizar uma ação. Quanto melhor a affordance for projetada, mais óbvio ou intuitivo é seu uso.
Um exemplo clássico é uma chaleira ou bule. Você pode reconhecer facilmente que precisa apanhá-la pela alça, não pelo bico, mesmo que nunca tenha visto um bule antes.
Isso porque a affordance é semelhante àquela que você viu em muitos outros objetos: regadores, jarras, xícaras de café e assim por diante. Você provavelmente poderia pegar a panela pelo bico, mas sua experiência com affordances semelhantes indica que a alça é a melhor opção.
Em interfaces gráficas do usuário, affordances representam ações que podemos realizar, mas elas podem ser ambíguas, porque não há um objeto físico com que interagir. Portanto, as affordances da GUI são projetadas especificamente para não serem ambíguas: botões, caixas de seleção e barras de rolagem para transmitir o uso com o mínimo de treinamento possível.
Por exemplo, é possível parafrasear o uso de alguns elementos de formulário comuns (affordances) desta forma:
- Botões de opção: "Posso escolher uma dessas opções".
- Caixa de seleção — "Posso escolher 'sim' ou 'não' para essa opção."
- Campo de texto — "Posso digitar algo nesta área".
- Menu suspenso: "Posso abrir esse elemento para exibir minhas opções."
Você só pode tirar conclusões sobre esses elementos porque pode vê-los. Naturalmente, alguém que não consegue ver as pistas visuais fornecidas por um elemento não consegue compreender o significado dele ou entender intuitivamente o valor da affordance. Portanto, precisamos garantir que as informações sejam expressas com flexibilidade suficiente para serem acessadas por tecnologia adaptativa, que pode criar uma interface alternativa para atender às necessidades do usuário.
Essa exposição não visual do uso de uma affordance é chamada de semântica.
Leitores de tela
Um tipo conhecido de tecnologia adaptativa é o leitor de tela, um programa que permite que pessoas com deficiência visual usem computadores lendo o texto da tela em voz alta com uma voz gerada. O usuário pode controlar o que é lido movendo o cursor para uma área relevante com o teclado.
Pedimos para Victor Tsaran explicar como ele, como cego, acessa a Web usando um leitor de tela integrado no OS X, chamado VoiceOver. Assista este vídeo do Victor usando o VoiceOver.
Agora, é sua vez de tentar usar um leitor de tela. Esta é uma página com o ChromeVox Lite, um leitor de tela mínimo, mas funcional, escrito em JavaScript. A tela é propositalmente desfocada para simular uma experiência de baixa visão e forçar o usuário a concluir a tarefa com um leitor de tela. Claro, você precisará usar o navegador Chrome para este exercício.
Página de demonstração do ChromeVox Lite
Você pode usar o painel de controle na parte de baixo da tela para controlar o leitor
de tela. Esse leitor de tela tem funcionalidades mínimas, mas é possível explorar
o conteúdo usando os botões Previous e Next ou clicar em elementos
usando o botão Click.
Tente usar esta página com o ChromeVox Lite ativado para ter uma ideia do uso do leitor de tela. Pense no fato de que um leitor de tela (ou outra tecnologia adaptativa) cria uma experiência de usuário alternativa completa com base na semântica expressa de maneira programática. Em vez de uma interface visual, o leitor de tela oferece uma interface audível.
O leitor de tela informa algumas informações sobre cada elemento da interface. É esperado que um leitor bem projetado informe todas ou pelo menos a maioria das informações a seguir sobre os elementos encontrados.
- O papel ou tipo do elemento, se especificado (deve ser).
- O nome do elemento, se tiver um (deve ter).
- O value do elemento, se ele tiver um (pode ou não).
- O state do elemento, por exemplo, se ele está ativado ou desativado (se aplicável).
O leitor de tela pode criar essa interface alternativa, porque os elementos nativos contêm metadados de acessibilidade integrados. Assim como o mecanismo de renderização usa o código nativo para criar uma interface visual, o leitor de tela usa os metadados nos nós do DOM para criar uma versão acessível, algo assim.
