Przejdź do treści
Telefon na kolorowym tlePhoto by Abillion on Unsplash

Nowy rok – nowy krok! Zaczynamy cotygodniową, piątkową serię „zrozumieć dostępność cyfrową na podstawie WCAG 2.1”.

WCAG to zbiór rekomendacji technicznych, które wpływają na dostępność produktu cyfrowego.

Dzisiaj zaczynamy od pierwszego kryterium sukcesu – 1.1.1 Alternatywa tekstowa (Poziom A). O co tutaj chodzi? Zapraszam na pigułkę informacji:

Elementy nietekstowe takie jak ikony i grafiki powinny mieć zapewnioną alternatywę tekstową. Jednak czy wszystkie te elementy powinny posiadać opis? NIE! Jest to najczęstszy błąd popełniany przez zespół wytwórczy – to oni wspólnie z projektantami powinni zdecydować czy dana ikona, grafika wnosi coś do układu treści lub nie. Jest to niezwykle ważny etap projektowania. W jaki sposób możemy to oznaczyć?

a) alt=”” – atrybut wykorzystywany w znaczniku <img> oznaczający element dekoracyjny, który będzie omijany przez technologię asystującą.

b) alt=”mały, czarny pies w okularach w sweterku” – przykład w jaki sposób, możemy opisać element, który zostanie przetworzony przez na przykład czytnik ekranu.

Rady co do tekstów alternatywnych:

– nie używaj słowa: „zdjęcie”, „grafika” – poprawnie zaimplementowany element, otrzyma tę informację od znacznika lub roli na przykład <img>;
– opis powinien być treściowy, czy są jakieś limity…? nie, aczkolwiek pamietajmy o zasadzie „im mniej, tym lepiej”.

Ciekawostka:

– social media, MS Office generują automatycznie opis alternatywny, jeżeli go nie zdefiniujemy w sposób manualny. Nie są idealne, dlatego lepiej je sprawdzić przed publikacją.

Referencja do WCAG: https://lnkd.in/d7B6UdzA

A11y annotation kit: https://lnkd.in/eM2G7rax

Automatyczny generator: https://lnkd.in/d2s3EfGf