Requisitos de acessibilidade

  • 15 minutos

É essencial conhecer os principais princípios e requisitos que garantem que os produtos digitais sejam acessíveis a todos os usuários, incluindo aqueles com deficiências. As WCAGs (Diretrizes de Acessibilidade de Conteúdo da Web) fornecem uma estrutura abrangente para criar componentes de interface do usuário e conteúdo da Web acessíveis. Essa seção descreverá os principais princípios de acessibilidade e requisitos relacionados ao redimensionamento e ao refluxo.

Visão geral das diretrizes de acessibilidade

Os padrões WCAG fornecem diretrizes específicas para garantir que sites e aplicativos sejam adaptáveis (Diretriz 1.3), distinguíveis (Diretriz 1.4), navegáveis (Diretriz 2.4) e compatíveis (Diretriz 4.1). Esses critérios de sucesso se concentram em tornar o conteúdo da Web e os aplicativos mais fáceis de navegar, previsíveis e consistentes para os usuários e compatíveis com tecnologias adaptativas. Para atender a essas diretrizes, designers e desenvolvedores devem levar em consideração o seguinte:

Adaptável

Esta diretriz se concentra em garantir que as informações sejam estruturadas de uma maneira que permita que elas sejam apresentadas em formatos diferentes sem perder o significado ou a funcionalidade. Isso requer garantir que o conteúdo permaneça acessível quando os usuários alterarem o tamanho do texto ou o layout se adaptar a diferentes tamanhos e orientações de tela (SC 1.3.4). Ele também requer a apresentação de conteúdo em uma ordem significativa que preserva o significado e as relações pretendidos (SC 1.3.1) quando o formato de apresentação é alterado. Além disso, a ordem de leitura e navegação do conteúdo deve permanecer lógica e significativa (SC 1.3.2), independentemente das alterações de layout devido ao redimensionamento ou ao refluxo.

Distinguishable

Esta diretriz se concentra em tornar o conteúdo percebível, garantindo que ele seja distinguível e acessível a todos os usuários. Ele inclui vários requisitos importantes, como garantir que:

  • O texto pode ser redimensionado em até 200% sem perda de conteúdo ou funcionalidade (SC 1.4.4).
  • O texto pode ser redimensionado em até 200% sem tecnologia adaptativa, permitindo que os usuários leiam uma linha completa de texto em uma janela de tela inteira sem precisar rolar horizontalmente (SC 1.4.8).
  • O texto é apresentado como texto real em vez de imagens de texto, permitindo redimensionamento e estilo sem perda de clareza (SC 1.4.5). Quando o texto está em uma imagem, seu tamanho, espaçamento e cor não podem ser ajustados, nem é possível que sejam lidos em voz alta ou reposicionados.
  • O conteúdo pode refluir dentro de uma janela de visualização quando ampliado em até 400% sem perda de informações ou funcionalidade e sem a necessidade de rolagem horizontal (SC 1.4.10). Os aplicativos de rolagem vertical devem refluir para uma largura de 320 pixels CSS, que é o tamanho do conteúdo antes do zoom ser aplicado. Da mesma forma, os aplicativos de rolagem horizontal devem refluir para uma altura de 256 CSS pixels. Ao testar o reflow, geralmente aplicamos tanto a largura de 320 pixels de CSS quanto a altura de 256 pixels de CSS.

    Captura de tela dos requisitos de redimensionamento e refluxo de rolagem vertical e horizontal.

  • Os usuários podem ajustar o espaçamento de texto, a altura da linha e o espaçamento de letras, o que ajuda a manter a legibilidade quando o texto é redimensionado (SC 1.4.8; veja exemplos). A imagem exibe exemplos de um parágrafo com espaçamento simples, espaçamento um e meio e espaçamento duplo.
  • Os usuários podem modificar o espaçamento entre letras, palavras e linhas sem perder conteúdo ou funcionalidade (SC 1.4.12). Texto truncado horizontalmente, texto truncado verticalmente e texto sobreposto são exemplos de falhas para atender a esse critério.
  • O conteúdo exibido ao passar o mouse ou com foco permanece acessível quando o conteúdo é redimensionado ou reorganizado (SC 1.4.13).

Esta diretriz se concentra em fornecer mecanismos de navegação claros em sites e aplicativos. Ele inclui vários requisitos principais:

  • Forneça uma maneira de os usuários ignorarem o conteúdo repetitivo e acessarem diretamente o conteúdo principal da página. À medida que o conteúdo flui para visores menores ou após o zoom, os usuários ainda devem ser capazes de ignorar blocos com eficiência sem serem forçados a rolar desnecessariamente por seções repetidas (SC 2.4.1).
  • Verifique se as páginas têm títulos descritivos e informativos que ajudam os usuários a entender o tópico ou a finalidade da página. Quando o conteúdo da página redimensiona ou refluxa, esse título permanece essencial para que os usuários entendam a finalidade da página. Os usuários que dependem do zoom ou de um layout refluído precisam identificar rapidamente a página, mesmo quando o design visual muda (SC 2.4.2).
  • Verifique se a finalidade de cada link está clara somente no texto do link ou no texto do link junto com seu contexto ao redor. Quando o conteúdo é redimensionado e recortado, é essencial garantir que o texto permaneça legível e os links permaneçam facilmente reconhecíveis sem serem cortados ou alterados visualmente (SC 2.4.4, SC 2.4.9).
  • Forneça várias maneiras de os usuários localizarem uma página dentro de um conjunto de páginas, como uma função de pesquisa, um mapa de site ou um sumário. Ao redimensionar e refluxar conteúdo, é essencial garantir que essas opções de navegação alternativas permaneçam acessíveis e funcionais, mesmo que o conteúdo se ajuste a telas menores ou níveis de zoom maiores (SC 2.4.5).
  • Use títulos e rótulos claros e descritivos para ajudar os usuários a entender a estrutura e a finalidade do conteúdo. À medida que o texto é redimensionado ou refluxado, os títulos e rótulos devem permanecer claros e manter sua hierarquia para ajudar os usuários a navegar com facilidade no conteúdo. Se os títulos ficarem distorcidos, desalinhados ou visualmente obscuros durante o refluxo, ele poderá confundir usuários e interromper a navegação (SC 2.4.6, SC 2.4.10).
  • Verifique se o indicador de foco do teclado está visível para que os usuários entendam qual elemento atualmente tem foco, mesmo quando o layout mudar (SC 2.4.7).
  • Verifique se a ordem de navegação de elementos interativos é lógica e intuitiva.

Compatível

Essa diretriz visa maximizar a compatibilidade com agentes de usuário atuais e futuros, incluindo tecnologias adaptativas. Ele afirma que o conteúdo criado usando linguagens de marcação deve ter elementos com marcas de início e término completas, elementos aninhados corretamente, nenhum atributo duplicado e IDs exclusivas. Isso garante que os agentes do usuário possam interpretar e analisar com precisão o conteúdo. Além disso, todos os componentes da interface do usuário devem ter nomes e funções que possam ser determinadas programaticamente e quaisquer estados, propriedades ou valores que os usuários possam modificar também devem ser ajustáveis programaticamente.

Quaisquer alterações nos estados, propriedades ou valores devem ser comunicadas aos agentes do usuário, permitindo que as tecnologias adaptativas interajam e forneçam informações sobre esses componentes. Por fim, essa diretriz determina que as mensagens de status sejam determinadas programaticamente por meio de funções ou propriedades para que possam ser apresentadas ao usuário por tecnologias adaptativas sem receber o foco. Isso garante que os usuários que dependem de leitores de tela ou outras tecnologias adaptativas sejam informados de alterações importantes no conteúdo sem interrompê-los.