Struktura treści

Zaznacz treści witryny semantycznie, aby strona była rozszerzalna. Ważna semantyka tworzy treść wielokrotnego użytku i bardziej znaczącą dla technologii wspomagających.

Artykuły

Element HTML5 <article> stanowi kompletną lub samodzielną kompozycję na stronie internetowej. Przykłady artykułów zawierają artykuł w witrynie zakupów lub artykuł z wiadomościami na stronie z wiadomościami.
FRAGMENT KODU:
<article>
  <h2>Space Bear Classic</h2>
  …
</article>
<article>
  <h2>Space Bear Extreme</h2>
  …
</article>

Sekcje

Element HTML5 <section> oznacza ogólny obszar strony internetowej lub artykułu. Służy do grup tematycznych treści.

FRAGMENT KODU:

<section> <h2> Chapter 2 </h2> … </section>

Paragrafy

Użyj elementu akapitu (<p>), aby zaznaczyć akapity tekstu, np. Ten. Konsekwentna stylizacja akapitów poprawia czytelność tekstu. Daje to użytkownikom większą kontrolę przy dostosowywaniu ich widoku.

Listy

Użyj różnych typów list do grupowania informacji w zależności od ich natury, aby zapewnić orientację dla użytkowników.

• Listy nieuporządkowane są używane, gdy kolejność elementów nie jest istotna. Elementy listy w nieuporządkowanych listach są oznaczone kropką.
• Listy uporządkowane są używane do informacji sekwencyjnych i są automatycznie wyliczane przez przeglądarkę.
• Listy opisów to grupy powiązanych terminów i opisów, które są połączone programowo. 

Poszczególne elementy listy mogą zawierać wiele elementów HTML, w tym akapity, nagłówki, elementy formularza i inne (zagnieżdżone) listy.

Lista nieuporządkowana

Lista nieuporządkowana składa się z jednego elementu <ul> i wielu elementów listy (<li>):

PRZYKŁAD:

• kukurydza
• Pomidory
• fasolki
• Cebule
• czosnek
  ...

FRAGMENT KODU:

 <ul> <li> Corn </li> <li> Tomatoes </li> <li> Beans </li> <li> Onions </li> <li> Garlic </li> … </ul>

Lista uporządkowana

Lista uporządkowana składa się z jednego elementu <ol> i wielu elementów listy (<li>):

PRZYKŁAD:

1. Gotować fasolę przez 45 minut.
2. Wytnij warzywa w małych kostkach.
3. Cebula i czosnek.
4. Deglaze przy użyciu pomidorów.
5. Dodaj kukurydzę i fasolę.
   ... 

FRAGMENT KODU:
<ol> <li> Cook beans for 45 minutes. </li> <li> Cut vegetables in small cubes. </li> <li> Sauté onions and garlic. </li> <li> Deglaze using the tomatoes. </li> <li> Add corn and beans. </li> … </ol>

Zagnieżdżone listy

Każda lista może być zagnieżdżona na innej liście. W kolejnym przykładzie kolejność przygotowania nie jest decydująca, ale sam preparat należy wykonać przed użyciem składników. Informacje są nadal łatwe do strawienia, a wspomagające technologie mogą łatwo informować użytkowników o liczbie kroków.

PRZYKŁAD:

1. Przygotuj składniki
   
   • Gotować fasolę przez 45 minut.
   • Wytnij warzywa w małych kostkach.
2. Cebula i czosnek.
3. Deglaze przy użyciu pomidorów.
4. Dodaj kukurydzę i fasolę.
…

FRAGMENT KODU:

<ol> <li> Prepare ingredients <ul> <li> Cook beans for 45 minutes. </li> <li> Cut vegetables in small cubes. </li> </ul> </li> <li> Sauté onions and garlic. </li> <li> Deglaze using the tomatoes. </li> <li> Add corn and beans. </li> … </ol>

Listy opisów

Lista opisów składa się z jednej lub kilku grup terminów i opisów. Każda grupa łączy jeden lub więcej terminów (zawartość elementów <dt>) z jednym lub więcej opisami (zawartość elementów <dd>). Grupowanie rozpoczyna się od pierwszego elementu listy lub gdy element <dt> idzie za <dd>.

Przypadek 1: Jedna kadencja, wiele opisów

W poniższym przykładzie opisano Johna i Luke'a jako autorów, a Frank został opisany jako edytor. PRZYKŁAD:

FRAGMENT KODU:

<dl>
 <dt> Authors </dt> <dd> John </dd> <dd> Luke </dd> <dt> Editor </dt> <dd> Frank </dd>
</dl>

Przypadek 2: Wiele terminów, jeden opis

W następnym przykładzie dwa różne pisowni słowa są definiowane przy użyciu list opisu. W takich dfn użyj elementu dfn celu dfn terminu.

PRZYKŁAD: 

FRAGMENT KODU:

<dl> <dt lang= "en-US" ><dfn> color </dfn></dt> <dt lang= "en-GB" ><dfn> colour </dfn></dt> <dd> A sensation which (in humans) derives from the ability of the fine structure of the eye to distinguish three differently filtered analyses of a view. </dd> </dl>

Przypadek 3: Wiele terminów, wiele opisów

W tym przykładzie John i Luke są autorami, a także redaktorami:

PRZYKŁAD:

FRAGMENT KODU:
<dl> <dt> Authors </dt> <dt> Editors </dt> <dd> John </dd> <dd> Luke </dd> </dl>

Cytaty

Identyfikacja cytatu pomaga wyjaśnić, że treść przypisywana jest innemu autorowi. Cytaty można oznaczyć jako wiersze tekstowe lub jako teksty. Technologie wspomagające mogą przekazać użytkownikom, gdzie zaczyna się i kończy się cytat, co może uniknąć nieporozumień.

Przypadek 1: Cytat blokowy

Użyj elementu <blockquote> w długim i rozbudowanym cytacie. Może zawierać akapity, nagłówki i inne elementy struktury tekstu. Powinny one odzwierciedlać strukturę cytowanego dokumentu. Element <cite> jest używany do odniesienia się do źródła cytatu.

PRZYKŁAD:

Oto fragment fragmentu Historii mojego życia Helen Keller Nawet w dniach, kiedy przyszedł mój nauczyciel, czułem się wzdłuż kwadratowych, sztywnych drewnianych żywopłotów i, kierując się poczuciem zapachu, znalazłem pierwsze fiołki i lilie. Tam też, po poczucie humoru, poszedłem znaleźć pociechę i ukryć moją gorącą twarz w chłodnych liściach i trawie.

FRAGMENT KODU:

<p> The following is an excerpt from the <cite> The Story of my Life </cite> by Helen Keller </p> <blockquote> <p> Even in the days before my teacher came, I used to feel along the square stiff boxwood hedges, and, guided by the sense of smell, would find the first violets and lilies. There, too, after a fit of temper, I went to find comfort and to hide my hot face in the cool leaves and grass. </p> </blockquote>

Przypadek 2: Cytat liniowy

W przypadku krótszych cytatów, które są zwykle umieszczone w innym zdaniu, należy użyć elementu <q>.

PRZYKŁAD:

Helen Keller powiedziała: "Niewielka litość" to nasz najgorszy wróg, a jeśli się do tego poddamy, nigdy nie możemy zrobić niczego dobrego na świecie. 

FRAGMENT KODU: 

<p> Helen Keller said, <q> Self-pity is our worst enemy and if we yield to it, we can never do anything good in the world. </q></p>

Załączniki

Dane liczbowe to klocki z dodatkowymi informacjami wydzielonymi z głównej treści strony - czasami odniesienia do tekstu głównego. Zazwyczaj zawierają listy, obrazy, tabele, ale mogą zawierać inne treści. Na przykład roczne sprawozdanie może odnosić się do diagramu zawierającego wielkości sprzedaży produktu. Każda cyfra jest element i przy użyciu elementu.

FRAGMENT KODU:

<p> The sales volume of our SpaceBear product was steadily the first three quarters but had a huge success in quarter four with the introduction of SuperBear in time for the holiday season. See graphic G3 for details. </p> <figure role= "group" aria-labelledby= "fig-t3-capt" > <figcaption id= "fig-t3-capt" > G3: SpaceBear sales volume </figcaption> <img src= "…" alt= "SpaceBear sales diagram, showing the huge success in Q4" longdesc= "…" > <a href= "…" > Long Description </a> </figure>

• Uwaga: W czasie pisania, WAI-ARIA przypisuje role="group" i aria-labelledby są wykorzystywane w celu zapewnienia spójnego informowania o wspieraniu technologii.
• Uwaga: aby uzyskać więcej informacji na temat tworzenia wykresów, zobacz złożone obrazy . 

Obrazy i ilustracje

Obrazy i ilustracje są przydatne do tworzenia wizualnego zaangażowania wielu użytkowników. Mogą też wyjaśnić tekst dla osób niepełnosprawnych w czytaniu. W przypadku korzystania z obrazów lub ilustracji należy dodać odpowiedni tekst alternatywny. Zobacz samouczek Zdjęcia, aby uzyskać wskazówki dotyczące alternatywnego tekstu.

Tabele

Tabele danych stanowią użyteczny sposób wyświetlania danych, tak aby można było przekazać strukturę stołu wszystkim osobom. Właściwy układ tabel pozwala ludziom zrozumieć znaczące relacje danych bez patrzenia na siatkę. Aby uzyskać więcej informacji, zobacz samouczek tabel.

Powiązane zasoby WCAG 2.0

Te samouczki zapewniają najlepsze praktyczne wskazówki dotyczące wdrażania dostępności w różnych sytuacjach. Na tej stronie zostały połączone następujące kryteria sukcesu WCAG 2.0 i techniki z różnych poziomów zgodności:

Kryteria powodzenia:

• 1.3.1 Informacje i relacje: Informacje, struktura i relacje przekazywane przez prezentację mogą być programowo określone lub dostępne w tekście. (Poziom A)

Techniki:

• G62: Dostarczenie glosariusza
• H40: Korzystanie z list definicji
• H48: Używanie ol, ul i dl do list lub grup linków
• H49: Używanie znaczników semantycznych do zaznaczania podkreślonego lub specjalnego tekstu

Poprzednia : Nagłówki

Dalej: Przykład

Na podstawie:
https://www.w3.org/WAI/tutorials/page-structure/content/