10. Acessibilidade (a11y)

A acessibilidade é um aspecto fundamental do nosso processo de desenvolvimento, garantindo que nossos produtos sejam utilizáveis por pessoas com diversas habilidades e necessidades. Esta seção fornece diretrizes detalhadas para implementar e gerenciar a acessibilidade em nossos projetos, tanto para o frontend em Next.js quanto para as partes que ainda utilizam Laravel Blade.

10.1. Diretrizes de acessibilidade web (WCAG)

Nosso objetivo é atingir o nível AA das Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.1. Aqui estão os principais pontos a serem considerados:

10.1.1. Perceptível

1. Alternativas em texto:

   • Forneça texto alternativo para todas as imagens.

   // Next.js
   <Image src="/logo.png" alt="Logo da empresa" width={300} height={100} />
    
   // Laravel Blade
   <img src="{{ asset('images/logo.png') }}" alt="Logo da empresa">

2. Mídia baseada em tempo:

   • Forneça legendas para todos os conteúdos de áudio pré-gravados.
   • Forneça audiodescrição ou mídia alternativa para vídeo pré-gravado.

3. Adaptável:

   • Crie layouts que funcionem em diferentes orientações e tamanhos de tela.
   • Use marcação semântica apropriada.

   // Next.js
   <main>
     <h1>Título Principal</h1>
     <section>
       <h2>Seção 1</h2>
       <p>Conteúdo da seção 1</p>
     </section>
   </main>
    
   // Laravel Blade
   <main>
     <h1>{{ __('main_title') }}</h1>
     <section>
       <h2>{{ __('section1_title') }}</h2>
       <p>{{ __('section1_content') }}</p>
     </section>
   </main>

4. Distinguível:

   • Use uma relação de contraste de pelo menos 4.5:1 para texto normal e 3:1 para texto grande.
   • Não use apenas cor para transmitir informações.

   /* Exemplo de cores acessíveis */
   .text-primary {
     color: #2060a0; /* Azul escuro com bom contraste em fundo branco */
   }
   .bg-secondary {
     background-color: #f0f0f0; /* Cinza claro para fundos */
   }

10.1.2. Operável

1. Acessível por teclado:

   • Todas as funcionalidades devem ser acionadas via teclado, a menos que a funcionalidade não possibilite o controle apenas por teclado.

   • Com o correto uso semântico do HTML a maioria dos elementos de interação como <button> e <a> devem por padrão estarem acessíveis via teclado. No entanto, é importante testar a navegação e interação com o site apenas utilizando o teclado, pois alguns elementos podem não estar acessíveis.

   • Algumas vezes com as manipulaçãoes fazemos com que o estado de acessibilidade seja alterado para casos específicos, manipulando o tabindex, por exemplo, tabindex="0" para tornar um elemento acessível por teclado e tabindex="0" para tornar inacessível.

   // Next.js
   <button onKeyDown={handleKeyDown} onClick={handleClick}>
     Ação
   </button>
    
   // Laravel Blade
   <button 
     onclick="handleClick()"
     onkeydown="if(event.key==='Enter')handleClick()"
   >
     {{ __('action_button') }}
   </button>

2. Tempo suficiente:

   • Forneça aos usuários tempo suficiente para ler e usar o conteúdo, como por exemplo em toasts.

3. Ordem do foco:

   • A interação por elementos focáveis na tela sempre deverá ser sequencial e lógica de acordo com o conteúdo apresentado. Geralmente de cima para baixo e da esquerda para a direita. A ordem do foco deve ser lógica e previsível.

4. Foco visível:

   • Ao se interagir por teclado, qualquer pessoa deve conseguir identificar qual é a sua localização espacial na tela através de um foco (visível) identificador de sua localização.

5. Navegável:

   • Forneça aos usuários tempo suficiente para ler e usar o conteúdo. Como por exemplo 5 segundos para toasts pequenos. Em casos de toasts maiores, como um modal, o tempo pode ser maior, mas sempre deve ser possível fechar o modal.

   // Next.js
   import Link from 'next/link'
    
   <nav aria-label="Navegação principal">
     <Link href="/" aria-current={isHomePage ? 'page' : undefined}>
       Início
     </Link>
     {/* Outros links de navegação */}
   </nav>
    
   // Laravel Blade
   <nav aria-label="Navegação principal">
     <a href="{{ route('home') }}" 
        @if(Route::currentRouteName() == 'home') aria-current="page" @endif>
       {{ __('nav.home') }}
     </a>
     {{-- Outros links de navegação --}}
   </nav>

6. Página com título:

   • Todas as telas devem ter um título principal (<h1>) e que descreva claramente a sua finalidade.

7. Finalidade do link (em contexto):

   • A finalidade de um link deve ser determinada a partir do texto do próprio link ou a partir do contexto no entorno deste link.

   • Hint: o critério também é aplicável em botões ou ícones clicáveis.

8. Idioma da página:

   • Declarar adequadamente o idioma da tela faz com que leitores de telas utilizem uma entonação correta para citar conteúdos. Sempre os declare.

9. Identificação do erro:

   • Sempre que uma mensagem de erro for exibida, ela deve identificar claramente qual é o elemento que gerou o erro de forma visual e audível (exemplo: mudança de cor no elemento + um ícone de alerta + uma mensagem em texto).

10. Prevenção de Erros:

• Implemente verificações e confirmações para ações importantes.

11. Para mais informações é possível consultar o guia oficial da W3C:

• https://www.w3.org/TR/WCAG21/ (opens in a new tab)

12. Também existe uma versão brasileira com cards explicativos:

• https://www.guia-wcag.com/ (opens in a new tab)?

10.1.3. Compreensível

1. Legível:

   • Use linguagem clara e simples.
   • Identifique o idioma da página e das partes em idiomas diferentes.

   // Next.js
   <html lang={locale}>
     {/* Conteúdo da página */}
   </html>
    
   // Laravel Blade
   <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
     {{-- Conteúdo da página --}}
   </html>

2. Previsível:

   • Faça com que as páginas apareçam e operem de maneira previsível.

3. Assistência de entrada:

   • Ajude os usuários a evitar e corrigir erros.

   // Next.js
   <form onSubmit={handleSubmit}>
     <label htmlFor="email">Email:</label>
     <input
       type="email"
       id="email"
       required
       aria-describedby="email-error"
     />
     <span id="email-error" aria-live="polite">
       {emailError}
     </span>
   </form>
    
   // Laravel Blade
   <form method="POST" action="{{ route('submit') }}">
     @csrf
     <label for="email">{{ __('Email') }}:</label>
     <input
       type="email"
       id="email"
       name="email"
       required
       aria-describedby="email-error"
     >
     @error('email')
       <span id="email-error" aria-live="polite">{{ $message }}</span>
     @enderror
   </form>

10.1.4. Robusto

1. Compatível:

   • Maximize a compatibilidade com user agents atuais e futuros, incluindo tecnologias assistivas.

   // Next.js
   <div role="alert" aria-live="assertive">
     {errorMessage}
   </div>
    
   // Laravel Blade
   <div role="alert" aria-live="assertive">
     {{ $errorMessage }}
   </div>

10.2. Testes de acessibilidade

Implementar testes regulares de acessibilidade é crucial para manter um alto padrão de acessibilidade.

1. Testes automatizados:

   • Use ferramentas como axe-core para testes automatizados.

   // Exemplo de teste com Jest e axe-core
   import { axe } from 'jest-axe'
    
   test('renders accessible home page', async () => {
     const { container } = render(<HomePage />)
     const results = await axe(container)
     expect(results).toHaveNoViolations()
   })

2. Testes manuais:

   • Realize testes de navegação por teclado.
   • Teste com leitores de tela como NVDA ou VoiceOver.

3. Testes de usuário:

   • Conduza testes com usuários que dependem de tecnologias assistivas.

10.3. Tecnologias assistivas

Garanta que nossos produtos funcionem bem com várias tecnologias assistivas:

1. Leitores de tela:

   • Use ARIA (Accessible Rich Internet Applications) quando necessário.

   <button aria-pressed={isActive} onClick={toggleActive}>
     {isActive ? 'Ativo' : 'Inativo'}
   </button>

2. Navegação por teclado:

   • Implemente ordem de foco lógica.
   • Use tabindex apropriadamente.

   <div tabIndex="0" role="button" onKeyDown={handleKeyDown} onClick={handleClick}>
     Elemento interativo
   </div>

3. Ampliadores de tela:

   • Garanta que o layout seja responsivo e funcione bem em diferentes níveis de zoom.

10.4. Design inclusivo

Adote princípios de design inclusivo em todo o processo de desenvolvimento:

1. Flexibilidade:

   • Permita personalização de tamanho de texto e contraste.

   body {
     font-size: 16px;
   }
    
   @media (prefers-color-scheme: dark) {
     body {
       background-color: #333;
       color: #fff;
     }
   }

2. Simplicidade:

   • Mantenha interfaces simples e intuitivas.

3. Consistência:

   • Mantenha padrões consistentes em toda a aplicação.

4. Feedback claro:

   • Forneça feedback claro para todas as ações do usuário.

   function SubmitButton({ isLoading, children }) {
     return (
       <button disabled={isLoading}>
         {isLoading ? 'Enviando...' : children}
       </button>
     )
   }

Diretrizes adicionais:

1. Treinamento:

   • Forneça treinamento regular sobre acessibilidade para toda a equipe de desenvolvimento.

2. Documentação:

   • Mantenha uma documentação atualizada das práticas de acessibilidade.

3. Revisão de código:

   • Inclua verificações de acessibilidade nas revisões de código.

4. Ferramentas de desenvolvimento:

   • Use extensões de navegador como WAVE ou axe para verificações rápidas durante o desenvolvimento.

Responsabilidades do líder de acessibilidade:

1. Manter e atualizar as diretrizes de acessibilidade.
2. Revisar e aprovar a implementação de recursos de acessibilidade.
3. Conduzir auditorias regulares de acessibilidade em todos os projetos.
4. Treinar a equipe em práticas de acessibilidade.
5. Manter-se atualizado sobre as últimas tendências e requisitos de acessibilidade.
6. Servir como ponto de contato para questões de acessibilidade.
7. Colaborar com designers para garantir que os designs sejam acessíveis desde o início.

Processo de garantia de acessibilidade:

1. Planejamento: Incluir requisitos de acessibilidade em todas as especificações de recursos.
2. Desenvolvimento: Implementar recursos com acessibilidade em mente desde o início.
3. Testes: Realizar testes de acessibilidade automatizados e manuais para cada nova funcionalidade.
4. Revisão: O líder de acessibilidade revisa e aprova a implementação antes do merge.
5. Monitoramento contínuo: Usar ferramentas de monitoramento de acessibilidade em produção.