Ajuste um componente para atender aos padrões de acessibilidade

Ajuste um componente para atender às Diretrizes de acessibilidade de conteúdo da Web (WCAG) 2,1. Quando você está editando um componente em Construtor de temas e ver um símbolo de aviso, que indica que o componente não está em conformidade com as diretrizes de contraste de cor.

Antes de Iniciar

Função necessária: administrador

Por Que e Quando Desempenhar Esta Tarefa

Quando você está editando um componente em Construtor de temas você pode encontrar um símbolo de aviso ( ), o que indica que o componente não está em conformidade com as Diretrizes de acessibilidade de conteúdo da Web (WCAG) 2,1 para contraste de cores. A proporção de contraste WCAG 2,1 é essa Construtor de temas As metas para variáveis de conteúdo e IU são 3:1. Esta proporção determina os contraste entre as 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 brilhantes e o segundo dígito mostra o nível relativo de cores escuras. O limite de 3:1 fornece visibilidade ideal para usuários visualmente desafiados. Para obter mais informações, consulte Site de recomendação do W3C para as WCAG 2,1 .

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

Procedimento

1. Na página 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 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 símbolo para exibir uma descrição do aviso referente ao 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 Editor de componentes é 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 Editando guia. 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 Editor de componentes é 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 para 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 será exibido. Selecione o símbolo de desfazer para reverter todas as mudanças de volta 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 passa pela violação da taxa de contraste, o símbolo de aviso fica verde no seletor de cores.