blog na temat dostępności stron internetowych

Przejdź do głównej treści

Prawidłowe opisywanie treści nietekstowych

Jednym z głęboko zakorzenionych mitów związanych z dostępnością jest to, że osoby tworzące strony internetowe powinny unikać stosowania obrazów (zdjęć, ikon, grafik, itd.) Wiele osób sądzi, że ponieważ osoby niewidome nie są w stanie zapoznać się z treścią przedstawioną w formie nietekstowej, ilość elementów graficznych należy ograniczyć do minimum. Jest to jednak zupełnie błędne przekonanie. Chociaż osoby niewidome nie mogą odebrać informacji przekazanej za pomocą grafiki w sposób bezpośredni, są w stanie (za pośrednictwem czytnika ekranu) zapoznać się z opisem tekstowym danego obrazka (oczywiście pod warunkiem, że opis ten został prawidłowo stworzony). Warto też pamiętać, że wytyczne dostępności nie dotyczą jedynie osób niewidomych, a ikony i grafiki znacznie ułatwiają znalezienie i zrozumienie treści osobom z zaburzeniami rozwojowymi i poznawczymi. W jaki sposób należy zatem stosować elementy graficzne, aby nie dyskryminować osób niewidomych?

Kryterium sukcesu 1.1.1 wytycznych WCAG 2.0 (“Treść nietekstowa”) opisuje kilka technik zapewniania tekstowych alternatyw dla elementów graficznych, w zależności od funkcji, jaką pełnią one na stronie. W tym artykule omówię jedynie metody odnoszące się do prostych elementów graficznych, zaś elementom bardziej skomplikowanym, takim jak CAPTCHA, multimedia, wykresy i infografiki, poświęcę osobne artykuły.

Główne zasady opisywania treści nietekstowych

Mówiąc ogólnie, elementy graficzne stosowane na stronach internetowych można podzielić na dwie kategorie: takie, które mają za zadanie przekazać jakąś informację, oraz takie, które zostały użyte w celach czysto dekoracyjnych.

Grafiki niedekoracyjne

Jeśli dany element graficzny ma za zadanie przekazać jakąś informację, i świadomość tego, co przedstawia, jest istotna dla zrozumienia treści przedstawionej na stronie (bądź też do interakcji z tą stroną), element ten musi posiadać tekstową alternatywę.
Wielu autorów treści internetowych nie bardzo wie, jak poprawnie opisać zdjęcie czy też obrazek. Najlepszą metodą jest wyobrażenie sobie, jak dany element graficzny opisałoby się komuś przez telefon. Należy przy tym starać się przekazać to, co najistotniejsze, bez wdawania się w niepotrzebne szczegóły. Na przykład, jeśli w sekcji prognozy pogody zawarty jest obrazek słońca częściowo przesłoniętego chmurą, właściwy opis to: “słońce częściowo przesłonięte chmurą” albo po prostu “częściowe zachmurzenie”. Opis typu “ciemnożółte słońce z promieniami; dolny prawy róg jest przesłonięty trzema niebieskimi chmurami: małą, średnią i dużą” jest zbyteczny i powoduje niepotrzebny natłok informacji.

Sekcja strony wyświetlająca prognozę pogody na najbliższe dni. Część informacji (dzień tygodnia, temperatura) jest podana w formie tekstowej, a część za pomocą ikon (chmury, słońce za chmurami, itd)
Prognoza pogody przedstawiająca część informacji w formie nietekstowej

Czasem trudno zdecydować, jak szczegółowy powininen być opis danego elementu graficznego. Nie stresujmy się jednak niepotrzebnie znalezieniem złotego środka pomiędzy niewystarczającym opisem, a opisem zbyt szczegółowym; każdy z nich będzie lepszy niż kompletny brak tekstowej alternatywy.

Nie w każdej jednakże sytuacji wierne oddanie tego, co dany obrazek przedstawia, jest właściwym rozwiązaniem. Wyobraźmy sobie na przykład stronę internetową restauracji, na której przedstawione jest menu. Przy niektórych z potraw zamieszczone są ikony, np. obraz papryczki oznacza, że potrawa jest pikantna, a obrazek przekreślnego kłosa oznacza, że danie nie zawiera glutenu. Ikony te nie zostały zamieszczone na stronie dla ozdoby; każda z nich przekazuje pewną istotną informację. Gdyby ikony te opisać za pomocą tekstu “papryczka chilli” czy też “przekreślony kłos”, osoby korzystające z czytnika ekranu, które nie rozumieją, co symbole te oznaczają, musiałyby odszukać na stronie legendę tłumaczącą znaczenie wszystkich tych ikon. Jest to niepotrzebne utrudnienie; lepiej byłoby przekazać znaczenie tych ikon bezpośrednio w atrybucie alt, np.

<img src="ikony/papryczka.jpg" alt="danie pikantne" />
<img src="ikony/kłos.jpg" alt="danie bezglutenowe" />

W tym przypadku najważniejsze jest to, jaką informację dana ikona usiłuje przekazać, a nie to, co jest na niej przedstawione.

Elementy interaktywne

Podobną zasadę stosuje się w odniesieniu do elementów interaktywnych, które zostały przedstawione na stronie przy użyciu obrazków. Także i w tym przypadku dużo ważniejsze od tego, co dany obrazek przedstawia jest to, jaką funkcję pełni dana kontrolka czy też odnośnik. Na przykład, jeśli przycisk “Szukaj” jest wyświetlony przy pomocy ikony przedstawiającej lupę, właściwym opisem tego obrazka jest słowo “Szukaj”, a nie “lupa”, czy też “szkło powiększające”:

Pole tekstowe i obrazek lupy użyty jako przycisk. Obok obrazka wyświetlona jest wartość jego atrybutu 'alt' ('szukaj')
Przykład prawidłowego opisu obrazka użytego w przycisku
<button><img src="ikony/lupa.jpg" alt="szukaj" /></button>

Osoba korzystąjąca z czytnika ekranu mogłaby nie zrozumieć funkcji przycisku opisanego przez czytnik ekranu jako: “przycisk ‘lupa'”.

Podobnie jest z odnośnikami; jeśli element graficzny został użyty jako link, jego alternatywny opis powinien opisywać stronę docelową, a nie to, co obrazek ten przedstawia. Na przykład, częstą praktyką jest zamieszczanie obrazka przedstawiającego logo serwisu internetowego na górze każdej strony wchodzącej w skład serwisu, i używanie tego obrazka jako odnośnika do strony głównej. Alternatywa tekstowa tego obrazka nie powinna opisywać jak obrazek ten wygląda (np. ‘fioletowy but’), tylko dokąd prowadzi zawierający go odnośnik (np. ‘Strona główna’)

Obrazki zawierające tekst

Czasami zdarza się, że element graficzny przedstawia tekst. W tym wypadku należy się upewnić, że ten sam tekst jest również zawarty w jego alternatywnym opisie.

Elementy dekoracyjne

Podstawową zasadą dotyczącą elementów graficznych, które zostały użyte wyłącznie w celach dekoracyjnych, jest to, że należy dodawać je do strony przy pomocy CSS, czyli stosując właściwość background-image, a nie element HTML <img>, np:.

<!-- HTML -->
<footer class="stopka-strony">
  <ul>
    <li>...</li>
    […]
  </ul>
</footer>

/* CSS: */ 
.stopka-strony {
  background-image: url('...');
}

Jeśli jednak z jakiegoś powodu nie jest możliwe zamieszczenie dekoracyjnej grafiki przy pomocy CSS i jest konieczne użycie elementu <img>, należy upewnić się, że atrybut “alt” tego obrazu jest pusty, np.

<footer class="stopka-strony">
  <img src="http://strona-internetowa.com/grafiki/123456789.jpg" alt="" />
  [...]
</footer>

Należy też pamiętać, że pusty atrybut “alt” to nie to samo, co jego brak. Gdy element <img> posiada pusty atrybut “alt” (alt=""), czytniki ekranu zignorują ten element. W przypadku jednak, gdy atrybut ten zostanie pominięty, czytniki ekranu spróbują zrekompensowac jego brak poprzez podanie jakiejkolwiek informacji, która może okazać się przydatna dla użytkownika. Z reguły jest to fragment ścieżki zawartej w atrybucie “src” (gdyż czasem nazwa pliku opisuje jego zawartość). I tak na przykład grafika:

<img src="http://strona-internetowa.com/grafiki/123456789.jpg" />

może zostać opisana osobom korzystającym z czytników ekranu jako “sto dwadzieścia trzy miliony, czterysta pięćdziesiąt sześć tysięcy, siedemset osiemdziesiąt dziewięć”. Trudno sobie wyobrazić, by osoby niewidome uznały tę informację za przydatną.

Podsumowanie

Elementy graficzne, takie jak zdjęcia, ikony czy też multimedia, znacznie wzbogacają serwisy internetowe, czyniąc je bardziej interesującymi wizualnie, a także pomagając pewnym grupom użytkowników szybciej odnaleźć i łatwiej zrozumieć treści zawarte na stronie. Wbrew popularnemu przekonaniu jak najbardziej można, a nawet należy stosować treści nietekstowe. Trzeba się jedynie upewnić, że używa sie w ich w sposób, który nie dyskryminuje osób nie będących w stanie ich zobaczyć.

Główne zasady stosowania prostych treści nietesktowych można podsumować następująco:

  • każdy element <img> musi posiadać atrybut “alt”
  • każdy element graficzny, który przekazuje jakąś treść, musi posiadać alternatywny opis:
    • obrazki, które nie są użyte w elementach interaktywnych, powinny posiadać tekstową alternatywę opisującą to, co obrazki te przedstawiają
    • alternatywny opis grafiki użytej w odnośniku powininen przekazywać cel tego odnośnika (stronę docelową), a nie to, co jest przedstawione na obrazku
    • alternatywny opis elementu graficznego użytego jako przycisk lub kontrolka powinnien opisywać jego funkcję
    • alternatywny opis obrazka zawierającego tekst powinnien zawierać ten sam tekst
  • elementy graficzne, które są stosowane w celach czysto dekoracyjnych, powinny być wyświetlone na stronie przy użyciu CSS (“background-image“), a nie elementu HTML (np. <img>)
  • jeśli element czysto dekoracyjny jest dodany do strony za pomocą elementu <img>, atrybut “alt” tego elementu powininen być pusty (alt=””).

W kolejnym artykule wyjaśnię, w jaki sposób należy zapewnić tekstowe alternatywy dla bardziej skomplikowanych elementów graficznych, takich jak wykresy czy infografiki.

Dodaj komentarz

Należy wypełnić wszystkie pola oznaczone asteryskiem (*).
Zanim komentarz zostanie opublikowany będzie musiał zostać zatwierdzony przez moderatora.

Możesz wykorzystać następujące elementy HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>