Jednym z najważniejszych aspektów ułatwień dostępu w internecie jest struktura strony. Gdy tworzysz witrynę lub aplikację, używając elementów strukturalnych zamiast samych stylów, zapewniasz użytkownikom korzystającym z technologii wspomagających (AT), takich jak czytniki ekranu, istotny kontekst.
Elementy strukturalne stanowią zarys treści na ekranie, ale pełnią też funkcję punktów kotwiczenia, które ułatwiają nawigację po treściach.
Jeśli używasz semantycznych elementów HTML, ukryte znaczenie każdego elementu jest przekazywane do drzewa ułatwień dostępu i używane przez AT, co nadaje treści więcej znaczenia niż elementy niesezonowe. W niektórych przypadkach konieczne może być dodanie dodatkowych atrybutów ARIA, aby utworzyć relacje lub poprawić ogólne wrażenia użytkowników, ale w większości sytuacji jeden z dostępnych ponad 100 elementów HTML powinien działać całkiem dobrze sam.
Chociaż ten moduł skupia się na najczęściej używanych elementach strukturalnych, które są kluczowe dla dostępności cyfrowej, to podczas tworzenia struktury witryny lub aplikacji należy wziąć pod uwagę dodatkowe elementy i czynniki środowiskowe. Te przykłady stanowią wprowadzenie do tematu, a nie są wyczerpujące.
Punkty orientacyjne
Użytkownicy AT polegają na elementach strukturalnych, które dostarczają informacji o ogólnym układzie strony. Aby podzielić duże obszary treści na sekcje, możesz użyć ról znaczników ARIA lub nowszych elementów znacznika HTML, aby dodać do strony kontekst strukturalny.
Punkty orientacyjne zapewniają, że treści znajdują się w regionach, w których można się poruszać. Zalecamy podanie co najmniej 1 punktu orientacyjnego na stronę.
Niektóre materiały sugerują, że aby zapewnić lepsze pokrycie AT, należy połączyć punkty orientacyjne ARIA i punkty orientacyjne HTML. Ten rodzaj redundancji nie powinien powodować problemów u użytkowników, ale aby mieć pewność, przetestuj wzorce za pomocą czytnika ekranu. W razie wątpliwości najlepiej jest używać tylko nowszych elementów HTML dla punktów orientacyjnych, ponieważ obsługa w przeglądarkach jest bardzo niezawodna.
Porównajmy elementy HTML typu landmark z przypisaniem do odpowiednich ról ARIA typu landmark.
| Element HTML typu landmark | Rola punktu orientacyjnego ARIA |
|---|---|
<header> |
banner |
<aside> |
komplementarne |
<footer> |
contentinfo |
<nav>
|
nawigacja |
<main> |
główny |
<form> 1 |
form |
<section> 1 |
region |
Porównaj teraz przykłady struktury treści z dostępnością.
<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>Nagłówki
W przypadku prawidłowej implementacji poziomy nagłówków HTML stanowią zwięzły zarys całej zawartości strony.
Dostępnych jest 6 poziomów nagłówków. Nagłówek pierwszego poziomu <h1> jest używany do wyświetlania najważniejszych informacji na stronie, a następnie przechodzi się stopniowo do nagłówka szóstego poziomu <h1>, w którym znajdują się najmniej ważne informacje.<h6>
Kolejność poziomów nagłówków jest ważna. Najlepiej jest nie pomijać poziomów nagłówków, np. zaczynać sekcję od <h1>, a zaraz potem od <h5>. Zamiast tego przejdź do <h5>. Kolejność poziomów nagłówków jest szczególnie ważna dla użytkowników AT, ponieważ jest to jeden z głównych sposobów nawigacji po treściach.
Aby zachować prawidłową strukturę semantyczną i kolejność nagłówków, rozważ odłączenie stylów CSS od poziomów nagłówków. Daje to większą elastyczność w zakresie stylów nagłówków przy zachowaniu kolejności poziomów nagłówków. Nie używaj tylko stylów do tworzenia nagłówków, ponieważ AT nie rozpozna ich jako nagłówków.
Gdy używamy fałszywych nagłówków, odpowiednia struktura nie jest przekazywana użytkownikom AT.
Nagłówki są też przydatne dla osób z zaburzeniami poznawczymi i zaburzeniami koncentracji uwagi. Ważne jest, aby treść nagłówka była znacząca, aby ułatwić użytkownikom zrozumienie, co jest najważniejsze na stronie.
<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>Listy
Listy HTML to sposób na semantyczne grupowanie podobnych do siebie elementów i nadawanie im znaczenia. Podobnie jak w przypadku listy zakupów czy niekończącej się listy zadań, którą ciągle ignorujesz.
Istnieją 3 typy list HTML:
Element listy <li>
używany jest do reprezentowania elementu na liście uporządkowanej lub nieuporządkowanej, a elementy opis określenia
<dt> i definicja
<dd> można znaleźć na liście opisów.
Po prawidłowym zaprogramowaniu te elementy mogą informować niewidomych użytkowników AT o widocznej strukturze listy. Gdy AT napotka listę semakntyczną, może podać użytkownikowi jej nazwę i liczbę elementów. Gdy użytkownik będzie się poruszać po liście, AT odczyta na głos każdy element i poinformuje, na której pozycji na liście się znajduje – pierwszy z pięciu, drugi z pięciu itd.
Grupowanie elementów na listy ułatwia też widzącym osobom z zaburzeniami poznawczymi i uwagi oraz z zaburzeniami czytania, ponieważ zawartość list jest zazwyczaj stylizowana tak, aby zawierała więcej pustej przestrzeni i była zwięzła.
<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>Tabele
W HTML tabele są zwykle używane do porządkowania danych lub układu strony.
W zależności od celu tabeli możesz używać różnych elementów strukturalnych semantycznych. Struktura tabel może być bardzo złożona, ale jeśli będziesz przestrzegać podstawowych zasad semantycznych, będą one dość łatwe w użyciu bez konieczności wprowadzania wielu zmian.
Układ
W początkach internetu tabele układu były podstawowym elementem HTML służącym do tworzenia struktur wizualnych. Obecnie do tworzenia układów używamy elementów semantycznych i niesemantycznych, takich jak <div> i punkty orientacyjne.
Chociaż tworzenie tabel układu jest już w większości niepotrzebne, czasami nadal się do nich sięga, np. w e-mailach, newsletterach i reklamach o bogatym tle graficznym. W takich przypadkach tabele używane tylko do układu nie mogą zawierać elementów strukturalnych, które przekazują relacje i dodają kontekst, takich jak <th> lub <caption>.
Tabele układu muszą być też ukryte przed użytkownikami AT za pomocą funkcji ARIA rola prezentacji lub stan aria-hidden.
<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>Dane
W przeciwieństwie do tabeli układu, która powinna być ukryta przed użytkownikami AT, tabela danych i wszystkie jej elementy muszą być widoczne. Struktura tabel danych ma kluczowe znaczenie dla przekazywania użytkownikom prostych i skomplikowanych informacji.
Gdy tabela jest prawidłowo ustrukturyzowana, powstają relacje między nagłówkami kolumn i wierszami a danymi w tabeli. Jeśli tabela jest źle sformatowana, użytkownik musi samodzielnie zrozumieć znaczenie i kontekst informacji w niej zawartych.
W zależności od złożoności tabeli tworzenie relacji za pomocą kodu odbywa się na różne sposoby. Pierwszym krokiem do ułatwienia dostępu do tabeli jest oznaczenie komórek nagłówka elementami <th>, a komórek danych elementami <td>.
W przypadku bardziej złożonych tabel może być konieczne użycie dodatkowych elementów tabeli HTML, takich jak <rowgroup>, <colgroup>, <caption> i scope, aby przekazać znaczenie i relacje.
<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>