Dzień 10: Główna treść jako pierwsza
Jedną z głównych zalet tworzenia układu strony wyłącznie w oparciu o CSS jest łatwość zmiany lokalizacji elementów w ramach kodu HTML bez zmiany wyglądu strony w przeglądarce. Wtedy, niezależnie od położenia różnych elementów na stronie, główna zawartość może zostać umieszczona na początku kodu i może być wyświetlona kiedy reszta strony wciąż się ładuje. Jednak mam świadomość, że większość stron internetowych wciąż używa układu opartego o tabele - to właśnie dla nich jest przeznaczona poniższa wskazówka.
Jeżeli układ Twojej strony jest zdefiniowany w tabeli i masz menu nawigacji po lewej (w lewej komórce tabeli) to dla użytkowników niewidzących, jak Marek lub Jadzia, menu to jest prezentowane jako pierwsze, przed główną treścią strony. Nie da się opisać jak wielki to jest problem - musisz to zobaczyć sam(a):
- Prosty układ strony oparty na tabeli.
- Układ zmodyfikowany, z główną zawartością jako pierwszą. Te dwa przykłady powinny wyglądać identycznie w przeglądarce graficznej, jednak w Lynksie różnica jest oczywista.
- Oryginalny układ, przedstawiony w przeglądarce Lynx.
- Układ zmodyfikowany, przedstawiony w przeglądarce Lynx. Najpierw główna zawartość, później menu.
Nie musisz przeprojektowywać wszystkich swoich szablonów od nowa aby uniknąć takiego efektu. Istnieje (stosunkowo) prosta technika ("table trick"), dzięki której możesz zaprezentować główną zawartość jako pierwszą i równocześnie mieć menu w tabeli po lewej stronie.
Kto na tym skorzysta?
- Marek skorzysta. Jak widać na przykładach powyżej, Lynx pokazuje zawartość komórek tabeli w kolejności w jakiej znajdują się w kodzie HTML strony. To znaczy, że Marek musi przewinąć całe menu za każdym razem, kiedy ogląda Twoją stronę. Takie przewijanie jest do bani.
- Jadzia skorzysta. JAWS, podobnie jak Lynx, prezentuje zawartość strony w kolejności jej występowania w kodzie HTML, a nie w kolejności wyświetlania na ekranie. W przypadku JAWS problem jest jeszcze gorszy, ponieważ Jadzia musi czekać aż JAWS odczyta całe menu zanim usłyszy cokolwiek z prawdziwej zawartości strony i nie ma możliwości przeskoczenia od razu do sedna. (Powiemy więcej o tym problemie wkrótce.)
- Google skorzysta. Google nadaje większe znaczenie treściom znalezionym bliżej początku strony. I chodzi tu o początek kodu HTML Twojej strony, a nie o to, co pokazuje się na górze ekranu. Właściwie większość ludzi, którzy wiedzą, że to tak działa, zajmuje się optymalizacją wyszukiwarek; dla nich względy dostępności mają mniejsze znaczenie.
Jak to zrobić?
Obejrzyj swoją stronę za pomocą Lynx Viewer lub programu Lynx i sprawdź co jest pokazywane na początku. Jeżeli główna treść jest na początku to nic nie musisz robić; jeżeli nie, to trzeba będzie poprawić układ Twojej tabeli.
Niestety nie ma jednoznacznego rozwiązania, ani prostego kodu, który możesz wkleić na swoją stronę. Musisz przyjrzeć się dokładnie swoim szablonom i zlokalizować strukturę tabeli. Strona z przykładem prostego układu i strona po modyfikacji demonstrują tą technikę w działaniu. Generalnie trick polega na tym, aby przenieść komórkę zawierającą menu do drugiego wiersza (będzie w kodzie strony po głównej zawartości) i przez wstawienie pustej komórki nad menu w wierszu pierwszym oraz rozciągnięcie wysokości komórki z główną zawartością na oba wiersze spowodować, że wygląd w przeglądarkach graficznych pozostanie bez zmian.
Zamiast oczywistego układu tabeli:
<table> <tr> <td valign="top" align="left" width="25%"> ... menu ... </td> <td valign="top" align="left"> ... główna zawartość ... </td> </tr> </table>
zrób coś takiego:
<table> <tr> <!-- przezroczysty GIF w lewej górnej komórce tabeli --> <td><img src="/images/1.gif" width="1" height="1" alt=""></td> <!-- komórka z główną zawartością, wysokość na 2 wiersze --> <td valign="top" align="left" rowspan="2"> ... główna zawartość ... </td> </tr> <tr> <td valign="top" align="left" width="25%"> ... menu ... </td> </tr> </table>
Zobacz także (strony w języku angielskim)
- Lynx Viewer. Narzędzie online umożliwiające podgląd dowolnej strony w postaci tekstowej, jak w przeglądarce Lynx.
- A Promotion Guide: The Table Trick. Opis techniki zastosowanej powyżej.