Headings First Principle

Comandeer
Refleksje
HTML i CSS

Dzisiaj krótko o tym, czym jest Headings First Principle (Zasada Najpierw Nagłówki). Wymyśliłem ją na poczekaniu 20 lutego w trakcie dyskusji nad sensownością znaczników article i section i moim skromnym zdaniem w prosty i sensowny sposób opisuje, jak dzielić stronę na sekcje.

O co chodzi?

Headings First Principle (HFP) jest bardzo prostą zasadą. Jej trzonem jest dzielenie strony na poszczególne części (sekcje) przy użyciu nagłówków. Mówiąc inaczej: polega na stworzeniu poprawnej hierarchii treści na stronie. Gdy już tę hierarchię będziemy mieli gotową, wzmacniamy istniejący podział strony na sekcje przy pomocy znaczników sekcjonujących. Tym sposobem implicytny podział strony staje się eksplicytny.

Wychodzenie od nagłówków ma sens z kilku powodów:

  • Sekcje zawsze powinny mieć nagłówki:

    Each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.

    [Każdy element section powinien być identyfikowalny, najczęściej poprzez dołączenie nagłówka (elementu h1-h6) jako dziecka elementu section.]

  • Nagłówki są widocznym wyznacznikiem poszczególnych sekcji i części strony. Użytkownik nie widzi, czy użyliśmy znacznika section w kodzie, ale widzi tekst napisany większym fontem, który zawiera słowo kluczowe indetyfikujące daną część strony.

  • Więcej użytkowników czytników ekranowych używa do nawigacji nagłówków niż nawigacji regionami. I to nie są jakieś małe różnice, ale sięgające kilkudziesięciu procent. Z tego też powodu lepiej jest wyjść od nagłówków, z których niemal wszyscy korzystają, a dopiero jako dodatek dodać podział na sekcje.

  • Dodawanie sekcji do już istniejących nagłówków niejako z automatu chroni nas przed sytuacjami, w których pojawiają się sekcje bez sensownych nagłówków. Skoro nie ma nagłówka, nie ma też sekcji… i problemu.

  • No i najzwyczajniej w świecie łatwiej dzielić przy pomocy nagłówków. Tak samo jak łatwiej jest pisać artykuł lub książkę zaczynając od spisu treści, tak samo łatwiej pisać stronę mając gotową hierarchię treści.

I znowu to h1…

HFP kładzie bardzo duży nacisk na to, by łączyć poszczególne nagłówki z elementami sekcjonującymi. Innymi słowy mówiąc: elementy sekcjonujące mają jedynie wzmacniać znaczenie nagłówków. Dana część strony jest oznaczona przy pomocy section czy article dlatego, że znajduje się tam odpowiedni nagłówek, nie zaś na odwrót. I tutaj dochodzimy znowu do kwestii h1: jeśli jest on głównym nagłówkiem strony, określającym jej główny temat, to jego odpowiednikiem wśród innych znaczników powinno być main (względnie main > section, main > article lub też w body > header umieszczonym tuż przed main). Zatem HFP bardzo ładnie współgra z opisywanym już przeze mnie modelem nagłówka poza nawigacją.

Ktoś to stosuje?

W teorii HFP brzmi bardzo fajnie, ale czy da się to wykorzystać w praktyce? Jak najbardziej, według tej zasady sam tworzę strony WWW. Tak powstała m.in. moja domowa czy tutorial o HTML5. Jest więc to technika przetestowana w boju, która wydaje mi się sensowna i pomocna w dzieleniu strony na poszczególne sekcje. Zatem nagłówkujmy!

Komentarze

Przejdź do komentarzy bezpośrednio na Githubie.

Dawne komentarze

Ten blog wcześniej korzystał z systemu komentarzy Disqus. Jednakże pożegnaliśmy się i postanowiłem, że zaimportuję do nowej wersji stare komentarze z niego. Cóż, jego system eksportu na wiele nie pozwala…

  1. disqus_Sle3kiCPGK

    "implicytny". "eksplicytny" heh, nie tylko dobra treść merytorycznie ale i przy okazji uczysz j. polskiego :) I to nie żaden sarkazm itp, broń Boże, wg mnie bardzo dobra "wartość dodana" do Twoich materiałów. Sporo nacisku kładziesz na dostępność stron, co jest oczywiście jak najbardziej konieczne, ale mam pytanko tak bardziej praktyczne, masz może jakieś statystyki oglądalności witryn z czytników? Chodzi mi o strony z większą oglądalnością, rzędu powiedzmy 100k+, gdzie można już faktycznie sensownie analizować strukturę ruchu.

    1. Comandeer

      Prawdę mówiąc nigdy nie natknąłem się na tego typu statystyki. Niemniej WebAIM robi regularne badania wśród użytkowników czytników ekranowych i są tam ciekawe informacje → https://webaim.org/projects...

      Raczej dość trudno wykryć czytnik ekranowy z poziomu strony, stąd być może brak takich statystyk.

      Inna rzecz, że nigdy tego nie analizowałem pod kątem ruchu. Osobiście wyznaję zasadę samolubnej dostępności: im strona dostępniejsza, tym większa szansa, że sam w przyszłości nie będę miał problemów z jej obsługą. A przy moich licznych chorobach to dość silna motywacja ;)

      1. disqus_Sle3kiCPGK

        Dzięki za link. Ja generalnie jestem raczej przeciwnikiem prób wykrywania konkretnych urządzeń bo przy dzisiejszym tempie rozwoju technologii takie próby mogą być ryzykowne... Pytałem tak bardziej z ciekawości bo zaczynam powoli prace nad jedną apką, która ma być dostępna jako desktopówka i online i planuję wgłębić się w temat dostępności, bo przyznam, że do tej pory trochę to traktowałem pobocznie :)

  2. piotr_nalepa

    Jeśli chodzi o moje doświadczenia z układem semantycznym strony, to zawsze mam dylemat odnośnie modułów w sidebarach. To znaczy, zastanawiam się, jaki powinien być właściwy, semantyczny priorytet tytułu modułu. Koniec końców, najczęściej forsuję `h3` jako tag dla tytułów modułów.

    1. Comandeer

      Tak po prawdzie to powinno zależeć od hierarchii treści na stronie. Jeśli przed sidebarem znajduje się sekcja z nagłówkiem `h2`, to wstawienie `h3` do widgetów sprawi, że staną się one częścią tej sekcji (podsekcjami). Osobiście zrównałbym je ważnością z tą sekcją, co pokazywałoby, że to osobne twory.

      1. piotr_nalepa

        Sidebar nigdy nie znajduje się w kontenerze który ma nagłówek h2. Jest jakby osobnym tworem.

        1. Comandeer

          Tylko że nagłówki są globalne dla całej strony, więc nie jest istotne, w którym kontenerze jest to `h2`. Istotne jest, że jest to ostatni nagłówek przed nagłówkiem w widgecie. Przykład:

          <main>
          <h2>Jestem mistrzem!<h2>
          <p>Lorem ipsum</p>
          </main>
          <aside>
          <div class="widget">
          <h3>Widget</h3>
          <p>Lorem ipsum</p>
          </div>
          </aside>

          W tym wypadku widget stanie się częścią sekcji stworzonej przez nagłówek "Jestem mistrzem!". Tego problemu nie będzie, jeśli widget będzie miał nagłówek `h2`:

          <main>
          <h2>Jestem mistrzem!<h2>
          <p>Lorem ipsum</p>
          </main>
          <aside>
          <div class="widget">
          <h2>Widget</h2>
          <p>Lorem ipsum</p>
          </div>
          </aside>

          W tym momencie widget jest oddzielną częścią strony, bo jest na tym samym poziomie, co "Jestem mistrzem!".

          1. piotr_nalepa

            To mnie tylko uświadamia, że dla sidebara nagłówki niespecjalnie się przydają jeśli są aplikowane jako tytuł modułu. Jak sądzisz, użycie tagu "strong" byłoby lepszym rozwiązaniem (semantycznie)?

            1. Comandeer

              Mimo wszystko używałbym nagłówków, bo łatwiej do nich nawigować przy pomocy technologii asystującej. Tak nagłówki stosują m.in. Paciello Group (http://validator.w3.org/nu/... )