Biblioteca Thundera

Índice

1. Introdução
2. Documentação das Libraries
3. Componentes
   • AccessibleAlert
   • AccessibleModal
   • AccessibleCard
   • AccessibleDialog
   • AccessibleList
   • AccessibleTooltip
   • AccessibleForm
   • AnnouncedButton
   • SkipToButton
   • AccessibleTabs
4. Ferramenta de Auditoria de Acessibilidade
5. Contribuição e Suporte

Introdução

A biblioteca Thundera reúne as melhores práticas e ferramentas da comunidade Vue para facilitar o desenvolvimento de aplicações acessíveis. Todas as ferramentas necessárias estão integradas diretamente na sua instalação.

Documentação das Libraries

Vue Announcer

Link da Documentação: Vue Announcer

O que faz? Gerencia mensagens dinâmicas e as envia para leitores de tela.

Como usar?

import { useAnnouncer } from '@vue-a11y/announcer';

const { announce } = useAnnouncer();
announce('Mensagem anunciada para o leitor de tela');

AccessibleTabs

Link da Documentação: AccessibleTabs

O que faz? Cria abas acessíveis seguindo as melhores práticas do WAI-ARIA.

Vue Final Modal

Link da Documentação: Vue Final Modal

O que faz? Cria modais acessíveis e configuráveis para aplicações Vue.

Focus Lock

Link da Documentação: Focus Lock

O que faz? Mantém o foco confinado dentro de elementos, como modais.

Form Kit

Link da Documentação: Form Kit

O que faz? Facilita a criação de formulários acessíveis e dinâmicos.

Skip To

Link da Documentação: Skip To

O que faz? Permite criar links para saltar diretamente ao conteúdo principal ou outras seções importantes.

Sr Only

Link da Documentação: Sr Only

O que faz? Cria elementos visíveis apenas para leitores de tela.

Componentes

AccessibleAlert

• Descrição: Componente de alerta acessível.
• Exemplo de Uso:

<AccessibleAlert
  v-model:visible="showAlert"
  title="Sucesso!"
  description="Sua operação foi concluída com êxito."
  :autoDismiss="true"
  :dismissTimeout="5000"
/>

AccessibleModal

• Descrição: Modal acessível com foco confinado.
• Exemplo de Uso:

<AccessibleModal
  v-model:isVisible="showModal"
  title="Exemplo de Modal"
  description="Conteúdo acessível com foco confinado."
/>

AccessibleCard

• Descrição: Cartão acessível com suporte para mensagens dinâmicas.
• Exemplo de Uso:

<AccessibleCard
  :focusLock="false"
  announceMessage="Interagiu com o cartão."
>
  <template #title>Produto</template>
  <template #description>Descrição do produto.</template>
</AccessibleCard>

AccessibleDialog

• Descrição: Diálogo acessível com suporte a leitores de tela.
• Exemplo de Uso:

<AccessibleDialog
  v-model:isVisible="showDialog"
  title="Exemplo de Diálogo"
  openMessage="O diálogo foi aberto."
  closeMessage="O diálogo foi fechado."
/>

AccessibleList

• Descrição: Lista acessível com navegação por teclado.
• Exemplo de Uso:

<AccessibleList
  :items="['Item 1', 'Item 2', 'Item 3']"
  initialIndex="0"
  @item-selected="handleItemSelected"
/>

AccessibleTooltip

• Descrição: Tooltip acessível para leitores de tela.
• Exemplo de Uso:

<AccessibleTooltip content="Tooltip informativo!">
  <template #icon>
    <i class="material-icons">info</i>
  </template>
</AccessibleTooltip>

AccessibleForm

• Descrição: Formulário acessível com validação dinâmica.
• Exemplo de Uso:

<AccessibleForm
  title="Cadastro"
  buttonText="Cadastrar"
  @submit="handleFormSubmit"
/>

AnnouncedButton

• Descrição: Botão que emite mensagens dinâmicas para leitores de tela.
• Exemplo de Uso:

<AnnouncedButton
  label="Salvar"
  announcement="Os dados foram salvos com sucesso!"
/>

SkipToButton

• Descrição: Botão para saltar diretamente ao conteúdo principal.
• Exemplo de Uso:

<SkipToButton target="#main-content" label="Ir para o conteúdo principal" />

AccessibleTabs

• Descrição: Componente de abas acessíveis com navegação por teclado.
• Exemplo de Uso:

<AccessibleTabs
  :tabs="[
    { label: 'Tab 1', content: 'Conteúdo da Tab 1' },
    { label: 'Tab 2', content: 'Conteúdo da Tab 2' }
  ]"
/>

Ferramenta de Auditoria de Acessibilidade

Vue Axe

Link da Documentação: Vue Axe

O que faz? Ajuda a identificar e corrigir problemas de acessibilidade durante o desenvolvimento.

Contribuição e Suporte

Contribuições são bem-vindas! Para suporte, entre em contato através do repositório oficial no GitHub.