Ajustar um componente para atender aos padrões de acessibilidade

Ajustar um componente para atender às Diretrizes de acessibilidade para conteúdo web (WCAG) 2.1. Quando você está editando um componente em Construtor de temas e vê um símbolo de aviso, isso indica que o componente não está em conformidade com as diretrizes de contraste de cores.

Antes de Iniciar

Função necessária: administrador

Por Que e Quando Desempenhar Esta Tarefa

Ao editar um componente em Construtor de temas, você pode encontrar um símbolo de aviso ( ), que indica que o componente não está em conformidade com as Diretrizes de acessibilidade para conteúdo web (WCAG) 2.1 para contraste de cores. A taxa de contraste de WCAG 2.1 que Construtor de temas tem como meta para variáveis de conteúdo e IU é 3:1. Essa proporção determina os contrastes entre cores de tela mais claras e mais escuras e como elas se relacionam com a interface do usuário. O primeiro dígito mostra o nível de cores claras e o segundo dígito mostra o nível relativo de cores escuras. O limite de 3:1 fornece visibilidade ideal para usuários com deficiência visual. Para obter mais informações, consulte o site de recomendações do W3C para WCAG 2.1.

O número total de violações de acessibilidade é indicado no selo vermelho numerado ( ) ao lado do painel do Inspetor de acessibilidade.

Procedimento

1. Na página do Editor, acesse as violações de acessibilidade de uma das duas maneiras listadas na tabela a seguir.

   Opção	Descrição
   Do inspetor de acessibilidade	Selecione o ícone do Inspetor de acessibilidade ( ) para exibir uma lista de componentes com erros de acessibilidade. Um selo vermelho exibe o número de problemas de acessibilidade no seu tema. Selecione o Aviso de acessibilidade para exibir uma descrição do aviso do estado do componente que você deseja melhorar. Selecione o ícone de lápis ( ) ao lado do estado do componente que você deseja melhorar. Nota: A página do Editor de componente é exibida e o painel de estilo configurável exibe os ganchos editáveis disponíveis para o componente selecionado.
   No menu Estilos de componente	Selecione a guia Edição. Selecione um componente que exiba o símbolo de aviso de acessibilidade. No painel de estilo configurável, selecione o símbolo de aviso de acessibilidade para exibir uma descrição do aviso. Conforme indicado na mensagem de aviso, você pode selecionar o ícone de lápis ( ) para melhorar o problema de contraste. Nota: A página do Editor de componente é exibida e o painel de estilo configurável exibe os ganchos editáveis que estão disponíveis para o componente selecionado.

2. Selecione o símbolo de aviso de acessibilidade no painel de estilo configurável para obter mais informações sobre como corrigir o problema.

   

3. Selecione o link no aviso para corrigir o problema de contraste.
   Nota:

   Depois de salvar as mudanças em qualquer um dos ganchos de cor, um símbolo de desfazer aparecerá. Selecione o símbolo de desfazer para reverter todas as mudanças para a cor original.

   

4. Quando você concluir as mudanças e o símbolo de aviso de acessibilidade não estiver mais visível, selecione Salvar mudanças.
   Por exemplo, depois de selecionar uma cor que passe na violação da taxa de contraste, o símbolo de aviso ficará verde no seletor de cores.