Introdução à Acessibilidade

• Diretrizes de Acessibilidade para Conteúdo Web: As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) são um conjunto de diretrizes para tornar o conteúdo web mais acessível para pessoas com deficiências. Os quatro princípios do WCAG são POUR que significa Perceptível, Operável, Compreensível e Robusto.

Tecnologia Assistiva para Acessibilidade

• Leitores de tela: Programas de software que leem o conteúdo da tela do computador em voz alta. Eles são usados por pessoas cegas ou com deficiência visual para acessar a web.
• Teclados grandes ou braille: Usados por pessoas com deficiência visual para acessar a web.
• Ampliadores de tela: Programas de software que ampliam o conteúdo da tela do computador. Eles são usados por pessoas com baixa visão para acessar a web.
• Dispositivos de apontamento alternativos: Usados por pessoas com deficiências de mobilidade para acessar a web. Isso inclui dispositivos como joysticks, trackballs e touchpads.
• Reconhecimento de voz: Usado por pessoas com deficiências de mobilidade para acessar a web. Permite que os usuários controlem um computador usando a voz.

Ferramentas de Auditoria de Acessibilidade

• Ferramentas Comuns de Acessibilidade: Google Lighthouse, Wave, IBM Equal Accessibility Checker e axe DevTools são algumas das ferramentas comuns de acessibilidade usadas para auditar a acessibilidade de um site.

Melhores Práticas de Acessibilidade

• Estrutura adequada de níveis de título: Você deve usar níveis de título adequados para criar uma estrutura lógica para seu conteúdo. Isso ajuda pessoas que usam tecnologias assistivas a entender o conteúdo do seu site.
• Acessibilidade e Tabelas: Ao usar tabelas, você deve usar o elemento th para definir células de cabeçalho e o elemento td para definir células de dados. Isso ajuda pessoas que usam tecnologias assistivas a entender a estrutura da tabela. Com o elemento caption, você pode escrever a legenda (ou título) de uma tabela, para que os usuários, especialmente aqueles que usam tecnologias assistivas, possam entender rapidamente o propósito e o conteúdo da tabela. Você deve colocar o elemento caption imediatamente após a tag de abertura do elemento table. Dessa forma, leitores de tela e outras tecnologias assistivas podem fornecer mais contexto anunciando a legenda antes de ler o conteúdo.
• Importância de os inputs terem um rótulo associado: Você deve usar o elemento label para associar rótulos aos inputs de formulário. Isso ajuda pessoas que usam tecnologias assistivas a entender o propósito do input.
• Importância de um bom texto alt: Você deve usar o atributo alt para fornecer uma alternativa em texto para imagens. Isso ajuda pessoas que usam tecnologias assistivas a entender o conteúdo da imagem.
• Importância de um bom texto de link: Você deve usar texto de link descritivo para ajudar os usuários a entender o propósito do link. Isso ajuda pessoas que usam tecnologias assistivas a entender o propósito do link.
• Melhores práticas para tornar conteúdo de áudio e vídeo acessível: Você deve fornecer legendas e transcrições para conteúdo de áudio e vídeo para torná-lo acessível a pessoas com deficiência auditiva. Você também deve fornecer descrições em áudio para conteúdo de vídeo para torná-lo acessível a pessoas com deficiência visual.
• Atributo tabindex: Usado para tornar elementos focáveis e definir a ordem relativa na qual eles devem ser navegados usando o teclado. É importante nunca usar o atributo tabindex com um valor maior que 0. Em vez disso, você deve usar um valor de 0 ou -1.

<p tabindex="-1">Sorry, there was an error with your submission.</p>

• Atributo accesskey: Usado para definir um atalho de teclado para um elemento. Isso pode ajudar usuários com deficiências de mobilidade a navegar no site com mais facilidade.

<button accesskey="s">Save</button>
<button accesskey="c">Cancel</button>
<a href="index.html" accesskey="h">Home</a>

WAI-ARIA, Roles e Attributes

• WAI-ARIA: Significa Web Accessibility Initiative - Accessible Rich Internet Applications. É um conjunto de atributos que podem ser adicionados aos elementos HTML para melhorar a acessibilidade. Ele fornece informações adicionais para tecnologias assistivas sobre o propósito e a estrutura do conteúdo.
• Funções ARIA: Um conjunto de funções predefinidas que podem ser adicionadas a elementos HTML para definir seu propósito. Isso ajuda pessoas que usam tecnologias assistivas a entender o conteúdo do site. Exemplos incluem role="tab", role="menu" e role="alert".

• Funções da estrutura do documento: Essas funções definem a estrutura geral da página web. Com essas funções, tecnologias assistivas podem entender as relações entre diferentes seções e ajudar os usuários a navegar pelo conteúdo.
• Funções de widget: Essas funções definem o propósito e a funcionalidade de elementos interativos, como barras de rolagem.
• Funções de marco: Essas funções classificam e rotulam as seções principais de uma página web. Leitores de tela as utilizam para fornecer navegação conveniente para seções importantes de uma página.
• Funções de região ao vivo: Essas funções definem elementos com conteúdo que mudará dinamicamente. Dessa forma, leitores de tela e outras tecnologias assistivas podem anunciar mudanças para usuários com deficiências visuais.
• Funções de janela: Essas funções definem sub-janelas, como diálogos modais pop-up. Essas funções incluem alertdialog e dialog.
• Funções abstratas: Essas funções ajudam a organizar o documento. Elas são destinadas apenas para uso interno pelo navegador, não pelos desenvolvedores, então você deve saber que elas existem mas não deve usá-las em seus sites ou aplicações web.
• Atributos aria-label e aria-labelledby: Esses atributos são usados para dar a um elemento um nome programático (ou acessível), o que ajuda pessoas que usam tecnologia assistiva (como leitores de tela) a entender o propósito do elemento. Eles são frequentemente usados quando o rótulo visual de um elemento é uma imagem ou símbolo em vez de texto. aria-label permite definir o nome diretamente no atributo enquanto aria-labelledby permite referenciar texto existente na página.

<button aria-label="Search">
    <i class="fas fa-search"></i>
</button>

<input type="text" aria-labelledby="search-btn">
<button type="button" id="search-btn">Search</button>

• Atributo aria-hidden: Usado para ocultar um elemento de tecnologias assistivas como leitores de tela. Por exemplo, isso pode ser usado para ocultar imagens decorativas que não fornecem nenhum conteúdo significativo.

<button>
    <i class="fa-solid fa-gear" aria-hidden="true"></i>
    <span class="label">Settings</span>
</button>

• Atributo aria-describedby: Usado para fornecer informações adicionais sobre um elemento associando-o a outro elemento que contém a informação. Isso dá às pessoas que usam leitores de tela acesso imediato às informações adicionais quando navegam até o elemento. O uso comum incluiria associar instruções de formatação a uma entrada de texto ou uma mensagem de erro a uma entrada após uma submissão de formulário inválida.

<form>
    <label for="password">Password:</label>
    <input type="password" id="password" aria-describedby="password-help" />
    <p id="password-help">Your password must be at least 8 characters long.</p>
</form>