Jaka jest różnica między semantyką a dostępnością (a11y)?

Semantyka pomaga maszynom (przeglądarkom, analizatorom, robotom wyszukiwarek) zrozumieć strukturę i sens treści. Dostępność (a11y) ma na celu, aby treść była zrozumiała i użyteczna dla osób z różnymi ograniczeniami fizycznymi lub poznawczymi korzystających z technologii wspomagających.

Znaczniki semantyczne

Użycie semantycznych znaczników HTML, takich jak <article>, <nav>, <aside>, <footer>, <h1>-<h6>, nadaje elementom strony sensowne znaczenie. Na przykład:

<article>
  <h2>Tytuł artykułu</h2>
  <p>Treść artykułu...</p>
</article>

Pomaga to przeglądarkom poprawnie interpretować strukturę dokumentu.

Dostępność (a11y)

Dostępność obejmuje wiele aspektów:

• Semantyka: Poprawne użycie znaczników semantycznych jest już częścią dostępności, ponieważ pomaga technologiom wspomagającym (czytnikom ekranowym) zrozumieć strukturę i funkcję elementów.

• Atrybuty ARIA: Dodatkowe atrybuty, takie jak aria-label, aria-describedby, aria-hidden, role, dostarczają dodatkowych informacji dla technologii wspomagających, gdy semantyka HTML jest niewystarczająca.

  <button aria-label="Zamknij okno dialogowe">
    <img src="close.svg" alt="">
  </button>
  

• Kontrast: Wystarczający kontrast między tekstem a tłem dla osób z wadami wzroku.

• Nawigacja klawiaturą: Możliwość poruszania się po stronie i interakcji z elementami za pomocą samej klawiatury.

• Tekst alternatywny dla obrazów (alt): Opis zawartości obrazu dla użytkowników, którzy go nie widzą.

  <img src="cat.jpg" alt="Czarny kot śpi na parapecie.">
  

• Struktura nagłówków: Logiczna hierarchia nagłówków (<h1> - <h6>) dla ułatwienia nawigacji za pomocą czytników ekranowych.

Związek

Semantyka jest ważną podstawą dostępności. Dobrze zbudowana strona z elementami semantycznymi jest znacznie łatwiejsza do uczynienia dostępną. Jednak sama semantyka nie wystarcza do pełnej dostępności – często konieczne są dodatkowe środki, takie jak atrybuty ARIA, zarządzanie fokusem i zapewnienie odpowiedniego kontrastu.