Princípios de Acessibilidade na web e aplicativos

#UX/UI
#Boas práticas

Perceptibilidade, Operacionalidade, Compreensibilidade e Robustez são os princípios que guiam o design de sites e apps acessíveis, inclusivos e de fácil utilização.

No artigo de hoje eu saio um pouco da minha zona habitual (Android e Kotlin) para passear pelo universo da acessibilidade web e compartilhar com vocês o resumo da página Accessibility Principles da W3C.

São princípios gerais de acessibilidade que, em momentos, coincidem com boas práticas de UI/UX e usabilidade e, em outros momentos, representam requisitos técnicos para a interpretação do conteúdo por tecnologias assistivas como, por exemplo, os softwares de texto para fala. Desenhar e programar com esses princípios em mente ajuda a desenvolver aplicativos e sites que têm a acessibilidade e a inclusão como valores integrados desde o primeiro momento, beneficiando todos usuários e usuárias, independente de sua condição física, cognitiva e de letramento digital.

(Em tempo: como arquiteto tenho larga experiência com acessibilidade em edificações e espaços públicos, tendo trabalhado com acessibilidade em projetos de médio e grande porte; esse resumo foi elaborado no contexto das leituras para a monografia do MBA e, depois de concluído, percebi que seria muito oportuno compartilhar com o Time).

🌎Site original (inglês): https://www.w3.org/WAI/fundamentals/accessibility-principles/

Princípios de Acessibilidade

Perceptibilidade de informação e interface de usuário

Texto alternativo para conteúdo não textual:

· Equivalentes curtos para imagens, inclusive ícones, botões e elementos gráficos;

· Descrição de dados representados em gráficos, diagramas e ilustrações;

· Descrições curtas de arquivos de vídeo ou áudio;

· Etiquetas (labels) para formulários, campos de entrada e outros componentes da UI

Os textos alternativos apresentam o propósito de uma imagem ou componente da UI para prover uma experiência equivalente ao usuário. O texto alternativo pode ser lido por conversor de texto em voz, ampliado, exibido em dispositivo braile, usado como etiquetas para controles e auxiliar na navegação pelo teclado ou usando comandos de voz, além de identificar conteúdos de áudio, vídeo, arquivos e aplicações incorporadas ao site.

WCAG: 1.1 - https://www.w3.org/WAI/WCAG21/quickref/#text-alternatives

Legendas e outras alternativas para multimídia

Pessoas que não conseguem ouvir áudio ou ver vídeo necessitam de alternativas, por exemplo:

· Transcrição e legendas para conteúdos em áudio;

· Audiodescrição

· Interpretação em linguagem de sinais (p. ex: LIBRAS) de conteúdo em áudio, inclusive experiências auditivas relevantes

Transcrições bem escritas, contendo a sequência correta de informações apresentadas em áudio ou visualmente provêm um nível básico de acessibilidade e facilitam a produção de legendas e audiodescrição. Áudio e vídeo caem sob a definição de Time-based media.

WCAG: 1.2 (time-based media): https://www.w3.org/WAI/WCAG21/quickref/#time-based-media

Conteúdo pode ser apresentado de diferentes maneiras

Esse requisito permite que o conteúdo seja lido, ampliado ou adaptado corretamente para suprir as necessidades e preferências de pessoas diferentes. Também facilita outras formas de adaptação, como a geração automática de sumários e estruturas de tópicos para ajudar as pessoas a ter uma visão geral do conteúdo e encontrar partes específicas com mais facilidade.

· Títulos, listas, tabelas, campos de entrada e estruturas de conteúdo possuem marcações corretas;

· Sequências de informações ou instruções são independentes da apresentação;

· Navegadores e tecnologias assistivas oferecem ajustes para personalizar a apresentação.

WCAG 1.3 (Adaptable) - https://www.w3.org/WAI/WCAG21/quickref/#adaptable

Conteúdo é mais fácil de ver e ouvir

Essa diretriz é diz respeito à perceptibilidade do conteúdo, separando a plano principal do plano de fundo e deixando a informação importante mais distinta. Por exemplo:

· A cor não é usada como única maneira de apresentar a transmitir informação;

· Configurações padrão de cor de primeiro plano e cor de fundo apresentam contraste suficiente;

· Informação não é perdida quando usuários ampliam o texto para 400% do tamanho padrão ou modificam o seu espaçamento;

· O texto “reflui” em visualizações pequenas ou quando o usuário o amplia;

· Textos como imagem podem ser redimensionados, substituídos por textos ou evitados quando possível;

· Usuários podem pausar, parar ou ajustar o volume de áudio reproduzido num site;

· Som de fundo é baixo ou pode ser desligado para evitar interferência ou distração.

WCAG 1.4 - https://www.w3.org/WAI/WCAG21/quickref/#distinguishable

Operacionalidade de Interface de usuário e navegação

Funcionalidade e disponível com o teclado

Muitas pessoas não usam o mouse e dependem do teclado para interagir com a web; com isso, é necessário que o teclado permita acesso a todas as funcionalidades, inclusive controles de formulários, campos de entrada e outros componentes da interface. Atender a esse padrão também facilita o uso de reconhecimento de fala para operar websites e ditar texto.

Acessibilidade à partir do teclado inclui:

· Todas as funções disponíveis com o mouse também estão disponíveis com o teclado;

· O foco do teclado não fica preso em nenhuma parte do conteúdo;

· Navegadores, ferramentas de editoração e outras ferramentas provêm suporte ao teclado.

WCAG 2.1 (Keyboard accessible) - https://www.w3.org/WAI/WCAG21/quickref/#keyboard-accessible

O usuário tem tempo suficiente para ler e usar o conteúdo

Algumas pessoas precisam de mais tempo para ler e utilizar o conteúdo. Prover mecanismos para:

· Parar, extender ou ajustar limites de tempo, exceto quando necessário;

· Pausar, parar ou ocultar conteúdo em movimento, rolamento ou que pisca;

· Adiar ou suprimir interrupções, exceto quando essas são necessárias;

· Re-autenticar uma sessão expirada sem perda de dados

WCAG 2.2 (Enough time) - https://www.w3.org/WAI/WCAG21/quickref/#enough-time

O conteúdo não causa convulsões ou reações físicas

Conteúdos que piscam com determinadas frequências ou padrões podem causar reações fotossensíveis, inclusive convulsões. Animações e conteúdos em movimento podem causar desconforto e reações físicas. Para evitar esses problemas:

· Não inclui conteúdo que pisca em determinadas frequências e padrões;

· Alertar usuários antes de exibir conteúdo piscante e prover alternativas;

· Oferecer mecanismos para desativar animações a não ser que estas sejam essenciais.

WCAG 2.3 (Seizures) - https://www.w3.org/WAI/WCAG21/quickref/#seizures-and-physical-reactions

Os usuários conseguem navegar, encontrar conteúdo e determinar onde estão

Conteúdo bem-organizado ajuda os usuários a se orientar e navegas efetivamente. Atender a esse requisito ajuda as pessoas a navegar pelo site de diferentes maneiras e usando diferentes modos (usando visão, audição ou ambos) e dispositivos de interface humana, conforme suas necessidades e preferências. Para tanto:

· As páginas têm títulos claros e são organizadas utilizando cabeçalhos de seção descritivos;

· Há mais de uma maneira de encontrar páginas relevantes em um conjunto de páginas;

· O usuário é informado de sua localização atual em um conjunto de páginas relacionadas;

· Há maneiras de pular [bypass] blocos de conteúdo repetidos em múltiplas páginas;

· O foco do teclado é visível e a ordem de foco segue uma sequência significativa [meaningful];

· O propósito de um link é evidente, mesmo quando ele é visto sozinho

WCAG 2.4 (Navigable) - https://www.w3.org/WAI/WCAG21/quickref/#navigable

Usuários podem usar diferentes modos de entrada além do teclado

Modos de entrada além do teclado, tais como toque [touch], reconhecimento de voz e de gestos tornam o conteúdo mais fácil de usar para muitas pessoas, apesar de nem todo mundo poder usar cada uma dessas modalidades no mesmo grau.

Atender a esse requisito torna o conteúdo mais fácil de usar para muitas pessoas em uma grande gama de dispositivos, incluindo smartphones, tablets e terminais ou totens de autosserviço.

Algumas considerações de design maximizam o benefício de cada uma delas:

· Gestos que exigem destreza ou movimento fino têm alternativas que não exigem grande destreza;

· Componentes projetados para evitar acionamento acidental, por exemplo, por meio de funcionalidade de undo;

· As etiquetas apresentadas para o usuário correspondem aos nomes do objeto no código, para facilitar a ativação por voz;

· Funcionalidades acionadas por movimento também o podem ser por meio de componentes da interface;

· Botões, links e outros componentes ativos são grandes o bastante para serem acionados por toque.

WCAG 2.5 (Input modalities) - https://www.w3.org/WAI/WCAG21/quickref/#input-modalities

Compreensibilidade de informação e interface de usuário

Texto é legível e compreensível

Autores de conteúdo devem garantir que o texto é legível e compreensível pelo maior público possível, inclusive quando lido por ferramentas de conversão de texto em voz. Atender a esse requisito auxilia o software a fazer leitura do texto, gerar sumários e apresentar definições para termos técnicos ou vocabulário especializado. Esse requisito atende pessoas com diferentes tipos de deficiências cognitivas.

· Identificar a língua principal de uma página (inclusive línguas com leitura da direita para a esquerda, como o Árabe);

· Identificar a língua de passagens de texto, frases ou outras partes de uma página web;

· Prover definições para palavras incomuns, frases, idiomas [gírias?] e abreviações;

· Usar a linguagem mais clara e simples possível, ou apresentar versões simplificadas.

WCAG 3.1 (Readable) - https://www.w3.org/WAI/WCAG21/quickref/#readable

O conteúdo aparece e opera de maneiras previsíveis

Muitas pessoas dependem de interfaces previsíveis e se veem desorientadas ou distraídas por aparência e comportamento inconsistente. Atender a esse requisito auxilia as pessoas a aprenderem rapidamente a funcionalidade e navegação de um site, e operá-los de acordo com suas preferências. Para tanto:

· Mecanismos de navegação que aparecem que se repetem em múltiplas páginas aparecem sempre na mesma posição;

· Componentes de UI que se repetem em múltiplas páginas têm sempre as mesmas etiquetas;

· Mudanças significativas em uma página web não acontecem sem o consentimento do usuário;

WCAG 3.2 (Predictable) - https://www.w3.org/WAI/WCAG21/quickref/#predictable

Usuários recebem ajuda para evitar e corrigir erros

Formulários e outras formas de interação podem ser confusas ou difíceis de usar para muitas pessoas, o que as torna propensas a cometer erros. Atender a esse requisito auxilia pessoas que não podem ver ou escutar o conteúdo, e podem não reconhecer relações implícitas, sequências ou outras indicações. Também auxilia pessoas que não entendem a funcionalidade, estão confusas ou desorientadas, esquecem ou cometem erros no uso dos formulários ou nas interações. São exemplos de ajudas:

· Instruções, mensagens de erro e sugestões de correção descritivas;

· Ajuda sensível ao contexto para funcionalidades e interações mais complexas;

· Oferecer oportunidade para revisar, corrigir ou reverter envios [submissions] quando necessário.

WCAG 3.3 (Input Assistance) - https://www.w3.org/WAI/WCAG21/quickref/#input-assistance

Robustez de conteúdo e interpretação confiável

O conteúdo é compatível com ferramentas de usuário atuais e futuras

Conteúdo robusto é compatível com diferentes navegadores, tecnologias assistivas e outros agentes de usuário. Atender a esse requisito assegura que as tecnologias assistivas conseguem processar o conteúdo de maneira confiável, e apresenta-lo e operá-lo de diferentes maneiras.

· Garantir que as marcações podem ser interpretadas de maneira confiável, p. ex., assegurando sua validade;

· Prover um nome, papel e valor para componentes não-padrão da UI

WCAG 4.1 (Compatible) - https://www.w3.org/WAI/WCAG21/quickref/#compatible

Conclusão

Nesse artigo foi feita uma breve introdução aos princípios de acessibilidade na web e em aplicativos, à partir do conteúdo disponibilizado pela W3C.

📸

Photo by marianne bos on Unsplash