10.1 Acessibilidade
Acessibilidade (accessibility) de conteúdo web é uma parte importante do design web moderno. Ela visa garantir que todos os usuários, incluindo pessoas com deficiências, possam interagir facilmente com páginas da web.
Um dos principais instrumentos para alcançar esse objetivo são os atributos ARIA (Accessible Rich Internet Applications), que melhoram a acessibilidade do conteúdo web, tornando-o mais compreensível e acessível para tecnologias assistivas, como leitores de tela.
O que é ARIA?
ARIA (Accessible Rich Internet Applications) é um conjunto de atributos especiais que podem ser adicionados a elementos HTML para melhorar sua acessibilidade. Esses atributos fornecem informações adicionais sobre a estrutura e comportamento dos elementos, o que ajuda tecnologias assistivas a interpretar e interagir melhor com o conteúdo web.
Principais atributos ARIA para melhorar a legibilidade do texto:
Atributo aria-label
O atributo aria-label é usado para fornecer um rótulo de texto a um elemento, que será lido pelo leitor de tela.
Esse atributo é útil quando um elemento não possui um rótulo visível ou quando é necessário uma descrição mais detalhada.
Exemplo de uso:
<button aria-label="Fechar o diálogo">X</button>
Atributo aria-labelledby
O atributo aria-labelledby conecta um elemento a outro rótulo na página usando o id do rótulo.
Isso é útil quando é necessário vincular um elemento a um rótulo já existente, fornecendo contexto e descrição.
Exemplo de uso:
<h2 id="section-title">Título da Seção</h2>
<p aria-labelledby="section-title">Este é um parágrafo de texto relacionado ao título da seção.</p>
Atributo aria-describedby
O atributo aria-describedby conecta um elemento a um ou mais elementos contendo descrição,
usando seus ids. Esse atributo é útil para fornecer informações adicionais ou contexto para um elemento.
Exemplo de uso:
<input type="text" aria-describedby="input-description">
<p id="input-description">Digite seu nome.</p>
10.2 Role
Atributo role
O atributo role define o papel de um elemento, indicando para tecnologias assistivas como esse elemento deve ser interpretado.
Existem muitos papéis, como button, navigation, main, article e muitos outros.
Exemplo de uso:
<nav role="navigation">
<ul>
<li><a href="#home">Início</a></li>
<li><a href="#about">Sobre</a></li>
<li><a href="#contact">Contatos</a></li>
</ul>
</nav>
Atributo aria-live
O atributo aria-live é usado para conteúdo que é atualizado dinamicamente. Ele informa ao leitor de tela
que o conteúdo dentro do elemento foi alterado e precisa ser anunciado. Os valores incluem off, polite e assertive.
Exemplo de uso:
<div aria-live="polite">
<p>Informações importantes serão exibidas aqui.</p>
</div>
Atributo aria-hidden
O atributo aria-hidden indica para tecnologias assistivas se um elemento deve estar disponível para os usuários.
O valor true esconde o elemento das tecnologias assistivas, enquanto o valor false o torna acessível.
Exemplo de uso:
<div aria-hidden="true">
<p>Este texto será oculto dos leitores de tela.</p>
</div>
Atributo aria-expanded
O atributo aria-expanded indica se um elemento está expandido ou contraído. Ele é frequentemente usado em
controles, como "acordeões" e menus suspensos.
Exemplo de uso:
<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" hidden>
<li><a href="#item1">Item 1</a></li>
<li><a href="#item2">Item 2</a></li>
<li><a href="#item3">Item 3</a></li>
</ul>
Atributo aria-controls
O atributo aria-controls indica qual elemento é controlado pelo elemento atual. Ele é usado junto
com atributos como aria-expanded para criar elementos de controle interativos.
Exemplo de uso:
<button aria-controls="content" aria-expanded="false">Mostrar/Esconder</button>
<div id="content" hidden>
<p>Conteúdo oculto.</p>
</div>
GO TO FULL VERSION