10 czerwca 2013 · 0 komentarzy

1 gwiazdka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek (głosów: 2, średnia ocena: 5,00)
Loading...Loading...

Nawigacja serwisu w HTML5

Jednym z najważniejszych składników każdej strony internetowej jest pasek nawigacyjny. W serwisie CNN.com na każdej stronie pod górną krawędzią znajdują się „zakładki” prowadzące do różnych sekcji — „Tech”, „Health”, „Sports” itd. Coś podobnego można spotkać na stronach wyników wyszukiwania Google, na których znajdują się odnośniki prowadzące do różnych rodzajów wyszukiwarek — „Obrazy”, „Wideo”, „Mapy” itd. Nasza przykładowa strona ma pasek nawigacyjny umiejscowiony w nagłówku. Zawiera on łącza do sekcji serwisu — „Strona główna”, „Blog”, „Galeria” oraz „O nas”.

Pierwotnie kod źródłowy tego paska nawigacyjnego wyglądał tak:

<div id="nav">
  <ul>
    <li><a href="#">Strona główna</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Galeria</a></li>
    <li><a href="#">O nas</a></li>
  </ul>
</div>

Jest to poprawny kod HTML5. Ale jako że został zbudowany przy użyciu listy, nie mówi nic o tym, że jest to właśnie część nawigacji serwisu. Patrząc na stronę można się tego domyślić, bo komponent znajduje się w nagłówku i zawiera łącza tekstowe. Jednak pod względem semantycznym w kodzie tym nie ma niczego, co by odróżniało tę listę odnośników od innych list.

Kogo obchodzi semantyka nawigacji witryny? Na przykład osoby niepełnosprawne. Dlaczego? Zastanów się nad taką sytuacją: masz ograniczone możliwości ruchu i z trudem, jeśli w ogóle, posługujesz się myszą. Dlatego używasz dodatku do przeglądarki, który umożliwia przechodzenie do (lub przeskakiwanie) głównych łączy nawigacyjnych. Ale pomyśl o takim przypadku: masz słaby wzrok i dlatego używasz czytnika ekranu, który czyta na głos zawartość przeglądanych przez Ciebie stron internetowych. Po tytule strony najważniejszym elementem są główne łącza nawigacyjne. Jeśli chcesz szybko dotrzeć w wybrane miejsce, poinstruujesz czytnik, aby przeszedł do paska nawigacyjnego i odczytał jego zawartość. Jeśli chcesz szybko przejść do zgłębiania treści, poinstruujesz czytnik, aby pominął pasek nawigacyjny i przeczytał treść główną strony. W obu przypadkach możliwość wyodrębnienia łączy nawigacyjnych przez program jest bardzo ważna.

Krótko mówiąc, mimo że nie ma nic złego w oznaczaniu nawigacji witryny za pomocą elementu <div id="nav">, to nie ma w tym też nic dobrego. Nie jest to optymalna metoda, jeśli wziąć pod uwagę potrzeby wszystkich użytkowników internetu. W języku HTML5 zdefiniowano specjalny semantyczny element do oznaczania sekcji nawigacji: element nav.

<nav>
  <ul>
    <li><a href="#">Strona główna</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Galeria</a></li>
    <li><a href="#">O nas</a></li>
  </ul>
</nav>

Pytanie do profesora Kodeckiego

P: Czy łączy typu pomiń można używać z elementem nav? Czy w HTML5 takie odnośniki są jeszcze potrzebne?

O: łącza takie pozwalają pominąć sekcję nawigacji. Są pomocne dla niepełnosprawnych osób, które używają programów do czytania stron internetowych na głos i nie posługują się myszą. (Dowiedz się jak i dlaczego tworzyć odnośniki pomijania nawigacji.)

Gdy czytniki ekranu zaczną rozpoznawać element nav, odnośniki do pomijania nawigacji staną się niepotrzebne, ponieważ programy te będą mogły automatycznie przeskoczyć nawigację oznaczoną elementem nav. Jednak zanim wszyscy niepełnosprawni użytkownicy zaczną używać czytników obsługujących HTML5, upłynie jeszcze dużo wody w Cetynii. Dlatego na razie jeszcze powinno się dodawać łącze pozwalające przeskoczyć sekcję nav.

Obsługa HTML5 Kurs HTML5

Narzędzia

FavoriteLoadingDodaj do przechowalni

Dodaj komentarz









Newsletter

Subskrybując nasz newsletter masz pewność, że nie ominie Cię żadna nowość w serwisie!