Como realizar uma auditoria de acessibilidade para conformidade com as WCAG

WCAG (diretrizes de acessibilidade de conteúdo da web) foi criado pelo consórcio World Wide Web (W3C) e é o padrão mais reconhecido globalmente para acessibilidade.

Neste artigo, descrevemos as tarefas necessárias para realizar uma auditoria para verificar a conformidade com a norma WCAG 2.1.

Acessibilidade é garantir que o conteúdo e a funcionalidade do seu site possam ser acessados ​​por um público mais amplo.

Por exemplo:

• Barreira de acessibilidade temporária – Alguém perdeu seus óculos!
• Problemas de dispositivo – Eles estão em um dispositivo que é restritivo, por exemplo, telefone celular
• Situacional – Luz solar brilhante, quarto escuro, etc.
• Incapacidade permanente – Sem visão, sem audição, problemas cognitivos etc.
• Problemas de largura de banda – Uma conexão muito lenta

Como você pode ver, existem muitas formas de deficiência que você precisa considerar.

As diretrizes WCAG são divididas da seguinte forma:

Antes de passar por cada seção, aqui está uma lista do que você precisará para realizar o teste:

1. Perceptível

• Uma seleção de navegadores incluindo apenas texto (por exemplo, Lynx)
• Uma ferramenta para verificar tags alt, títulos etc (por exemplo, ScreamingFrog)
• Um leitor de tela como o NVDA
• Uma ferramenta de teste de acessibilidade de sites
• Ferramentas de desenvolvimento do Chrome
• Acesso a uma seleção de dispositivos

Trata-se de garantir que o conteúdo seja acessível em várias formas. Por exemplo, alguém pode ver o conteúdo, ouvi-lo, usar o toque para entender o conteúdo etc. Isso também inclui itens da interface do usuário, como menus e botões.

A ferramenta de acessibilidade WAVE é uma das muitas ferramentas que podem ser usadas para encontrar problemas nesta área:

No exemplo acima, a página se sai muito bem. Ele tem apenas 1 erro e 5 erros com problemas de contraste de cores.

O único erro é que esta página não indica o idioma.

Mas tem muita coisa boa na página. Por exemplo, na imagem à direita, onde você vê 2 elementos destacados em verde, ambos usam os rótulos 'ARIA' para ajudar um leitor de tela a entender esse conteúdo. Mais adiante explicaremos mais sobre isso.

Vamos passar pelas diretrizes e os critérios de sucesso.

Diretriz 1.1 -Fornecendo alternativas de texto para conteúdo não textual

Existem alternativas de texto para conteúdo não textual?

Quando você tem conteúdo não textual em uma tela, você precisa verificar se há descrições para cada um desses elementos.

Antes de dar exemplos, quero discutir o ARIA, que é uma forma de fornecer descrições adicionais aos elementos e só deve ser usado quando o HTML padrão não for possível.

Quando você usa HTML, você obtém automaticamente o controle do teclado, foco etc. e essa é a preferência, mas o ARIA pode ser usado como backup.

O que é ARIA?

ARIA (accessible rich internet applications) é uma maneira de descrever conteúdo que não pode ser descrito suficientemente usando HTML padrão. Seu objetivo principal é para leitores de tela. Se você puder usar o HTML padrão, essa é a melhor abordagem, pois fornecerá automaticamente o foco ao elemento e ao controle do teclado. Quando isso não for possível, ARIA é a alternativa.

Imagens descritivas

Uma imagem descritiva é algo que retrata algo de significado. Por exemplo, uma foto de um carro Toyota Prius.

Se você não pode ver a imagem, então deve haver uma maneira de descrever o que essa imagem representa, que é onde uma tag Alt entra.

Em plataformas como o WordPress, você pode adicionar a tag alt ao fazer o upload da imagem:

Muitas vezes atualizamos essa tag alt para garantir que palavras-chave relevantes sejam incluídas para fins de SEO, mas precisamos ir além disso.

Screaming frog fará uma análise de todas as imagens em seu site e exibirá quais imagens não possuem tags alt, tags alt duplicadas, tags alt muito longas ou tags alt muito curtas!

Você pode ver as imagens ao lado dos detalhes da imagem também:

Imagem decorativa

Uma imagem decorativa é uma imagem que existe para melhorar o design, mas não há nada na imagem que valha a pena descrever!

Imagens decorativas devem usar a propriedade background do CSS, a menos que haja uma boa razão para usar a tag 'img'. Se um leitor de tela vir a propriedade background do CSS, ele saberá ignorar a imagem.

Aqui está um exemplo de uma imagem descrita como imagem de fundo no site My Emergency Doctor na Austrália:

Aqui está o código por trás disso:

Como essa imagem não está listada como <img>, ela usa role=img para informar aos leitores de tela que se trata de uma imagem. Ele usa o 'Aria-label' para fornecer uma boa descrição precisa da imagem. Também define a imagem como 'imagem de fundo'.

Nota: Se você usar a tag 'img' para uma imagem de fundo, você precisa definir uma tag alt nula, por exemplo, alt=" "

Quando você deve usar <img> em vez de cor de fundo?

Quando uma imagem é uma parte importante do conteúdo, use <img>. Por exemplo, se você tem uma imagem de produto, então é <img> . Você também pode ter imagens que são apenas imagens de fundo usadas para fins de decoração e não faz sentido descrevê-las como imagens (que serão indexadas pelo Google).

No exemplo acima, você pode questionar se a imagem exibida deve ser definida como img, mas é uma fotografia de estoque e eles decidiram defini-la como uma imagem de fundo, o que está ok.

Nota: <img> é uma tag HTML, mas background-image é um estilo CSS que você usa.

Controles de IU

Existem vários controles de interface do usuário que exigem algum texto para descrever o que é.

Por exemplo, um botão ou controle de formulário.

Um botão é usado para ajudar a completar uma função. Pode ser um botão que tenha apenas um ícone e um que tenha texto no botão. Ambos podem ser tratados de forma diferente.

Usando ARIA você pode definir 'role=button' mas com HTML padrão você pode usar a tag <button>. Qual deles você deve usar?

Aqui está um exemplo de um botão que tem apenas um X nele que nos obriga a criar um 'aria-label' para descrever o que o botão faz.

<button aria-label=”Fechar” onclick=”myDialog.close()”>X</button>

Aqui está uma lista de controles de IU típicos que você precisará testar:

Se você estiver usando formulários, precisará certificar-se de que cada campo esteja rotulado corretamente. Aqui está um exemplo de boa rotulagem:

<label for="fname">Nome:</label><br>

<input type=”texto” id=”fname” name=”fname”><br>

<label for="lname">Sobrenome:</label><br>

<input type=”text” id=”lname” name=”lname”>

</form>

Nota: para formulários, você também deve garantir:

• Marque claramente os campos obrigatórios. Se um campo for obrigatório, ele também precisará ser rotulado corretamente no html.
• Existem instruções para o usuário (geralmente na parte superior do formulário)
• Os usuários recebem ajuda quando cometem um erro ao preencher um campo de formulário (por exemplo, formato de data incorreto, é isso que você precisa inserir).

CAPTCHA

Isso pode ser muito problemático dependendo de como ele é implementado. Por exemplo, quando as imagens são mostradas e você é solicitado a identificar qual imagem contém semáforos!

Analisaremos a implementação e faremos sugestões relevantes.

Conteúdo multimídia

O vídeo/áudio precisa de pelo menos uma descrição para identificar do que se trata o vídeo/áudio.

Links

Você quer ter certeza de que os links se destacam claramente na página (por exemplo, cores diferentes) e que eles usam texto âncora e descrição de link relevantes.

Diretriz 1.2 - Mídia baseada em tempo

Esta área trata do fornecimento de conteúdo de vídeo e áudio que precisa ser mais acessível.

Existe transcrição disponível apenas para áudio pré-gravado ou apenas para vídeo?

A transcrição de vídeo é a tradução do áudio do seu vídeo em texto. A transcrição não inclui informações de áudio que descrevam coisas como recursos visuais exibidos no vídeo. Isso é tratado separadamente.

Dica de transcrição!

Rev.com é um ótimo serviço para criar legendas/transcrição para seu áudio/vídeo. Eles até fornecem um serviço de legendagem ao vivo para vídeo Zoom.

Existem legendas disponíveis para áudio pré-gravado?

Legenda é um texto que aparece dentro do vídeo para informar o usuário sobre o que a pessoa está dizendo.

Existe uma audiodescrição ou alternativa de mídia (pré-gravada) ?

Quando você está assistindo a um vídeo, as legendas podem não ser suficientes para descrever o que é mostrado no vídeo. É aqui que a descrição de áudio também é necessária.

Por exemplo, uma descrição de áudio pode descrever o que está acontecendo em segundo plano quando alguém está falando para dar aos usuários algum contexto.

Aqui está um exemplo de transcrição que inclui descrição de áudio.

Isso é ótimo para o visitante do seu site, mas também é bom para SEO!

Dica para selecionar um player acessível:

Você quer ter certeza de que o player de vídeo que você usa é compatível com o que é necessário para acessibilidade:

1. Suporta legendas
2. A descrição de áudio pode ser ativada/desativada
3. O controle de palavras-chave pode ser usado no media player
4. O media player funciona em diferentes dispositivos e navegadores
5. Todos os controles são acessíveis.

Há legendas para áudio ao vivo ?

Geralmente, você não terá nenhum conteúdo de vídeo ou áudio ao vivo em seu site, mas, se tiver, precisará criar legendas simultâneas para que os usuários vejam as legendas exibidas enquanto a pessoa fala.

Existem ferramentas disponíveis para legendar automaticamente seu vídeo e áudio ao vivo.

Há descrição de áudio para mídia sincronizada pré-gravada?

Isso é para mídia que contém vídeo e áudio. Queremos informações de áudio que acompanhem a mídia.

Diretriz 1.3 – Adaptável – Apresentar informações em um formato que possa ser entendido pelo software.

Você precisa garantir que o que você pode interpretar visualmente olhando para algo seja descrito programaticamente para que possa ser interpretado corretamente por softwares como leitores de tela.

Existe uma estrutura lógica para o conteúdo e é fácil entender a relação com cada parte do conteúdo dentro dessa estrutura?

Quando você visualiza uma página da Web, normalmente vê títulos, parágrafos, conteúdo em negrito, tabelas, etc. E quando você visualiza detalhes de uma tabela, você vê títulos e vê claramente qual linha é relevante para qual título.

Veja o que você precisará revisar:

• O conteúdo é dividido em subtítulos?
• As listas, tabelas etc. são usadas quando apropriado?
• Existe HTML correto usado para outros elementos estruturais em todo o conteúdo?
• Existem rótulos e texto alternativo usados ​​conforme necessário (por exemplo, em formulários?)

Dica

Um bom ponto de partida é testar seu site usando uma ferramenta de validação que verifica se há html válido (por exemplo, validador de html W3.org).

Aqui está um exemplo de um formulário que exibe os campos obrigatórios em vermelho. Isso é bom para um usuário visual, mas e quanto a alguém usando uma tela braille?

Para superar este problema, a palavra 'obrigatório' também é adicionada ao rótulo do sobrenome, que é um campo obrigatório.

 <label for="lastname" class="required">Sobrenome (obrigatório): </label>
<input type="text" size="25" value=""/>
<style type="text/css">
  .requeridos {
    cor vermelha;
  }
</style>

Existe uma ordem de conteúdo que faça sentido?

• Ao visualizar uma página da Web, você verá uma barra de navegação e, em seguida, algum conteúdo, títulos, subtítulos, parágrafos de texto. Você quer ter certeza de que isso é apresentado em uma ordem que faça sentido.
• Use estilos de título para indicar a importância das seções. Normalmente, você tem apenas um estilo <h1> para identificar a página de conteúdo e, em seguida, pode ter vários estilos H2, H3 etc.
• Tenha a navegação separada do conteúdo (por exemplo, defina a navegação usando <nav>)
• Usar html válido

Aqui está uma estrutura típica de títulos que fazem sentido:

Os usuários podem entender o conteúdo quando não conseguem perceber forma, tamanho ou usar informações sobre forma ou tamanho espacial?

A maneira mais fácil de explicar isso é com um exemplo:

Digamos que você tenha uma tabela de comparação de recursos de produtos de software e, quando um produto possui um recurso, uma imagem de diamante é exibida nesta coluna. Isso não é suficiente, você precisará adicionar texto para indicar o que esse diamante representa.

O site funciona bem no modo retrato e paisagem?

O site precisa ser capaz de se adaptar ao modo retrato ou paisagem sem perder o significado.

Se um site implementou o design responsivo corretamente, quando você altera a orientação, ele se adapta a uma janela de visualização diferente (ou seja, seleciona uma exibição mais adequada com base nas dimensões da tela).

As entradas dos formulários estão descritas corretamente?

O objetivo disso é garantir que, programaticamente, haja informações suficientes sobre qualquer campo que precise ser preenchido em um formulário.

E se for possível habilite o preenchimento automático para que o usuário não precise completar tudo!

O propósito dos elementos em uma página pode ser descoberto programaticamente?

Um exemplo disso é usar o elemento 'role' ARIA para seções de um site.

Por exemplo, um banner contendo o logotipo/nome da empresa etc. pode ser descrito como 'role=banner'.

ou usando rótulos de entrada em formulários para e-mail, nome, endereço etc.

É assim que você veria isso em HTML:

<tipo de entrada=”e-mail>

Existe uma versão em texto de algum gráfico?

Se houver algum conteúdo do tipo gráfico, você desejará ter uma tabela que resuma sobre o que é esse conteúdo.

Diretriz 1.4 – Ver e ouvir conteúdo

Trata-se de tornar mais fácil para as pessoas verem e ouvirem o conteúdo.

Existem alternativas de texto quando a cor é usada para transmitir informações?

Imagine que você tenha um formulário e um campo obrigatório seja exibido em vermelho.

Isso não significa muito para um leitor de tela!

Mas você pode adicionar a palavra 'obrigatório' na tabela como no exemplo abaixo:

<label for=”lastname” class=”required”>Sobrenome (obrigatório): </label> <input id=”lastname” type=”text” size=”25″ value=””/> <style type= ”texto/css”> .required { cor:vermelho; } </style>

Existe um mecanismo para pausar ou parar o áudio se ele tocar por mais de 3 segundos?

Se você estiver usando um leitor de tela e um vídeo for reproduzido automaticamente ao mesmo tempo, você ouvirá duas vozes!

Idealmente, não haverá reprodução automática de vídeo que resolva esse problema.

Se houver uma reprodução automática, certifique-se de que seja inferior a 3 segundos e, se não houver, verifique se há uma maneira de controlar o áudio da reprodução do vídeo.

Existe um bom contraste entre o texto e as imagens/cor de fundo?

Todos sabemos como as cores são importantes no design e na marca, mas para os visitantes com deficiência visual do seu site, as cores não farão muita diferença em sua experiência.

Por exemplo, as pessoas daltônicas não verão a diferença entre vermelho, laranja, amarelo e verde e você precisa atender a elas também.

A chave aqui é estar atento à taxa de contraste, que é um dos problemas de acessibilidade mais comuns encontrados em sites.

Existe contraste suficiente entre a cor do texto e seu plano de fundo? Uma ferramenta como o verificador de contraste de cores pode ajudá-lo a descobrir!

A cor de fundo fica à esquerda e a cor do texto fica à direita. A pontuação está no meio.

A recomendação é que o contraste seja de pelo menos 4,5:1 ou 3,1 quando o texto for grande (por exemplo, 18 pontos ou 14 pontos em negrito).

Além disso, certifique-se de usar outras ferramentas além da cor para comunicar conteúdo e informações importantes em seu site.

Por exemplo, seu CTA principal geralmente aparece na página devido a uma cor que faz com que os usuários percebam. Para tornar os CTAs mais acessíveis, você pode usar tamanho, posicionamento, ousadia, contraste, para torná-los perceptíveis para pessoas com daltonismo.

O texto pode ser aumentado e seu site ainda funcionar normalmente?

Um óbvio é apenas ampliar o texto em uma tela para ajudar alguém com deficiência visual.

Mas você deseja que o site funcione normalmente se um usuário aumentar o tamanho do texto.

Por exemplo, quando um usuário amplia o texto em até 400%, você precisa garantir que nenhuma informação seja perdida.

Aqui está uma imagem do W3.org. Tenho certeza de que você não deseja que seu site se pareça com o da direita ao ampliar o texto.

O requisito do WCAG 2.1 é que você possa aumentar em 200% sem problemas.

As imagens de texto são evitadas, a menos que seja necessário?

Você pode ter um logotipo que contém texto (por exemplo, o nome da sua empresa), o que está ok.

Mas e as imagens do texto?

Se você tem uma imagem de texto você tem que, pelo menos, fornecer um rótulo que a descreva.

Mas é melhor evitar esse tipo de imagem, a menos que:

• É essencial
• É customizável

O site é responsivo?

É normal rolar para baixo para ver a página da Web completa, mas não rolar para a direita ou para a esquerda.

Quando você muda de uma área de trabalho para um dispositivo menor, a tela deve se ajustar automaticamente para que você ainda não precise rolar para a direita ou para a esquerda.

Existe contraste suficiente para conteúdo não textual?

As cores adjacentes precisam ter uma taxa de contraste de pelo menos 3:1

Este requisito é para pessoas com visão relativamente baixa.

O espaçamento/altura da linha pode ser ajustado sem perda de desempenho?

• A altura da linha (espaçamento entre linhas) deve ser pelo menos 1,5 vezes o tamanho da fonte;
• O espaçamento entre os parágrafos seguintes deve ser de pelo menos 2 vezes o tamanho da fonte;
• O espaçamento entre letras (rastreamento) deve ser de pelo menos 0,12 vezes o tamanho da fonte;
• O espaçamento entre palavras deve ser de pelo menos 0,16 vezes o tamanho da fonte.

O conteúdo é exibido corretamente em foco ou foco?

Quando você foca em um elemento (por exemplo, tabulação para ele) ou passa o mouse sobre ele, você vê conteúdo adicional.

Por exemplo, você passa o mouse sobre um botão e um pop-up aparece.

…ou um submenu é exibido.

Este conteúdo precisa ser:

Dispensável – Por exemplo, se você clicar em Escape, o conteúdo não será mais exibido.

Hoverable – Quando você passa o mouse sobre o conteúdo, o conteúdo é exibido enquanto o mouse estiver sobre o gatilho.

Persistente – Esta é uma combinação de ambos. O conteúdo permanece visível até que o usuário o descarte, o usuário afaste o mouse ou o conteúdo não contenha mais informações importantes.

Nota: Isso não se aplica quando um elemento HTML, como um título, é exibido quando você passa o mouse sobre algo (por exemplo, uma imagem).

A fonte é legível?

Algumas fontes/tipos de letra são mais legíveis que outras. Há preferência por serifa ou sem serifa, mas isso não é obrigatório. Eles parte fundamental é que é legível.

2. Operável

Isso significa que os usuários precisam ser capazes de usar a navegação e a interface do usuário interagindo com ela. Por exemplo, eles podem 'operar' a interface do usuário usando o teclado.

Diretriz 2.1 – Acessível por teclado

Muitos usuários usam um teclado em vez de um mouse ou trackpad, incluindo usuários com barreiras de acessibilidade de mobilidade ou aqueles que usam um leitor de tela.

É por isso que todas as funcionalidades do seu site devem ser acessíveis via teclado – links, botões, formulários e outros controles.

Tudo é acessível através de um teclado?

Agora é a hora de parar de usar o mouse e usar apenas o teclado.

Você está verificando:

Tudo segue uma ordem lógica indo para frente ou para trás (usando tab para avançar e shift tab para voltar).

Quando você está em um determinado botão, seção etc., você vê que esse elemento está destacado? No exemplo a seguir, é óbvio que selecionamos 'artigos'.

Tudo está acessível usando a tecla tab e quando você pressiona enter quando tem foco, ativa a ação?

Nota: Se aparecer um pop-up, você também precisa navegar nele.

Você pode pular o cabeçalho?

Quando você está usando um leitor de tela, não quer que ele leia o mesmo cabeçalho em todas as páginas. Isso o deixaria louco. Portanto, você deve ser capaz de guiar para o link 'Pular para o conteúdo', pressione enter e sua próxima guia pulará essa seção.

Quando você clica na guia ao acessar o site abaixo, você está no link 'Pular para o conteúdo'. Se você pressionar enter, você vai direto para o conteúdo.

Se você pressionar uma segunda guia, você passará para o link 'Pular para navegação'. Se você pressionar enter, você será levado para a navegação.

Se você pressionar tab novamente, você move para 'pular para navegação'. Se você selecionar isso, você pula diretamente para a navegação.

Se houver um caractere, pontuação, número ou símbolo usado como atalho, deve haver uma maneira de desabilitar ou alterar esse atalho para um ou mais caracteres não imprimíveis. A única outra exceção é quando o atalho só está disponível quando o elemento tem foco.

2.1.2 Existem situações em que você atingiu um beco sem saída com o teclado (uma armadilha de teclado) ?

Você guia seu caminho para um lugar no site e não pode avançar ou retroceder.

Isso é conhecido como uma armadilha de teclado. Conforme a música continua… preso em uma armadilha, não consigo olhar para trás….

Existe uma alternativa para um atalho de teclado implementado usando uma letra?

Ter um atalho de tecla de caractere com alguém que depende de um teclado para navegação não é bom porque pode acabar pressionando-o por engano.

Então, precisamos fornecer uma alternativa.

a) Capacidade de remapear este personagem para outro atalho

b). Desligue isso

c). Só está ativo quando você tem foco nisso. Então isso significa que se você usar o atalho, nada acontece a menos que você esteja realmente nele!

Diretriz 2.2 – Tempo suficiente

Imagine se você definir um limite de tempo para preencher um formulário, mas considerar apenas usuários sem necessidades de acessibilidade. Este limite de tempo pode ser muito curto.

O tempo é ajustável?

Desligar o tempo é o ideal, mas poder estendê-lo (ou seja, quando o limite de tempo estiver próximo) ou ajustá-lo para o novo tempo está ok.

O usuário do site pode pausar, parar ou ocultar o conteúdo em movimento, piscando ou com atualização automática?

Se estiver se movendo/piscando ou rodando e:

uma). inicia automaticamente

b). dura mais de 5 segundos

c). é apresentado em paralelo com outros conteúdos

Depois, há um mecanismo para pausar, parar ou excluir.

Mesmo problema com o conteúdo de atualização automática.

Diretriz 2.3 – Convulsões e reações físicas

Esta diretriz é para garantir que nada seja projetado que possa causar uma convulsão ou reação física.

Os 'piscas' na tela atendem às diretrizes?

A regra número um é evitar objetos piscando, mas se isso não for possível, certifique-se de que ele não pisque mais de 3 vezes em um segundo ou pisque abaixo dos limites gerais ou de flash vermelho.

Diretriz 2.4 - Navegável

Trata-se de facilitar a navegação pelo site.

Você pode pular blocos de repetição?

Imagine usar um leitor de tela e toda vez que chega a uma nova página lê a navegação. Agora isso não seria divertido. Então você precisa ser capaz de pular estes. Eu dei um exemplo disso anteriormente.

Todas as páginas estão com o título correto?

Você precisa de bons títulos descritivos em todas as páginas. Isso é bom para acessibilidade, mas também bom para SEO.

Você pode usar o Screaming Frog para ver os títulos das páginas em um só lugar:

A ordem do foco preserva o significado?

Se você estiver navegando pelo conteúdo, mas em uma ordem que não faz sentido, você precisará corrigir isso.

Você pode determinar a finalidade do link a partir do texto do link?

'Clique aqui' não é um texto âncora muito útil. Você precisa ter palavras que descrevam o conteúdo que o link vai.

O que é texto âncora?

Quando você está vinculando a outra página em seu site ou a um site externo, o texto âncora é o texto visível que você vê relacionado à página para a qual você está enviando as pessoas. Em vez de apenas mostrar o link, é melhor mostrar o texto real.

Existe mais de uma maneira de localizar uma página da web?

aqui estão alguns exemplos:

• Sitemap – Tenha uma lista de todas as páginas em um sitemap
• Links rápidos – Tenha links rápidos para acessar páginas importantes
• Pesquisa – Pesquise para encontrar uma página relevante

O foco do teclado está visível?

A questão diz tudo! Isso também foi abordado em uma das diretrizes anteriores. Quando você guia para algum lugar, precisa ser capaz de ver visualmente que o foco está nessa área.

O cabeçalho, o corpo e o rodapé estão claramente definidos?

As tecnologias assistivas precisam ser capazes de identificar claramente cabeçalho, rodapé e corpo. Existem tags html que definem essas áreas.

Diretriz 2.5 Modalidades de entrada

Esta diretriz é sobre interfaces mais recentes nas quais você não pode usar um teclado ou mouse para navegar. Por exemplo, em smartphones, você pode deslizar, beliscar e aplicar zoom, tocar etc.

A funcionalidade usando gestos multiponto ou baseados em caminho pode ser operada por um único ponteiro sem usar o gesto (a menos que seja essencial)?

Um gesto baseado em caminho é onde você precisa se mover em um caminho específico. Por exemplo, você desliza para cima para acessar determinada funcionalidade ou para baixo para acessar outra. Um gesto multiponto é onde você usa dois ou mais pontos de contato para acessar a funcionalidade, por exemplo, use 2 dedos para pinçar e aplicar zoom.

Existe uma maneira fácil de sair de uma ação que foi iniciada por um único ponteiro?

O que é um único ponteiro?

É aqui que você pode acessar a funcionalidade com um ponto de interação com uma tela, por exemplo, toque, clique, toque longo etc.

Pelo menos um dos seguintes deve ser verdadeiro:

• Nenhum evento down - o gatilho é implementado quando você pressiona um botão
• Abort ou Undo – Você usa um evento up (ou seja, a função é habilitada quando o ponteiro é liberado) e há uma maneira de abortar. Por exemplo, você está pressionando algo com o dedo e, em vez de levantar o dedo reto, você o desliza para outra parte da tela e a funcionalidade é abortada.
• Reversão para cima – O evento para cima reverte o evento para baixo
• Essencial – Completar a função do evento down é essencial.

O rótulo visível de um componente corresponde ao nome programático desse componente?

Se um usuário com visão usa texto para fala, o nome programático será lido e será uma experiência melhor se corresponder ao rótulo visível.

A funcionalidade operada por movimento ou gesto também pode ser operada por outros controles de interface do usuário?

Se você agitar ou inclinar algo para controlá-lo, poderá usar outro controle de interface do usuário para acessar essa funcionalidade?

Compreensível

Trata-se de garantir que o idioma usado na página seja compreensível.

3.1 Legível

Cobrimos o seguinte:

O idioma da página ou das seções da página pode ser determinado programaticamente?

Você deve ver algo assim no início de qualquer página. 'Lang' indica o idioma da página.

<html class=”ie ie7″ lang=”en-US”>

Se o idioma mudar na página, você também precisará identificar isso.

3.2 Previsível

Você quer que sua interface do usuário funcione de maneira previsível, sem surpresas!

A navegação está na mesma ordem nas páginas?

A posição de navegação em uma página deve ser a mesma em todas as outras páginas, a menos que o usuário faça uma alteração na navegação.

Os componentes, imagens etc. são nomeados de forma consistente nas páginas?

Se você tem uma imagem em uma página e tem a mesma imagem em outra página, então você quer que a imagem tenha o mesmo nome.

Se você tiver várias páginas de um post e nomear as páginas como página 1, página 2, página 3, isso é consistente. A rotulagem não precisa ser a mesma se não fizer sentido, mas precisa ser consistente.

3.3 Assistência de Entrada

Trata-se de ajudar os usuários a evitar ou se recuperar de erros:

Erro de entrada – Se você estiver digitando algo incorretamente, poderá ver visualmente que está errado, mas também precisa haver um texto identificando o problema.

Etiquetas – Quando os usuários precisam inserir um texto, há uma etiqueta associada que descreve o campo.

Erro de entrada – Se um usuário cometer um erro, há uma sugestão sobre como corrigi-lo.

Prevenção de erros – Você deve poder reverter, obter algum feedback sobre o erro ou ter a capacidade de confirmar antes de enviar.

4. Robusto

Além de ser acessível, seu conteúdo precisa suportar uma variedade de navegadores, tecnologias etc.

Diretriz 4.1 Compatível

Isso envolve testes com uma variedade de agentes de usuário e tecnologias assistivas. Um bom teste inicial para isso é usar a ferramenta de validação de marcação W3C para ver se há algum erro (ou seja, ela valida se a estrutura/sintaxe de html, xhml etc está correta).

Aqui está um exemplo da saída:

Além disso, você precisa testar em vários navegadores para garantir que o conteúdo seja carregado corretamente.

E também vale a pena carregar a página em um navegador somente de texto (como o Lynx).

Todos os dados podem ser analisados ​​corretamente?

Há tags de início e fim adequadas nas seções do conteúdo para que seja fácil identificar onde uma seção começa e termina?

Os elementos estão aninhados corretamente?

Existem atributos ou ids duplicados que dificultam a distinção de elementos?

Todos os controles da interface do usuário podem ser entendidos por tecnologias assistivas?

Aqui estão alguns exemplos de controles e o que você precisa para descobrir:

• Caixa de seleção – está marcada ou não?
• Foco – Qual elemento tem foco e isso pode ser entendido programaticamente (não apenas visualmente)?

Os usuários são informados das mensagens de status que não recebem foco de uma forma que não necessariamente interrompa o trabalho?

Imagine se você estivesse navegando em uma página e, nessa página, um banner aparecesse no topo do site anunciando uma venda.

Os formulários são projetados da maneira correta?

Para tornar os formulários acessíveis, certifique-se de que o seguinte esteja ativado:

• Capacidade de usar a guia para navegar pelo formulário
• Capacidade de usar a guia para navegar pelo formulário

<formulário>

<label for="fname">Nome:</label><br>

<input type=”texto” id=”fname” name=”fname”><br>

<label for="lname">Sobrenome:</label><br>

<input type=”text” id=”lname” name=”lname”>

</form>

• Campos obrigatórios claramente marcados. Se um campo for obrigatório, ele também precisará ser rotulado corretamente no html.
• Existem instruções para o usuário (geralmente no topo do formulário)
• Os usuários recebem ajuda quando cometem um erro ao preencher um campo de formulário (por exemplo, formato de data incorreto, é isso que você precisa inserir).

Resumo

Como você pode ver, há muito o que cobrir ao executar uma auditoria abrangente de acessibilidade. No entanto, tudo vale a pena e os benefícios que isso traz para o seu negócio são muitos – desde a construção de uma imagem de marca positiva até atingir um público mais amplo e melhorar seu SEO.