Ao trabalhar na acessibilidade de um site, você pode ver uma configuração conhecida como indicadores de foco. Eles são retângulos azuis que aparecem ao redor de elementos interativos como botões e lin...

Acessibilidade: sobre os indicadores de foco (indicadores visuais)

Descubra a importância dos indicadores de foco para a acessibilidade do seu site Wix. Esses retângulos azuis ajudam visitantes a navegar usando o teclado, mostrando sua posição na página. Aprenda como ativar e testar esses indicadores para garantir que todos os usuários possam interagir facilmente com seu conteúdo. Melhore a experiência do usuário e a acessibilidade do seu site com essas dicas práticas.

<div data-component-type="text"><div>Ao trabalhar na acessibilidade de um site, você pode ver uma configuração conhecida como indicadores de foco. Eles são retângulos azuis que aparecem ao redor de elementos interativos como botões e links quando os visitantes usam um teclado para navegar pelo site online. </div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/09/24/5392965c-0d96-41fc-b26c-0991fea45819/85b68dd0-01d0-4601-bfdc-b88d6eb68f8a.png" alt="Uma imagem de um site com um indicador visual ao redor do item de menu chamado" /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">De onde o Wix obtém suas informações?</div><div class="info-content"><ul>
  <li>Fazemos recomendações de acordo com as <a data-composite="true" href="https://www.w3.org/TR/WCAG21/#abstract" target="_blank">Diretrizes de Acessibilidade para o Conteúdo Web (WCAG na sigla em inglês)</a> (em inglês), que foi desenvolvido pelo <a data-composite="true" href="https://www.w3.org/" target="_blank">World Wide Web Consortium (W3C)</a>. </li>  <li>Este artigo baseia-se no <a data-composite="true" href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html" target="_blank">Focus Visible criterion (2.4.7)</a> (em inglês).</li></ul></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="why-focus-indicators-are-important" level="3">Por que os indicadores de foco são importantes</h2></div><div data-component-type="text"><div>Alguns visitantes navegam por sites usando a tecla Tab no teclado. Os indicadores de foco exibem a posição atual da tecla Tab, para que os visitantes saibam exatamente onde estão na página. </div></div><div data-component-type="text"><div>Se esses indicadores não estiverem ativados, pode ser que os visitantes do site não consigam navegar na página ou no conteúdo do site. Os indicadores de foco são, portanto, uma parte importante da acessibilidade de um site. </div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="focus-indicators-on-your-wix-site" level="3">Indicadores de foco no seu site Wix</h2></div><div data-component-type="text"><div>Os indicadores de foco são ativados automaticamente em todos os sites que você cria com o Wix.</div></div><div data-component-type="text"><div>O indicador foi projetado para se adequar à maioria das combinações de cores dos sites. No entanto, ele é menos visível em botões com um preenchimento branco sobre um background azul. Portanto, recomendamos verificar a cor dos elementos do seu site para garantir que todos os visitantes possam ver o indicador.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Como posso testar o indicador de foco em um site?</div><div class="info-content"><div>Para verificar a aparência do indicador de foco, abra seu site online ou a visualização do site e navegue pela página usando a tecla Tab no seu teclado.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="enabling-focus-indicators" level="3">Ativar indicadores de foco</h2></div><div data-component-type="text"><div>Ao verificar um site online do Editor Wix, você pode perceber que o indicador de foco não aparece. Se você desativou anteriormente os indicadores de foco, você será solicitado a ativá-los no assistente de acessibilidade. </div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Você está usando o Editor do Wix Studio?</div><div class="info-content"><div>Os indicadores de foco estão sempre ativados nos sites do Editor do Wix Studio, então você não precisa verificar essa configuração. </div></div></div></div><div data-component-type="heading"><h2 id="" level="4">Para ativar indicadores visuais:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Vá para o seu editor</a>.</li>  <li>Clique em <strong>Configurações </strong>na parte superior e selecione <strong>Acessibilidade</strong>.</li>  <li>Clique em <strong>Verificar site</strong> no painel do lado direito do seu editor.</li>  <li>Clique na aba <strong>Problemas identificados</strong>.</li>  <li>Abra o dropdown <strong>Nível do site</strong> e clique em <strong>Mostre indicadores de foco</strong>.</li>  <li>Ative a alavanca <strong>Incluir indicadores visuais</strong>. </li>  <li>Clique em <strong>Adicionar à página.</strong></li></ol></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Observação:</div><div class="info-content"><div>Depois de ativar os indicadores de foco no seu site do Editor Wix, não é possível desativá-los.</div></div></div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2025/05/30/e14f55c3-776b-419a-8fea-dbf25cdfbb56/b312085b-1950-49f3-81e5-ac06d1c799e3.png" alt="O cursor está clicando na alavanca para ativar os indicadores no assistente." /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Próximo passo:</div><div class="info-content"><div>Volte para a <a data-composite="true" href="https://support.wix.com/pt/article/acessibilidade-lista-de-verificação-para-melhorar-a-acessibilidade-do-seu-site" target="">checklist de acessibilidade</a> para continuar melhorando a acessibilidade do seu site. </div></div></div></div>

As barras de ferramentas de acessibilidade permitem que os visitantes manipulem certos aspectos do seu site, como fonte e tamanho do texto. Embora o Wix não ofereça barras de ferramentas de acessibili...

Acessibilidade: adicionar uma barra de ferramentas de acessibilidade ao seu site

Descubra como adicionar uma barra de ferramentas de acessibilidade ao seu site Wix usando código de um provedor externo. Embora não sejam obrigatórias, essas ferramentas permitem que os visitantes ajustem aspectos como fonte e tamanho do texto, melhorando a experiência do usuário. Siga as diretrizes para incorporar o código personalizado e utilize nossa lista de verificação de acessibilidade para garantir que seu site atenda aos padrões recomendados.

<div data-component-type="text"><div>As barras de ferramentas de acessibilidade permitem que os visitantes manipulem certos aspectos do seu site, como fonte e tamanho do texto. Embora o Wix não ofereça barras de ferramentas de acessibilidade integradas, você pode adicionar uma ao seu site usando o código de um provedor externo. </div></div><div data-component-type="text"><div>Essas barras de ferramentas não são um requisito para alcançar o padrão, conforme descrito nas <a data-composite="true" href="https://www.w3.org/WAI/standards-guidelines/wcag/" target="">Diretrizes de Acessibilidade para Conteúdo Web (WCAG)</a>. De qualquer forma, recomendamos seguir nossa <a data-composite="true" href="https://support.wix.com/pt/article/acessibilidade-lista-de-verificação-para-melhorar-a-acessibilidade-do-seu-site" target="">Lista de verificação de acessibilidade</a> e escanear seu site com o <a data-composite="true" href="https://support.wix.com/pt/article/acessibilidade-sobre-o-assistente-de-acessibilidade" target="">Assistente de acessibilidade</a> para garantir uma experiência aprimorada para seus visitantes. </div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Importante:</div><div class="info-content"><div>A incorporação de código personalizado só está disponível para sites com um <a data-composite="true" href="https://support.wix.com/pt/article/sobre-domínios" target="">domínio conectado</a>. </div></div></div></div><div data-component-type="heading"><h2 id="" level="3">Para adicionar uma barra de ferramentas de acessibilidade usando código de terceiros:</h2></div><div data-component-type="text"><ol>
  <li>Vá para <a data-composite="true" href="https://www.wix.com/my-account/site-selector/?buttonText=Gerenciar%20configurações&amp;title=Selecione%20um%20site&amp;autoSelectOnSingleSite=true&amp;actionUrl=https://www.wix.com/dashboard/{{metaSiteId}}/manage-website" target="_blank">Configurações</a> no painel de controle do seu site.</li>  <li>Selecione a aba <strong>Código personalizado</strong> em <strong>Avançado</strong>.</li>  <li>Selecione <strong>+ Código personalizado</strong> no canto superior direito.</li>  <li>Cole o trecho de código na caixa de texto.</li>  <li>Insira um nome para o seu código.<br /> <strong>Dica:</strong> dê um nome fácil de reconhecer para que você possa identificá-lo rapidamente depois.</li>  <li>Selecione uma opção em <strong>Adicionar código às páginas</strong>:
    <ul>
      <li><strong>Todas as páginas: </strong>o código será adicionado a todas as páginas do seu site, incluindo quaisquer páginas que serão criadas no futuro. Escolha se deseja carregar o código apenas uma vez por visita ou em cada página que o visitante abre.</li>      <li><strong>Escolha páginas específicas: </strong>use o menu dropdown para selecionar as páginas relevantes.</li>    </ul>  </li>  <li>Escolha onde colocar seu código:
    <ul>
      <li>Cabeçalho</li>      <li>Corpo - Início</li>      <li>Corpo - Fim</li>    </ul>  </li>  <li>Selecione <strong>Aplicar</strong>.</li></ol></div>

Aqui no Wix, estamos trabalhando constantemente para melhorar a acessibilidade dos nossos sites. Nosso objetivo é fornecer as ferramentas que você precisa para garantir que seu site seja acessível. Po...

Acessibilidade: usar software ou recursos de verificação externa

Descubra como melhorar a acessibilidade do seu site no Wix com nossas diretrizes e recomendações. Aprenda a utilizar recursos externos para revisar a acessibilidade e receber sugestões de melhorias. Além disso, considere consultar um especialista em acessibilidade para garantir que seu site esteja em conformidade com as leis locais.

<div data-component-type="text"><div>Aqui no Wix, estamos trabalhando constantemente para melhorar a acessibilidade dos nossos sites. Nosso objetivo é fornecer as ferramentas que você precisa para garantir que seu site seja acessível. Por isso, criamos uma série de <a data-composite="true" href="https://support.wix.com/pt/article/acessibilidade-lista-de-verificação-para-melhorar-a-acessibilidade-do-seu-site" target="">diretrizes que listam nossas recomendações</a>.</div></div><div data-component-type="text"><div>Você pode usar recursos externos para revisar a acessibilidade do seu site e receber sugestões de melhoria. No entanto, cada <a data-composite="true" href="https://support.wix.com/pt/article/acessibilidade-conformidade-com-suas-leis-regionais" target="">país e região tem leis diferentes</a>. Por isso, recomendamos que seu site seja revisado por um &quot;consultor de acessibilidade&quot; para verificar se ele está em conformidade com os requisitos da sua região.</div></div>

Os atributos ARIA fornecem informações adicionais sobre a semântica de elementos para tecnologias assistivas, como leitores de tela. Você pode adicionar atributos ARIA a qualquer elementos personaliza...

Acessibilidade: adicionar atributos ARIA a aplicativos web personalizados

Aprenda a adicionar atributos ARIA aos seus elementos personalizados no Wix para melhorar a acessibilidade do seu site. Os atributos ARIA fornecem informações essenciais para tecnologias assistivas, como leitores de tela, tornando seus aplicativos mais acessíveis. O artigo orienta sobre como ativar o modo de desenvolvedor no Wix Studio e adicionar, editar e gerenciar atributos ARIA, garantindo que seus elementos atendam às necessidades de todos os usuários.

<div data-component-type="text"><div>Os atributos ARIA fornecem informações adicionais sobre a semântica de elementos para tecnologias assistivas, como leitores de tela. Você pode adicionar atributos ARIA a qualquer elementos personalizados ou aplicativos em seu site.</div></div><div data-component-type="text"><div>Os atributos ARIA são importantes, pois definem maneiras pelas quais elementos e aplicativos personalizados podem se tornar acessíveis quando não é possível fazê-lo com o HTML nativo do elemento.</div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Importante:</div><div class="info-content"><div>Esse recurso é destinado a usuários que possuem aplicativos/elementos personalizados que requerem atributos ARIA. Se você não os possui em seu site, não precisa editar os atributos ARIA.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-aria-attributes" level="3">Adicionar atributos ARIA</h2></div><div data-component-type="text"><div>Já codificamos os atributos ARIA para a maioria dos elementos em um site. No entanto, se você criou aplicativos personalizados, convém adicionar seus próprios atributos ARIA para fins de acessibilidade.</div></div><div data-component-type="tabs"><div class="tabs-wrapper"><div class="headings-wrapper"><div data-slug="Editor-do-Wix-Studio" class="tab-heading heading-0">Editor do Wix Studio</div><div data-slug="Editor-Wix" class="tab-heading heading-1">Editor Wix</div></div><div class="tab-contents-wrapper"><div class="tab-content"><div data-component-type="text"><div>Ative o modo de desenvolvedor (Velo by Wix) no Editor do Wix Studio para adicionar atributos aos elementos. O Velo permite que você <a data-composite="true" href="https://dev.wix.com/docs/develop-websites/articles/getting-started/about-velo-by-wix" target="">adicione código, crie bancos de dados e muito mais</a>.</div></div><div data-component-type="text"><ol>
  <li>Selecione <strong>Código</strong>  <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/0de74f7a-9d8a-4c0c-8279-219bd3eefe97/d55e629b-e8dc-4acc-8af2-7a7779fb8bbc.png" /> no lado esquerdo do editor.</li>  <li>Selecione o aplicativo ou elemento relevante e clique no ícone <strong>Mais ações</strong> <img data-composite="true" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXdFGzMGNDzgiZQ0F979Jv1-o5331SfuPnrxO8m55pHp_EiDKy7_zvShglz_oxBkkonbL4dOmmectOTVLG8_Lwhsvbvn33GQEVRVFTt0SaKfQnbZ33f2OyrtaR5ki1Fo_2ovT0Vy4H_uPEi3jljAkW-gqs8?key=dRllTO6NEoYu0-D1JuBE8A" />.</li>  <li>Selecione <strong>Acessibilidade</strong>.</li>  <li>Clique em <strong>Adicionar atributo</strong>.</li>  <li>Selecione um atributo no menu dropdown.</li>  <li>Insira uma etiqueta/selecione o nível ou valor.</li>  <li>Selecione <strong>Adicionar</strong>.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/06/06/28953d00-e0af-4830-9a6e-befc645463b7/d306108c-c260-44f0-8301-e5713d96a4c6.jpg" alt="O painel de acessibilidade de um elemento no Editor do Wix Studio. O cursor está clicando no botão Adicionar atributo." /></div></div></div><div class="tab-content"><div data-component-type="text"><div>Ative os recursos de desenvolvedor no <a data-composite="true" href="https://support.wix.com/pt/article/acessibilidade-sobre-o-assistente-de-acessibilidade" target="">Assistente de Acessibilidade</a> para adicionar atributos aria aos seus elementos personalizados. Você pode adicionar o atributo ao clicar com o botão direito do mouse no elemento ou aplicativo.</div></div><div data-component-type="text"><ol>
  <li>Selecione <strong>Configurações</strong> na barra superior do seu editor.</li>  <li>Selecione <strong>Acessibilidade</strong>.</li>  <li>Selecione o ícone <strong>Mais ações</strong> <img data-composite="true" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXdFGzMGNDzgiZQ0F979Jv1-o5331SfuPnrxO8m55pHp_EiDKy7_zvShglz_oxBkkonbL4dOmmectOTVLG8_Lwhsvbvn33GQEVRVFTt0SaKfQnbZ33f2OyrtaR5ki1Fo_2ovT0Vy4H_uPEi3jljAkW-gqs8?key=dRllTO6NEoYu0-D1JuBE8A" /><strong> </strong>na barra superior do Assistente.</li>  <li>Selecione <strong>Configurações avançadas</strong>.</li>  <li>Clique na alavanca <strong>Ferramentas avançadas de acessibilidade</strong> para ativá-la.</li>  <li>Clique com o botão direito do mouse no aplicativo ou elemento ao qual deseja adicionar os atributos.</li>  <li>Selecione <strong>Acessibilidade</strong>.</li>  <li>Clique em <strong>Adicionar atributo</strong>.</li>  <li>Selecione um atributo no menu dropdown.</li>  <li>Insira uma etiqueta/selecione o nível ou valor.</li>  <li>Selecione <strong>Adicionar</strong>.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/06/06/08f56fa8-dbc6-4484-b600-2447401cd390/51281520-4c34-49dc-a5f1-8159f3ce06e7.jpg" alt="O painel de acessibilidade e o assistente estão abertos. O cursor está clicando em Adicionar atributo e a alavanca está ativada." /></div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Importante:</div><div class="info-content"><div>Você pode desativar as configurações avançadas de acessibilidade a qualquer momento e os atributos ARIA não serão excluídos.</div></div></div></div></div></div></div></div><div data-component-type="heading"><h2 id="" level="4">Você pode adicionar atributos ARIA aos seguintes elementos:</h2></div><div data-component-type="table"><div class="table-wrapper"><table><thead><tr><th><div>Elemento</div></th><th><div>Propriedades</div></th></tr></thead><tbody><tr><td><div>Janelas</div></td><td><div>Etiqueta</div></td></tr><tr><td><div>Texto</div></td><td><div>label, role [heading, status, alert], live, relevant, atomic, hidden, current, level</div></td></tr><tr><td><div>Caixa Contêiner</div></td><td><div>label, tabindex, role [region, group, none, status, alert], live, relevant, atomic, current, controls, hidden</div></td></tr><tr><td><div>Faixa</div></td><td><div>label, tabindex, role [heading, status, alert], live, atomic, hidden, current</div></td></tr><tr><td><div>Repetidor</div></td><td><div>label, role [heading, status, alert]</div></td></tr><tr><td><div>Botão de Texto</div></td><td><div>tabindex, pressed, expanded, haspopup</div></td></tr></tbody></table></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title"></div><div class="info-content"><div>Estamos trabalhando continuamente para adicionar atributos ARIA a mais elementos. <a data-composite="true" href="https://www.wix.com/contact/en" target="">Entre em contato</a> se você tiver alguma solicitação específica sobre atributos ARIA.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="editing-your-aria-attributes" level="3">Editar seus atributos ARIA</h2></div><div data-component-type="text"><div>Após adicionar atributos a aplicativos personalizados, você pode editá-los e atualizá-los sempre que quiser com o ícone Acessibilidade <img data-composite="true" src="https://lh6.googleusercontent.com/tzGAKNeD3huzfUCBGbiHOAmMhpoOMn2d7mXWbB8x3rd5_wDvr4uEfNczYUD_5EqzSdzFPLv5nc9zp7VkwFDWloqQmUBf71J5_kTbI5nE3o9Wb2s_CS8xcsfkw0eHNAxCpa4dBBIq=s0" />. Esse ícone é adicionado automaticamente aos elementos aos quais você conectou atributos.</div></div><div data-component-type="heading"><h2 id="" level="4">Para editar o atributo:</h2></div><div data-component-type="text"><ol>
  <li>Selecione o elemento/app no seu editor.</li>  <li>Selecione o ícone <strong>Acessibilidade</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/05/05/123b3ec4-f910-485b-ba95-c80ee1f6723b/29accdaa-a7f8-4070-a4e9-be08ffc45e99.png" />.</li>  <li>Passe o mouse sobre o atributo relevante e selecione o ícone <strong>Mais ações</strong> <img data-composite="true" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXcC5vRw8B_ITz9qd1n_rF0jP0XZvFe8Ly4NcbviMUHdlLJZIK7ATwxhjb-fPDytIlmc7hmtqMlqZt_sh3CtRvQOGzQRe_skqNqCTCHoFti1Yc1JZwr5M1G5d7vxKBGJAMf6oCDrRmiI9mYujNW1sBSBKREb?key=dRllTO6NEoYu0-D1JuBE8A" />.</li>  <li>Selecione <strong>Editar</strong>.</li>  <li>Faça as alterações relevantes e selecione <strong>Salvar</strong>.</li></ol></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="types-of-aria-attributes" level="3">Tipos de atributos ARIA</h2></div><div data-component-type="table"><div class="table-wrapper"><table><thead><tr><th><div>Nome do Atributo</div></th><th><div>Categoria</div></th><th><div>Tokens</div></th></tr></thead><tbody><tr><td><div>tabindex</div></td><td><div><br /></div></td><td><div>0, -1</div></td></tr><tr><td><div>Função</div></td><td><div><br /></div></td><td><div>token: de acordo com a definição no primitivo</div></td></tr><tr><td><div>aria-level</div></td><td><div><br /></div></td><td><div>int</div></td></tr><tr><td><div>aria-live</div></td><td><div>Online</div></td><td><div>token: polite, assertive</div></td></tr><tr><td><div>aria-multiline </div></td><td><div>Descrição</div></td><td><div>true, false</div></td></tr><tr><td><div>aria-multiselectable</div></td><td><div>Descrição</div></td><td><div>true, false</div></td></tr><tr><td><div>aria-pressed</div></td><td><div>Estado</div></td><td><div>true, false</div></td></tr><tr><td><div>aria-relevant</div></td><td><div>Online</div></td><td><div>token: all, additions, removals, text</div></td></tr><tr><td><div>aria-activedescendant</div></td><td><div>relacionamentos</div></td><td><div>ID_REF</div></td></tr><tr><td><div>aria-atomic</div></td><td><div>Online</div></td><td><div>true, false</div></td></tr><tr><td><div>aria-autocomplete</div></td><td><div>Descrição</div></td><td><div>true, false</div></td></tr><tr><td><div>aria-controls</div></td><td><div>relacionamentos</div></td><td><div>ID_REF</div></td></tr><tr><td><div>aria-current</div></td><td><div>Estado</div></td><td><div>step, page, true, false</div></td></tr><tr><td><div>aria-describedby</div></td><td><div>relacionamentos</div></td><td><div>ID_REF (itens separados por espaço)</div></td></tr><tr><td><div>aria-expanded</div></td><td><div><br /></div></td><td><div>true, false</div></td></tr><tr><td><div>aria-haspopup</div></td><td><div>relacionamentos</div></td><td><div>dialog, menu, true, false</div></td></tr><tr><td><div>aria-hidden</div></td><td><div><br /></div></td><td><div>true, false</div></td></tr><tr><td><div>aria-invalid</div></td><td><div>Estado</div></td><td><div>true, false</div></td></tr><tr><td><div>aria-label</div></td><td><div><br /></div></td><td><div>string</div></td></tr><tr><td><div>aria-labelledby </div></td><td><div>relacionamentos</div></td><td><div>ID_REF (itens separados por espaço)</div></td></tr></tbody></table></div></div>

No momento, não temos uma barra de ferramentas de acessibilidade integrada que seus visitantes possam usar para ajustar ou aprimorar certas partes do seu site.Como alternativa, você pode adicionar uma...

Pedido Acessibilidade: adicionar uma barra de ferramentas de acessibilidade ao seu site

Descubra como adicionar uma barra de ferramentas de acessibilidade ao seu site usando código de terceiros, já que atualmente não oferecemos uma ferramenta integrada. Embora essas barras não sejam obrigatórias para atender aos padrões de acessibilidade, sua implementação pode melhorar a experiência dos visitantes. Dê seu feedback e vote por esse recurso para que possamos considerá-lo em futuras atualizações.

<div data-component-type="text"><div>No momento, não temos uma barra de ferramentas de acessibilidade integrada que seus visitantes possam usar para ajustar ou aprimorar certas partes do seu site.</div></div><div data-component-type="text"><div>Como alternativa, você pode adicionar uma barra de ferramentas de acessibilidade ao <a data-composite="true" href="https://support.wix.com/pt/article/acessibilidade-adicionando-uma-barra-de-acessibilidade-ao-seu-site" target="">obter código de terceiros e incorporá-lo ao seu site</a>. </div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Observação:</div><div class="info-content"><div>Barras de ferramentas de acessibilidade não são um requisito para alcançar o padrão, conforme descrito nas <a data-composite="true" href="https://www.w3.org/WAI/standards-guidelines/wcag/" target="">Diretrizes de acessibilidade para conteúdo na web</a>. </div></div></div></div><div data-component-type="text"><div>Estamos sempre trabalhando para atualizar e melhorar nossos produtos, e seu feedback é muito apreciado.</div></div><div data-component-type="text"><div>Se este é um recurso que você gostaria de ver no futuro, clique em <strong>Vote nesse recurso</strong> e nós nos certificaremos de mantê-lo atualizado.</div></div>

&quot;Ir para o conteúdo principal&quot; é um recurso que permite que visitantes que usam tecnologias adicionais e/ou assistivas evitem conteúdo irrelevante ou repetido. É assim que ele aparece em um ...

Acessibilidade: sobre o recurso "Ir para o conteúdo principal"

Descubra como a opção "Ir para o conteúdo principal" melhora a acessibilidade do seu site Wix, permitindo que visitantes com tecnologias assistivas acessem diretamente o conteúdo principal, evitando informações repetidas. Essa funcionalidade é ativada automaticamente em todos os sites Wix e pode ser verificada e ajustada no assistente de acessibilidade. Aprenda a garantir que essa opção esteja visível e funcional para todos os usuários.

<div data-component-type="text"><div>&quot;Ir para o conteúdo principal&quot; é um recurso que permite que visitantes que usam tecnologias adicionais e/ou assistivas evitem conteúdo irrelevante ou repetido. </div></div><div data-component-type="text"><div>É assim que ele aparece em um site Wix online:</div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/09/13/04bd498b-4bcc-471d-9078-111775493073/0d4f6684-5a9a-49f5-9279-b83acfee00b9.png" alt="Um site online com o botão Ir para o conteúdo principal ativado." /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">De onde o Wix obtém suas informações?</div><div class="info-content"><ul>
  <li>Fazemos recomendações de acordo com as <a data-composite="true" href="https://www.w3.org/TR/WCAG21/#abstract" target="_blank">Diretrizes de Acessibilidade para o Conteúdo Web (WCAG na sigla em inglês)</a> (em inglês), que foi desenvolvido pelo <a data-composite="true" href="https://www.w3.org/" target="_blank">World Wide Web Consortium (W3C)</a>. </li>  <li>Este artigo baseia-se no <a data-composite="true" href="https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks.html" target="_blank">critério de sucesso 2.4.1 (Bypass Blocks)</a> (em inglês).</li></ul></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="why-skip-to-main-content-is-important" level="3">Por que a opção Ir para o conteúdo principal é importante</h2></div><div data-component-type="text"><div>Visitantes que podem ver/visitantes que navegam com um mouse podem localizar o conteúdo principal de uma página visualmente ou rolando pela página do site. No entanto, alguns visitantes do site, como pessoas com problemas visuais, podem usar tecnologias assistivas e/ou um teclado para navegar. </div></div><div data-component-type="text"><div>A opção &quot;Ir para o conteúdo principal&quot; fornece a esses visitantes acesso direto ao conteúdo principal da página, sem precisar passar por conteúdo repetido (por exemplo: título do site, menu, etc) primeiro.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="skip-to-main-content-and-wix-sites" level="3">Ir para o conteúdo principal e sites Wix</h2></div><div data-component-type="text"><div>A opção &quot;Ir para o conteúdo principal&quot; é ativada automaticamente em todos os sites que você criar com o Wix. Ela aparece como um link quando os visitantes navegam na página usando a tecla Tab.</div></div><div data-component-type="text"><div>O link foi criado para se adequar à maioria das combinações de cores dos sites. No entanto, ele pode ser menos visível em cabeçalhos/seções de sites que usam um esquema de cores branco e azul. Portanto, recomendamos verificar a cor dessas seções para garantir que elas apareçam para os visitantes.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Como posso testar a ferramenta Ir para o conteúdo principal?</div><div class="info-content"><div>Para verificar como a ferramenta funciona, abra seu site online ou a visualização do site e navegue pela página usando a tecla Tab no seu teclado.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="enabling-skip-to-main-content" level="3">Ativar a opção Ir para o conteúdo principal</h2></div><div data-component-type="text"><div>Se você perceber que o link não aparece na versão visualização/online de um site no Editor Wix, você pode verificá-lo e ativá-lo no assistente de acessibilidade. </div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Você está criando um site com o Editor do Wix Studio?</div><div class="info-content"><div>A opção Ir para o conteúdo principal está sempre ativada nos sites do Editor do Wix Studio, então você não precisa verificar essa configuração. </div></div></div></div><div data-component-type="heading"><h2 id="" level="4">Para ativar a opção Ir para o conteúdo principal:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Vá para o seu editor</a>.</li>  <li>Clique em <strong>Configurações </strong>na parte superior e selecione <strong>Acessibilidade</strong>.</li>  <li>Clique em <strong>Verificar site</strong> no painel do lado direito do seu editor.</li>  <li>Clique na aba <strong>Problemas identificados</strong>.</li>  <li>Abra o dropdown <strong>Nível do site</strong> e clique em <strong>Adicione o link &quot;Ir para o conteúdo principal&quot;</strong>.</li>  <li>Clique na alavanca<strong> Permitir &quot;Ir para o conteúdo principal&quot;</strong>.</li>  <li>Clique em <strong>Aplicar</strong>.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2025/05/30/f72e7a62-0f9b-405e-8380-a6bacc71b7f6/0631eb61-6455-4b3a-8392-503423216f1f.png" alt="O cursor está clicando na alavanca para ativar a opção Ir para o conteúdo principal no assistente." /></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">É importante saber:</div><div class="info-content"><div>Depois de ativar a opção Ir para o conteúdo principal no assistente, ela não poderá ser desativada.</div></div></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Próxima etapa:</div><div class="info-content"><div>Volte para a <a data-composite="true" href="https://support.wix.com/pt/article/acessibilidade-lista-de-verificação-para-melhorar-a-acessibilidade-do-seu-site" target="">checklist de acessibilidade</a> para continuar melhorando a acessibilidade do seu site.</div></div></div></div>

Você ou seus visitantes podem perceber que os elementos que contêm movimento (como efeitos de animação e vídeos transparentes) não são reproduzidos nas versões mobile e desktop do seu site online. Iss...

Acessibilidade: vídeos e animações não são reproduzidos no site online

Descubra como resolver problemas de reprodução de animações e vídeos no seu site, que podem ser causados por configurações de acessibilidade e desempenho nos dispositivos dos visitantes. Aprenda sobre o recurso de movimento reduzido, que desativa efeitos visuais para acessibilidade, e as opções de desempenho no Windows que permitem ajustar a visualização de animações. Siga as instruções para garantir que todos possam desfrutar da experiência completa do seu site.

<div data-component-type="text"><div>Você ou seus visitantes podem perceber que os elementos que contêm movimento (como efeitos de animação e vídeos transparentes) não são reproduzidos nas versões mobile e desktop do seu site online. Isso pode ocorrer devido a configurações no sistema operacional que você ou seu visitante estão usando.</div></div><div data-component-type="text"><div>Existem duas configurações que impedem a reprodução de animações e vídeos em um site online: Movimento reduzido e Melhor desempenho.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="reduced-motion" level="3">Movimento reduzido</h2></div><div data-component-type="text"><div>O recurso de movimento reduzido interrompe a reprodução de animações e vídeos no navegador. Movimento reduzido é um recurso de acessibilidade, o que significa que seu uso principal é permitir que visitantes com deficiência e certas condições (por exemplo, enjoo) visitem seu site.</div></div><div data-component-type="text"><div>O movimento reduzido está disponível na maioria dos sistemas operacionais. Você e seus visitantes podem desativar o recurso do seu dispositivo para ver toda a gama de efeitos, movimento e animação em seu site.</div></div><div data-component-type="text"><div>Selecione o dispositivo relevante na lista abaixo para saber como desativar o movimento reduzido.</div></div><div data-component-type="text"><ul>
  <li><a data-composite="true" href="https://support.apple.com/pt-br/HT202655" target="_blank">iPhone e iPad</a></li>  <li><a data-composite="true" href="https://support.apple.com/pt-br/guide/mac-help/mchlc03f57a1/mac" target="_blank">Mac OS</a></li>  <li><a data-composite="true" href="https://support.microsoft.com/pt-br/office/desativar-animações-do-office-9ee5c4d2-d144-4fd2-b670-22cef9fa025a" target="_blank">Windows OS</a></li>  <li><a data-composite="true" href="https://canaltech.com.br/android/Desabilite-as-animacoes-do-Android-e-deixe-o-seu-dispositivo-mais-rapido/#:~:text=Dentro%20das%20op%C3%A7%C3%B5es%20do%20desenvolvedor,habilita%20as%20op%C3%A7%C3%B5es%20listadas%20abaixo." target="_blank">Android</a></li></ul></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Observação:</div><div class="info-content"><div>O movimento reduzido também é ativado automaticamente para alguns dispositivos móveis no modo de bateria fraca/economia de energia.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="performance-options" level="3">Opções de desempenho</h2></div><div data-component-type="text"><div>Seus visitantes podem alterar uma configuração em seu computador para melhorar o desempenho do seu site. A configuração <strong>Ajustar para obter o melhor desempenho</strong>, disponível em dispositivos com sistema operacional Windows, permite que você escolha o que fazer com efeitos visuais, como elementos animados e vídeos.</div></div><div data-component-type="text"><div>De acordo com suas preferências, os visitantes podem escolher se desejam ativar ou desativar quaisquer efeitos visuais em seu navegador.</div></div><div data-component-type="heading"><h2 id="" level="4">Para alterar as configurações de desempenho:</h2></div><div data-component-type="text"><ol>
  <li>Digite “Desempenho” na caixa de busca do Windows.</li>  <li>Selecione <strong>Ajustar a aparência e o desempenho do Windows</strong>.</li>  <li>Selecione a aba <strong>Efeitos visuais</strong>.</li>  <li>Escolha uma opção na lista abaixo:
    <ul>
      <li><strong>Deixar o Windows escolher a melhor opção para o computador:</strong> o Windows altera as configurações de desempenho do seu dispositivo com base nas capacidades do seu dispositivo.</li>      <li><strong>Ajustar para obter uma melhor aparência:</strong> todos os efeitos visuais avançados e configurações são ativados e reproduzidos no seu dispositivo (incluindo animações e vídeos).</li>      <li><strong>Ajustar para obter um melhor desempenho:</strong> todos os efeitos visuais avançados e configurações são desativados e não são reproduzidos no seu dispositivo.</li>      <li><strong>Personalizar:</strong> ajuste manualmente as configurações para ativar e desativar os recursos que deseja.</li>    </ul>  </li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/07/18/fdef93a2-4781-416b-8a15-f73d77c4f12c/8fae3cab-b453-4700-9e83-97d8d57a83b9.png" alt="Ajuste a aparência e o desempenho da aba janelas. O cursor passa sobre" /></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Observação:</div><div class="info-content"><div>Para que os visitantes vejam as animações e os vídeos sendo reproduzidos no seu site online, eles devem selecionar a opção <strong>Ajustar para obter uma melhor aparência</strong>.</div></div></div></div>

No momento, não é possível criar um sitemap HTML dinâmico, que seria atualizado automaticamente quando você adicionasse novas páginas ao seu site. Como alternativa, você pode criar uma página do site ...

Pedido de Acessibilidade: criar um sitemap HTML dinâmico

Descubra como criar uma página no seu site que lista e vincula todas as suas páginas, já que atualmente não é possível gerar um sitemap HTML dinâmico que se atualize automaticamente. Aprenda a manter essa lista atualizada conforme você adiciona novas páginas, e saiba que seu feedback é essencial para a melhoria contínua dos nossos produtos.

<div data-component-type="text"><div>No momento, não é possível criar um sitemap HTML dinâmico, que seria atualizado automaticamente quando você adicionasse novas páginas ao seu site. </div></div><div data-component-type="text"><div>Como alternativa, você pode <a data-composite="true" href="https://support.wix.com/pt/article/wix-editor-adding-a-page-to-your--site" target="">criar uma página do site</a> que lista e <a data-composite="true" href="https://support.wix.com/pt/article/editor-wix-adicionando-um-link-a-um-elemento" target="">vincula para todas as páginas do seu site</a> e atualizar a lista quando necessário.</div></div><div data-component-type="text"><div>Estamos sempre trabalhando para atualizar e melhorar nossos produtos, e seu feedback é muito importante.</div></div>

Como começar

Escolha o seu template

Contrate um profissional para criar o seu site

Confira como você pode usar o Wix para criar seu site e seu negócio. Personalize seu site usando templates ou contrate um profissional para criar ou aprimorar sua presença online.

Primeiros passos

Confira como usar o Wix para construir seu site e negócio.

Noções básicas do Editor Wix

Use as ferramentas do Editor

Layout do site

Faixas e colunas

Estruture o seu site

Personalize seu site

Páginas

Gerencie páginas e menus

Texto

Botão

Contêineres e caixas

Slideshow

Formas e linhas

Adicione e personalize elementos

Imagem

Galeria

Vídeo

Documentos e arquivos

Adicione arquivos e mídia

Trabalhe com elementos

Use efeitos e animações

Compartilhe e divulgue seu site

Adicione elementos avançados

Visualização mobile

Recursos mobile

Páginas mobile

Background no mobile

Layout do site mobile

Elementos mobile

Texto no mobile

Mídia no mobile

Outros elementos no mobile

Solucionando problemas no site online

Mobile

Soluções de problemas do Editor

Use o Editor Wix

Use seu painel de controle

Configurações do site

Gerencie funções e permissões

Gerencie seu site

Comece a usar a IA

Use a IA para criar e gerenciar seu site

Use a IA para configurar o seu negócio

Ferramentas de IA

Conheça o editor

Use as ferramentas do editor

Estruture seu site

Adicione animações e efeitos

Estabeleça a identidade do site

Faça o design do site

Solução de problemas do site

Use o Editor do Wix Harmony

Gerenciador de mídia - Básico

Faça upload de mídia 

Compre arquivos de mídia

Gerencie seus arquivos de mídia

Problemas com mídia

Adicione e gerencia sua mídia

Use o Pro Gallery

Edite imagens (Wix Photo Studio)

Comece a usar o Wixel

Crie e gerencie projetos

Faça o design com o Wixel

Sobre upgrade e gerenciamento da conta

Wixel

Gerencie sua mídia

Comece a usar o Wix Multilíngue 

Traduza seu site

Gerencie seus idiomas

SEO no Wix Multilíngue

Crie um site multilíngue

Privacidade e GDPR

Sobre acessibilidade

Torne o seu site acessível

Recursos avançados de acessibilidade

Crie um site acessível

Sobre o CMS (antigo Gerenciador de Dados)

Use o CMS (antigo Gerenciador de Dados)

Conecte conteúdo de coleções do CMS ao site

Trabalhe com páginas dinâmicas e CMS

Conecte elementos de entrada do usuário ao CMS

Use o CMS com outros produtos Wix

Recursos avançados do CMS

Wix para desenvolvedores

Sites de teste

Logins SSO

Wix Blocks

Recursos avançados

Aprenda a usar o Editor Wix e a gerenciar o conteúdo de seu site. Descubra como proteger a privacidade de seus visitantes e tornar seu site acessível.

Crie o seu site

Personalize e gerencie seu site com os recursos do Wix.

Altere as configurações da conta

Problemas de login

Gerencie sua conta

Faça upgrade para um plano Premium

Planos Premium

Domínios Wix

Contas de email Google Workspace

Gerencie suas assinaturas

Cobranças, pagamentos e impostos

Faturas para Serviços Wix

Use promoções e cupons

Faturamento e assinaturas Premium

Revise as configurações da sua conta, gerencie suas assinaturas e planos Premium e entenda suas faturas.

Conta e faturamento

Gerencie seu site no app Wix

Princípios dos apps mobile

Personalize seu próprio app mobile

Gerencie seu próprio app mobile

Envie seu app mobile para aprovação

Construa seu próprio app mobile

Personalize seu site nos apps de membros Wix

Gerencie seu site nos apps de membros Wix

Use os apps mobile como membro

Use os apps de membros Wix

Apps mobile para clientes

Use o app Wix Owner para administrar seu negócio com eficiência, interagir com seus visitantes e criar uma comunidade.

Use os apps mobile do Wix

Administre seu negócio e conecte-se com os membros.

Domínios: primeiros passos

Domínios comprados em outro lugar

Transferência de domínios

Gerencie domínios

Solução de problemas de domínios

Entenda como comprar, conectar ou transferir um domínio e como manter os dados do seu site seguros.

Conecte um domínio

Compre, conecte ou transfira um domínio para o seu site.

Configure sua loja

Adicione produtos e categorias

Configure o envio e atendimento

Configure pagamentos e checkout

Personalize o design da sua loja

Gerencie seus pedidos

Gerencie seu estoque

Gerencie a área de membros

Gerencie os emails da loja

Incentive as vendas na loja

Dropshipping no Wix Stores

Configure canais de vendas

Use o app Wix para Wix Stores

Wix Stores

Configure o Wix Bookings

Crie serviços

Gerencie sua equipe

Gerencie os seus agendamentos

Plano de membros, pacotes e pagamentos

Personalize o Wix Bookings

Emails, SMS e promoções

Use o app Wix para gerenciar agendamentos

Videoconferência com o Wix Bookings

Fit by Wix

Serviços sob demanda

Wix Bookings

Configure o Wix Events

Crie seu evento

Personalize o Wix Events

Gerencie os seus eventos

Gerencie os convidados no Wix Events

Venda ingressos para eventos

Promova seu evento

Use o app Wix para Wix Events

Check-in by Wix para eventos

Wix Events

Aplicativos e soluções comerciais

Encontre as ferramentas certas para criar e expandir seus negócios: aceite pagamentos, analise suas estatísticas, conecte-se com visitantes e muito mais.

Gerencie o seu negócio