Koncepcje tabel

Tabele danych służą do organizowania danych z relacjami logicznymi w strukturze sieci. Dostępne tabele wymagają znaczników HTML, które wskazują komórki nagłówka i komórki danych i definiują ich relacje. Technologie wspomagające wykorzystują te informacje, aby zapewnić kontekst użytkownikom.
Komórki nagłówków muszą być oznaczone tagami <th>, a komórkami danych <td>. W przypadku bardziej złożonych tabel konieczne może być skojarzenia jawne przy użyciu atrybutów scope , id i headers .
Ten samouczek pokazuje, jak zastosować odpowiednie znaczniki strukturalne w tabelach. Obejmuje on następujące strony:

Tabele z jednym nagłówkiem  Dla wierszy lub kolumn: w przypadku tabel z łatwą do rozróżnienia treścią zaznaczono komórki nagłówkowe <th> i komórki danych elementami <td>.


Tabele z dwoma nagłówkami  Mające prosty nagłówek wiersza i prosty nagłówek kolumny: w przypadku tabel z nieczytelnymi zakresami nagłówków określ zakres każdego nagłówka, ustawiając atrybut scope na col lub row .

Tabele z nieregularnymi nagłówkami  Mające komórki nagłówka obejmujące wiele kolumn i / lub wierszy: w tych tabelach określ grupy kolumn i wierszy i ustaw zakres komórek nagłówka przy użyciu wartości colgroup i rowgroup z zakresu atrybutu scope.

Tabele z nagłówkami wielopoziomowymi  Mające wiele komórek nagłówka powiązanych z komórkami danych: w przypadku tabel, które są tak złożone, że komórki nagłówka nie mogą być skojarzone w sposób ściśle poziomy lub pionowy, należy użyć atrybutów id i nagłówków do jawnego łączenia nagłówków i komórek danych.

Podpis i podsumowanie: Podpis definiuje ogólny temat tabeli i jest użyteczny w większości sytuacji. Podsumowanie zawiera wskazówki orientacyjne lub nawigacyjne w złożonych tabelach.

Niektóre formaty dokumentów inne niż HTML, takie jak PDF, zapewniają podobne mechanizmy w strukturach tabeli znaczników. Aplikacje do przetwarzania tekstu mogą również zapewniać mechanizmy znaczników tabel. Rekordy tabel często są tracone podczas konwersji z jednego formatu na inny, chociaż niektóre programy mogą udostępniać funkcje ułatwiające konwertowanie znaczników tabeli.
Wiele narzędzi autorskich WWW i systemów zarządzania treścią (CMS) udostępnia funkcje do definiowania komórek nagłówka podczas tworzenia tabeli bez konieczności ręcznego edytowania kodu.
Uwagi: Ten samouczek zawiera wskazówki dotyczące tworzenia tabel służących do wyświetlania danych w siatce. Ten samouczek nie dotyczy tabel używanych do składu. Zasadniczo tabele nie mają być wykorzystywane do celów układu. Zamiast tego najlepszą praktyką jest użycie arkuszy kaskadowych (arkuszy stylów CSS) do prezentacji wizualnej.

Dlaczego to jest ważne?

Tabele bez znaczników strukturalnych uniemożliwiają rozróżnienie i prawidłowe powiązanie między nagłówkiem a komórkami danych (tworzenie barier dostępności). Oparcie się na wizualnych wskaźnikach wystarczy, aby utworzyć dostępną tabelę. Dzięki znacznikom strukturalnym nagłówki i komórki danych można programowo określić za pomocą oprogramowania, co oznacza, że:
  • Osoby korzystające z czytników ekranu mogą mieć nagłówki wierszy i kolumn przeczytane głośno, gdy poruszają się po tabeli. Czytniki ekranu mówią pojedynczo o jednej komórce i odnoszą się do powiązanych komórek nagłówka, więc czytelnik nie traci kontekstu.
  • Niektórzy użytkownicy używają alternatywnych sposobów renderowania danych, na przykład przy użyciu niestandardowych arkuszy stylów, aby lepiej wyróżnić komórki nagłówków. Te techniki umożliwiają zmianę rozmiaru i koloru tekstu oraz wyświetlanie informacji jako list, a nie siatki. Kod tabeli musi być właściwie zorganizowany, aby umożliwić renderowanie alternatywne.
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)

Dalej: Jeden nagłówek

Na podstawie:
https://www.w3.org/WAI/tutorials/tables/

Popularne posty z tego bloga

Walidatory

Notepad++

Github