A Lei de Acessibilidade Europeia (EAA) entrou em vigor no dia 28 de junho de 2025, trazendo novos requisitos para a acessibilidade de sites. Para as empresas que operam na UE ou atendem clientes da UE, é fundamental melhorar a acessibilidade e alinhar-se a esses novos padrões. Com o Accessibility Widget da iubenda, tornar seu site mais acessível é muito fácil.
O novo Accessibility Widget da iubenda usa ajustes com base em IA para que seu site seja automaticamente mais acessível para usuários com diferentes tipos de deficiência. A solução é compatível com uma série de recursos de acessibilidade, facilitando a navegação e a interação dos usuários com o seu site.
O que é o Accessibility Widget da iubenda?
O Accessibility Widget da iubenda é um widget totalmente automatizado projetado para melhorar a acessibilidade de seu site. Ele ajusta seu site em tempo real para acomodar as necessidades dos usuários com deficiências, incluindo perfis de acessibilidade, redimensionamento de texto, modos de alto contraste, fontes legíveis e muito mais. As principais funcionalidades são:
- 🎧 Texto alternativo com IA e estrutura da página: Adiciona texto alternativo às imagens e detecta títulos e regiões da página enquanto os visitantes navegam, o que ajuda quem usa leitores de tela.
- 🔳 Contraste e redimensionamento de texto: Permite que os usuários ajustem o contraste e o tamanho da fonte de acordo com suas necessidades.
- ⌨️ Atalhos de teclado: Os visitantes pressionam Alt+0 para abrir ou fechar o painel e Alt+9 para pausar ou restaurar os ajustes.
- 🌀 Controle sobre o conteúdo dinâmico: Permite que usuários com epilepsia ou outras condições interrompam animações ou conteúdo dinâmico que possam ser prejudiciais.
Com um processo de instalação simples, você pode começar a trabalhar imediatamente, sem precisar revisar o código do seu site.
Etapa 1: Ativação do Accessibility Widget
- Acesse o dashboard da iubenda: No dashboard da iubenda, localize o quadro Accessibility Widget em seus produtos disponíveis.
- Ative o Widget: Clique no botão Ativar para começar a usar o Accessibility Widget.
Etapa 2: Personalização do Accessibility Widget
Depois de ativar o Accessibility Widget, você pode adaptá-lo ao visual do seu site usando o configurador do Accessibility Widget. Essa ferramenta está disponível tanto nos novos planos de preços quanto nos planos anteriores.
- Acesse o dashboard da iubenda.
- Localize o quadro Accessibility Widget.
- Clique no botão Configurações para abrir o configurador.
O configurador tem esta aparência:
No configurador, você encontra várias opções para deixar o widget com a cara do seu site:
- Posição do botão de acionamento: Escolha onde o botão do widget aparece na tela: canto superior esquerdo, canto inferior esquerdo, canto inferior direito ou canto superior direito
👉 O painel principal do widget sempre abre a partir da parte inferior da tela.
- Cores do painel: Escolha uma cor primária para o painel combinar com o design do seu site. No plano Standard, você também pode escolher uma cor secundária para os itens selecionados. Se não escolher, o widget usa a cor primária. Se o contraste for baixo demais, você verá um aviso, mas ainda poderá salvar.
- Aparência do botão de acionamento: Ajuste a cor do ícone e a cor de fundo do botão de acionamento.
- Idioma padrão: O widget exibe o painel no idioma de cada página. Quando o idioma da página não está definido ou não está disponível, ele usa o idioma que você escolher aqui.
💡 O painel do widget não tem link para uma declaração de acessibilidade. Se você tiver uma, coloque o link no rodapé do seu site para que os visitantes possam encontrá-la em todas as páginas. Precisa escrever uma? Leia nosso guia sobre a declaração de acessibilidade (em inglês).
💡 Todas as alterações feitas no configurador são aplicadas automaticamente ao seu Accessibility Widget, mesmo que ele já esteja incorporado ao seu site.
Etapa 3: Instalação do Accessibility Widget em seu site
Depois de ativar e configurar o widget, é hora de incorporá-lo ao seu site.
-
Incorpore o widget: Copie o snippet de código fornecido para o Accessibility Widget e cole-o no início da seção head do seu site (logo após a tag
<head>) para instalar o widget. - Verifique a funcionalidade do widget: Após a incorporação, atualize seu site para garantir que o widget esteja visível e funcional. Agora você deve ver um pequeno ícone de acessibilidade:
Como ele funciona para os usuários finais
Quando o Accessibility Widget estiver incorporado e ativo em seu site, os usuários finais poderão interagir com ele para personalizar a experiência de navegação. À medida que os usuários alteram suas configurações por meio do widget, são feitos ajustes em tempo real no layout do site, garantindo que o conteúdo seja instantaneamente otimizado com base nas preferências selecionadas. Veja a seguir como o widget se comporta e as funcionalidades que ele oferece:
- Aparência do widget: O widget de acessibilidade aparece como um pequeno ícone e, quando os usuários clicam nesse ícone, ele abre um menu de opções de acessibilidade, proporcionando uma maneira perfeita de ajustar o layout do site.
- Preferências do usuário: O widget permite que os usuários selecionem suas preferências de acessibilidade, como:
- Tamanho do texto: Os usuários podem ajustar o tamanho do texto para melhor legibilidade.
- Configurações de contraste: Ajusta o contraste para que o conteúdo se destaque com mais clareza, especialmente para pessoas com deficiências visuais.
- Fontes legíveis: Os visitantes podem mudar para fontes pensadas para facilitar a leitura, como Atkinson Hyperlegible e OpenDyslexic.
- Perfis (plano Standard): Predefinições de um clique para Baixa visão, Convulsões e epilepsia, Deficiência motora, Dislexia, Cognição e aprendizagem, TDAH, Leitor de tela e Daltonismo. Elas mudam o que o visitante vê, não o código do seu site.
- Tamanho e estilo do texto: Aumenta ou ajusta o texto de forma a torná-lo mais legível sem precisar recarregar a página.
- Contraste: Aplica alterações nas cores de fundo e de texto para melhorar a visibilidade para usuários com daltonismo ou baixa visão.
- Controle de conteúdo dinâmico: Para os usuários que podem ser sensíveis a animações ou conteúdo intermitente, o widget oferece a opção de desativar as animações ou modificar o comportamento do conteúdo dinâmico. Isso é especialmente benéfico para pessoas com condições como a epilepsia.
- Estrutura da página: Uma aba que lista os títulos, as regiões e os links da página, para que os visitantes possam ir direto à parte de que precisam. Também é possível pressionar Alt+0 para abrir ou fechar o painel e Alt+9 para pausar ou restaurar os ajustes.
- Texto alternativo com IA e regiões da página: O widget adiciona texto alternativo às imagens e detecta títulos e regiões da página enquanto os visitantes navegam, dentro dos limites mensais do seu plano. Isso ajuda quem usa leitores de tela.
- Prático e acessível: As configurações de acessibilidade permanecem facilmente acessíveis a qualquer momento, com o widget flutuando em uma posição fixa no site, permitindo que os usuários façam alterações sempre que necessário.
Com o Accessibility Widget da iubenda, você pode melhorar a acessibilidade do seu site e proporcionar uma experiência melhor e mais inclusiva para todos os usuários.