Testando sites Drupal para acessibilidade com WCAG 2.1

Publicados: 2023-05-16

Você sabia que 1 em cada 4 adultos nos EUA tem alguma deficiência*? São impressionantes 61 milhões de pessoas que podem ser afetadas por sites inacessíveis.

Como desenvolvedor Drupal, você tem o poder de fazer a diferença garantindo que seu site atenda às Diretrizes de Acessibilidade de Conteúdo da Web (WCAG). Neste blog, exploraremos os principais recursos e práticas recomendadas para testar a acessibilidade WCAG 2.1 no Drupal, para que você possa criar sites que sejam inclusivos para todos os usuários.

teste de acessibilidade no site drupal

O que é Acessibilidade (A11y)

Acessibilidade refere-se a tornar um site utilizável pelo maior número possível de pessoas, especialmente no que diz respeito a pessoas com deficiência. A que se refere A11y? A11y refere-se simplesmente à palavra “Acessibilidade”, onde 11 denota o número de caracteres presentes entre “A” e “Y”

WCAG e suas origens

WCAG significa Web Content Accessibility Guidelines. É considerado a referência padronizada para a acessibilidade do site. Criadas pelo World Wide Web Consortium (W3C), as diretrizes WCAG são a melhor e mais fácil maneira de tornar seu site utilizável para todos. As diretrizes WCAG são rigorosamente seguidas pela maioria das organizações governamentais e de saúde, a fim de garantir que o site cumpra as leis de acessibilidade (por exemplo, seção 508).

Princípios das WCAG

Existem quatro princípios principais de acessibilidade se você deseja adotar a conformidade com as WCAG. Eles seguem o acrônimo 'POUR', que significa Perceptível, Operacional, Compreensível e Robusto .

Perceptível

Em palavras simples, o conteúdo deve ser detectável pelos sentidos do usuário. Isso significa que eles devem ser capazes de reconhecer as informações que estão sendo apresentadas a eles. Isso inclui permitir que os usuários ouçam o conteúdo de áudio com clareza e garantir que seja distinguível do ruído de fundo.

operável

Trata-se de garantir que os usuários possam navegar confortavelmente em seu site e que a interface seja amigável. Não deve haver nenhuma parte inacessível do site ou etapas que os usuários possam ser incapazes de concluir. Deve evitar conteúdo rápido e intermitente ao projetar seu conteúdo da web. Deve ser fácil navegar no site sem um teclado, garantindo também que o site seja acessível por teclado para usuários que não podem usar um mouse.

Compreensível

Os usuários devem ser capazes de processar as informações que lhes são apresentadas e também entender como usar e navegar pelo site. Isso inclui tornar o texto claro, legível e previsível para garantir que as páginas apareçam de maneira amigável e antecipada.

Robusto

Isso destaca que a tecnologia pode evoluir e construir seu site com futuras evoluções tecnológicas. Como regra geral, se a tecnologia mudar e se desenvolver, o conteúdo também deve permanecer acessível. Ele também precisa ser compreendido por um amplo espectro de usuários com diferentes deficiências e ainda permanece fácil de entender. Por exemplo, o site o tornou compatível para funcionar com a versão mais recente dos leitores de tela.

Por que você deve cumprir as WCAG

Abaixo estão algumas das vantagens da implementação WCAG

  • Um site acessível cria boa vontade em relação à sua marca e melhora a otimização do mecanismo de pesquisa. Seu site terá uma classificação mais alta nos resultados dos mecanismos de pesquisa.
  • Um site acessível permite maior engajamento, alcance e retenção, pois você terá removido com eficiência as barreiras que impedem que uma ampla gama de pessoas acesse seu conteúdo.
  • Depois que as WCAG são implementadas como parte de qualquer site, elas são consideradas padrão.

Critérios de sucesso WCAG 2.0/2.1: os mais amplamente implementados

  1. Cada campo de entrada no site tem um rótulo apropriado
  2. O conteúdo decorativo é implementado de forma que possa ser ignorado pela tecnologia assistiva. Por exemplo, imagens decorativas ignoradas por leitores de tela
  3. Legendas são fornecidas para todo o conteúdo de áudio/vídeo pré-gravado
  4. A interpretação da língua de sinais é fornecida para o conteúdo de áudio
  5. Uma sequência significativa de conteúdo, por exemplo, os títulos de qualquer página são colocados em uma ordem sequencial
  6. O usuário pode pausar ou parar o áudio ou controlar o volume do áudio independentemente do volume geral do sistema para reproduzir vídeos automaticamente.
  7. A taxa de contraste de texto e imagens de texto é 4,5:1, e texto e imagens em grande escala são 3:1. A taxa de contraste não se aplica a conteúdo decorativo ou logotipo ou nome de marca
  8. Baixo ou nenhum áudio de fundo. O áudio/vídeo pré-gravado não contém nenhum ruído de fundo
  9. Todas as funcionalidades do conteúdo são acessíveis por meio da interface do teclado. Não haverá armadilha de palavra-chave.
  10. Fornecer aos usuários tempo suficiente para ler e usar o conteúdo
  11. Se o conteúdo for baseado em tempo, o usuário poderá pausar ou ajustar a restrição de tempo
  12. No caso de qualquer conteúdo de movimento rápido, como carrosséis automáticos, o usuário terá opções para pausar ou pará-lo
  13. Quando a sessão do usuário autenticado expirar, o usuário poderá continuar com a sessão sem perda de dados após a reautenticação.
  14. Os títulos, títulos e rótulos das páginas descrevem o tópico da página da web
  15. O foco do teclado é visível e bem destacado
  16. Componentes focalizáveis ​​receberão foco em uma ordem que significa significado e operacionalidade.
  17. Cada seção da página da Web é acompanhada por seu título de seção
  18. Exceto para imagens decorativas, todas as imagens têm texto Alt significativo
  19. Áudio, vídeo, formulários, menus suspensos, texto âncora, URLs e texto alternativo podem ser acessados ​​pelo teclado e pelo leitor de tela
  20. A clareza do conteúdo se adapta de acordo com o nível de zoom da página. O conteúdo é claramente visível, mesmo no nível máximo de zoom
  21. O menu de cabeçalho e rodapé com contexto de ajuda deve estar disponível em todas as páginas do site
  22. Os sites têm implementação adequada dos estados de foco e foco

Leitores de tela

Muitas pessoas com problemas visuais usam lupas e leitores de tela. Um leitor de tela é um software que lê o texto digital exibido na tela em voz alta. Alguns exemplos de leitores de tela incluem:

  • Produtos pagos como JAWS (Windows) e Dolphin Screen Reader (Windows).
  • Freeware como NVDA (Windows), ChromeVox (Chrome) e Orca (Linux).
  • Software embutido no sistema operacional (sistema operacional), como VoiceOver (macOS, iPadOS, iOS), Narrator (Windows), ChromeVox (no Chrome OS) e TalkBack (Android).

Três níveis de acessibilidade

WCAG 2.1 tem 3 níveis de critérios de sucesso

  • Nível A: Todos os 30 critérios essenciais de sucesso definidos nas WCAG 2.0 são atendidos. No mínimo, todos os sites devem atingir esse nível de conformidade.
  • Nível AA: Todos os critérios de sucesso do nível A são atendidos e 28 critérios adicionais de sucesso de acessibilidade são atendidos. Esse nível atinge um espectro de acessibilidade mais amplo e geralmente é o objetivo que a maioria das equipes de desenvolvimento deve alcançar.
  • Nível AAA: O site deve satisfazer todos os três níveis de critérios de sucesso, incluindo 28 critérios de sucesso adicionais. Este nível é normalmente reservado para sites especiais, como organizações governamentais.

A maioria dos sites compatíveis com WCAG se enquadra amplamente nos critérios de sucesso de acessibilidade nível A ou AA.

Acessibilidade Testando um site Drupal

A seguir estão as etapas seguidas para realizar um teste de acessibilidade para um site Drupal

  1. Execute uma auditoria do Google Chrome Lighthouse e corrija os problemas de acessibilidade destacados
  2. Executar uma auditoria da ferramenta Wave
  3. Valide o foco de destaque do teclado e a ordem de tabulação da página manualmente
  4. Valide a página com o software de leitura de tela necessário. Por exemplo, VoiceOver
  5. Valide a acessibilidade do site em todas as resoluções, como desktop amplo, laptop, guia e dispositivos móveis
  6. Valide o código do site usando as ferramentas de validação do W3C para marcação e CSS
  7. Valide o contraste de cores do site para garantir que ele atenda aos padrões (4:5:1) usando uma ferramenta de extensões do Chrome como o Kontrast ou um aplicativo como o Color Contrast Analyzer

Como o Drupal ajuda a atingir os padrões de acessibilidade

O desenvolvimento da Web deve incluir acessibilidade para garantir que os sites sejam funcionais e acessíveis para pessoas com deficiência. O Drupal é conhecido por sua dedicação inabalável à acessibilidade. Dê uma olhada em como o Drupal promove a acessibilidade e quais ferramentas e recursos ele fornece para ajudar os sites a serem mais fáceis de usar.

1. Construindo Acessibilidade no Drupal

O objetivo da equipe de desenvolvimento do Drupal sempre foi construir uma plataforma que pudesse ser usada pelo maior número possível de usuários. Os requisitos de Nível AA das Diretrizes de Acessibilidade de Conteúdo da Web (WCAG) 2.1 são seguidos ao desenvolver a plataforma principal do Drupal. Isso indica que uma variedade de deficiências, como as que afetam os sistemas visual, auditivo, físico, verbal, cognitivo e neurológico, podem acessar os sites do Drupal.

2. Recursos de acessibilidade padrão

  • Com sua capacidade de se adaptar a vários tamanhos de tela e dispositivos graças ao design responsivo, os temas padrão do Drupal podem ser usados ​​por quem usa dispositivos móveis ou tecnologia assistiva.
  • O Drupal cria marcação HTML semântica, que ajuda os leitores de tela e outras ferramentas de tecnologia assistiva a compreender a estrutura do site.
  • O Drupal inclui um campo para adicionar texto alternativo às fotos, o que ajuda os cegos a entender o conteúdo do site.
  • O Drupal oferece suporte à navegação por teclado, o que é crucial para usuários que não conseguem usar um mouse.
  • Os formulários fáceis de usar e navegar com tecnologia assistiva são gerados pelo Drupal e são acessíveis.

3. Drupal fornece plug-ins e módulos para acessibilidade

Para melhorar a acessibilidade de um site, o Drupal fornece uma variedade de módulos de acessibilidade e plug-ins que podem ser implantados. Vários módulos e plugins de acessibilidade populares são os seguintes:

  • Editoria11y Accessibility Checker: Este módulo examina um site em busca de problemas de acessibilidade e faz recomendações para soluções.
  • CKEditor Accessibility Plugin: Este complemento melhora a acessibilidade do editor de texto amplamente usado para Drupal, CKEditor.
  • Widget de acessibilidade tudo-em-um: este módulo inclui um widget de acessibilidade que permite aos usuários alterar o tamanho do texto do site, contraste e outras configurações relacionadas à acessibilidade.
  • A11Y: Form helpers: Este módulo ajuda a fazer com que todos os webforms do Drupal atendam aos padrões de acessibilidade
  • Block ARIA Landmark Roles: Este módulo adiciona elementos adicionais aos formulários de configuração de bloco que permitem aos usuários atribuir uma função de marco ARIA e/ou rótulos ARIA a um bloco.

4. Forte apoio da comunidade para acessibilidade

Desenvolvedores e designers comprometidos com a acessibilidade constituem uma parte considerável da comunidade Drupal. Um esforço liderado pela comunidade para tornar o Drupal mais acessível para pessoas com deficiência é o Drupal Accessibility Group. O grupo oferece orientação, ferramentas e práticas recomendadas para o desenvolvimento de sites Drupal compatíveis com ADA.

Referências:

https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html

Pensamentos finais

Drupal é um sistema de gerenciamento de conteúdo eficaz e de código aberto que fornece uma variedade de recursos, ferramentas e plug-ins para melhorar a acessibilidade de um site. Devido à sua dedicação à acessibilidade e à força de sua comunidade focada em acessibilidade, o Drupal é uma plataforma fantástica para a construção de sites utilizáveis ​​e acessíveis para pessoas com deficiências.
Espero que este artigo forneça a visão necessária sobre testes de acessibilidade com WCAG 2.1. Deseja criar um site Drupal acessível do zero ou deseja tornar seu site atual mais acessível? Adoraríamos fazer isso acontecer! Vamos conversar!