Ramplifica

Início

Requisitos

Glossário

Sobre o Projeto

Início

Requisitos

Glossário

Sobre o Projeto

5.1.1.15 - Requisitos para indicar o foco de navegação

Descrição

Deve haver indicador de foco de navegação. Os aplicativos devem permitir que recursos de tecnologia assistiva que suportam indicador de foco visível em navegação sequencial, como leitores de tela, exibam esse indicador adequadamente.
Exemplo : Uma pessoa com baixa visão, dislexia ou baixa alfabetização que utiliza um leitor de tela para navegar por um aplicativo consegue identificar visualmente em qual posição da tela o foco está.

Desempenho funcional

com visão limitada
com cognição limitada

Componentes aplicáveis

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

Cenários para desenvolvimento de interfaces

Designers

Certifique-se de que o indicador de foco seja visualmente destacado e claramente visível ao navegar pelos elementos interativos (botões, links, campos) em ordem sequencial. Isso facilita a navegação tanto para usuários regulares quanto para aqueles que utilizam teclados ou tecnologias assistivas.

Desenvolvedores

No código, implemente estilos CSS que realcem o foco de navegação, como :focus ou outline, garantindo que elementos interativos tenham um indicador visível quando navegados por teclado ou leitores de tela, assegurando compatibilidade com tecnologias assistivas.

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 Indicador de Foco</title> <style> /* Estilo para garantir um indicador de foco visível */ input:focus, button:focus { outline: 3px solid #4d90fe; /* Cor azul do foco */ outline-offset: 2px; /* Distância do foco em relação ao elemento */ }</style> </head> <body> <form> <!-- Campo de Nome --> <label for="nome">Nome completo:</label> <input type="text" id="nome" name="nome" placeholder="Digite seu nome completo" required> <!-- Botão de Envio --> <button type="submit">Enviar</button> </form> </body> </html>

Gerentes

Estabeleça diretrizes claras para que o desenvolvimento e design sigam práticas de acessibilidade, garantindo que o indicador de foco seja consistente em toda a aplicação, permitindo a navegação eficaz para todos os tipos de usuários.

Testadores

Verificar a presença de indicadores de foco

Confirmar que todos os elementos interativos da aplicação, como links, botões e campos de formulário, apresentam um indicador de foco visível ao receberem foco. Teste a navegação sequencial utilizando o teclado (por exemplo, a tecla Tab) e leitores de tela para garantir que o indicador de foco é exibido corretamente em todos os elementos interativos.

Inspecionar a visibilidade do foco

Garantir que o indicador de foco seja suficientemente visível, mesmo em telas com diferentes contrastes e resoluções. Ajustar estilos CSS se necessário para melhorar a clareza do foco.

Testar diferentes combinações de cores e temas

Verificar se o indicador de foco é visível em diferentes configurações de contraste de cores e temas do aplicativo, especialmente em modos de alto contraste.

Validar a consistência do foco

Confirmar que o comportamento do foco é consistente em toda a aplicação, para que o usuário possa antecipar e seguir o indicador de forma previsível.

Checar compatibilidade com tecnologias assistivas

Utilizar ferramentas de tecnologia assistiva, como leitores de tela e ampliadores de tela, para garantir que o foco visível é destacado adequadamente durante a navegação sequencial.

Verificar a acessibilidade em diferentes dispositivos

Testar a presença e visibilidade do indicador de foco em dispositivos móveis e desktop para assegurar uma experiência de navegação consistente.

Implementar personalização de foco

Caso necessário, permitir que o usuário personalize a aparência do indicador de foco para atender às suas necessidades específicas, como ajustes de cor e espessura.

Conteudistas

Todos os elementos de interface, tais como botões, campos de texto, títulos, entre outros devem ter o foco visivel. Essa indicação facilita a navegação sequencial para quem usa leitor de tela ou outras tecnologias assistivas.

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 Texto

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.16-Requisitos para elementos de interface de itens em sequência
Os elementos de interface de itens em sequência ou que exigem paginação devem situar o usuário. Deve ficar claro para o usuário a quantidade de etapas, o intervalo mostrado, o seu posicionamento atual e o número de itens totais quando uma ação exige interação em itens sequenciais.
5.1.1.17-Requisitos para contraste de textos e elementos gráficos
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.

Ver todos os 8 Requisitos sobre componentes com Texto

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 Vídeo

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 11 Requisitos sobre componentes com Vídeo

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 Lista

5.1.1.16-Requisitos para elementos de interface de itens em sequência
Os elementos de interface de itens em sequência ou que exigem paginação devem situar o usuário. Deve ficar claro para o usuário a quantidade de etapas, o intervalo mostrado, o seu posicionamento atual e o número de itens totais quando uma ação exige interação em itens sequenciais.
5.1.1.17-Requisitos para contraste de textos e elementos gráficos
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.
5.1.1.19-Requisitos relacionados a características sensoriais do usuário
Não podem existir instruções que dependem somente das características sensoriais do usuário. As instruções fornecidas para compreender e utilizar o conteúdo não podem depender somente das características sensoriais dos elementos de interface, como forma, cor, tamanho, localização visual, orientação ou som.

Ver todos os 5 Requisitos sobre componentes com Lista

Requisitos para Título de seção

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.16-Requisitos para elementos de interface de itens em sequência
Os elementos de interface de itens em sequência ou que exigem paginação devem situar o usuário. Deve ficar claro para o usuário a quantidade de etapas, o intervalo mostrado, o seu posicionamento atual e o número de itens totais quando uma ação exige interação em itens sequenciais.
5.1.1.17-Requisitos para contraste de textos e elementos gráficos
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.

Ver todos os 6 Requisitos sobre componentes com Título de seção

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á.