Framework de Componentes Acessíveis (Angular 19+)

Esta biblioteca oferece uma coleção de componentes web acessíveis desenvolvidos com Angular, com o objetivo de tornar a web mais inclusiva e utilizável para todas as pessoas.

Seguindo as diretrizes da WCAG 2.1 e 2.2, todos os componentes foram projetados para garantir:

• ✅ Navegação total por teclado
• ✅ Compatibilidade com leitores de tela
• ✅ Contraste visual adequado e foco visível
• ✅ Uso correto de semântica HTML e atributos aria

O uso desses componentes reduz a complexidade técnica e promove o cumprimento da Lei Brasileira de Inclusão (LBI), incentivando a responsabilidade digital e a inclusão real no desenvolvimento web.

🖱️ Componente de Botão Acessível

O componente <accessible-button> é um botão acessível com suporte completo à navegação por teclado, foco visível e leitura correta por tecnologias assistivas. Ideal para ações com acessibilidade garantida.

🔧 Parâmetros:

🎯 Evento:

• (onClick): emitido quando o botão é clicado.

📦 Exemplo de uso:

    <accessible-button
      className="btn-azul"
      label="Clique Aqui"
      ariaLabel="Botão de Clique"
      (onClick)="handleButtonClick()">
    </accessible-button>
  

🛡️ Acessibilidade garantida:

• Navegação total via teclado (tab, enter, espaço)
• Compatível com leitores de tela
• Foco visível para melhor usabilidade
• Semântica de botão respeitada

🎨 Personalização de Cor no <accessible-button>

O componente <accessible-button> permite alterar dinamicamente sua cor por meio de classes personalizadas. Isso garante flexibilidade visual sem comprometer a acessibilidade.

As classes/cores disponiveís são: btn-verde, btn-roxo, btn-azul, btn-vermelho, btn-laranja, btn-cinza.

✅ Objetivo

Permitir que o botão tenha estilização customizada, mantendo conformidade com as diretrizes de acessibilidade (WCAG 2.1 – contraste mínimo 4.5:1).

🧩 Como Usar

1. Passe a classe desejada via atributo className no seu html:

✅ Todas essas cores possuem contraste ≥ 4.5:1 com o texto branco, garantindo acessibilidade.

♿ Por que isso é importante?

Manter o contraste adequado entre o texto e o fundo melhora a legibilidade para:

• Pessoas com baixa visão
• Usuários em ambientes com muito brilho
• Pessoas com daltonismo

📏 Baseado nas diretrizes:

WCAG 2.1 – Critério 1.4.3: Contraste Mínimo
Contraste mínimo recomendado: 4.5:1 para texto normal.

Com essa abordagem, você garante personalização visual + acessibilidade de verdade! ✅

⌨️ Componente de Input Acessível

O componente <accessible-input> é um campo de entrada de texto com suporte completo a acessibilidade: foco visível, rótulo interpretável por leitores de tela (aria-label), contraste adequado e mensagens de erro.

🔧 Parâmetros:

📦 Exemplo de uso:

    <accessible-input
      [(modelValue)]="user.name"
      type ="name"
      id="nome"
      label="Nome completo"
      ariaLabel="Nome completo"
      placeholder="Digite seu nome"
      aria-required="true">
    </accessible-input>
    <span *ngIf="user.name === ''" id="erro" class="erro">Campo obrigatório</span>
  

🪟 Componente de Modal Acessível

O componente <lib-modal> exibe uma janela modal acessível que respeita as diretrizes de usabilidade e acessibilidade: foco preso enquanto estiver aberta, fechamento via Esc e leitura correta por leitores de tela.

🔧 Parâmetros:

🎯 Eventos:

📦 Exemplo de uso:

Html

    <accessible-button
      label="Abrir Modal"
      ariaLabel="Botão para abrir Modal"
      (onClick)="openModal()">
    </accessible-button>

    <lib-modal
      [aberto]="modalOpen"
      [titulo]="'Atenção!'"
      [descricao]="'Descrição do modal'"
      (fechado)="closeModal()">
      <p>Conteúdo do modal.</p>
    </lib-modal>
  

Typescrypt

    openModal() {
      this.modalOpen = true;
    }
    closeModal() {
      this.modalOpen = false;
    }
  

🛡️ Acessibilidade garantida:

• Foco preso dentro do modal enquanto estiver aberto
• Fechamento por Esc compatível com leitores de tela
• Uso de marcação semântica e atributos ARIA
• Leitura correta por leitores de tela
• Compatível com contraste elevado e temas escuros

📊 Componente de Tabela Acessível

O componente <accessible-table> apresenta dados tabulares de forma acessível, utilizando marcação semântica adequada, legenda descritiva e suporte a tecnologias assistivas como leitores de tela.

🔧 Parâmetros:

📦 Exemplo de uso:

Html

    <accessible-table
      [caption]="'Lista de Usuários'"
      [headers]="headers"
      [data]="tableData">
    </accessible-table>
  

Typescript

    headers = ['Nome', 'Email', 'Status'];
    tableData = [
      ['João Silva', 'joao@email.com', 'Ativo'],
      ['Maria Souza', 'maria@email.com', 'Inativo'],
      ['Carlos Lima', 'carlos@email.com', 'Ativo']
    ];
  

🛡️ Acessibilidade garantida:

• Leitura clara por leitores de tela com marcação de cabeçalhos
• Legenda interpretável via <caption>
• Navegável por teclado

✅ Componente de Seleção Acessível

O componente <accessible-select> oferece uma interface acessível para seleção de opções, garantindo foco visível, semântica apropriada e compatibilidade com leitores de tela via atributos ARIA.

🔧 Parâmetros:

📤 Eventos emitidos:

📦 Exemplo de uso:

Html

    <accessible-select 
      [label]="'Status do usuário'"
      [id]="'status-select'"
      [options]="statusOptions"
      [(selected)]="selectStatus">
    </accessible-select>
  

Typescript

    statusOptions = [
      { label: 'Ativo', value: 'Ativo' },
      { label: 'Inativo', value: 'Inativo' },
      { label: 'Pendente', value: 'Pendente' }
    ];
  

Status selecionado:

🛡️ Acessibilidade garantida:

• Compatível com leitores de tela
• Suporte completo à navegação por teclado
• Foco visível e consistente para acessibilidade visual
• Atualização bidirecional do valor selecionado

🚨 Componente de Lista de Alertas Acessível

O componente <accessible-alert-list> exibe uma lista dinâmica de mensagens de alerta, utilizando ARIA live regions para leitura automática por leitores de tela, garantindo acessibilidade em notificações em tempo real.

🔧 Parâmetros:

📤 Eventos emitidos:

📦 Exemplo de uso:

Html

    <accessible-alert-list
      [messages]="alerts"
      (dismiss)="removeAlert($event)">
    </accessible-alert-list>
  

Ou

    <warning-alert-list
      [messages]="alerts"
      (dismiss)="removeAlert($event)">
    </warning-alert-list>
  

Typescript

    alerts = [
      { id: 1, text: 'Bem-vindo!', ativo: true }
    ];
  

🛡️ Acessibilidade garantida:

• Suporte a listas dinâmicas com atualizações em tempo real
• Notificações lidas automaticamente por leitores de tela
• Compatível com interação via teclado e dispositivos assistivos

📂 Componente Collapse Acessível

O componente <accessible-collapse> permite esconder e revelar conteúdo de forma acessível, com suporte completo à navegação por teclado e leitura correta por tecnologias assistivas como leitores de tela.

🔧 Parâmetros:

📦 Exemplo de uso:

  <accessible-collapse titulo="Clique para expandir">
    <p>Este é o conteúdo colapsável. Pode conter texto, listas, imagens, etc.</p>
  </accessible-collapse>

🛡️ Acessibilidade garantida:

• Compatível com leitores de tela
• Controle completo por teclado
• Uso de aria-expanded e aria-controls para indicar o estado

⬇️ Componente de Dropdown Acessível

O componente <accessible-dropdown> exibe um menu suspenso acessível, com suporte completo à navegação por teclado, foco visível e leitura adequada por tecnologias assistivas utilizando atributos ARIA.

🔧 Parâmetros:

📤 Eventos emitidos:

📦 Exemplo de uso:

Html

  <accessible-dropdown
    [label]="'Options'"
    [options]="menuOptions"
    (selected)="selectOption($event)">
  </accessible-dropdown>

Typescript

  menuOptions = ['Perfil', 'Configurações', 'Sair'];

🛡️ Acessibilidade garantida:

• Compatível com leitores de tela
• Uso de aria-expanded, aria-activedescendant e role="listbox"
• Foco visível e coerente com o fluxo de navegação
• Totalmente operável por teclado

🖼️ Componente de Imagem Acessível

O componente <lib-accessible-image> exibe uma imagem de forma responsiva e acessível, garantindo compatibilidade com leitores de tela e boa usabilidade em dispositivos móveis.

🔧 Parâmetros:

📦 Exemplo de uso:

    <lib-responsive-image
      src="imgs/exemplo.png"
      alt="Descrição da imagem"
      aria-describedby="Descrição detalhada quando necessário."
      maxWidth="500px"
      [rounded]="true">
    </lib-responsive-image>
  

🛡️ Acessibilidade garantida:

• Leitura correta por leitores de tela
• Carregamento otimizado
• Responsividade garantida para diferentes tamanhos de tela

⚙️ Instalação e Uso da Biblioteca

📥 1. Como instalar

Para adicionar a biblioteca do Framework Acessível ao seu projeto Angular, execute o comando abaixo no terminal:

    
    npm install framework-acessivel
  

📦 2. Importar o módulo

Importe o módulo do componente necessário no seu AppComponent ou outro component desejado:

🧩 3. Usando os componentes

Com o módulo importado, você pode utilizar os componentes diretamente nos templates Angular. Basta configurar os inputs e outputs conforme necessário. Veja um exemplo de uso com o Botão Acessível:

Apoie este Framework

Se este projeto te ajuda, considere fazer uma doação para apoiar o desenvolvimento.