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

  • niByLog standardowo nie posiada archiwum wpisów w postaci kalendarza. Stworzony przeze mnie plugin do niByLoga (niByLog.Kalendarz) począwszy od wersji 1.4.0 generuje poprawne nagłówki.

  • W Movable Type odszukaj kalendarz w szablonie "Main Index Template" (poszukaj ciągu "calendarhead" aby znaleźć to miejsce). Jeśli używasz starszych szablonów, to zaraz za tagiem <caption> zobaczysz dni tygodnia zdefiniowane następująco:

    <tr>
    <td align="center"><span class="calendar">Sun</span></td>
    <td align="center"><span class="calendar">Mon</span></td>
    <td align="center"><span class="calendar">Tue</span></td>
    <td align="center"><span class="calendar">Wed</span></td>
    <td align="center"><span class="calendar">Thu</span></td>
    <td align="center"><span class="calendar">Fri</span></td>
    <td align="center"><span class="calendar">Sat</span></td>
    </tr>

    Jeśli masz taki kod, zamień go na następujący:

    <tr>
    <th abbr="Sunday" align="center"><span class="calendar">Sun</span></th>
    <th abbr="Monday" align="center"><span class="calendar">Mon</span></th>
    <th abbr="Tuesday" align="center"><span class="calendar">Tue</span></th>
    <th abbr="Wednesday" align="center"><span class="calendar">Wed</span></th>
    <th abbr="Thursday" align="center"><span class="calendar">Thu</span></th>
    <th abbr="Friday" align="center"><span class="calendar">Fri</span></th>
    <th abbr="Saturday" align="center"><span class="calendar">Sat</span></th>
    </tr>

    Lub z odpowiednim tłumaczeniem na polski. Dwie rzeczy są tutaj ważne: wszystkie tagi <td> zamieniamy na <th> oraz każdemu z nich dodajemy atrybut "abbr" określające pełną nazwę dnia tygodnia. (Atrybut "abbr" może służyć do dwóch rzeczy: dla bardzo długich nagłówków tabel podaje wersję skróconą, a dla bardzo krótkich nagłówków - pełne rozwinięcie, tak jak w naszym przypadku.)

  • W Radio procedura wygląda podobnie jak to, co zrobiliśmy wczoraj dodając tag caption.

    1. Otwórz właściwą aplikację Radio klikając prawym klawiszem myszy ikonkę Radio w trayu i wybierając "Open Radio".

    2. W menu "Tools" wybierz "Developers", "Jump..." (Control+J) i przejdź do "system.verbs.builtins.radio.weblog.drawCalendar" (bez cudzysłowu).

    3. Następnie w menu "Edit", "Find and Replace", "Find..." (Control+F) poszukaj "addDayName". W ten sposób znajdziesz funkcję addDayName; po jej podwójnym kliknięciu zobaczysz kod, który powinien wyglądać tak:

      on addDayName (name)
        add ("<td width=\"19\" height=\"10\" align=\"center\" style=\"font-size:9px\">" + name + "</td>")

    4. Zmień to na:

      on addDayName (name, fullname)
        add ("<th abbr=\"" + fullname + "\" width=\"19\" height=\"10\" align=\"center\" style=\"font-size:9px\">" + name + "</th>")

    5. Następnie kliknij linię "for i = 1 to 7" poniżej i zobaczysz kod:

      for i = 1 to 7
        addDayName (radio.string.getLocalizedString ("dayOfWeekShort." + i))

    6. Zmień ten kod na:

      for i = 1 to 7
        addDayName (radio.string.getLocalizedString ("dayOfWeekShort." + i), radio.string.getLocalizedString ("dayOfWeek." + i))

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

 
<< Dzień 18: Nadawanie kalendarzowi prawdziwego tytułu | Spis treści | Dzień 20: Tworzenie streszczenia dla tabel >>