Semantyka modułu Table of Contents w Divi 5. Czy nowy spis treści generuje poprawny HTML?

Elegant Themes dodało do Divi natywny moduł Table of Contents. W pierwszym wpisie pokazałem, do czego służy ten moduł i jak wdrożyć go w Theme Builderze dla szablonu wpisów.

Tym razem sprawdzimy coś ważniejszego z technicznego punktu widzenia: jaki kod HTML generuje nowy moduł i czy jest on poprawny semantycznie.

Spis treści to nie tylko lista linków. To element nawigacyjny w obrębie dokumentu, który powinien być zrozumiały dla użytkowników, czytników ekranowych, wyszukiwarek i narzędzi analizujących strukturę strony.

Dlaczego semantyka spisu treści ma znaczenie?

Spis treści pełni funkcję nawigacji wewnętrznej artykułu. Pozwala szybko przejść do konkretnej sekcji i sprawia, że struktura wpisu staje się bardziej czytelna.

Dobrze przygotowany spis treści powinien:

• używać elementu nawigacyjnego,
• zawierać prawdziwe linki do sekcji,
• korzystać z listy ol lub ul,
• zachowywać hierarchię nagłówków,
• mieć czytelną etykietę dla technologii asystujących,
• nie dublować informacji odczytywanych przez czytniki ekranowe.

Postanowiłem zajrzeć do kodu generowanego przez nowy moduł Divi.

Struktura HTML modułu

Po dodaniu modułu Table of Contents Divi generuje strukturę zbliżoną do poniższej:

<div class="et_pb_table_of_contents et_pb_module">
  <h2 class="et_pb_table_of_contents__title">Spis treści</h2>

  <nav class="et_pb_table_of_contents__nav" aria-label="Table of Contents">
    <div class="et_pb_table_of_contents__empty" hidden aria-hidden="true">
      Brak nagłówków w tym dokumencie
    </div>

    <ol class="et_pb_table_of_contents__list et_pb_table_of_contents__list--root et_pb_table_of_contents__list--ordered">
      <li class="et_pb_table_of_contents__item et_pb_table_of_contents__list--level-2">
        <a class="et_pb_table_of_contents__link" href="#" data-et-toc-link="skad-pomysl">
          <span aria-hidden="true" class="et_pb_table_of_contents__marker">1.</span>
          <span class="et_pb_table_of_contents__link-text">Skąd pomysł</span>
        </a>
      </li>
    </ol>
  </nav>
</div>

Dobra wiadomość: Divi nie generuje przypadkowego zestawu divów. Moduł używa elementu nav, listy ol, elementów li i linków — to solidna baza semantyczna.

nav — spis treści jako nawigacja

Największy plus to użycie elementu <nav>. Spis treści jest formą nawigacji wewnątrz dokumentu, więc nav jest tutaj właściwym wyborem — przeglądarka, czytniki ekranowe i inne narzędzia mogą rozpoznać tę sekcję jako blok nawigacyjny.

W kodzie pojawia się też:

aria-label="Table of Contents"

To dobry kierunek, bo etykieta informuje technologie asystujące, czym jest ta nawigacja. Jest jednak jeden problem: domyślna etykieta jest po angielsku. Na polskiej stronie powinno być:

aria-label="Spis treści"

W ustawieniach zaawansowanych modułu można dodać własny atrybut aria-label, co pozwala ręcznie poprawić opis. Warto jednak zauważyć, że wewnętrzny element nav może nadal korzystać z angielskiej etykiety „Table of Contents". To drobiazg, ale dobrze byłoby, gdyby Elegant Themes dopracowało tę kwestię w kolejnych aktualizacjach.

Lista uporządkowana ol

Divi generuje spis treści jako listę uporządkowaną:

<ol>
  <li>...</li>
</ol>

To dobry wybór, szczególnie gdy włączona jest numeracja. Spis treści z natury ma strukturę porządkową: 1, 1.1, 1.1.1 itd.

Warto zauważyć, że numeracja widoczna przy linkach jest ukryta przed czytnikami ekranowymi:

<span aria-hidden="true">1.</span>

To poprawne rozwiązanie — sama lista ol już przekazuje informację o kolejności. Gdyby czytnik ekranowy dodatkowo odczytywał ręcznie dodany numer, dochodziłoby do niepotrzebnego dublowania.

Linki i aktywna sekcja

Każdy element spisu treści jest linkiem prowadzącym do odpowiedniej sekcji wpisu:

<a href="#" data-et-toc-link="skad-pomysl" aria-current="location">
  <span class="et_pb_table_of_contents__link-text">Skąd pomysł</span>
</a>

Na plus wypada atrybut aria-current="location", który wskazuje aktualnie aktywną sekcję dokumentu — przydatny detal dostępnościowy, szczególnie gdy moduł podświetla bieżący punkt podczas przewijania strony.

Mniej elegancko wygląda natomiast href="#". Klasyczna postać:

href="#skad-pomysl"

byłaby lepsza. Divi przechowuje docelową kotwicę w atrybucie data-et-toc-link i obsługuje przewijanie przez JavaScript — funkcjonalnie działa to poprawnie, ale klasyczny href="#id-sekcji" byłby czystszym rozwiązaniem.

Tytuł modułu i opcja „Include Module Title"

Moduł generuje tytuł jako:

<h2 class="et_pb_table_of_contents__title">Spis treści</h2>

To nie jest błąd, ale taki nagłówek staje się częścią struktury dokumentu. Jeśli moduł znajduje się na początku wpisu lub w bocznej kolumnie, może to wpłynąć na hierarchię nagłówków strony.

Divi oferuje opcję Include Module Title, która decyduje o tym, czy tytuł modułu ma zostać uwzględniony w wygenerowanej tabeli. Dzięki temu można ustawić „Spis treści" jako widoczny nagłówek modułu, ale nie włączać go do listy linków.

Komunikat pustego stanu

Gdy moduł nie znajdzie nagłówków, domyślnie wyświetla:

No headings found in this post.

Na polskiej stronie brzmi to źle, ale Divi pozwala zmienić ten tekst w polu Empty State Message. Można więc ustawić np.:

Brak nagłówków w tym dokumencie.

To mały, ale ważny detal — moduł nie jest całkowicie zamknięty na lokalizację.

Największa wątpliwość: zagnieżdżenie nagłówków

Najważniejszy punkt techniczny dotyczy struktury wielopoziomowego spisu treści.

Wizualnie moduł potrafi pokazać hierarchię:

1. Sekcja H2
   1.1. Sekcja H3
        1.1.1. Sekcja H4

W kodzie widać jednak klasy w stylu et_pb_table_of_contents__list--level-2, co sugeruje, że Divi generuje jedną płaską listę i różnicuje poziomy nagłówków wyłącznie klasami CSS.

Semantycznie poprawna struktura wyglądałaby tak:

<ol>
  <li>
    Sekcja H2
    <ol>
      <li>
        Sekcja H3
        <ol>
          <li>Sekcja H4</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

Taki kod lepiej oddaje relacje między sekcjami i podsekcjami. Płaska lista stylowana klasami nie jest katastrofą — wizualnie wszystko działa i użytkownik rozumie strukturę — ale prawdziwie zagnieżdżona lista byłaby lepszym rozwiązaniem semantycznym.

Ocena semantyki

Nowy moduł Table of Contents oceniam bardzo pozytywnie.

Plusy:

• element nav,
• lista ol z elementami li,
• prawdziwe linki do sekcji,
• atrybut aria-current="location",
• ukrycie wizualnej numeracji przez aria-hidden="true",
• możliwość zmiany komunikatu pustego stanu,
• opcja wykluczenia tytułu modułu ze spisu,
• możliwość dodania własnego aria-label.

Do poprawy:

• domyślna etykieta aria-label jest po angielsku,
• wewnętrzny nav powinien lepiej respektować lokalizację strony,
• href="#" jest mniej semantyczne niż klasyczne href="#sekcja",
• wielopoziomowa struktura wygląda na płaską listę stylowaną klasami zamiast prawdziwie zagnieżdżonych list.

Moja ocena: 8,5/10. Jak na natywny moduł buildera wizualnego — naprawdę dobry wynik.

Podsumowanie

Nowy moduł Table of Contents w Divi to nie tylko wygodny dodatek dla blogerów. To również całkiem dobrze przemyślany element od strony semantyki HTML i dostępności.

Nie jest idealny. Chciałbym zobaczyć lepszą lokalizację domyślnych etykiet, klasyczne kotwice w href oraz prawdziwie zagnieżdżone listy dla struktur H2/H3/H4. Najważniejsze podstawy są jednak zrobione dobrze: nav, ol, li, linki i sensowne atrybuty dostępności.

W porównaniu z ręcznym budowaniem spisu treści, zewnętrznymi wtyczkami czy własnymi generatorami to duży krok naprzód. Dla blogów opartych na Divi, szczególnie tych zbudowanych na szablonach w Theme Builderze, nowy moduł może szybko stać się jednym z podstawowych elementów dobrze zaprojektowanego wpisu.