Semantyczny HTML

Semantyczny HTML to HTML, w którym każdy element jest dobierany ze względu na swoje znaczenie, a nie tylko wygląd. Element <button> służy do akcji. Element <nav> obejmuje nawigację. Element <table> zawiera dane tabelaryczne. Użycie elementu <div> ostylowanego na przycisk w celu wykonania akcji jest błędem semantycznym — nawet jeśli efekt wizualny jest identyczny.

Zdecydowana większość błędów dostępności wynika z porzucenia semantyki. Niemal każda awaria technologii wspomagającej ma tę samą przyczynę: ogólny element wykonuje zadanie, do którego zaprojektowano semantyczny.

Dlaczego czytniki ekranu dbają o semantykę

Czytniki ekranu udostępniają HTML użytkownikowi przez drzewo dostępności — wewnętrzną reprezentację zbudowaną z DOM, odwzorowującą każdy element na rolę, nazwę, stan i właściwości. Drzewo dostępności jest tym, co użytkownik faktycznie słyszy.

Natywny element <button> wchodzi do drzewa dostępności jako button "Wyślij". Element <div> ostylowany na przycisk wchodzi jako generic — co oznacza, że czytnik ekranu nie ogłasza nic użytecznego i użytkownik nie ma możliwości odkrycia, że div jest interaktywny.

Ta sama logika dotyczy:

• Nagłówków (<h1>–<h6>) — czytniki ekranu umożliwiają użytkownikom przeskakiwanie między nagłówkami w celu przeglądania strony. <div class="heading"> nie pojawia się na liście nagłówków.
• List (<ul>, <ol>, <li>) — czytniki ekranu ogłaszają „lista, 5 elementów” przed odczytaniem. Elementy <div> udające pozycje listy — nie.
• Formularzy — element <input> z powiązaną etykietą <label> jest odczytywany jako „E-mail, pole edycji”. Niestandardowe pole wejściowe zbudowane z div i contenteditable nie ogłasza niczego.
• Tabel — element <table> z nagłówkami <th> dla wierszy i kolumn umożliwia nawigację po komórkach z kontekstem nagłówka ogłaszanym na bieżąco. Siatki CSS złożone z div — nie.

Wzorzec zastępowania

Poprawka ma niemal zawsze ten sam kształt:

• <div onclick="..."> → <button> (lub <a href> dla nawigacji).
• <span class="link"> → <a href>.
• <div role="heading"> → <h1> do <h6>.
• Niestandardowe listy rozwijane → <select> tam, gdzie projekt na to pozwala, lub przetestowany wzorzec ARIA combobox tam, gdzie nie pozwala.
• Zakładki zbudowane ze stylizowanych elementów <div> → wzorzec zakładek z ARIA Authoring Practices Guide.

Kiedy sięgać po ARIA

Pierwsza zasada ARIA brzmi: nie należy używać ARIA, jeśli natywny element spełnia swoje zadanie. Role, stany i właściwości ARIA stanowią łatę dla przypadków, gdy natywny HTML nie może opisać budowanego widżetu (widoki drzewiaste, pola kombi z wielokrotnym wyborem, pewne wzorce modalne). Nie są zamiennikiem elementu <button>.

Praktyczny audyt

Najszybszym sposobem wykrycia degradacji semantyki w kodzie jest wyszukanie onclick na elementach div i span. Każde trafienie to potencjalny błąd. Kolejny szybki sposób: wyszukanie atrybutów role=. ARIA jest dopuszczalna w ograniczonych kontekstach, ale intensywne jej stosowanie często sygnalizuje, że natywne elementy zostały pominięte ze względów stylistycznych, które w rzeczywistości nie wymagały tego pominięcia.