---
sourceDocument: Interface do usuário da Now Platform Yokohama
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/yokohama/platform-user-interface

 Release :

    - yokohama

ft:locale :

    - pt-BR

ft:publication_title :

    - Interface do usuário da Now Platform Yokohama

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Ajuste um componente para atender aos padrões de acessibilidade

# Ajuste um componente para atender aos padrões de acessibilidade {#ariaid-title1}

* Versão de lançamento: Yokohama
* 
* Atualizado 30 de jan. de 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 min. de leitura

Ajuste um componente para atender às Diretrizes de acessibilidade para conteúdo da web (WCAG) 2,1. Quando você está editando um componente em Construtor de temase 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 ( ![Erro de acessibilidade]()), o 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 temasAs 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 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](https://www.w3.org/TR/WCAG21/).

O número total de violações de acessibilidade é indicado no selo numerado vermelho ( ![Selo numerado do inspetor de acessibilidade.]()) 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 | 1. Selecione o Inspetor de acessibilidade ( ![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. 2. Selecione o Aviso de acessibilidade ![Aviso de acessibilidade.]()símbolo para exibir uma descrição do aviso referente ao estado do componente que você deseja melhorar. 3. Selecione o lápis ( ![Í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. {#tb-adjust-component-wcag__ol_qtn_vvv_2dc} |
   | No menu Estilos de componente | 1. Selecione Editando . ![Guia Edição de estilos de componente.]() 2. Selecione um componente que exiba o símbolo de aviso de acessibilidade. ![Aviso de acessibilidade]() 3. No painel de estilo configurável, selecione o símbolo de aviso de acessibilidade para exibir uma descrição do aviso. 4. Conforme indicado na mensagem de aviso, você pode selecionar o lápis ( ![Í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. {#tb-adjust-component-wcag__ol_ixl_ppw_2dc} |
   |-|-|

   {#tb-adjust-component-wcag__choicetable_php_1vv_2dc}
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. ![Desfazer mudanças de cor]()
4. 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.