Struktura treści

Jednym z najważniejszych aspektów dostępności cyfrowej jest podstawowa struktura strony. Jeśli podczas tworzenia witryny lub aplikacji wykorzystujesz elementy strukturalne, zamiast polegać wyłącznie na stylach, musisz zapewnić kluczowym kontekst dla osób korzystających z technologii wspomagających osoby z niepełnosprawnością, np. czytników ekranu.

Elementy strukturalne pełnią rolę konturu treści na ekranie, ale są też punktami zakotwiczenia, które ułatwiają poruszanie się po treści.

Gdy używasz semantycznych elementów HTML, podstawowe znaczenie każdego z nich jest przekazywane do drzewa ułatwień dostępu i używane przez AT, nadając treściom większe znaczenie niż elementy niesemantyczne. W niektórych przypadkach konieczne może być dodanie dodatkowych atrybutów ARIA w celu budowania relacji lub poprawy ogólnego wrażenia użytkownika, ale w większości przypadków jeden z ponad 100 dostępnych elementów HTML powinien dobrze działać samodzielnie.

Choć ten moduł koncentruje się na najczęściej używanych elementach struktury kluczowych dla ułatwień dostępu cyfrowego, przy tworzeniu struktury witryny lub aplikacji musisz wziąć pod uwagę dodatkowe elementy i czynniki środowiskowe. Te przykłady to tylko wprowadzenie do tematu, a nie wszystko.

Punkty orientacyjne

Elementy strukturalne dostarczają użytkownikom informacji o ogólnym układzie strony. Wydzielając duże obszary treści, możesz użyć ról punktów orientacyjnych ARIA lub nowszych elementów punktów orientacyjnych HTML, aby dodać kontekst strukturalny do strony.

Punkty orientacyjne zapewniają, że treści znajdują się w regionach, w których można nawigację. Zalecamy podanie co najmniej jednego punktu orientacyjnego na stronę.

Niektóre zasoby zalecają połączenie punktów orientacyjnych ARIA i HTML, aby zwiększyć zasięg AT. Ten typ nadmiarowości nie powinien powodować problemów u użytkowników, ale dla pewności przetestuj wzorce za pomocą czytnika ekranu. W razie wątpliwości najlepiej korzystać z nowszych elementów interfejsu HTML, ponieważ obsługa przeglądarek jest bardzo rozbudowana.

Porównajmy elementy punktów orientacyjnych HTML jako zmapowane z ich odpowiednikami ARIA.

Porównajmy teraz przykłady struktury treści z ułatwieniami dostępu.

<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

Po prawidłowym zaimplementowaniu poziomy nagłówków HTML tworzą zwięzły zarys całej zawartości strony.

Istnieje 6 poziomów nagłówków, których możemy używać. Nagłówek pierwszego poziomu (<h1>) jest używany w przypadku najwyższych i najważniejszych informacji na stronie. Jest przenoszony stopniowo na poziom 6<h6>, gdzie wyświetlane są najmniejsze i najmniej istotne informacje.

Kolejność poziomów nagłówków jest ważna. Najlepiej jest unikać pomijania poziomów nagłówków, np. rozpoczynania sekcji od znacznika <h1>, a następnie poprzedzania jej znakiem <h5>. Zamiast tego przejdź do kolejności <h5>. Kolejność na poziomie nagłówka jest szczególnie ważna dla użytkowników w AT, ponieważ jest to jeden z głównych sposobów przeglądania treści.

Aby zachować prawidłową strukturę i kolejność nagłówków, rozważ odłączenie stylów CSS od poziomów nagłówków. Zapewnia to większą elastyczność w dostosowywaniu stylów nagłówków przy zachowaniu kolejności na poziomie nagłówków. Bardzo ważne jest, aby do tworzenia nagłówków nie używać samych stylów, ponieważ nie są one odczytywane jako nagłówek AT.

Gdy fałszujemy nagłówki, użytkownicy w witrynie nie otrzymują informacji o odpowiedniej strukturze.

Nagłówki są też przydatne dla osób z zaburzeniami poznawczymi i koncentracją. Ważne jest, aby zawartość nagłówka była zrozumiała, co pozwoli im zrozumieć, 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 elementów podobnych do innych, co daje im swoje odzwierciedlenie. Podobnie jak w przypadku listy sklepów spożywczych lub stale ignorowanej listy rzeczy do zrobienia.

Istnieją trzy typy list HTML:

• zamówiono <ol>
• nieuporządkowany <ul>
• opis <dl>

Element listy <li> służy do reprezentowania elementu na liście uporządkowanej lub nieuporządkowanej, a elementy opisu <dt> i definicja <dd> znajdują się na liście opisów.

Prawidłowo zaprogramowane elementy mogą informować niedowidzących użytkowników AT o widocznej strukturze listy. Gdy dostawca AT napotka listę semantyczną, może przekazać użytkownikowi nazwę tej listy i liczbę elementów, które się na niej znajdują. W miarę poruszania się po niej użytkownik AT odczytuje na głos każdy element listy i określa, jaki numer się na niej znajduje (pierwszy z piątych, drugi z piątych itd.).

Grupowanie elementów w listy pomaga też osobom widzącym z zaburzeniami poznawczymi i koncentracyjnymi oraz osobom z trudnościami w czytaniu, ponieważ treść listy jest zazwyczaj tworzona z myślą o większej ilości pustej przestrzeni i koncentruje się na treści.

<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 języku HTML tabele zwykle służą do porządkowania danych lub porządkowania strony.

W zależności od przeznaczenia tabeli możesz używać różnych semantycznych elementów struktury. Tabele mogą mieć bardzo skomplikowaną strukturę, ale jeśli przestrzegasz podstawowych reguł semantycznych, są one dość dostępne bez większych nakładów.

Układ

W początkach internetu tabele układów były głównym elementem HTML służącym do tworzenia struktur wizualnych. Obecnie do tworzenia układów używamy kombinacji elementów semantycznych i niesemantycznych, takich jak elementy <div> i punkty orientacyjne.

Chociaż czas tworzenia tabel układów już się skończył, są jeszcze sytuacje, gdy tabele układów są nadal używane, np. w atrakcyjnych wizualnie e-mailach, newsletterach i reklamach. W takich przypadkach tabele używane tylko na potrzeby układu nie mogą używać elementów strukturalnych, które przekazują relacje i dodają kontekst, jak np. <th> lub <caption>.

Tabele układu muszą być też ukryte przed użytkownikami AT, którzy mają przypisaną rolę prezentacji ARIA 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 w Australii, tabela danych i wszystkie jej elementy muszą być widoczne. Struktura tabel danych ma kluczowe znaczenie dla przekazywania użytkownikom prostych i złożonych informacji.

Jeśli tabela ma prawidłową strukturę, między nagłówkami i wierszami kolumn tworzą się relacje a danymi w tabeli. Jeśli informacje są niewłaściwie sformułowane, użytkownik może rozszyfrować znaczenie i kontekst informacji w tabeli.

W zależności od złożoności tabeli tworzenie relacji za pomocą kodu odbywa się na różne sposoby. Pierwszym krokiem do udostępnienia tabeli jest oznaczenie komórek nagłówka za pomocą <th>, a komórek z elementami <td>.

W przypadku bardziej złożonych tabel może być konieczne użycie dodatkowych elementów tabel HTML, takich jak <rowgroup>, <colgroup>, <caption> czy scope, które przekazują 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>