Jak poprawić dostępność tabeli HTML za pomocą znaczników

Dostępność sieci odnosi się do projektowania aplikacji internetowych w taki sposób, aby mogły być z łatwością używane przez osoby z upośledzeniem wzroku. Niektórzy z tych użytkowników polegają czytniki ekranu odczytać zawartość stron internetowych. Czytniki ekranu interpretować kod obecny na stronie i odczytać jego zawartość użytkownikowi.

jest szeroko stosowanym elementem HTML do wyświetlania danych w uporządkowany sposób na stronach internetowych. Jego konstrukcja waha się od prostych do złożonych, z nagłówkami wierszy, scalonymi nagłówkami itp.

Jeśli tabela nie jest zaprojektowana z myślą o dostępności, trudno będzie czytnikom ekranu przetłumaczyć dane w złożonych tabelach dla użytkowników. Dlatego, aby skomplikowane tabele HTML były łatwiej zrozumiałe, dla ułatwienia dostępu musimy upewnij się, że nagłówki, grupy kolumn, grupy wierszy itp. są jasno zdefiniowane. Zobaczymy poniżej, jak to jest osiągnięty w marży.

Atrybut Zakres

Nawet z prostym stołem

znacznik z scope = "col" pomaga technologii wspomagającej zidentyfikować, że komórki znajdujące się w tej samej kolumnie są nazwiskami uczniów.

Podobnie komórki

zawierający scope = "colgroup" pomaga użytkownikom zidentyfikować, że dane w komórkach, które następują w grupie kolumn, której dotyczy, są powiązane z danym obiektem.

Potem jest

znacznik z scope = "wiersz" który definiuje, że komórki po nim w tym samym wierszu, zawierające “stopień” informacje dotyczące tego konkretnego nazwiska ucznia.

Grupy wierszy

Przejdźmy teraz do innego przykładu, ten przykład będzie miał prawie taką samą tabelę, jak ta powyżej, z wyjątkiem tego, że wymienimy nagłówki wierszy i kolumn, dzięki czemu będziemy mogli pracować z grupami wierszy.

znacznik, który wyraźnie definiuje nagłówki, możesz poprawić jego dostępność za pomocą zakres atrybut i nie ustępuje żadnemu zamieszaniu, które może wynikać z podobnych typów danych w komórkach.

  imię i nazwisko pracownika  Kod pracownika  Kod projektu  Oznaczenie pracownika  
  nieznany z nazwiska  32456  456789  Dyrektor  
  Miriam Luther  78902  456789  Zastępca dyrektora

Co robi atrybut scope? Według W3C:

Innymi słowy, pomaga nam powiązać komórki danych z odpowiadającymi im komórkami nagłówka.

Pamiętaj, że w powyższym przykładzie możesz się przełączyć

dla

. Tak długo jak zakres ma wartość przełęcz, zostanie zinterpretowany jako odpowiedni nagłówek kolumny.

The zakres atrybut może mieć jedną z tych czterech wartości; przełęcz, rząd, rowgroup, colgroup odnosić się odpowiednio do nagłówka kolumny, nagłówka wiersza, grupy nagłówków kolumn i grupy nagłówków wierszy.

Złożone tabele

Przejdźmy teraz do bardziej złożonej tabeli.

Powyżej znajduje się tabela, która wymienia uczniów w klasie i ich oceny w praktyce i teorii dla trzech przedmiotów.

Oto kod HTML. Tabela została użyta rowspan i colspan aby utworzyć scalone nagłówki dla komórek danych.

  Nazwa studenta  Biologia  Chemia  Fizyka  
  Praktyczny  Teoria  Praktyczny  Teoria  Praktyczny  Teoria  
  nieznany z nazwiska  ZA  ZA+  b  ZA  ZA  ZA-  
  Miriam Luther  ZA  ZA  do  do+  ZA  ZA-

W powyższej tabeli każda komórka danych, czyli każda z komórek tabeli wyświetlanie oceny, jest powiązany z trzema informacjami:

Do którego ucznia należy ta klasa?
Do jakiego tematu należy ta klasa?
Czy ta ocena dotyczy sekcji praktycznej lub teorii?

Te trzy informacje są zdefiniowane w trzech różnych typach komórek nagłówka strukturalnie i wizualnie:

Nazwa ucznia
Nazwa przedmiotu
Praktyczna lub teoria

Zdefiniujmy to samo dla dostępności.

      Nazwa studenta  Biologia  Chemia  Fizyka  
  Praktyczny  Teoria  Praktyczny  Teoria  Praktyczny  Teoria  
  nieznany z nazwiska  ZA  ZA+  b  ZA  ZA  ZA-  
  Miriam Luther  ZA  ZA  do  do+  ZA  ZA-

W powyższym znaczniku dodaliśmy zakres do komórek zawierających informacje o nagłówkach komórek danych.

Grupa kolumnowa

Komórki biologii, chemii i fizyki mają być powiązane z grupą dwóch kolumn każda (Teoria i praktyka). Po prostu dodam colspan = "2" nie tworzy grup kolumn, wskazuje jedynie, że dana komórka zajmuje przestrzeń o wartości dwóch komórek.

Aby utworzyć grupę kolumn, musisz użyć colgroup a następnie dodaj przęsło przypisz do niego, ile kolumn zawiera grupa kolumn.

The

Nazwa studenta

Biologia

nieznany z nazwiska

Przedmiot		nieznany z nazwiska	Miriam Luther
Biologia	Praktyczny	ZA	ZA
Biologia	Teoria	ZA+	ZA
Chemia	Praktyczny	b	do
Chemia	Teoria	ZA	do+
Fizyka	Praktyczny	ZA	ZA
Fizyka	Teoria	ZA-	ZA-

Teraz, gdy mamy już naszą próbkę do pracy, zacznijmy od utworzenia grup wierszy, tak jak w przypadku grup kolumn w poprzednim przykładzie.

Nie można jednak tworzyć grup wierszy za pomocą znacznika takiego jak colgroup ponieważ nie ma rowgroup element.

Wiersze HTML są zazwyczaj grupowane przy użyciu , i elementy. Pojedynczy HTML

element może mieć jeden , jeden i wiele . Użyjemy wielu tbody w naszej tabeli, aby utworzyć grupy wierszy, i dodać odpowiedni zakres do komórek nagłówka.

Przedmiot		nieznany z nazwiska	Miriam Luther
Biologia	Praktyczny	ZA	ZA
Biologia	Teoria	ZA+	ZA
Chemia	Praktyczny	b	do
Chemia	Teoria	ZA	do+
Fizyka	Praktyczny	ZA	ZA
Fizyka	Teoria	ZA-	ZA-

Dodaliśmy wiersze “Praktyczny” i “Teoria” w każdym tbody tworzenie grup wierszy z dwoma wierszami w każdym. Dodaliśmy także scope = "rowgroup" do komórek zawierających nagłówek informacje o tych dwóch wierszach (która jest nazwą podmiotu, do której należą klasy w tym przypadku).

Teraz przeczytaj: Równa wysokość kolumny z CSS