Um dos aspectos mais importantes da acessibilidade digital é a estrutura da página. Quando você cria seu site ou app usando elementos estruturais, de depender apenas de estilos, você dá um contexto crítico às pessoas que usam (AT), como leitores de tela.
Os elementos estruturais servem como um esboço do conteúdo na tela, mas também atuam como pontos de fixação para facilitar a navegação dentro do conteúdo.
Ao usar elementos HTML semânticos, o significado inerente de cada elemento é passado para a árvore de acessibilidade e usados pela AT, o que dá mais significado ao conteúdo do que elementos não semânticos. Pode haver casos em que você precisará adicionar outros atributos ARIA para criar relações ou para melhorar a experiência geral do usuário, mas, na maioria situações, um dos mais de 100 elementos HTML disponível deve funcionar bem sozinho.
Embora este módulo foque nos elementos estruturais mais usados e essenciais à acessibilidade digital, há certamente elementos e fatores ambientais a serem considerados ao construir estrutura em seu site ou app. Esses exemplos são uma introdução ao tópico, e não tudo incluso.
Pontos de referência
Os usuários de TA dependem de elementos estruturais para fornecer informações sobre os o layout geral da página. Ao separar grandes regiões de conteúdo, é possível usar as funções de ponto de referência ARIA ou os elementos de ponto de referência HTML mais recentes para adicionar contexto estrutural à sua 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 uma melhor cobertura de TA. Esse tipo de redundância não deve causar problemas para os usuários, testar os padrões usando um leitor de tela para ter certeza. Em caso de dúvida, é melhor usar apenas o HTML mais recente como padrão elementos de referência, como suporte a navegadores é muito robustos.
Vamos comparar os elementos de ponto de referência HTML mapeados para as de pontos de referência ARIA.
| Elemento de ponto de referência HTML | Função de ponto de referência ARIA |
|---|---|
<header> |
banner |
<aside> |
complementar |
<footer> |
contentinfo |
<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çalhos HTML para criar um esboço sucinto do conteúdo geral da página.
Há seis níveis de cabeçalhos que podemos usar. O <h1> de nível de cabeçalho um é usado para as informações mais altas e mais importantes da página, movendo-se de forma incremental para
nível seis <h6> para as informações mais baixas e menos importantes.
A sequência dos níveis dos títulos é importante. Idealmente, você não pulará
níveis de título, por exemplo, iniciar uma seção com uma <h1> e imediatamente
depois com um <h5>. Em vez disso, prossiga para <h5> em
ordem. A ordem dos níveis de cabeçalho é especialmente importante para usuários de TAs
porque essa é uma das principais
formas de navegar pelo conteúdo.
Para ajudar você a aderir à estrutura semântica e à ordem adequadas para os títulos, considere separar os estilos de CSS dos níveis de título. Isso permite que você mais flexibilidade nos estilos dos cabeçalhos, mantendo a ordem no nível dos cabeçalhos. É fundamental que você não use estilos sozinhos para criar títulos, pois eles não são vistos pela AT como um cabeçalho.
Quando simulamos cabeçalhos, a estrutura apropriada não é transmitida aos usuários das TAs.
Os títulos também são úteis para pessoas com déficit cognitivo e de atenção distúrbios. É importante que o conteúdo do cabeçalho seja 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
Listas HTML são uma forma de agrupar semanticamente itens semelhantes entre si, proporcionando ou seja, como uma lista de supermercado ou aquela lista interminável continue ignorando.
Existem três tipos de listas HTML:
O item da lista <li>
é usado para representar um item em uma lista ordenada ou não ordenada, enquanto o elemento
termo de descrição
<dt> e definição
Elementos <dd> podem
na lista de descrições.
Quando programados corretamente, esses elementos podem informar usuários de TA que não enxergam sobre a estrutura visível da lista. Quando uma AT encontra uma lista semântica, ela pode dizer ao usuário o nome da lista e quantos itens há nela. Como o usuário navega pela lista, a AT lê cada item da lista em voz alta e diz 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 com visão que têm deficiências cognitivas distúrbios de atenção e de leitura, já que o conteúdo da lista é normalmente estilizado para ter um espaço em branco mais visual e o conteúdo é direcionado 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
Em HTML, as tabelas geralmente são usadas para organizar dados ou layout de página.
Dependendo da finalidade da tabela, você usará diferentes estruturas semânticas os elementos. As tabelas podem ter uma estrutura muito complexa, mas quando você se apega ao 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
usadas para construir estruturas visuais. Hoje, usamos uma combinação de regras semânticas e
elementos não semânticos, como <div>s e pontos de referência, para criar layouts.
A criação de tabelas de layout chegou ao fim, mas há momentos em que
as tabelas de layout ainda são usadas, como em e-mails com grande apelo visual, newsletters e
publicidade on-line. 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 ficar ocultas para usuários AT com ARIA função de apresentação ou estado aria-oculto.
<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 deve ser ocultada dos usuários de AT, uma data table e todos os elementos dela precisam ser expostos. A estrutura das tabelas de dados é fundamental para transmitir informações e informações complexas para os usuários.
Quando uma tabela é estruturada corretamente, são formadas relações entre as colunas cabeçalhos e linhas e os dados dentro da tabela. Quando estruturados de forma incorreta, o usuário é deixado para decifrar o significado e o contexto das informações no tabela.
Dependendo da complexidade da tabela, formar relações pelo código é
realizadas de diferentes maneiras. O primeiro passo para tornar uma tabela acessível é
para marcar as células do cabeçalho
<th> e células de dados
com elementos <td>.
Para tabelas mais complexas, pode ser necessário usar elementos de tabela HTML adicionais
como
<rowgroup>,
<colgroup>,
<caption>,
e
scope para
transmitem significados 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>