Czy semantyczny HTML może uratować dostępność cyfrową?

Przewrotny tytuł. Może czy nie?

Zanim powiem Ci, co o tym myślę, może warto, żebym przybliżył Ci samo zagadnienie semantycznego HTML. Co to w ogóle jest?

Semantyczny HTML to taki HTML (czyli HyperText Markup Language), który wykorzystywany jest zgodnie z założeniami standardu. W tym języku wszystkie elementy, czasem nazywane „znacznikami” lub „tagami”, mają swoje znaczenie. Czyli:

• Element <p> jest paragrafem, czyli akapitem,
• Element <footer> zawiera informacje, które powinny znaleźć się w stopce serwisu internetowego,
• Element <img> przechowuje obrazy, i tak dalej.

Elementów jest dużo, mniej więcej 100. Każdy jest do czegoś innego.

Na bazie HTML zbudowane są w zasadzie wszystkie strony internetowe. Nawet, jeśli na pierwszy rzut oka tak nie jest, to gdzieś tam po drodze pojawi się taki właśnie kod, który wyświetli nam stronę w przeglądarce. Oprócz HTML, strony internetowe polegają jeszcze na CSS (stylach kaskadowych) i JavaScriptcie. Ale to trochę inna historia.

To w zasadzie tyle, co trzeba wiedzieć, by zrozumieć, o czym chcę napisać. Do pełni szczęścia powinniśmy jeszcze wiedzieć dwie rzeczy:

1. Większość stron internetowych nie jest napisana zgodnie z zasadami semantycznego HTML (o tym za chwilę),
2. Technologie wsparcia dostępności, takie jak czytniki ekranowe czy klawiatura, ale także wyszukiwarki indeksujące strony czy inne mechanizmy przetwarzające treści internetowe polegają na semantycznej strukturze języka.

Czyli: semantyczny HTML jest odpowiedzialny w dużej mierze za wygodne, szybkie, przemyślane i dostępne doświadczenie osób, które korzystają ze stron internetowych. Oraz za dobre SEO i parę innych rzeczy.

To jak z samochodem. Dobry silnik i dobre komponenty to dobra bryka. Tanie, badziewne części, stopy i rozwiązania to pojazd, który szybko zacznie się sypać.

A zatem, HTML oparty na elementach nie użytych zgodnie z ich semantycznym znaczeniem spowoduje, że wiele z technologii wsparcia dostępności, wyszukiwarek i nawet przeglądarek – zakaszle.

Znajdź mi człowieka, co lubi, żeby nań kaszleć.

Dlaczego większość stron używa niesemantycznego HTML?

Dlatego, że osoby, które je stworzyły nie miały wiedzy potrzebnej do tego, by używać standardu zgodnie z jego przeznaczeniem, albo czuły presję technologii/czasu/środowiska zawodowego i musiały zrobić coś „szybko, dobrze i tanio”. Jak wiadomo, można mieć tylko dwie z tych rzeczy jednocześnie. Et voila. Wszystko jasne. Jarając się nowymi, zmieniającymi się prawie codziennie technologiami, opierając swoje wybory głównie na poczuciu estetyki (a nie myśleniu o funkcji), spiesząc się z pracy do domu i starając się spłacić ratę za mieszkanie, czasem olewamy semantyczny HTML. Zresztą, mało kto poprawnie go uczy. Spotykałem już osoby po studiach na prestiżowych kierunkach informatycznych, które nie odróżniały nagłówka w treści od sekcji informacji nagłówkowej (nie martw się, jeśli nie wiesz, co to — te osoby akurat powinny to wiedzieć, a Ty możesz się dowiedzieć w swoim czasie).

W efekcie cały ten bajzel z internetem, w którym 94.8 stron internetowych z badanego przez WebAIM miliona ma jakieś tam błędy WCAG. Naturalnie, nieprawidłowo użyty HTML nie powoduje wszystkich tych błędów, ale wiele z nich. Choćby wtedy, kiedy miast odpowiednich elementów nadajemy role semantyczne elementom niewłaściwie, np. z pomocą ARIA (Accessible Rich Internet Applications), na przykład tak:

<div role="main">główny kontener z ogórkami</div>

Zamiast tak:

<main>główny kontener z ogórkami</main>

Drugi przykład używa semantycznie poprawnego elementu <main>, a pierwszy nadaje elementowi blokowemu <div> wartość właściwości role="main", która przekonuje przeglądarkę, że to jedno i to samo. No nie. To nie jedno i to samo. Wyglądać może podobnie (o tym decyduje CSS), działać na pierwszy rzut oka też, ale to trochę tak, jak z wyrobem czekoladopodobnym. Wygląda jak czekolada, smakuje trochę jak czekolada, ale co się odkłada na ściankach Twojego żołądka po zjedzeniu tego czegoś, to wolisz nie wiedzieć.

Uwaga: to nie znaczy, że ten pierwszy przykład jest kompletnie bez sensu i nie ma zastosowania (chociaż jest tak rzadko). Ale żeby pisać kod HTML z sensem, trzeba rozumieć, kiedy tak, a kiedy tak.

Dobra, starczy tego geekowania. Na tym etapie albo już odczuwasz zmęczenie, albo zakręcenie, albo po prostu to wiesz i też jest nudno. Przejdę więc do rzeczy.

Czy semantyczny HTML może załatwić problem niedostępnych stron internetowych?

Nie.

Ale może znacząco poprawić sytuację, której doświadczamy dzisiaj – internetu, który działa dla niektórych osób, a dla innych nie, frustrując je, czasem wkurwiając, albo po prostu wykluczając je w sposób, co to im uniemożliwia korzystanie z tych wszystkich sklepów z Labubu i narzędzi Zakładu Utyskiwań Społecznych.

Semantyczny HTML nie pomoże w niczym, jeśli nasze strony internetowe będą wciskać ludziom kit, sprzedawać im szajs, reklamować produkty bez sensu, rozprzestrzeniać ruską propagandę albo AI slop. To znaczy, wtedy po prostu zadba o to, że to wszystko będzie lepiej wchodzić do głowy. Czyli jego pozytywny efekt w zasadzie nie zaistnieje. Nie da się kupy zamienić w miód, że tak powiem.

Natomiast użyty poprawnie i zgodnie z intencją pomocy, świadczenia dobrej jakości usługi czy zaoferowania wyśmienitego produktu cyfrowego, diametralnie poprawi jakość doświadczenia.

Czy zatem warto poznać semantyczny HTML?

Tak.

Znając zasady użycia elementów HTML zgodnie z ich przeznaczeniem, będziesz:

1. Wydajniej pracować pomiędzy zespołami. To, co będą mówić do Ciebie osoby zajmujące się programowaniem czy UXem będzie mieć więcej sensu.
2. Rozumieć, jak działają podwaliny internetu i co się dzieje w przeglądarce, kiedy kotek lata za ogórkiem. No dobra; tego akurat wciąż możesz nie rozumieć, ale będziesz bliżej rozumienia.
3. Pracować z WCAG ze spokojem i pewnością siebie.
4. Tworzyć i rozwijać strony internetowe, które będą lepsze dla wszystkich. Osoby programujące będą się mniej męczyć, pisząc je i usprawniając, osoby tworzące treści będą mogły tworzyć lepszą strukturę informacji, a osoby projektujące interfejsy będą w stanie realnie wpływać na jakość końcowego produktu. Serwery będą mielić mniej danych (dobrze napisane strony internetowe są szybsze, a pliki mniejsze), a elektrownie spalać wyrzucać mniej syfu.

Otworzysz też sobie drogę do nauki CSS, JavaScriptu i wielu innych technologii.

Czy to był wpis sprzedażowy?

Tak i nie. Owszem, stworzyłem online kurs semantycznego HTML, w którym staram się przybliżyć wiedzę potrzebną do jego stosowania. Pokazuję przykłady i informuję o problemach, jakie wynikają z nieodpowiedniego stosowania standardu.

Kup se! Kup se! Kup se! Dobra, wystarczy.

Ale tak naprawdę to, o co mi chodzi (i jeden z powodów, dla którego nagrałem kurs) to zwrócenie uwagi na to, że możemy w niewymagający sposób poprawić swój stan wiedzy i rozwinąć umiejętności na tyle, żeby przysłużyć się naszym pracodawcom, osobom, które korzystają z owoców naszej pracy i ogólnej kondycji sieci.

Jeśli pracujesz jako UX, front-end, content albo UX writer, zajmujesz się testowaniem jakości (QA) albo po prostu audytujesz strony pod kątem zgodności z WCAG – semantyczny HTML powinien znaleźć się w centrum Twojego zestawu umiejętności. Internety trzeba trochę naprawić!