blog na temat dostępności stron internetowych

Przejdź do głównej treści

Semantyczny HTML a dostępność

Często słyszy się, że stosowanie semantycznego HTML jest podstawą dostępności. W tym artykule chciałabym pokrótce wyjaśnić, co znaczy pojęcie “semantyczny HTML” i jaki ma on związek z dostępnością serwisów internetowych

Po pierwsze, co to jest HTML?

“HTML” (z ang. HyperText Markup Language) jest to hipertekstowy język znaczników. Ma on za zadanie opisać strukturę informacji zawartej w dokumencie HTML, nadając znaczenie poszczególnym elementom jego treści. HTML składa się ze znaczników (umieszczonych w ostrokątnych nawiasach, np. <p>, <ul>) i zawartej w nich treści w postaci tekstu. np.:

<p>Ala ma kota, a kot ma Alę.</p>

Znaczniki strukturalne są zatem nośnikami pewnej informacji, stanowią niejako etykiety opisujące funkcję zawartego w nim tekstu. Powyższy przykład znaczy tyle co:
<początek paragrafu tekstu>Ala ma kota, a kot ma Alę.<koniec paragrafu tekstu>

Po drugie, czym jest semantyczny HTML?

Na początku należałoby chyba wyjaśnić, co znaczy pojęcie “semantyczny”.

“Semantyka” to dział językoznawstwa, którego przedmiotem jest analiza znaczeń wyrazów. Semantyczny HTML odnosi się zatem do tworzenia dokumentu HTML, w którym znaczniki poprawnie opisują znaczenie i funkcję fragmentu tekstu, który zawierają. “Semantyczny HTML” jest więc określeniem trochę przypominającym wyrażenie “masło maślane” – HTML został stworzony po to, żeby opisać znaczenie poszczególnych fragmentów tekstu. Niesemantyczny HTML jest więc niepoprawnie użytym HTML.

Dlaczego semantyczny HTML jest tak ważny z punktu widzenia dostępności?

Większość ludzi przeglądając strony internetowe nie styka się bezpośrednio z kodem HTML. To, co oglądamy na ekranach, to dokument HTML (warstwa semantyczna) z nałożoną na niego warstwą prezentacji, czyli wyświetlony według reguł zawartych w arkuszach stylów CSS. Użytkownicy widzący rozpoznają co jest paragrafem tekstu, co nagłówkiem a co linkiem, korzystając z pewnych wizualnych poszlak, a nie w oparciu o znaczniki HTML, które ukryte są w kodzie strony. Jeśli widzimy zdanie “Czym jest semantyczny HTML?” napisane w dużo większej i grubszej czcionce niż pozostały tekst zakładamy, że jest to nagłówek i oczekujemy, że paragraf tekstu wyświetlony poniżej będzie tematycznie związany z tymże nagłówkiem. A jeśli napotkamy gdzieś w tekście na podkreślone słowo lub wyrażenie, znakomita większość z nas szybko wywnioskuje, że jest to link.

Nie należy jednak zapominać, że nie wszyscy użytkownicy mają możliwość kierowania się wizualnymi poszlakami, by zrozumieć strukturę dokumentu. Osoby niewidome korzystające z czytników ekranu całą swoją wiedzę o danym dokumencie HTML i jego strukturze czerpią z kodu HTML, czyli warstwy semantycznej; nie wiedzą one, w jaki sposób dana treść jest wyświetlona. Czytniki ekranu, wbrew nazwie, nie czytają treści wyświetlonej na ekranie. Przecież nigdzie na ekranie nie jest wyświetlone słowo “link” przed każdym elementem <a>, a jednak czytnik ekranu automatycznie poinformuje użytkownika, że ten fragment tesktu jest odnośnikiem. Oczywiście pod warunkiem, że link ten został poprawnie oznaczony w kodzie HTML. Podobnie jest z innymi znacznikami.

Co więcej, gdy czytniki ekranu natrafiają na pewne elementy HTML, umożliwiają one użytkownikom wykorzystanie określonych skrótów klawiszowych, co ułatwia interakcję z tymi elementami. Np. w NVDA wciśnięcie klawisza “K” spowoduje przejście do następnego linku, a osoba korzystająca z czytnika JAWS może wcisnąć klawisz “Home”, by przejść z danej komórki tabeli do początku wiersza, w którym komórka ta się znajduje. Używając HTML w sposób niesemantyczny nie tylko utrudniamy użytkownikom niewidomym zrozumienie struktury i treści strony, ale także często odbieramy im możliwość szybszej nawigacji i łatwiejszej interakcji z treścią.

Znaczniki neutralne

Poza znacznikami strukturalnymi, HTML zawiera również tzw. elementy neutralne, czyli znaczniki, które nie posiadają przypisanego im znaczenia czy funkcji. Takimi elementami są <span> i <div>. Są one używane wtedy, gdy nie istnieje strukturalny element HTML, który byłby w stanie poprawnie opisać funkcje danego fragmentu treści. Na ogół jednak neutralne znaczniki stosuje się (w połączeniu z klasami) jedynie w celu osiągnięcia określonego wyglądu strony. Pamiętajmy, że nie powinno się stosować elementów <span> i <div> do oznaczenia fragmentu treści, gdy istnieje strukturalny element HTML, który jest w stanie poprawnie opisać znaczenie lub funkcję tego fragmentu. Poniżej przedstawione są dwa przykłady różnego oznaczenia fragmentu strony:

Przykład 1 (niepoprawny / niesemantyczny HTML):

<span>Moje ulubione zwierzeta</span>
<div>Właściwie lubię niemal wszystkie, ale najbardziej:</div>
<span>- żyrafy</span><br />
<span>- słonie</span><br />
<span>- pingwiny</span>

Przykład 2 (poprawny / semantyczny HTML):

<h1>Moje ulubione zwierzęta</h1>
<p>Właściwie lubię niemal wszystkie, ale najbardziej:</p>
<ul>
  <li>żyrafy</li>
  <li>słonie</li>
  <li>pingwiny</li>
</ul>

Ogólne wskazówki dotyczące tworzenia semantycznego HTML

  • Zapoznaj się z listą strukturalnych elementów HTML; dzięki temu będziesz wiedzieć, jakie znaczniki masz do swojej dyspozycji. HTML5 zawiera kilkadziesiąt różnych elementów, zatem wybór jest całkiem spory!
  • Nie zastępuj elementów strukturalnych elementami neutralnymi. Jeśli chcesz wyświetlić przycisk, użyj elementu HTML, który jest do tego przeznaczony (<button>, <input type="button"> lub <input type="submit">), zamiast <span> lub <div>.
  • W nielicznych przypadkach, gdy użycie elementu neutralnego do oznaczenia fragmentu treści jest uzasadnione, upewnij się, że osoby niewidzące będą w stanie zrozumieć jego funkcję, i że będzie on działał w taki sam sposób, jak jego odpowiednik w HTML np.
    <span tabindex=0 role="button">Zaloguj się</span>
  • Ilekroć przystępujesz do budowy strony, najpierw stwórz możliwie kompletny kod HTML. Na tym etapie zapomnij o CSS, nie rozpraszaj się efektami wizualnymi. Zanim zaczniesz pisać CSS upewnij się, że każdy fragmet treści strony jest poprawnie oznaczony, i że związki pomiędzy poszczególnymi elementami będą zrozumiałe dla wszystkich grup użytkowników. Wiem, że pisanie HTML w porównaniu z tworzeniem CSS jest mało interesujące i każdego z nas (deweloperów) ciągnie do jak najszybszego rozpoczęcia pracy nad warstwą wizualną. Ale musimy pamiętać, że HTML to podstawa, szkielet, na którym budujemy całą stronę. Tworzenie HTML jest niczym budowanie domu: najpierw trzeba opracować jego plan, wylać fundamenty, postawić ściany itd., a dopiero potem można przystąpić do malowania i dekorowania.
  • Pamiętaj, że tworzenie stron internetowych w sposób, który maksymalnie wykorzystuje potencjał HTML, to pierwszy (i całkiem spory!) krok w kierunku dostępności
  • Budowanie szablonów stron wykorzystujących sematyczny HTML jest często utrudnione przez nienajlepszą jakość kodu generowanego przez Systemy Zarządzania Treścią, które uwielbiają oznaczać wszystko przy pomocy elementów <span> i <div>. Staraj się jednak postawić sobie za punkt honoru pisanie możliwie semantycznego HTML; w końcu jest to jeden z wyznaczników jakości Twojej pracy.

Dodaj komentarz

Należy wypełnić wszystkie pola oznaczone asteryskiem (*).
Zanim komentarz zostanie opublikowany będzie musiał zostać zatwierdzony przez moderatora.

Możesz wykorzystać następujące elementy HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>