Dzień 19: Używanie prawdziwych nagłówków tabel

Jeżeli na swojej stronie masz kalendarz, to powinien on być stworzony jako tabela w HTML. Było kilka prób tworzenia kalendarzy wyłącznie przy pomocy CSS, ale to nieporozumienie; kalendarz to dane tabelaryczne i właśnie tak powinny być zapisane w HTML.

Najistotniejszą rzeczą w tabeli są prawidłowe nagłówki kolumn danych. W przypadku kalendarza oznacza to konieczność oznaczenia dni tygodnia. Powinieneś zawsze tworzyć nagłówki dni tygodnia. Jeśli nie chcesz żeby były widoczne, możesz je ukryć za pomocą CSS, ale powinny zawsze tam być, ponieważ programy udźwiękawiające używają ich aby pomóc niewidomym użytkownikom w nawigacji po tabeli.

Problem z kalendarzem (i właściwie z dowolną inną tabelą danych, ale dzisiaj mówimy głównie o kalendarzu) polega na tym, że bardzo łatwo go używać kiedy widać całość, ale bardzo trudno, gdy widzisz tylko jeden dzień na raz. Wyobraź sobie, że masz na biurku kalendarz, w którym każda strona przedstawia jeden dzień, ale jest tam napisany tylko dzień miesiąca, nie ma dnia tygodnia. Strona po stronie: 1, 2, 3, 4, 5, 6, 7... Dzisiaj jest 4 i akurat tak się składa, że wiem, iż to czwartek. Teraz przeskocz do przodu: 11, 12, 13. Szybko: jaki dzień tygodnia będzie trzynastego? Strona takiego kalendarza Ci tego nie powie; musisz się orientować na własną rękę.

Tak właśnie wygląda dla niewidomej osoby nawigacja po kalendarzu bez odpowiednich nagłówków. Dostajesz mnóstwo liczb, ale brak kontekstu tygodnia. Dodanie właściwych nagłówków do tabeli kalendarza umożliwia oprogramowaniu udźwiękawiającemu powiązanie nagłówka (dnia tygodnia) z danymi w komórce tabeli (dniem miesiąca) i odczytanie tego razem. „czwartek 4, czwartek 11, piątek 12, sobota 13.” Aha, więc to będzie sobota.

Zauważ, że powiedziałem właściwych nagłówków. Włożenie dni tygodnia w tagi <td> pierwszego wiersza tabeli nie wystarcza; nagłówki dni muszą być w tagach <th>. Większość szablonów blogów robi to źle, ale można to łatwo poprawić nie zmieniając w ogóle wyglądu kalendarza w przeglądarkach graficznych.

Kto na tym skorzysta?

  1. Jadzia skorzysta. Kiedy natrafi na Twój kalendarz, JAWS najpierw przeczyta jego tytuł, następnie zakomunikuje nagłówki, a potem Jadzia może poruszać się po tabeli za pomocą klawiszy strzałek trzymając równocześnie naciśnięte Control + ALT. Kiedy przechodzi po komórkach tabeli, JAWS odczytuje nagłówek (w tym przypadku dzień tygodnia) i zawartość aktualnej komórki (dzień miesiąca).

    Wszystkie poważne programy udźwiękawiające umożliwiają podobną nawigację po tabelach. Home Page Reader umożliwia przełączenie się na tryb „Table Navigation” (ALT+T) tak, że dalsze poruszanie się w obrębie tabeli nie wymaga już dodatkowych klawiszy oprócz strzałek. Home Page Reader idzie nawet krok dalej — jak zobaczymy za chwilę, możesz zdefiniować tytuł dla każdego nagłówka (coś w rodzaju tytułu dla odnośnika) i program będzie odczytywał ten tytuł zamiast tekstu w tagu nagłówka. To znaczy, że możesz w przeglądarkach wyświetlać dni tygodnia jako „Po”, „Wt”, „Śr”, równocześnie nakazując programom udźwiękawiającym odczytywanie ich jako „Poniedziałek”, „Wtorek”, „Środa”. Nieźle.

Jak to zrobić?

Jeśli jeszcze tego nie zrobiłeś, upewnij się, że Twój kalendarz ma prawidłowy tytuł. Tag <caption> musi być pierwszy zaraz po <table>, a wiersz z tagami <th> powinien następować zaraz za tym.

Bardzo ważna uwaga na temat tabelek pozycjonujących

Tabele używane do ustalenia układu elementów na stronie (takie, które nie prezentują danych tabelarycznych tylko wyznaczają kolumny tekstu itp.) podlegają zupełnie innym zasadom. Nie używaj tagów <th> dla takich tabel. Poza zapewnieniem aby główna treść strony była przedstawiana jako pierwsza, nie trzeba wiele robić, aby uczynić je dostępnymi. Jeszcze przedyskutujemy jeden mały szczegół jutro.

Zobacz także

Jeżeli musisz zbudować tabelę bardziej skomplikowaną niż kalendarz (np. z wieloma poziomami nagłówków), musisz sobie radzić sam(a). Oto kilka ciekawych miejsc na początek (strony w języku angielskim):



Zmodyfikowano: 18.03.2006, 14:16
submit