Ramplifica

Todas os Requisitos

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.

Exemplo : Foto de um resgate em uma notícia descreve a cena exibida na imagem.

sem visão

com visão limitada

Imagem

Vídeo

Áudio

Cenários para desenvolvimento de interfaces

Identifique elementos visuais essenciais e decorativos, assegurando que aqueles que carregam significado tenham um texto alternativo descritivo.

Insira atributos de texto alternativo (alt) em elementos não textuais relevantes, como imagens e ícones essenciais. Para elementos decorativos, configure o código para que tecnologias assistivas os ignorem.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo Acessível</title>
  </head>
  <body>
    <!-- Campo de formulário com texto alternativo em placeholder -->
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome" placeholder="Ramplifica" aria-label="Insira seu nome">
    <!-- Imagem com texto alternativo descritivo -->
    <figure>
      <img src="logo-ramplifica.png" alt="Logo da Ramplifica, uma marca que facilita a acessibilidade digital">
      <figcaption>Logo da Ramplifica</figcaption>
    </figure>
    <!-- Imagem meramente decorativa ignorada por tecnologias assistivas -->
    <img src="decorativo.jpg" alt="" aria-hidden="true">
  </body>
</html>

Imagem

Vídeo

Áudio

Certifique-se de que a equipe inclua descrições textuais nos elementos visuais relevantes e configure a exclusão de itens decorativos para tecnologias assistivas.

Certifique-se de que cada elemento não textual relevante (como imagens ou ícones com propósito informativo) possua uma descrição textual clara e precisa, que transmita o significado necessário para a compreensão da interface. Verifique se esses textos refletem o conteúdo e a função dos elementos de forma objetiva.

Valide se os elementos decorativos estão corretamente configurados para serem ignorados por tecnologias assistivas, o que pode ser feito com o uso do atributo aria-hidden="true" ou um alt="" vazio, dependendo da tecnologia usada. Isso garante que os leitores de tela, por exemplo, não leiam informações desnecessárias, proporcionando uma experiência de navegação mais limpa.

Teste a navegação com leitores de tela e outras tecnologias assistivas para verificar se os textos alternativos são lidos em ordem lógica e se eles efetivamente cumprem seu papel sem causar confusão ao usuário. Certifique-se de que cada elemento essencial seja acessível e compreensível na sequência natural de navegação.

Produza textos alternativos claros e resumidos para elementos visuais importantes, descrevendo seu propósito e contexto. Imamgens meramente decorativas devem ser ignoradas pelas tecnologias assistivas.

POR VOCÊ TER ACESSADO ESTE REQUISTO

Recomenda-se

Requisitos para Imagem

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.

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

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 15 Requisitos sobre componentes com Imagem

Requisitos para Vídeo

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.

Ver todos os 11 Requisitos sobre componentes com Vídeo

Requisitos para Áudio

Ver todos os 10 Requisitos sobre componentes com Áudio

Ramplifica

Início

Requisitos

Glossário

Sobre o Projeto

Início

Requisitos

Glossário

Sobre o Projeto

5.1.1.1 - Requisito para elementos não textuais

Descrição

Desempenho funcional

Componentes aplicáveis

Cenários para desenvolvimento de interfaces

Designers

Desenvolvedores

Exemplo de código

Aprenda a fazer com conteúdos selecionados para você

Gerentes

Testadores

Essencialidade e precisão dos textos alternativos

Ignorar elementos decorativos

Funcionalidade com tecnologias assistivas

Conteudistas

Recomenda-se

Ramplifica

Requisitos

Glossário

Sobre o Projeto