Jesteś tutaj:Strona główna / WCAG 2.0 Zasada 1: Percepcja / Wytyczna 1.3 Możliwość adaptacji / 1.3.1 Informacje i jej związki (A)

1.3.1 Informacje i jej związki (A) - WCAG 2.0

Zadaj sobie parę pytań:

  • Czy layout twojego serwisu oparty jest o tabele lub uważasz, że to nie ma znaczenia?
  • Czy stosowanie nagłówków w odpowiedniej hierarchii jest dla ciebie stratą czasu?
  • Nie stosujesz tytułów i nagłówków do informacji prezentowanych w tabelach?
  • Nie stosujesz etykiet przy polach formularza i właściwie nie wiesz do czego służą?
  • Prezentowanie menu przy pomocy listy jest dla ciebie zbyt czasochłonne?

 Jeśli odpowiedziałeś na którekolwiek pytanie „tak” przeczytaj uważnie ten rozdział.

Treść na stronie internetowej jest podstawowym sposobem przekazywania informacji. Należy zadbać o to, aby użyte w nim znaczniki HTML zapewniły jego logiczną strukturę. W dalszym ciągu zdarza się, że twórcy stron internetowych używają znaczników niezgodnie z ich przeznaczeniem. Dla nich jest bez różnicy, czy wykorzystują znacznik <b>,  <strong>, <font size=”14pt”>  czy <h1>. Przecież i tak się w CSS zmieni wygląd. Niestety, robią podstawowy błąd.

W języku HTML znaczniki możemy podzielić na dwie podstawowe kategorie:

  • znaczniki formatujące – ich zadaniem jest zmiana wyglądu tekstu: pogrubienie  <b>, pochylenie <i>, podkreślenie <u> . Znaczniki te powinny być wykorzystywane tylko w celach poprawienia estetyki, a nie po to, by zaznaczyć ważną informację. Najlepiej jednak w ogóle ich nie używać. Formatowanie zostawić po stronie CSS.

  • znaczniki semantyczne – ich zadaniem jest określenie znaczenia danego fragmentu tekstu: nagłówek – <h1>, <h2>; mocne wyróżnienie – <strong>; zmiany – <ins>,<del>;  tabela –  <table>; tytuł tabeli - <caption>, etykieta - <label>. Sposób, w jaki treści zostaną przedstawione zależy od  klienta http, np. słowo do którego dodany jest znacznik  <acronym>  w MS Internet Explorer domyślnie zostaje podkreślone linią przerywaną, natomiast w FireFoxie linią kropkowaną. Słowo ze znacznikiem <strong> w przeglądarce MS Internet Exploer, Firefox, Opera będzie pogrubione, natomiast w przeglądarce tekstowej Lynx zostanie ono przedstawione w innym kolorze.

Podczas budowy strony internetowej należy zwrócić szczególną uwagę na zastosowanie znaczników semantycznych. Dzięki nim programy czytające (screen readers), używane przez osoby niewidome i niedowidzące, mogą w prawidłowy sposób zinterpretować i odczytać treść strony. Użytkownicy niewidomi wykorzystują większość klawiszy jako skróty klawiaturowe oraz dużą ilość ich kombinacji, interpretowanych przez programy czytające do nawigacji po stronie internetowej. Skróty różnią się w zależności od producenta oprogramowania.

Przykład:

  • klawisz „H” - będzie służył do poruszania się tylko po nagłówkach strony internetowej,
  • klawisz „L” - przechodzenia pomiędzy listami,
  • klawisz „G” – przejścia do grafiki,
  • klawisz „F” – przejścia do pola formularza.

Musimy wiedzieć, że taki program czytający nie służy tylko do obsługi strony internetowej, ale całego systemu i aplikacji zainstalowanych na komputerze.
Oczywiście, aplikacje przeznaczone dla osób z dysfunkcjami to nie jedyne oprogramowanie, dla którego znaczniki semantyczne mają znaczenie. Nie możemy zapomnieć o dziesiątkach robotów wyszukiwarek (np. google, bing), które codziennie odwiedzają nasz serwis. Dla nich nie bez znaczenia jest to, czy do zdefiniowania nagłówka artykułu lub produktu w sklepie użyto znacznika <font size=”14pt”> czy  <h1>. W dużym uproszczeniu, roboty nie rozróżniają wielkości czcionki, natomiast sprawdzają, czy treść jest nagłówkiem <h1>, czy też zwykłym akapitem tekstu <p>. Jeżeli wykorzystamy odpowiednie znaczniki, wtedy robot lepiej zaindeksuje naszą stronę w wyszukiwarce a program czytający pozwoli użytkownikom niewidomym na rozpoznanie struktury serwisu i przemieszczanie się po jego istotnych elementach. Same korzyści!

Poniżej klika przykładów stosowania znaczników HTML.

  • Stosowanie nagłówków w odpowiedniej hierarchii
    <h1>Fundacja Widzialni - strony internetowe bez barier</h1>
       <h2>Menu główne</h2>
       <h2>Dołącz do nas</h2>
       <h2>Opinie</h2>
       <h2>Aktualności</h2>
           <h3>Euro Accessibility Day </h3>
           <h3>IV edycja konkursu „Strona Internetowa bez Barier”</h3>
           <h3>Ranking kolei</h3>
       <h2>Patronat honorowy</h2>
       <h2>Patronat medialny</h2>

  • Stosowanie etykiet dla pól formularza
    <label for="firstname">Imię:</label>
    <input type="text" name="firstname" id="firstname" />

    <input type="radio" name="plec" id="r_female" value="kobieta" />
    <label for="r_female">Kobieta</label>
    <input type="radio" name="plec" id="r_male" value="mężczyzna" />
    <label for="r_male">Mężczyzna </label>

  • Używanie list do grupowania linków, np. menu
    <ul class="navigation">
        <li><a href="…">Prawo o dostępności</a></li>
        <li><a href="…">Jak pomagamy?</a></li>
        <li><a href="…">Publikacje</a></li>
        <li><a href="…">Szkolenia</a></li>
        <li><a href="…">Kontakt</a><li>
    </ul>

  • Stosowanie tytułów i nagłówków dla tabeli
    <table>
       <caption>Kalendarz wydarzeń w roku 2012</caption>
       <tr>
         <th>Poniedziałek</th>
         <th>Wtorek</th>
         <th>Środa </th>
         <th>Czwartek</th>
         <th>Piątek</th>
         <th>Sobota</th>
         <th>Niedziela</th>
       </tr>
    ...</table>

Jeśli masz jakiekolwiek wątpliwości zawsze możesz zajrzeć do specyfikacji konkretnej wersji HTML:

Powrót do: Wytyczna 1.3 Możliwość adaptacji