Instalação (1 linha)


        <script
         src="https://cdn.jsdelivr.net/gh/thaynabds/accessability-widget@2.3.0/src/accessability-widget.js"
        ></script>

Cole antes de </body>. O botão aparece no canto inferior direito. Nenhuma configuração necessária. Preferências salvas no localStorage automaticamente.

✅ Conformidade: WCAG 2.2 AA / LBI (Lei Brasileira de Inclusão 13.146/2015)

30 funcionalidades incluídas

🌙8 temasPadrão, Alto contraste, Kuro, PinkVoid, RedVoid, YellowVoid, GreenVoid e BlueVoid, cada um claro ou escuro.

🔄Inverter coresInversão da tela inteira.

🔆Inversão inteligenteInverte a interface e mantém fotos e vídeos.

🌈Aumentar saturaçãoAmplifica cores para visão de baixo contraste.

🖼Ocultar imagensRemove imagens para leitura de texto puro.

🎨Filtros de corProtanopia, Deuteranopia e Tritanopia (Daltonizer do Android) e Monocromia.

🔤Tamanho do texto80% a 140% em passos de 10%.

📖Fonte dislexiaOpenDyslexic — melhora leitura para dislexia.

↕Altura de linhaLine-height 2.2 para melhor escaneamento.

↔Espaçamento textoLetter e word spacing aumentados.

🔗Destacar linksLinks ficam visíveis em fundo amarelo.

📑Destacar títulosH1–H6 com borda lateral azul.

⏸Pausar animaçõesPara todos os CSS transitions e animations.

🎬Pausar vídeosPausa todos os <video> e desativa autoplay.

🖱Cursor grandeCursor SVG ampliado para visão motora reduzida.

🎯Foco de tecladoAnel de foco amarelo sempre visível.

📏Guia de leituraFaixa horizontal que segue o cursor do mouse.

⚡Perfis rápidosBaixa visão, dislexia, TDAH, motora e sensível a estímulos.

⬅Alinhar à esquerdaRemove texto justificado e centralizado.

📐Largura de leituraLimita o texto a 70 caracteres por linha.

🔍Lupa de textoAmplia o texto sob o mouse ou o foco.

🏷Descrição das imagensMostra o texto alternativo e avisa quando falta.

🗺Mapa da páginaPula para os títulos e o conteúdo principal.

👆Áreas de cliqueAlvos de pelo menos 44px.

🔇Silenciar sonsSilencia áudio e vídeos da página.

💬LegendasAtiva as legendas disponíveis nos vídeos.

📄Ler a páginaLê o conteúdo principal em voz alta.

⏩Velocidade da vozDe 0,75x a 1,5x.

🔊Ler texto (TTS)Web Speech API — lê o texto selecionado em voz alta.

💾PersistênciaTudo salvo no localStorage automaticamente.

Conteúdo para testar os recursos

Tipografia e links

O acesso à informação é um direito fundamental garantido pela Lei Brasileira de Inclusão (13.146/2015) . Aplicações acessíveis ampliam o alcance do produto e impactam positivamente a vida de pessoas com deficiências visuais, motoras ou cognitivas.

According to the W3C WCAG 2.2 guidelines, accessible web content benefits not only users with disabilities but all users in varied contexts.

Teste: ative Destacar links, Fonte dislexia, Aumentar altura de linha e Espaçamento de texto.

Hierarquia de títulos

Título H1 — título principal da página

Título H2 — seção principal

Título H3 — subseção

Teste: ative Destacar títulos.

Animações CSS

Bounce

Spin

Pulse

Teste: ative Pausar animações.

Vídeo com autoplay

Teste: ative Pausar vídeos.

Paleta de cores (teste de daltonismo)

Semáforo: as cores devem permanecer distinguíveis com cada filtro ativado.

Vermelho

Verde

Azul

Amarelo

Roxo

Laranja

Ciano

Leitura em voz alta (TTS)

Selecione o texto abaixo com o mouse e clique em "Ler texto selecionado" no widget:

"A acessibilidade digital não é um diferencial, é um direito. Cada pessoa merece acessar informações de forma autônoma e independente, independentemente de suas condições físicas, sensoriais ou cognitivas."

Guia de leitura

Ative Guia de leitura no widget e mova o mouse sobre este parágrafo. Uma faixa horizontal acompanhará seu cursor, ajudando a manter o foco na linha que está lendo. Recurso útil para pessoas com dislexia, déficit de atenção (TDAH) ou fadiga ocular.

Navegação por teclado

Ative Destacar foco do teclado e navegue com a tecla Tab:

Link como botão

Imagens

Ative Ocultar imagens para esconder as imagens abaixo e focar no texto.

API JavaScript

// Ler preferências atuais
const prefs = window.A11yWidget.getPrefs();

// Aplicar preferências (ex: carregar do servidor)
window.A11yWidget.applyPrefs({ darkMode: true, fontSize: 2 });

// Falar um texto programaticamente
window.A11yWidget.speak('Bem-vindo ao nosso site!');

// Abrir ou fechar o painel
window.A11yWidget.open();
window.A11yWidget.close();

// Resetar tudo
window.A11yWidget.reset();