Struktura treści

Jednym z najważniejszych aspektów cyfrowych ułatwień dostępu jest to, do struktury strony. Gdy tworzysz witrynę lub aplikację za pomocą elementami strukturalnymi, polegając na samym stylach, dajesz kluczowy kontekst ludziom, technologii (AT), takich jak czytniki ekranu.

Elementy strukturalne stanowią zarys treści na ekranie, ale są pełnią też funkcję punktów zakotwiczenia, które ułatwiają nawigację po treści.

Gdy używasz semantycznych elementów HTML, nieodłączne znaczenie każdego elementu jest przekazywane do drzewa ułatwień dostępu. używane przez AT, nadając treści większe znaczenie niż elementy niesemantyczne. Może się zdarzyć, że będzie trzeba dodać kolejne atrybuty ARIA, lub zwiększyć wygodę użytkowników, ale w większości przypadków jeden z ponad 100 elementów HTML, powinno działać dość dobrze.

W ramach tego modułu skupiamy się na najczęściej stosowanych elementach struktury o kluczowym znaczeniu dostęp do cyfrowych ułatwień dostępu wymaga pewnych dodatkowych elementów, czynniki środowiskowe, które należy wziąć pod uwagę przy budowaniu struktury witryny lub . Poniższe przykłady zawierają wprowadzenie do danego tematu, a nie wszystko, co związane z nim.

Punkty orientacyjne

Użytkownicy AT przekazują informacje o ogólnego układu strony. Oddzielając duże obszary treści, użyj ról punktów orientacyjnych ARIA lub nowszych elementów punktów orientacyjnych HTML w kontekście struktury strony.

Dzięki punktom orientacyjnym treści znajdują się w regionach, w których można łatwo je poruszać. Zalecamy podanie co najmniej jednego punktu orientacyjnego na stronę.

Niektóre zasoby zalecają łączenie punktów orientacyjnych ARIA i HTML i lepszy zasięg sieci AT. Tego typu nadmiarowość powodować problemy u użytkowników, testować wzorce przy użyciu czytnika ekranu; aby mieć pewność. W razie wątpliwości najlepiej jest używać tylko nowszego kodu HTML elementów orientacyjnych, obsługa przeglądarek jest bardzo solidny.

Porównajmy elementy punktu orientacyjnego HTML jako zmapowane na: ról punktów orientacyjnych ARIA.

. .
Element orientacyjny HTML Rola punktu orientacyjnego ARIA
<header> baner
<aside> uzupełniające
<footer> contentinfo
<nav> nawigacja
<main> główny
<form> 1. formularz
<section> 1. region [region]
1 Wymaga uwzględnienia atrybutu name, aby był dostępny. Element section musi mieć łatwą nazwę ze względu na domniemaną rolę ARIA (region), aby był widoczny dla technologii wspomagającej osoby z niepełnosprawnością.

Porównajmy teraz przykłady struktury ułatwień dostępu.

Nie
<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>
Tak
<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 wdrożeniu poziomy nagłówków HTML tworzą zwięzły zarys całej zawartości strony.

Istnieje 6 poziomów nagłówków. Nagłówek pierwszego poziomu <h1> jest używany w przypadku najważniejszych i najważniejszych informacji na stronie. Stopniowo przechodzi na nagłówek szósty poziom: <h6>, gdzie znajdziesz najgorsze i najmniej istotne informacje.

Ważna jest kolejność poziomów nagłówków. Najlepiej, aby użytkownicy nie pominęli poziomów nagłówków, na przykład rozpoczynanie sekcji od nagłówka <h1> i po nim – <h5>. Zamiast tego przejdź do sekcji <h5> w zamówienie. Kolejność na poziomie nagłówka jest szczególnie ważna w przypadku użytkowników AT bo jest to jeden z głównych sposobów poruszania się po treściach.

Aby zachować prawidłową strukturę semantyczną i kolejność nagłówków, rozważ odłączenie stylów CSS od poziomów nagłówka. Dzięki temu możesz: większą elastyczność nagłówków przy zachowaniu ich kolejności na poziomie. Ważne, aby do tworzenia nagłówków nie używać samych stylów, ponieważ nie są wyświetlane przez AT jako nagłówek.

Gdy fałszujemy nagłówki, użytkownicy AT nie widzą odpowiedniej struktury.

Nagłówki są też przydatne dla osób z deficytem poznawczym i uwagi zaburzeniami. Ważne jest, aby treści w nagłówku były zrozumiałe, zrozumieć, co jest najważniejsze na stronie.

Nie
<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>
Tak
<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 jednego, co daje im czyli jak lista zakupów albo niekończąca się lista zadań możesz to zignorować.

Istnieją 3 typy list HTML:

Element listy <li> jest używany do reprezentowania elementu na liście uporządkowanej lub nieuporządkowanej, a element termin opisu <dt> i definicja Elementy <dd> mogą znaleźć na liście opisów.

Prawidłowo zaprogramowane, te elementy mogą informować niewidzących użytkowników AT w widocznej strukturze listy. Gdy AT napotka na listę semantyczną, użytkownik może odczytać nazwę listy i liczbę elementów, które się na niej znajdują. Jako użytkownik użytkownik przejdzie w obrębie listy, operator AT odczyta na głos każdy jej element i poinformuje, jego numer na liście – element pierwszy z pięciu, element drugi z piątego itd.

Grupowanie elementów w listy pomaga również osobom widzącym z osób z zaburzeniami uwagi i zaburzeń czytania, mają zazwyczaj bardziej rzucającą się w oczy przestrzeń, a treść jest zwięzła.

Nie
<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>
Tak
<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 służą zwykle do porządkowania danych lub układu strony.

W zależności od przeznaczenia tabeli możesz użyć różnych semantycznych elementów strukturalnych . Tabele mogą mieć bardzo złożoną strukturę, ale jeśli podstawowych reguł semantycznych, są one dość dostępne bez większego interwencji.

Układ

W początkach internetu tabela układów była podstawowym elementem HTML używane do tworzenia struktur wizualnych. Obecnie używamy kombinacji semantycznych niesemantycznych, takich jak <div> i punkty orientacyjne, aby tworzyć układy.

Choć dni tworzenia tabel układów w większości już się skończyły, zdarzają się sytuacje, są nadal używane, np. w atrakcyjnych wizualnie e-mailach, newsletterach reklam. W takich przypadkach tabele używane tylko do określania układu nie mogą Wykorzystują elementy strukturalne, które przekazują relacje i dodają kontekst, takie jak: <th> lub <caption>.

Tabele układów muszą być też ukryte przed użytkownikami AT z ARIA rola prezentująca lub stan ukryty (aria).

Nie
<table>
  <caption>My stamp collection</caption>
  <tr>
    <th>[Stamp Image 1]</th>
    <th>[Stamp Image 2]</th>
    <th>[Stamp Image 3]</th>
  </tr>
</table>
Tak
<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 data table i wszystkie jej elementy nie mogą być ujawnione. Struktura tabel danych ma kluczowe znaczenie dla przedstawienia prostych jak i złożone informacje.

Prawidłowa struktura tabeli sprawia, że między kolumną powstają relacje. nagłówki i wiersze oraz dane w tabeli. Niepoprawna struktura użytkownik musi rozszyfrować znaczenie i kontekst informacji tabeli.

W zależności od stopnia skomplikowania tabeli tworzenie relacji za pomocą kodu jest można osiągnąć na różne sposoby. Pierwszym krokiem do udostępnienia tabeli jest w celu zaznaczenia komórek nagłówka <th> i komórki danych z elementami <td>.

W przypadku bardziej złożonych tabel konieczne może być użycie dodatkowych elementów tabeli HTML na przykład <rowgroup> <colgroup>, <caption>, oraz scope do przekazują znaczenie i relacje.

Nie
<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>
Tak
<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>