@cognitvs/a11y-widget — Demonstração Interativa

👁️ Ajustes Visuais

Escala de Fonte

Use os botões A- e A+ no widget para redimensionar o texto de 80% até 200%. A CSS variable --font-scale é aplicada em todo o documento.

Este parágrafo vai crescer e diminuir conforme você ajusta o tamanho da fonte pelo widget. Perceba que o layout se adapta automaticamente ao novo tamanho sem quebrar a estrutura da página.

Alto Contraste

Ativa o filtro contrast(160%) no html, tornando a interface mais legível para pessoas com baixa visão ou sensibilidade à luz.

Botão Primário Botão Outline Botão Ghost Link de exemplo

Máscara de Leitura (Inteligente / Livre)

Guia de leitura que escurece toda a tela exceto a linha ou parágrafo onde o mouse está. Modo Inteligente detecta o elemento de texto; Modo Livre segue o cursor livremente.

Primeira linha de texto para testar a máscara de leitura com o modo inteligente ativo.
Segunda linha — perceba como a máscara se encaixa automaticamente neste bloco de texto.
Terceira linha — excelente para pessoas com TDAH, dislexia ou dificuldade de concentração visual.

Filtros de Daltonismo

Aplica matrizes de correção de cor via SVG/CSS para simular e compensar quatro tipos de daltonismo: Protanopia, Deuteranopia, Tritanopia e Monocromia.

Red

Green

Blue

Amber

Purple

Pink

Teal

Orange

🔊 Audição e Leitura

Leitor de Tela com Efeito Karaokê (TTS)

Ative o Leitor de Tela no widget e clique sobre qualquer parágrafo abaixo. A Web Speech API lê o texto em voz alta, iluminando cada palavra em tempo real conforme a voz sintética a pronuncia.

A acessibilidade digital não é apenas um requisito técnico, mas um direito fundamental. Ao clicar neste parágrafo com o leitor ativo, as palavras serão iluminadas uma a uma conforme a voz sintética pronuncia cada termo.

Este é um segundo parágrafo para demonstrar que o leitor funciona em qualquer elemento de texto da página. A velocidade pode ser ajustada no widget entre lento (0.5x), normal (1x) e rápido (1.5x).

Tradutor LIBRAS (VLibras Oficial)

Ativa o plugin oficial do VLibras (Governo Federal Brasileiro), injetando um avatar de intérprete de Língua Brasileira de Sinais que traduz o conteúdo da página em tempo real. Carregado sob demanda para não impactar a performance inicial.

⚠️ Este recurso carrega o script externo vlibras.gov.br e pode precisar de conexão com a internet.

🎯 Interação e Mobilidade

Ponteiro Gigante

Substitui o cursor padrão do sistema por um cursor 2× maior, com contorno azul de alta visibilidade. Beneficia pessoas com baixa visão, tremor essencial ou dificuldade de localizar o ponteiro na tela.

E neste link

Navegação por Teclado Aprimorada

Adiciona anéis de foco de alto contraste (4px azul #0077d4) em todos os elementos interativos. Pressione Tab para navegar e perceba o foco claramente destacado.

Link Tab 4

Rolagem Assistida

Exibe botões fixos no lado esquerdo da tela com setas para cima/baixo, permitindo rolagem de página suave sem precisar usar scroll do mouse ou teclado. Ideal para pessoas com dificuldade motora, tremor ou limitação de mobilidade.

👈 Ative no widget e observe os botões aparecerem no canto inferior esquerdo desta página.

Ímã de Cliques (Cursor Magnético)

Atrai fisicamente o cursor para o elemento clicável mais próximo quando o mouse entra no raio de atração. Disponível em força Suave (25px) ou Forte (45px). Com histerese magnética para evitar saltos erráticos entre botões adjacentes.

Link Clicável

Destacar Links e Elementos Clicáveis

Aplica outline tracejado e background semitransparente azul em todos os a, button, [role="button"] e inputs de submit/button da página, tornando imediatamente visível tudo que é clicável.

Link de Política de Privacidade Link de Termos de Uso Role Button

🧠 Cognitivo e Foco

Pausar Animações

Desativa todas as animações CSS e transições da página aplicando animation-duration: 0.001ms globalmente. Beneficia pessoas com epilepsia fotossensível, enxaqueca, TDAH e distúrbios vestibulares.

↑ Este quadrado animado deve parar imediatamente ao ativar "Pausar Animações" no widget.

Ajuste para Dislexia

Substitui a tipografia da página pela fonte Comic Sans MS / OpenDyslexic e aumenta o espaçamento entre letras e palavras, reduzindo a reversão visual de caracteres para pessoas com dislexia.

O rato roeu a roupa do rei de Roma. A babá botou o bebê para baixo. Pedro pregou um prego numa pedra preta. Compra pão e pão preto — este parágrafo é especialmente útil para testar fontes amigáveis para dislexia.

Espaçamento de Texto

Aumenta o espaçamento entre letras (letter-spacing), palavras (word-spacing) e linhas (line-height) em dois níveis: Espaçado e Muito Espaçado.

Este texto de exemplo mostrará o efeito do espaçamento ao selecionar os modos "Espaçado" ou "Muito Espaçado" no widget. Experimente e observe a diferença na densidade visual do conteúdo — especialmente útil para pessoas com dislexia e baixa visão.

Engenharia com Propósito

Acessibilidade Universal: Inclusão Real, Sem Fricção e Sem Mensalidades.

Mais de 1 bilhão de pessoas no mundo — sendo mais de 18 milhões no Brasil — possuem algum tipo de deficiência ou limitação funcional. No entanto, menos de 3% dos sites na internet são plenamente acessíveis. O @cognitvs/a11y-widget foi desenvolvido pela Cognitvs para erradicar as barreiras de implementação, oferecendo uma solução robusta, autônoma e em total conformidade legal em apenas uma linha de código.

100%

Nativo W3C (Web Component)

0 kb

Dependências de Terceiros

14+

Recursos WCAG 2.1 (Nível AA)

Zero

Tracking / Coleta de Dados

Pilares de Engenharia e Negócio

⚖️

Conformidade Legal & WCAG 2.1

Atende rigorosamente aos requisitos da Lei Brasileira de Inclusão (LBI - Lei nº 13.146/15, Art. 63) e às diretrizes internacionais do W3C (WCAG 2.1 Nível AA), protegendo sua empresa contra passivos jurídicos e multas regulatórias.

🛡️

Segurança por Design & DevSecOps

Arquitetura baseada em Zero Trust. O widget não injeta scripts rastreadores, não armazena cookies de terceiros e não possui risco de ataque em cadeia de suprimentos (Supply Chain). As preferências residem estritamente no localStorage do cliente.

🧩

Shadow DOM Encapsulado

Totalmente imune a conflitos de estilos. Classes globais de frameworks como Tailwind, Bootstrap ou CSS-in-JS não poluem o widget, e as regras do widget não quebram o design original do seu portal.

🌐

Agnóstico & Multi-Framework

Construído sobre o padrão Web Components da W3C. Funciona imediatamente em React, Next.js, Vue, Nuxt, Angular, Svelte, Qwik ou em CMSs tradicionais como WordPress, Webflow e Shopify.

Matriz Comparativa de Mercado

Critério / Requisito	@cognitvs/a11y-widget	Plugins Proprietários de Mercado
Custo de Licenciamento	Gratuito & Open-Source (MIT)	Mensalidades de R$ 250 a R$ 2.500/mês
Privacidade & LGPD	100% Local (Zero Telemetria)	Coleta de métricas e analytics de navegação
Dependências de Runtime	Zero Dependências	Bibliotecas pesadas externas (> 500 KB)
Isolamento de Estilos	Shadow DOM Nativo	Injeção no DOM global (risco de colisão CSS)
Tradutor LIBRAS Integrado	Oficial VLibras (On-Demand)	Geralmente ausente ou cobrado em plano corporativo
Leitor de Tela Nativo (TTS)	Web Speech API com Efeito Karaokê	Vozes sintetizadas em servidores externos lentos
Vendor Lock-in	Nenhum (Seu código, suas regras)	Total (Se cancelar o plano, o widget é desativado)

Integração Rápida em Minutos

Escolha o método mais adequado para a arquitetura do seu projeto: via CDN (para HTML puro, WordPress e Webflow) ou via NPM (para aplicações modernas com bundlers).

1. Via CDN (HTML Puro, WordPress, Webflow, Landing Pages)

Insira o script no final do <body> do seu site ou no arquivo de cabeçalho do seu tema:

index.html

<!-- Carrega o Web Component -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@cognitvs/a11y-widget/dist/a11y-widget.js"></script>

<!-- Insere o elemento onde preferir (geralmente antes de fechar o </body>) -->
<cognitvs-a11y></cognitvs-a11y>

2. Instalação via Gerenciador de Pacotes

Terminal

# Usando NPM
npm install @cognitvs/a11y-widget

# Usando PNPM
pnpm add @cognitvs/a11y-widget

# Usando Yarn
yarn add @cognitvs/a11y-widget

3. Uso em React e Next.js (App Router / Pages)

Como o widget utiliza APIs do navegador (Web Components e window), carregue-o do lado do cliente com segurança:

components/AccessibilityWidget.tsx

'use client';

import { useEffect } from 'react';

export default function AccessibilityWidget() {
  useEffect(() => {
    // Carrega o registro do custom element exclusivamente no cliente
    import('@cognitvs/a11y-widget');
  }, []);

  return <cognitvs-a11y storage-prefix="meu_app"></cognitvs-a11y>;
}

4. Propriedades e Atributos Suportados

Atributo	Tipo	Padrão	Descrição
`storage-prefix`	`string`	`"cognitvs"`	Define o prefixo das chaves no `localStorage`, permitindo isolamento em ambientes multi-tenant ou microsites.