Główna » Kodowanie » Jak poprawić dostępność tabeli HTML za pomocą znaczników
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, 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
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
Biologia
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
nieznany z nazwiska
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.
Przedmiot
nieznany z nazwiska
Miriam Luther
Biologia
Praktyczny
ZA
ZA
Teoria
ZA+
ZA
Chemia
Praktyczny
b
do
Teoria
ZA
do+
Fizyka
Praktyczny
ZA
ZA
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
Teoria
ZA+
ZA
Chemia
Praktyczny
b
do
Teoria
ZA
do+
Fizyka
Praktyczny
ZA
ZA
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).