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ê oferece um contexto importante para pessoas que usam tecnologias auxiliares (AT, na sigla em inglês), como leitores de tela.
Os elementos estruturais servem como um esboço do conteúdo na tela, mas também funcionam como pontos de ancoragem para facilitar a navegação no conteúdo.
Quando você usa elementos HTML semânticos, o significado inerente de cada elemento é transmitido para a árvore de acessibilidade e usado pela AT, mais significado ao conteúdo do que elementos não semânticos. Pode haver casos em que você precisa 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 bem por conta própria.
Embora este módulo se concentre nos elementos estruturais mais usados e essenciais para a acessibilidade digital, há outros elementos e fatores ambientais que precisam ser considerados ao criar a estrutura no seu site ou app. Esses exemplos são uma introdução ao tópico, não uma lista completa.
Pontos de referência
Os usuários de AT dependem de elementos estruturais para receber informações sobre o layout geral da página. Ao dividir grandes regiões de conteúdo, você pode usar funções de ponto de referência ARIA ou os elementos de ponto de referência HTML mais recentes 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 marco por página.
Alguns recursos sugerem combinar ARIA e marcadores HTML para oferecer uma cobertura de AT melhor. Embora esse tipo de redundância não cause problemas para os usuários, 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 do navegador é muito robusto.
Vamos comparar os elementos de ponto de referência HTML como mapeados para as funções de ponto de referência ARIA correspondentes.
| Elemento de marco do HTML | Função de ponto de referência ARIA |
|---|---|
<header> |
banner |
<aside> |
complementar |
<footer> |
contentinfo |
<nav>
|
navigation |
<main> |
main |
<form> 1 |
formulário |
<section> 1 |
region |
Agora, compare 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 título do HTML formam um resumo conciso do conteúdo geral da página.
Há seis níveis de título que podemos usar. O nível 1 de título <h1> é usado para
as informações mais importantes da página, movendo-se de forma incremental para
o nível 6 de título <h6> para as informações mais baixas e menos importantes.
A sequência dos níveis de título é importante. O ideal é não pular
níveis de título, por exemplo, iniciando uma seção com <h1> e imediatamente
seguindo com <h5>. Em vez disso, você precisa progredir para o <h5> na
ordem. A ordem do nível do título é especialmente importante para os usuários de AT,
já que essa é uma das principais maneiras de navegar pelo conteúdo.
Para ajudar a aderir à estrutura semântica e à ordem adequada dos títulos, desvincule os estilos CSS dos níveis de título. Isso permite mais flexibilidade nos estilos de título, mantendo a ordem de nível do título. É essencial não usar estilos sozinhos para criar cabeçalhos, porque eles não são reconhecidos pelo AT como um cabeçalho.
Quando falsificamos os títulos, a estrutura adequada não é transmitida aos usuários do AT.
Os títulos também são úteis para pessoas com distúrbios cognitivos e de déficit de atenção. É importante que o conteúdo do título seja significativo para ajudar os usuários 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 eles um significado intrínseco, assim como sua lista de compras ou aquela lista de tarefas interminável que você sempre ignora.
Há três tipos de listas HTML:
O elemento item de lista <li>
é usado para representar um item em uma lista ordenada ou não ordenada, enquanto os elementos
termo de descrição
<dt> e definição
<dd> podem
ser encontrados na lista de descrição.
Quando programados corretamente, esses elementos podem informar aos usuários de AT sem visão sobre a estrutura visível da lista. Quando uma AA encontra uma lista semântica, ela pode informar ao usuário o nome da lista e quantos itens ela tem. À medida que o usuário navega pela lista, o AT lê cada item em voz alta e informa qual é o número dele na lista: item um de cinco, item dois de cinco e assim por diante.
Agrupar itens em listas também ajuda pessoas com visão que têm distúrbios cognitivos e de atenção e pessoas com deficiências de leitura, já que o conteúdo da lista geralmente tem mais espaço visual e é direto ao ponto.
<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
No HTML, as tabelas geralmente são usadas para organizar dados ou o layout da página.
Dependendo da finalidade da tabela, você vai usar diferentes elementos estruturais semânticos. As tabelas podem ter uma estrutura muito complexa, mas, quando você segue as regras semânticas básicas, elas são bastante acessíveis sem muita intervenção.
Layout
Nos primórdios da Internet, as tabelas de layout eram o principal elemento HTML
usado para criar estruturas visuais. Hoje, usamos uma mistura de elementos semânticos e
não semânticos, como <div>s e pontos de referência, para criar layouts.
Embora a criação de tabelas de layout tenha diminuído, elas ainda são usadas em
e-mails com recursos visuais, newsletters e
anúncios. 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 ser ocultas dos usuários de AT com a função de apresentação ou o estado aria-hidden do ARIA.
<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 ser oculta dos usuários de AT, uma tabela de dados e todos os elementos dela 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 são formadas entre os cabeçalhos de coluna e as linhas e os dados na tabela. Quando estruturado incorretamente, o usuário precisa decifrar o significado e o contexto das informações na tabela.
Dependendo da complexidade da tabela, a formação de relacionamentos por código é
concluída de maneiras diferentes. A primeira etapa para tornar uma tabela acessível é
marcar as células de cabeçalho com
elementos <th> e de dados
com <td>.
Para tabelas mais complexas, talvez seja 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>