Quais são as etapas mínimas que devo seguir para garantir que meu site esteja acessível?


35

Estou tentando seguir um padrão muito importante que devo admitir que ignorei até recentemente. Quero garantir que minhas páginas estejam acessíveis a uma grande parte das pessoas com deficiências. Eu me concentro principalmente em tutoriais com uso intensivo de texto e imagem, mas sem vídeo / flash ou qualquer tipo de animação.

O que é uma lista de verificação que posso seguir para garantir que muitas pessoas com deficiência possam ter uma boa experiência ao usar meu site e de quais deficiências devo estar mais consciente?

Eu sei que não posso agradar a todos. Eu segui as diretrizes do W3C , mas não tenho muita certeza de quais padrões se aplicam a mim. Não estou desenvolvendo aplicativos da Web, estou criando principalmente wiki, como trocas de informações, blogs e fóruns ocasionais.


uxexchange.com?
Bobby Jack

Respostas:


18
  • Verifique se todas as imagens possuem texto alternativo.
  • Verifique se o esquema de cores é adequado para pessoas com daltonismo.
  • Ofereça um layout de alto contraste ou layout de texto grande para deficientes visuais.
  • Certifique-se de que seus links façam sentido quando lidos fora do contexto (ou seja, não basta escrever "clique aqui").
  • Verifique se o site ainda oferece funcionalidade básica completa se o usuário não tiver suporte a JavaScript.

O W3 oferece algumas dicas básicas sobre acessibilidade através de seu site . Joe Clark tem uma versão on-line do livro "Building Accessible Websites" disponível para visualização gratuita, que contém muitas informações úteis.


11
Existem várias advertências para a regra 'texto alternativo'. Infelizmente, trabalhei com pessoas que o tratam como uma regra rígida - ou seja, TODAS as imagens DEVEM ter um atributo alt. Em seguida, adicionam itens como "O logotipo da empresa" a uma imagem de logotipo e "um grande t azul" a uma imagem vinculada a uma conta do Twitter.
Bobby Jack

Com a tag alt, acredito que CADA imagem deve ter uma. Ao trabalhar com um leitor de tela, você precisa dizer o que fazer. Se sua imagem simplesmente existe para apelo visual e não possui outro valor, use alt = "" para que o leitor de tela saiba ignorá-la. Se a sua imagem for um gráfico, ou talvez um cabeçalho, inclua as informações na tag he alt para que o leitor de tela e as pessoas que desativam as imagens não percam.
ph33nyx 16/09

8

Tornar a sua semântica de marcação é um grande passo em direção à acessibilidade, se o seu site puder ser navegado sem a aplicação de CSS e o conteúdo fizer sentido, então tudo o resto é apenas molho visual!


11
E muito mais divertido no dia nu do CSS :)
Tim Post

2
Haha, naturalmente! Sério, no entanto, muitas pessoas assumem que a acessibilidade tem tudo a ver com design, é exatamente o oposto: se você pode criar seu conteúdo para que ele funcione sem nenhum design, uma máquina (e, portanto, um humano) sempre poderá acessar isto.
Toby

7

Em primeiro lugar, os "deficientes" não significam nada!

Então, vamos olhar para alguns grupos de pessoas que você precisa verificar se você é o seu site.

Uma pessoa pobre que só tem um caderno com uma tela pequena

Você só precisa verificar se o site pode ser usado quando a janela do navegador é pequena sem muito esforço.

Uma pessoa daltônica

Alguém pode usar seu site sem ver a cor dos ícones, etc., imaginando que você estava acessando-o em um monitor em preto e branco.

Uma pessoa com site ruim.

Quando você altera o tamanho do tipo no navegador, todo o texto fica maior no seu site e o layout ainda está OK. O site também pode ser usado em um monitor pequeno?

Seu site usa um layout de alto contraste? Caso contrário, é fácil para o usuário mudar para um layout de alto contraste?

Uma pessoa que não pode usar o mouse

Uma pessoa que nunca usou seu site antes pode acessar todas as funções / informações apenas usando o teclado. (A tecla Tab funciona de maneira útil?)

Alguém com poucas habilidades de leitura

Você está usando o inglês simples o máximo possível?

Alguém que não é bom em aprender coisas novas.

O design do seu site é baseado em outro site que seus usuários já sabem usar?

Uma pessoa cega.

Este é o mais difícil e a maior parte do que você lê não é de uso obrigatório!
Ative primeiro todos os outros problemas de acesso, pois há muito mais pessoas com deficiência visual ou que não podem usar o mouse do que pessoas vinculadas.

Em seguida, entenda seus objetivos , por exemplo, se o seu site for um site de reservas de hotéis, talvez seja melhor fornecer um número de telefone pago para fazer reservas e apenas disponibilizar as informações do hotel.

A maioria das pessoas cegas acha muito difícil usar qualquer site interativo que não tenha usado antes, por mais que o site seja projetado.

Então, você deve fornecer uma opção da Web nenhuma? (Telefone? Uma pessoa que os visita para ajudar a preencher o formulário, etc?)

Em primeiro lugar, o seu site pode ser usado sem imagens? (O texto alternativo é uma maneira de fazer isso)

Dado que o software de fala lê o site de cima para baixo, ele pode ser entendido dessa maneira?

É muito difícil facilitar a utilização de um site com navegação complexa para o uso de uma pessoa vinculativa. Além disso, ela não tem como saber que parte da página foi atualizada por JavaScript e precisa ser lida novamente.

Alterar a cor dos itens para alterações de estado também não é uma boa opção.

A única maneira de aprender como fazer um site funcionar bem para pessoas vinculadas é ver como uma pessoa vinculada usa um leitor de tela em alguns sites. Nenhum dos padrões é bom o suficiente, eles apenas dizem o que você não deve fazer, mas não é suficiente cumpri-los (a menos que você apenas forneça texto estático como um site de jornal).


11
Eu amo a primeira frase nesta resposta! (e, claro, as outras frases também)
Tim Post

5

Você pode usar este site para obter uma visão geral rápida da conformidade: http://wave.webaim.org/

Ele realiza um trabalho semelhante ao antigo sistema "Bobby" que foi encerrado há alguns anos.



2

Achei o livro Dive into Accesibility, de Mark Pilgrim, que podia ser baixado gratuitamente, como um ponto de referência útil sobre esse tema. É de 2002, mas ainda é muito pertinente. Conselhos como "usar degradação graciosa" não envelhecem.




1

A resposta nº 1 é simples: escreva HTML / CSS válido, semanticamente correto, sem correção !!! Todas as sugestões acima são boas. Aqui está uma lista de verificação que escrevi alguns anos atrás, que mostra algumas coisas que você deve verificar em todos os sites: https://forge.iowa.gov/wiki/index.php/Web_Checklist . Ele pressupõe que você tenha a barra de ferramentas Web Developer no FF, mas que é gratuita e facilmente obtida.

Algumas coisas simples que eu sinto que podem fazer uma diferença real:

Para formulários, use a tag LABEL. Ele cria uma área maior clicável para itens como botões de opção e também une itens para os leitores de tela.

Outra coisa que eu sinto que é comumente mal utilizada são as tags h1, h2, h3 .... Se usados ​​corretamente, esses podem ajudar alguém a navegar pela sua página facilmente. Se apenas modelá-los e usá-los à vontade, é muito enganador rastrear os leitores e outros dispositivos de E / S sem mouse.

Também é bom permitir que alguém que esteja navegando na sua página sem todas as suas belas imagens e CSS salte o código repetitivo para o conteúdo. Isso geralmente é alcançado usando um link SKIP que está oculto no CSS. Por exemplo, <a href="#skipnav" class="noshow">Skip past navigation to content.</a>para permitir skiping passado uma longa navegação.

Como afirma Tony, um dos melhores testes é retirar todos os sinos e assobios da sua página e ver se ainda faz sentido.


Sobre o assunto das tags ALT ... toda imagem deve ser uma tag ALT. Se a imagem for conteúdo, ela deve ter algo descritivo na tag ALT; se for apenas decoração, use aspas vazias alt=""para indicar que leitores de tela como o JAWS podem apenas passar por elas.
Ph33nyx #
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.