Dostępność stron WWW – podstawy
Podstawowe zasady:
Zanim zaczniemy projektować naszą witrynę powinniśmy znać podstawową zasadę tworzenia stron internetowych, a mianowicie oddzielenie struktury od prezentacji i efektów.
- HTML to struktura i treść.
- CSS jest odpowiedzialny za prezentację wizualną strony (kolorki, tła, szerokości i inne takie).
- JS odpowiada za wszelkie „bajery” na stronie (coś się zwija, rozwija, pojawia czy znika).
Tworząc serwis nie powinniśmy mieszać ze sobą tych trzech rzeczy. Należy przechowywać je w oddzielnych plikach. Do łączenia ich w jedną całość używamy linkowania w pliku HTML. Style dołączamy np. w ten sposób:
<link rel=”stylesheet” href=”sciezka_do_pliku/nazwa_pliku.css” type=”text/css” media=”screen”>
a skrypty tak:
<script src=”sciezka_do_pliku/nazwa_pliku.js” type=”text/javascript”></script>
HTML a CSS
W praktyce nie używamy atrybutu ‘style’ ani tym bardziej znacznika , czy też jakichkolwiek przestarzałych atrybutów typu ‘font’ czy ‘bgcolor’. Elementom, które będziemy stylować, nadajemy klasy oraz identyfikatory.
Plik HTML po uruchomieniu w przeglądarce ma wygenerować czystą treść (przeważnie czarny tekst na białym tle) w semantyczny sposób. Semantyczny… Trudne słowo :)
Co kryje się pod pojęciem semantyki? Oznacza to używanie odpowiednich tagów dla treści.
Może posłużę się przykładem:
Tabelka (<table>) służy do wyświetlania danych tabelarycznych, a nie do dzielenia zwykłego tekstu na kolumny, jak to miało miejsce kilka lat temu i niestety jest jeszcze praktykowane.
Jak rozpoznać, czy do prezentacji danej treści można użyć tabelki? Spróbujcie tę treść wstawić do komórek tabeli w kilku wierszach i kolumnach, a następnie zastanówcie się czy wszystko będzie dalej zrozumiałe, jeśli zmienimy kolejność kolumn czy wierszy.
Język HTML posiada całą masę tagów, nie bójmy się ich używać – oczywiście tych nie zdeprecjonowanych. Niech nagłówek będzie nagłówkiem (H1, H2, H3…) a nie paragrafem (P). Bez stylów nie da się go odróżnić od zwykłego tekstu.
Semantyka jest jedną z ważniejszych rzeczy, jeśli chodzi o dostępność strony dla osób korzystających z nieekranowych przeglądarek. Gdybyśmy nie stosowali semantyki strona „czytana” przez niewidomego użytkownika byłaby monotonna jak „Moda na sukces”. Żadnych nagłówków, które mógłby zaakcentować internetowy czytacz; elementy które powinny być listami wstawione po prostu jeden pod drugim jako paragrafy (ostylowane, żeby wyglądały jak lista) będą interpretowane jako zwykły tekst. Jeśli ktoś nie jest masochistą „przełączy kanał”.
HTML i CSS a JS
W HTML nie implementujemy też żadnych funkcji JS. Znacznika <script type=”text/javascript”></script>
używamy tylko do dołączania skryptów do naszej strony, tak jak pokazałem na początku tego artykułu.
Jeśli chodzi o pliki javascript unikamy przypisywania w nich styli CSS dla elementów strony. Czyli korzystając np. z jquery zamiast funkcji z kategorii CSS dokumentacji jquery używajmy raczej addClass() czy removeClass(), które nadają oraz usuwają elementom klasy podane w parametrach. Klasy te z kolei w plikach CSS mają określone style. Tak „łączymy” działanie JS ze stylami CSS.
Podsumowanie
Strona HTML powinna być bardzo dobrze czytelna bez użycia CSS. Jego użycie nie może powodować zmniejszenia tej dostępności na przykład poprzez zlewający się z tłem tekst. Gdy strona jest już w pełni dostępna przy użyciu HTML i CSS, można zacząć dodawać pewne bajery w JS.
Strona ma być w pełni dostępna bez użycia JS, a ich użycie powinno jeszcze służyć dostępności i jakości prezentowanych treści (np zdjęć i albumów w galerii) dla użytkowników przeglądarek obsługujących ten język skryptów.
Zobacz poprzedni wpis z kategorii Dostępność stron WWW
Linki wykorzystane w tym artykule:
Lista wszystkich elementów HTML
Chcesz być na bieżąco? Zapisz się na nasz newsletter.
Dodaj komentarz