E se eu dissesse a você, web designers, que existem pessoas que podem visitar seu site e que não se importam com a aparência dele?
As pessoas com deficiência visual navegam na Web pelas mesmas razões que todos nós, para encontrar informações, fazer compras e executar uma série de tarefas importantes usando aplicativos baseados na Web. Mas as pessoas com deficiência visual experimentam a web de maneira diferente e precisamos ser sensíveis às suas necessidades quando projetamos e construímos websites.
De acordo com o Escritório do Censo dos EUA e a ONU e o Banco Mundial, mais de 47 milhões de americanos e mais de 650 milhões de pessoas em todo o mundo têm algum tipo de deficiência. Cada visitante dos sites que você projeta precisa ser capaz de encontrar as informações que está procurando e executar as tarefas que pretendia executar, independentemente de como a página da web ou o aplicativo se pareçam. Vários fatores diferentes que entram na criação da página da Web ou do aplicativo podem afetar a acessibilidade.
Você pega a pílula azul - a história termina, você acorda na sua cama e acredita no que quer acreditar. Você toma a pílula vermelha - fica no País das Maravilhas e eu mostro a profundidade do buraco do coelho. - O Matrix
Você está pronto para ir para baixo o coelho de acessibilidade segure comigo? Precisamos nos aprofundar nos aspectos técnicos das páginas da web. HTML é o esqueleto de uma página da Web, enquanto CSS, JavaScript e imagens aprimoram o HTML. Muitas vezes, as pessoas com deficiência visual perdem todos esses aprimoramentos. Embora a acessibilidade seja principalmente uma tarefa do desenvolvedor, às vezes os requisitos técnicos necessários para preservar ou melhorar a acessibilidade afetarão a aparência do site. Isso significa que o design, a cópia, a experiência do usuário e o desenvolvimento precisam colaborar para garantir que os controles de navegação, formulários, botões, cabeçalhos, botões, links e muito mais estejam acessíveis.
design, cópia, experiência do usuário e desenvolvimento, todos precisam colaborar para garantir que os controles de navegação, formulários, botões, cabeçalhos, botões, links e muito mais estejam acessíveis
Pessoas cegas, deficientes visuais, analfabetas ou deficientes de aprendizagem usam tecnologias assistivas para navegar na Internet. Os leitores de tela são a tecnologia assistencial mais comum para a web, esses programas de software tentam interpretar o que é exibido na página da Web e transmiti-lo ao usuário, geralmente convertendo o texto em fala, mas às vezes através de um dispositivo de saída em Braille. As lupas de tela também costumam ser usadas em conjunto com um leitor de tela. Normalmente, um leitor de tela tentará analisar o HTML da parte superior do arquivo HTML na parte inferior e falar elementos relevantes para o usuário. Idealmente, o leitor de tela permitirá que o usuário mova com êxito um cursor virtual para baixo da página, a fim de preencher os campos do formulário, clicar nos botões e fazer seleções nos menus suspensos e outros controles.
Para testar completamente a acessibilidade, você precisará garantir que o site ou o aplicativo tenha um bom desempenho em cada um dos muitos leitores de tela disponíveis. Existem vários leitores de tela populares gratuitos e / ou de código aberto em cada plataforma, incluindo MANDÍBULAS e NVDA . Os usuários da Microsoft podem usar o NVDA, enquanto os computadores da Apple e os dispositivos iOS vêm com Voice Over que pode ampliar os controles do teclado e ler o conteúdo da tela, e para dispositivos Unix há Orca . O navegador Chrome tem dois plug-ins de tecnologia assistiva, ChromeVox para leitura de tela e ChromeVis para ampliação.
A maioria dos problemas de acessibilidade na Web ocorre quando o cursor virtual do leitor de tela fica preso em uma forma mal projetada ou pula sobre um controle importante ou uma parte importante da informação textual. Verificar se os sites são realmente utilizáveis é semelhante ao teste do navegador, pois cada leitor de tela tem requisitos e limitações diferentes. É por isso que entender o comportamento de cada leitor de tela é importante. As necessidades de vários leitores de tela podem ser acomodadas adicionando várias tags HTML especiais aos elementos importantes da página.
A UI da Web dinâmica moderna pode ser particularmente problemática para a acessibilidade, porque elementos importantes são adicionados à página dinamicamente usando JavaScript. Menus suspensos personalizados, modais, dicas de ferramentas, conteúdo de acordeão e erros e notificações dinâmicos podem ser um desafio para os usuários de leitores de tela entenderem devido a uma falha de comunicação entre o HTML, o JavaScript e o leitor de tela. HTML e JavaScript nativos não têm como comunicar atualizações de página (Document Object Model) aos leitores de tela. Os desenvolvedores precisam mover o "foco" (o cursor virtual do leitor de tela) para a parte da interface do usuário que mudou. Quando um modal é aberto, os desenvolvedores precisam colocar o foco do usuário nesse modo para que o leitor de tela possa ler esse conteúdo e o usuário possa entender e interagir com ele.
O WAI-ARIA pode colmatar as lacunas entre o que o HTML bruto da página diz e o que os usuários com visão vêem
Isso é feito através do uso de tags HTML especiais chamadas WAI-ARIA Tag. O WAI-ARIA (Accessible Rich Internet Applications) pode preencher as lacunas entre o que o HTML bruto da página diz e o que os usuários enxergam, fornecendo uma maneira padronizada para os desenvolvedores adicionarem mais significado a estados, propriedades, relacionamentos, funções e regiões ao vivo. um leitor de tela de outra forma não entenderia. Os desenvolvedores podem usar o nível de ária para explicar aos leitores de tela a hierarquia de cada título na página. Com desenvolvedores de etiquetas aria pode adicionar um título para descrever o propósito de um elemento discreto na página. Isso ajuda os desenvolvedores a criar relações claras entre diferentes elementos. Os desenvolvedores também podem chamar a atenção para controles importantes rotulando-os com tags de função de aria, por exemplo, um botão de menu suspenso seria rotulado com a seguinte tag: Aria-has popup: true.
Veja a caneta Abas Acessíveis Simples por Scott Vinkle ( @svinkle ) em CodePen .
No HTML no exemplo acima, as guias são criadas usando uma lista não ordenada com classes em cada item da lista. O jQuery captura os eventos de cliques quando uma guia é clicada e adiciona 'aria-selected': 'true' e 'tab-widget__tab-content — active' à guia selecionada e oculta as outras guias adicionando 'aria-selected': ' false 'para as guias restantes. Na linha 127, os atributos iniciais das guias são definidos, juntos esses snippets ajudam os leitores de tela a reconhecerem qual guia é visível. O JavaScript na linha 35 também adiciona suporte de teclado às guias. O restante do arquivo manipula os eventos click e keyboard para que o jQuery possa adicionar os atributos 'role' e 'presentation' à guia atualmente selecionada.
As tags Aria podem ajudar os leitores de tela a interpretar controles personalizados como botões de opção quando o controle personalizado é rotulado com: Aria-role = radio button. Quando um aplicativo tem uma área de sandbox que comunica feedback ou atualizações para o usuário, ele pode ser rotulado com uma tag de região ativa: Aria-live. Isso garante que, quando o texto desse elemento for alterado, ele seja automaticamente falado para o usuário por meio do leitor de tela.
As atualizações de página são uma parte essencial da Web para os leitores de tela, pois quando uma atualização de página ocorre, ela indica ao leitor de tela que deve anunciar a nova página ao usuário e reler o conteúdo da página ao usuário. Isso significa que os aplicativos da Web de página única representam desafios especiais à acessibilidade. Em um aplicativo de página única, não há atualização completa da página, portanto, o leitor de tela e, portanto, o usuário não será alertado sobre o conteúdo atualizado. O resultado será que o usuário não recebe feedback sobre suas ações. A melhor solução é emular o comportamento de atualização de página nativa. Na exibição carregada, atualize o título da página e anuncie-o ao usuário.
As especificações completas do WAI-ARIA são mantidas pelo W3 como as especificações do HTML em si sob a Iniciativa de Acessibilidade na Web (WAI), mas às vezes as diretrizes podem ser mais úteis do que as especificações, então aqui estão algumas diretrizes gerais para projetistas:
Há várias decisões simples que você pode tomar ao desenvolver um site que tornará o site mais acessível sem se aprofundar muito na marcação especial de acessibilidade ou no teste do leitor de tela. Certificando-se de que seu HTML transmite significado por meio de sua estrutura, você ajudará os leitores de tela a processarem informações da mesma forma que aparecem na página para os usuários com visão. Isso é importante para usuários que usam uma lupa em conjunto com um leitor de tela.
O uso de marcação HTML apropriada para cabeçalhos, listas, tabelas e outros elementos permite que o leitor de tela categorize a estrutura da página para o usuário de maneira familiar. Para layouts mais envolvidos, o HTML5 fornece elementos adicionais, como
Nós fomos muito longe neste buraco juntos porque os potenciais beneficiários de todo esse trabalho são um grupo mais amplo do que você imagina. Se você já tentou usar um aplicativo móvel com uma mão porque sua outra mão está carregando alguma coisa, se você já tentou usar um mouse com sua mão não-dominada por causa de uma lesão, você foi incapacitado para a situação. E não é maravilhoso quando seus dedos estão grudentos e você ainda pode navegar em um site usando um teclado com os nós dos dedos? Todos nós, infelizmente, somos suscetíveis às deficiências que surgem ao envelhecer, como perda de memória, falta de audição, visão deteriorada e movimentos limitados.
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
Imagem em destaque, imagem de acessibilidade via Shutterstock.