Melhorando a experiência do usuário da web para deficientes visuais

Question

Eu estava ouvindo um episódio recente de Hanselminutos onde Scott Hanselman estava discutindo acessibilidade em aplicações web e isso me fez pensar sobre acessibilidade em minhas próprias aplicações.

Todos nós entendemos a importância da marcação semântica em nossos aplicativos da web no que se refere à acessibilidade, mas e quanto a outras melhorias simples que podem ser feitas para melhorar a experiência do usuário para usuários com deficiência?

No episódio, houve várias vezes em que dei um tapa na testa e disse: “Claro!Por que não fiz isso?" Em particular, Scott falou sobre um site que colocava um link oculto no topo de uma página da web que dizia "pular para o conteúdo principal".O link só estará visível para pessoas que usam leitores de tela e permite que o leitor de tela passe pelos menus e outros conteúdos secundários.É uma melhoria tão óbvia, mas é fácil não pensar nisso.

A acessibilidade e a experiência geral do usuário envolvem mais do que simplesmente criar XHTML válido e encerrar o dia.

Quais são alguns de seus truques simples para melhorar a experiência do usuário para deficientes visuais?

Answer 1

Confira Presas

Presas é uma ferramenta no navegador para Firefox que emula o que um leitor de tela “vê” ao visitar uma página da Web.Sua função é simples:para gerar uma transcrição do que um leitor de tela lerá para um usuário quando uma página da Web for visitada.É uma ferramenta útil para analisar rapidamente se você estruturou seu conteúdo de forma eficaz para que seja compreensível e utilizável por pessoas com deficiência visual, sem forçá-lo a aprender a usar (e comprar) um aplicativo leitor de tela como JAWS ou Windows Eyes.

Answer 2

Criar páginas acessíveis é algo difícil de pensar se você nunca fez isso.Porém, depois de aprender os conceitos básicos, é muito fácil fazê-lo em 95% dos casos.Repetirei principalmente o que outros disseram, mas:

1. Use tabelas apenas para dados tabulares
2. Certifique-se de usar as ferramentas semânticas disponíveis via HTML.Isso significa usar TH com um atributo de escopo.Use <em> em vez de <i> e <strong> em vez de <b>.Use o acrônimo e abreviar Tag.Use listas de definições.Posso expandir essas coisas se alguém desejar.

3. Uma das coisas mais importantes é usar o rótulo tag nos campos de entrada.Para cada campo de entrada, botão de opção, caixa de seleção e entrada de texto você deve ter:

   <label for="nome de usuário">Nome de usuário:</label><input name="nome de usuário" />

4. Adicione um "pular navegação" ou "pular para navegação", dependendo de onde estão os grandes pedaços de texto.Se você estiver trabalhando em um site do governo, deve ser natural que tudo o que você está criando permita que você ignore informações repetitivas.

5. Não use cores para dar ênfase.

6. Certifique-se de que todo o seu texto seja redimensionável.Isso significa basicamente não usar “px” em seu css.

7. Vou enfatizar novamente isso: criar páginas semânticas. Usar H tags para seus títulos.Usar ul/li para navegação.

8. Use o alternativo atributo ativado todos imagens.Se você tem um gif espaçador...bem..não.Caso contrário, explique do que se trata a imagem e qual o seu significado para o conteúdo ao qual está associada.não use "um gráfico" como sua tag alternativa.Use o "Gráfico de finanças acumuladas no ano:US$ 5.000 no primeiro trimestre, US$ 4.000 no segundo trimestre, US$ 8.000 no terceiro trimestre" ou algo semelhante.

9. Forneça legendas ocultas ou transcrições para todos os componentes de áudio e vídeo

A chave aqui é fornecer a eles recursos visuais, auditivos e motor deficiências a mesma experiência que aqueles com capacidades físicas padrão.Se você não consegue acessar um campo, um leitor de tela também não consegue.Se você não conseguir clicar no texto ao lado de uma caixa de seleção para selecioná-la, o leitor de tela não saberá que o texto está relacionado à caixa de seleção.

Você deve frequentemente visualizar seu site sem folhas de estilo (ctrl-shift-s se você tiver o Firefox e o Barra de ferramentas do desenvolvedor web) para ver se a página faz sentido.Se não faz sentido para você como indivíduo com visão, não fará sentido para alguém que usa um leitor de tela.

Answer 3

Já faz algum tempo que não estou em um trabalho onde tínhamos que aderir à Seção 508, mas aqui está o que me lembro que não foi abordado pelos outros postadores...

1. Use tabelas apenas para dados.Não use tabelas para layout se puder evitá-lo.
2. Ao usar tabelas para dados, os cabeçalhos das colunas devem ser aninhados em tags TH e você deve usar atributos de título e escopo.As tags da sua tabela devem usar o atributo summary.
3. Todas as imagens devem ter um valor para o atributo alt que descreve o que está acontecendo na imagem e se a imagem não servir a nenhum propósito (é uma imagem de correção ou algo semelhante), então o atributo alt deve ser definido como uma string vazia.
4. Tente usar um leitor de texto para fala e/ou navegue apenas pelo teclado e/ou desative as folhas de estilo.Acredito que você precise comprar o JAWS, mas tenho certeza de que existem leitores de tela gratuitos por aí.Você precisa experimentar um site por meio de um leitor de tela para realmente entender como é difícil navegar na maioria das páginas da web sem as dicas que os leitores de tela interpretam.

Answer 4

"Visão prejudicada" inclui daltonismo.Eu costumava trabalhar com alguém que não conseguia distinguir muito bem o vermelho do verde, então qualquer aplicativo que usasse uma interface estilo semáforo era muito difícil para ele usar.Na indústria em que trabalhávamos, os alertas nas linhas eram codificados por cores, então outra forma de exibição era útil para ele, como uma coluna extra na linha com o texto do tipo de alerta ("emergência", "aviso" etc. ).

Answer 5

O maior problema com leitores de tela geralmente são as tabelas para posicionar as coisas em sua página.Os leitores de tela realmente não conseguem lidar com isso.Coloque as coisas em divs no seu html e coloque-as em uma ordem sensata.Depois posicione as div's na sua página com css.Use tabelas para exibir o conteúdo que deveria estar em uma tabela.

Answer 6

O código de muitas páginas da web é estruturado como:

1. Cabeçalho
2. Navegação superior
3. Navegação à esquerda
4. Contente
5. Rodapé

Quando estruturado dessa forma, o link oculto para “Pular para o conteúdo principal” é benéfico.No entanto, com o layout CSS, você poderá reordenar isso para ter:

1. Contente
2. Cabeçalho
3. Navegação superior
4. Navegação à esquerda
5. Rodapé

Em seguida, você usa o posicionamento CSS e flutuadores para mover esses diferentes elementos na tela para fazer a página ter a aparência que você deseja.

A principal vantagem de estruturar uma página web dessa forma é que, se o navegador não suportar CSS, o conteúdo será o primeiro na página.Além dos leitores de tela, isso é benéfico para dispositivos móveis e spiders de mecanismos de pesquisa.

Answer 7

Para pessoas com visão parcial, precisamos ter certeza de que o texto não é excessivamente pequeno e contrasta substancialmente com a cor de fundo.Devemos também garantir que o texto seja redimensionável usando unidades de dimensionamento relativo, como elesem vez de unidades absolutas como pixels(embora, na minha opinião, isso esteja se tornando menos problemático, já que os navegadores estão cada vez mais favorecendo o zoom em vez do redimensionamento do texto).

Para usuários de leitores de tela, é útil ter uma boa ideia de como os leitores de tela são realmente usados.O artigo a seguir apresenta orientações baseadas em observações de pessoas cegas navegando na web por meio de leitores de tela;está um pouco desatualizado agora, mas dá uma boa ideia do que ajudará os usuários de leitores de tela e do que não ajudará:

http://redish.net/content/papers/interactions.html

Além disso, a Fundação Americana para Cegos tem um seção de seu site dedicada a conselhos para desenvolvedores web sobre como atender usuários com deficiência visual.

Além dos deficientes visuais, precisamos considerar aqueles com deficiências que os impedem de usar o mouse, e também aqueles com deficiências neurológicas.Se alguém puder fornecer recursos dando conselhos sobre como atender essas pessoas, isso seria ótimo.