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 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
    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).

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