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: ui_builder_admin

Para obter informações sobre funções granulares, consulte Granular admin roles.

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 ( ), que indica que o componente não está em conformidade com as Diretrizes de acessibilidade para 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. Essa proporção determina os contrastes entre cores de tela mais claras e 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 . 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 Editor de componentes para obter mais informações para corrigir o problema.

   

3. Selecione no link no aviso para corrigir o problema de contraste.
   O seletor de cores é aberto.

   Nota:

   Você pode selecionar o controle deslizante Ocultar escolhas inacessíveis no seletor de cores para limitar as opções de cores às cores identificadas como acessíveis, com base nas diretrizes das Diretrizes de acessibilidade de conteúdo da web (WCAG).
4. Opcional: Selecione o símbolo de desfazer para reverter suas mudanças de volta para a cor original, se necessário.

   

5. Quando você concluir as mudanças e o símbolo de aviso de acessibilidade não estiver mais visível, selecione Salve as mudanças .
   Por exemplo, depois que você seleciona uma cor que passa pela violação da taxa de contraste, o símbolo de aviso fica verde no seletor de cores.