Dostępność cyfrowa

Odpowiednia alternatywa tekstowa dla elementów graficznych sprawia, że informacje przekazywane za pomocą, na przykład zdjęć, grafik, wykresów, są dostępne dla osób, które korzystają z czytników ekranu. 

Proste elementy graficzne

Elementy graficzne w HTML najczęściej tworzy się za pomocą znacznika <img>. Wtedy tekst alternatywny dodaj za pomocą atrybutu alt, w formie zwięzłego opisu informacji, które przekazuje element graficzny. Na przykład:

<img src="zdjecie1.png" alt="Dwie starsze kobiety siedzą na ławce w jesiennym parku i rozmawiają.">

Złożone elementy graficzne

W złożonych elementach graficznych, oprócz atrybutu alt, może być potrzebny dodatkowy, dokładniejszy opis. Opis połącz z grafiką w sposób zrozumiały dla użytkownika. Pod elementem graficznym możesz go zamieścić w formie na przykład:

• linku, który prowadzi do oddzielnej strony z tym szczegółowym opisem — połączenie w kodzie elementu graficznego z opisem można zrobić poprzez zgrupowanie (role=”group”) w ramach <figure> zarówno samego <img> jak i <figcaption>, który zawiera link do opisu;
• tekstu poszerzonego opisu — połączenie w kodzie tych elementów można zrobić za pomocą <figure> <figcaption> i role=”group” lub poprzez aria-describedby.

Dekoracyjne elementy graficzne

Nie przekazują żadnych informacji. Czytniki ekranu powinny je ignorować. Możesz to osiągnąć, gdy:

• wprowadzisz dekoracyjne elementy graficzne za pomocą obrazów tła (background-image) w arkuszach stylów (CSS) albo
• dodasz pusty atrybut alt (alt="") do elementu <img>. Brak w takiej sytuacji atrybutu alt jest błędem, bo czytnik ekranu, zamiast zignorować element graficzny, poda nazwę pliku obrazu.