Um dos aspectos mais importantes da acessibilidade digital é a estrutura subjacente da página. Ao criar seu site ou app usando elementos estruturais em vez de depender apenas de estilos, você fornece um contexto essencial às pessoas que usam tecnologias assistivas (AT, na sigla em inglês), como leitores de tela.
Os elementos estruturais servem como um contorno do conteúdo na tela, mas também funcionam como pontos de fixação para facilitar a navegação.
Quando você usa elementos HTML semânticos, o significado inerente de cada elemento é transmitido para a árvore de acessibilidade e usado pelo AT, conferindo mais significado ao conteúdo do que os elementos não semânticos. Em alguns casos, pode ser necessário adicionar outros atributos ARIA para criar relacionamentos ou melhorar a experiência geral do usuário, mas, na maioria das situações, um dos mais de 100 elementos HTML disponíveis funciona sozinho.
Embora este módulo se concentre nos elementos estruturais mais usados essenciais para a acessibilidade digital, há certamente outros elementos e fatores ambientais a serem considerados ao criar a estrutura de um site ou app. Esses exemplos são uma introdução ao tema, e não uma apresentação completa.
Pontos de referência
Os usuários de TA dependem de elementos estruturais para fornecer informações sobre o layout geral da página. Ao separar grandes regiões de conteúdo, é possível usar papéis ARIA ou os elementos mais recentes de pontos de referência HTML para adicionar contexto estrutural à página.
Os pontos de referência garantem que o conteúdo esteja em regiões navegáveis. É recomendável fornecer pelo menos um ponto de referência por página.
Alguns recursos sugerem a combinação de pontos de referência ARIA e HTML para fornecer melhor cobertura de AT. Esse tipo de redundância não deve causar problemas para os usuários, mas teste os padrões usando um leitor de tela para ter certeza. Em caso de dúvida, é melhor usar apenas os elementos de referência HTML mais recentes, já que o suporte ao navegador é muito robusto.
Vamos comparar os elementos de ponto de referência HTML como mapeados com os papéis de ponto de referência ARIA equivalentes.
| Elemento de ponto de referência HTML | Papel de ponto de referência ARIA |
|---|---|
<header> |
banner |
<aside> |
complementar |
<footer> |
informações do conteúdo |
<nav>
|
navigation |
<main> |
principal |
<form> 1 |
formulário |
<section> 1 |
region |
Agora, vamos comparar exemplos de estrutura de conteúdo acessível.
<div>
<div>...</div>
</div>
<div>
<p>Stamp collecting, also known as philately, is
the study of postage stamps, stamped envelopes,
postmarks, postcards, and other materials relating
to postal delivery.</p>
</div>
<div>
<p>© 2022 - Stamps R Awesome</p>
</div>
<header>
<nav>...</nav>
</header>
<main>
<section aria-label="Introduction to stamp collecting">
<p>Stamp collecting, also known as philately, is
the study of postage stamps, stamped envelopes,
postmarks, postcards, and other materials relating
to postal delivery.</p>
</section>
</main>
<footer>
<p>© 2022 - Stamps R Awesome</p>
</footer>
Títulos
Quando implementados corretamente, os níveis de cabeçalho HTML formam uma descrição sucinta do conteúdo geral da página.
Existem seis níveis de cabeçalho que podemos usar. O nível de cabeçalho um <h1> é usado para as informações mais importantes da página, movendo-se gradualmente para o
nível seis de <h6> para as informações mais baixa e menos importantes.
A sequência dos níveis dos títulos é importante. O ideal é que você não pule
níveis de título, por exemplo, começar uma seção com <h1> e logo
depois com um <h5>. Em vez disso, você precisa avançar para o <h5> na
ordem. A ordem no nível do título é especialmente importante para os usuários de AT,
porque essa é uma das principais maneiras de navegar pelo conteúdo.
Para ajudar você a seguir a estrutura semântica e a ordem adequadas para os títulos, considere desacoplar os estilos CSS dos níveis dos títulos. Isso permite que você tenha mais flexibilidade nos estilos do título, mantendo a ordem no nível do cabeçalho. É fundamental que você não use estilos sozinhos para criar títulos, já que eles não são vistos pelo AT como um cabeçalho.
Quando criamos cabeçalhos falsos, a estrutura adequada não é transmitida aos usuários do AT.
Os títulos também são úteis para pessoas com transtornos cognitivos e de déficit de atenção. É importante tornar o conteúdo do título significativo para ajudá-los a entender o que é mais importante na página.
<div>
<h3>Stamps</h3>
<p>Stamp collecting, also known as philately, is the study of
postage stamps, stamped envelopes, postmarks, postcards, and
other materials relating to postal delivery.</p>
</div>
<div>
<h3>How do I start a stamp collection?</h3>
<h2>Equipment you will need</h2>
<h4>...</h4>
<h2>How to acquire stamps</h2>
<h4>...</h4>
<h2>Organizations you can join</h2>
<h4>...</h4>
</div>
<header>
<h1>Stamp collecting</h1>
</header>
<main>
<section aria-label="Introduction to stamp collecting">
<h2>What is stamp collecting?</h2>
<p>Stamp collecting, also known as philately, is the study of
postage stamps, stamped envelopes, postmarks, postcards, and
other materials relating to postal delivery.</p>
</section>
<section aria-label="Start a stamp collection">
<h2>How do I start a stamp collection?</h2>
<h3>Required equiment</h3>
<p>...</p>
<h3>How to acquire stamps</h3>
<p>...</p>
<h3>Organizations you can join</h3>
<p>...</p>
</section>
</main>
Listas
As listas HTML são uma maneira de agrupar semanticamente itens semelhantes a outros, fornecendo a eles um significado inerente, como sua lista de supermercados ou aquela lista de tarefas sem fim que você mantém ignorando.
Há três tipos de listas HTML:
O elemento <li>
do item de lista é usado para representar um item em uma lista ordenada ou não ordenada, enquanto o
termo de descrição
<dt> e os elementos de definição
<dd> podem
ser encontrados na lista de descrições.
Quando programados corretamente, esses elementos podem informar usuários de TAs sem visão sobre a estrutura visível da lista. Quando uma AT encontra uma lista semântica, ela pode informar ao usuário o nome da lista e quantos itens estão nela. À medida que o usuário navega pela lista, o AT vai ler cada item da lista em voz alta e dizer qual número está na lista: item um de cinco, item dois de cinco e assim por diante.
Agrupar itens em listas também ajuda pessoas que têm problemas cognitivos e de atenção e pessoas com deficiências de leitura, já que o conteúdo da lista é geralmente estilizado para ter mais espaço em branco visual e objetivo.
<div>
<p>How do I start a stamp collection?</p>
<p>Equipment you will need</p>
<div>
<p>Small tongs with rounded tips</p>
<p>Stamp hinges</p>
<p>Stockbook or albumn</p>
<p>Magnifying glass</p>
<p>Stamps</p>
</div>
</div>
<div>
<h1>How do I start a stamp collection?</h1>
<h2>Equipment you will need</h2>
<ol>
<li>Small tongs with rounded tips</li>
<li>Stamp hinges</li>
<li>Stockbook or albumn</li>
<li>Magnifying glass</li>
<li>Stamps</li>
</ol>
</div>
Tabelas
Em HTML, as tabelas geralmente são usadas para organizar dados ou o layout da página.
Dependendo da finalidade da tabela, você usará diferentes elementos semânticos estruturais. As tabelas podem ter uma estrutura muito complexa, mas quando você segue as regras semânticas básicas, elas podem ser acessadas sem muita intervenção.
Layout
No início da Internet, as tabelas de layout eram o principal elemento HTML
usado para construir estruturas visuais. Atualmente, usamos uma combinação de elementos semânticos e
não semânticos, como <div>s e pontos de referência, para criar layouts.
Embora os dias da criação de tabelas de layout tenham acabado, há momentos em que
essas tabelas ainda são usadas, como em e-mails, newsletters e
anúncios com grande apelo visual. Nesses casos, as tabelas usadas apenas para layout não podem
usar elementos estruturais que transmitem relações e adicionam contexto, como
<th> ou <caption>.
As tabelas de layout também precisam estar ocultas para usuários do AT com o papel de apresentação aRIA ou estado aria-hidden (links em inglês).
<table>
<caption>My stamp collection</caption>
<tr>
<th>[Stamp Image 1]</th>
<th>[Stamp Image 2]</th>
<th>[Stamp Image 3]</th>
</tr>
</table>
<table role="presentation">
<tr>
<td>[Stamp Image 1]</td>
<td>[Stamp Image 2]</td>
<td>[Stamp Image 3]</td>
</tr>
</table>
Dados
Ao contrário de uma tabela de layout, que precisa ficar oculta para usuários do AT, uma tabela de dados e todos os seus elementos precisam ser expostos. A estrutura das tabelas de dados é essencial para transmitir informações simples e complexas aos usuários.
Quando uma tabela é estruturada corretamente, as relações se formam entre os cabeçalhos das colunas e as linhas e os dados dentro da tabela. Quando estruturados incorretamente, o usuário pode decifrar o significado e o contexto das informações da tabela.
Dependendo da complexidade da tabela, a formação de relacionamentos por meio do código é realizada de maneiras diferentes. A primeira etapa para tornar uma tabela acessível é
marcar as células de cabeçalho com
<th> e as células de dados
com elementos <td>.
Para tabelas mais complexas, pode ser necessário usar outros elementos de tabela HTML,
como
<rowgroup>,
<colgroup>,
<caption>
e
scope, para transmitir significado e relações.
<table>
<tr>
<td>Animal</td>
<td>Year</td>
<td>Condition</td>
</tr>
<tr>
<td>Bird</td>
<td>1947</td>
<td>Fair</td>
</tr>
<tr>
<td>Lion</td>
<td>1982</td>
<td>Good</td>
</tr>
<tr>
<td>Horse</td>
<td>1978</td>
<td>Mint</td>
</tr>
</table>
<table>
<caption>My stamp collection</caption>
<tr>
<th>Animal</th>
<th>Year</th>
<th>Condition</th>
</tr>
<tr>
<td>Bird</td>
<td>1947</td>
<td>Fair</td>
</tr>
<tr>
<td>Lion</td>
<td>1982</td>
<td>Good</td>
</tr>
<tr>
<td>Horse</td>
<td>1978</td>
<td>Mint</td>
</tr>
</table>