Ramplifica

Início

Requisitos

Glossário

Sobre o Projeto

Início

Requisitos

Glossário

Sobre o Projeto

5.1.1.17 - Requisitos para contraste de textos e elementos gráficos

Descrição

Os textos e elementos gráficos devem ter contraste suficiente com seus respectivos planos de fundo. Deve haver contraste mínimo entre os textos e seus respectivos planos de fundo. Também deve haver contraste mínimo entre os elementos gráficos relevantes e seus respectivos planos de fundo e/ou entornos. As taxas de contraste devem estar em conformidade mínima com os critérios de sucesso nível AA do WCAG 2.1. Elementos interativos no estado desabilitado não precisam cumprir requisitos de contraste. Elementos gráficos meramente decorativos e logotipos também estão isentos.
Exemplo : Um fundo claro é escolhido para que as letras de cores escuras possam ser lidas na tela de uma aplicação.

Desempenho funcional

com visão limitada
sem percepção da cor

Componentes aplicáveis

Botão
Texto
Imagem
Lista
Campo de Formulário
Link
Controle
Título de seção
Rótulo

Cenários para desenvolvimento de interfaces

Designers

Garanta que os textos e elementos gráficos relevantes tenham contraste adequado em relação ao plano de fundo, conforme os critérios de sucesso de nível AA do WCAG 2.1 (4.5:1 para texto normal e 3:1 para texto grande).

Desenvolvedores

Utilize ferramentas automatizadas ou funções CSS para garantir que o contraste entre texto e plano de fundo, assim como entre elementos gráficos relevantes e seus contornos, esteja em conformidade com o WCAG 2.1, exceto para elementos desabilitados ou decorativos.

Exemplo de código

<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exemplo de Contraste</title> <style> body { background-color: #333; color: #fff; padding: 20px; } h1 { color: #ffcc00; } .button { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } .button:disabled { background-color: #ccc; color: #777; cursor: not-allowed; }</style> </head> <body> <h1>Exemplo de Contraste</h1> <button class="button">Botão Visível</button> <button class="button" disabled>Botão Desabilitado</button> </body> </html>

Gerentes

Certifique-se de que o processo de design e desenvolvimento inclua verificações de contraste em todas as etapas, garantindo que as interfaces estejam em conformidade com os padrões de acessibilidade do WCAG 2.1.

Testadores

Avaliar contraste com ferramentas de teste

Use ferramentas de verificação de contraste para avaliar a taxa de contraste dos textos e elementos gráficos em relação ao plano de fundo. Certifique-se de que a relação atenda ao mínimo exigido pelo WCAG 2.1 nível AA (4.5

Garantir contraste em todos os estados

Verifique que textos e elementos interativos mantenham a taxa de contraste mínima em todos os estados (ativo, focado, etc.).

Analisar gráficos e elementos visuais relevantes

Teste elementos gráficos que transmitam informações importantes para garantir que possuam contraste adequado com o plano de fundo. Elementos meramente decorativos não precisam seguir essa regra.

Adaptar contrastes para diferentes modos de exibição

Confirme que o contraste seja adequado tanto no modo claro quanto no modo escuro, se a aplicação suportar ambos.

Documentar casos de exceção

Se elementos interativos no estado desabilitado ou gráficos decorativos forem detectados, documente que eles estão fora do escopo da exigência de contraste.

Revisar contraste em diferentes dispositivos

Teste em telas de diferentes tamanhos e tipos (como monitores, tablets e smartphones) para garantir que o contraste se mantenha adequado em todas as resoluções.

Conteudistas

Verifique se os textos que são inseridos estão de acordo com os critérios mínimos de sucesso nível AA da WCAG. Isso mantêm contraste adequado com o fundo, especialmente em áreas de leitura contínua, para garantir que a acessibilidade não seja comprometida.

POR VOCÊ TER ACESSADO ESTE REQUISTO

Recomenda-se

Requisitos para Botão

5.1.1.4-Requisito para elementos interativos e de interface
Elementos interativos e de interface do usuário devem ter rótulos que descrevem o elemento, sua funcionalidade, estado ou operação. Elementos de interface interativos, como botões e campos de formulário, devem conter um rótulo que descreve a sua função. Os rótulos devem estar relacionados com o elemento por meio de código de programação. Nem todos os elementos possuem todas essas características, mas eles devem ser compreensíveis para a operação do usuário.
5.1.1.6-Requisito para organização de elementos funcionais e nomes acessíveis
Deve ser mantida a mesma organização de elementos funcionais e nomes acessíveis ao longo de toda a aplicação. Os elementos funcionais devem manter-se na mesma posição e com a mesma descrição acessível. Isso facilita a compreensão e acelera o aprendizado do usuário
5.1.1.7-Requisitos para nomes acessíveis
Os nomes acessíveis devem conter os rótulos dos elementos. Para os elementos que possuam rótulos em texto ou imagens de texto, o nome acessível deve conter todo o rótulo. Sempre que possível, o texto do rótulo deve estar no começo do nome acessível.

Ver todos os 13 Requisitos sobre componentes com Botão

Requisitos para Imagem

5.1.1.1-Requisito para elementos não textuais
Elementos não textuais devem ter um texto alternativo que descreva o seu significado. Elementos não textuais, como imagens, cujo significado é essencial para a compreensão do que é exibido na tela, devem ter uma alternativa textual a ser interpretada por recursos de tecnologia assistiva. Elementos meramente decorativos devem ser ignorados por recursos de tecnologia assistiva.
5.1.1.4-Requisito para elementos interativos e de interface
Elementos interativos e de interface do usuário devem ter rótulos que descrevem o elemento, sua funcionalidade, estado ou operação. Elementos de interface interativos, como botões e campos de formulário, devem conter um rótulo que descreve a sua função. Os rótulos devem estar relacionados com o elemento por meio de código de programação. Nem todos os elementos possuem todas essas características, mas eles devem ser compreensíveis para a operação do usuário.
5.1.1.6-Requisito para organização de elementos funcionais e nomes acessíveis
Deve ser mantida a mesma organização de elementos funcionais e nomes acessíveis ao longo de toda a aplicação. Os elementos funcionais devem manter-se na mesma posição e com a mesma descrição acessível. Isso facilita a compreensão e acelera o aprendizado do usuário

Ver todos os 15 Requisitos sobre componentes com Imagem

Requisitos para Campo de Formulário

5.1.1.4-Requisito para elementos interativos e de interface
Elementos interativos e de interface do usuário devem ter rótulos que descrevem o elemento, sua funcionalidade, estado ou operação. Elementos de interface interativos, como botões e campos de formulário, devem conter um rótulo que descreve a sua função. Os rótulos devem estar relacionados com o elemento por meio de código de programação. Nem todos os elementos possuem todas essas características, mas eles devem ser compreensíveis para a operação do usuário.
5.1.1.7-Requisitos para nomes acessíveis
Os nomes acessíveis devem conter os rótulos dos elementos. Para os elementos que possuam rótulos em texto ou imagens de texto, o nome acessível deve conter todo o rótulo. Sempre que possível, o texto do rótulo deve estar no começo do nome acessível.
5.1.1.8-Requisitos para descrição de elementos de interface interativos
Elementos de interface interativos devem descrever sua funcionalidade de forma clara, para a compreensão mesmo fora do contexto. Elementos como botões, links e ícones devem ser compreendidos mesmo fora do contexto. Esses elementos devem ter atributos ou alternativas textuais que descrevem sua funcionalidade aos usuários de tecnologia assistiva. Em caso de elementos que se repetem na interface, cada um deles deve fazer referência a qual objeto ou contexto a ação ou funcionalidade está relacionada.

Ver todos os 17 Requisitos sobre componentes com Campo de Formulário

Requisitos para Rótulo

5.1.1.4-Requisito para elementos interativos e de interface
Elementos interativos e de interface do usuário devem ter rótulos que descrevem o elemento, sua funcionalidade, estado ou operação. Elementos de interface interativos, como botões e campos de formulário, devem conter um rótulo que descreve a sua função. Os rótulos devem estar relacionados com o elemento por meio de código de programação. Nem todos os elementos possuem todas essas características, mas eles devem ser compreensíveis para a operação do usuário.
5.1.1.5-Requisito para cabeçalho e rótulos
Deve haver cabeçalhos e rótulos para organizar a estrutura da aplicação. A aplicação deve estar estruturada por meio de elementos de cabeçalho em títulos de seção e rótulos em campos de entradas de dados, permitindo que usuários de tecnologia assistiva compreendam melhor sua organização. O uso desses recursos possibilita a localização do conteúdo de forma mais rápida.
5.1.1.6-Requisito para organização de elementos funcionais e nomes acessíveis
Deve ser mantida a mesma organização de elementos funcionais e nomes acessíveis ao longo de toda a aplicação. Os elementos funcionais devem manter-se na mesma posição e com a mesma descrição acessível. Isso facilita a compreensão e acelera o aprendizado do usuário

Ver todos os 13 Requisitos sobre componentes com Rótulo

Ramplifica

Acessibilidade para todos a partir da tecnologia

Requisitos

Glossário

Sobre o Projeto

© 2024 Erik Henrique da Costa Nunes.

Este site é produto da dissertação para Mestrado produzida por Erik Henrique da Costa Nunes, com Orientação da Dra. Ingrid Teixeira Monteiro e Co-orientação do Dr. David Campelo.

Foi construído no Mestrado em Computação da UFC em Quixadá.