4 min. czytania
Jak działa i skąd się wziął internet
Niekiedy można mieć wrażenie, że internet jest z nami od zawsze. Czy wiemy jednak jak i kiedy powstał? Jakie są podstawy jego działania?
Czy rozumiesz znaczenie landmarków HTML?
Czy rozumiesz znaczenie landmarków HTML?
Landmarki to tagi, które nadają znaczenie głównym częściom szkieletu strony. Choć ich nazwy są proste i wydawać by się mogło, że nie ma tu nad czym dywagować - to w praktyce sprawa jest nieco bardziej skomplikowana. Omówimy wszystkie zdefiniowane przez W3C landmarki oraz to jak powinno się ich używać.
Main
Tag main odpowiada za wydzielenie głównej części strony. Nie głównej części sekcji, artykułu czy innego podrzędnego elementu. Dokumentacja W3C mówi jasno
“Each page should have only one main landmark”
Jedynym wyjątkiem od tej reguły jest sytuacja kiedy strona składa się z wielu pomniejszych aplikacji, które są niezależnymi dokumentami, wyświetlanymi np. za pomocą <iframe> . Wtedy każda z nich może mieć swojego main’a. Dodatkowo, w takiej sytuacji każdy powinien posiadać unikatowy label.
Nav
To opakowanie na grupy linków, które służą do nawigowania po zawartości strony lub po jej zawartości (np. po sekcjach dłuższego tekstu). W odróżnieniu od main, możemy mieć kilka tagów <nav>. Jest jednak kilka zasad:
Jeżeli mamy więcej niż jedną nawigację, musimy je oznaczyć labelem (np. aria-labeledby jak w przykładzie main)
Jednak jeżeli obie nawigacje mają ten sam zestaw linków, to musimy podać ten sam label!
Dzięki temu narzędzia asystujące będą rozumieć, że nie muszą ich traktować jako osobnych, niezależnych bytów.
Footer
Trzeci z tagów, który ma szansę znaleźć się "wysoko w hierarchii" strony HTML, tworząc główny szkielet - ale niekoniecznie. Są dla niego dwa zastosowania, a mówiąc precyzyjnie “role”.
- Jeżeli znajduje się bezpośrednio w
<body>, to przypisaną do niego rolą jestcontentinfo. Oznacza ona miejsce, w którym piszemy o prawach autorskich, dajemy linki do polityki prywatności, nawigację. To taka typowa stopka strony. W takim scenariuszu jest traktowany jako landmark. - Jeżeli umieścimy go w
article,aside,main,footerlubsectionto już nie jest interpretowany jako landmark tylko część pomniejszego fragmentu strony.
Header
Podobnie jak footer, może być landmarkiem lub nie. Podobieństwo jest również w tym, jaki warunek musi być spełniony.
- Jeżeli znajduje się bezpośrednio w
<body>to nadawana mu zostaje rola ARIA o nazwie “banner”. Trochę dziwna nazwa, jak na to co się pod nią kryje. Rolabanneroznacza miejsce na stronie, w którym zwykle umieszczamy logo, nazwę firmy, motto i główną nawigację. - W innym przypadku, gdy
headerjest dzieckiem np.section, przyjmuje on rolę “generic” - czyli taką, która nie ma żadnego znaczenia semantycznego. Wtedy po prostu ułatwia czytanie kodu, ale nie wpływa na dostępność aplikacji.
Section
Pewnie najbardziej znany i najszerzej używany tag, który przyjmuje rolę region, tylko w sytuacji gdy nasze <section> będzie posiadać atrybut aria-labeledby, aria-label lub title nadający jej unikalną nazwę.
Czym jest rola region? To po prostu sposób na opisanie ważnej, odseparowanej oraz niezależnej części strony. Według dokumentacji, ostatni punkt jest istotny. Regionem może być tylko sekcja, która po “wycięciu” jej ze strony, nadal ma sens!
Z tym przypisywaniem roli sekcjom warto mieć umiar. Landmarków z założenia powinno być niewiele, bo ich nadmiar powoduje zbędny “szum” odbiorcom treści, którzy używają czytników ekranowych. Wykorzystuj je tylko kiedy ma to uzasadnienie, a nie wszędzie z automatu.
Aside
Ten tag ma domyślnie przypisaną rolę complementary, która pełni rolę uzupełnienia głównej treści, ale nie jest pozbawiona sensu gdyby ją “wyciąć” i potraktować jako samodzielny byt. To się zresztą tyczy większości landmarków i warto o tym zawsze pamiętać.
Form
Co ciekawe, nawet formularz może być landmarkiem. Ma to w sumie sens, nierzadko pełni on kluczową rolę w działaniu stron i aplikacji. Na przykład input z wyszukiwarką, formularz logowania do banku itd.
Podobnie jak w przypadku sekcji, musimy przypisać mu jednak “dostępną nazwę” (ang. “accessible name”) za pomocą jednego z trzech atrybutów: aria-labeledby, aria-label lub title.
Search
Ostatni na liście jest search. Nie powinno nas to dziwić, wiele serwisów bazuje swój cały biznes na jednym polu tekstowym - na przykład wyszukiwarki noclegów jak AirBnB. Aby stworzyć taki landmark, możemy skorzystać z tagu <search> lub po prostu przypisać dowolnemu tagowi atrybut role="search".
Wewnątrz takiego kontenera powinien znaleźć się input typu search, o którym więcej pisał w artykule o tworzeniu świetnych formularzy.
Tagi:
