Obrazy funkcjonalne
Brakujące lub puste wartości alt powodują znaczące problemy dla użytkowników czytników ekranu, ponieważ funkcjonalne obrazy są niezbędne do funkcjonalności treści. Czytniki ekranu zazwyczaj publikują nazwę pliku obrazu, adres URL obrazu lub adres URL miejsca docelowego linku, co prawdopodobnie nie pomoże użytkownikom zrozumieć działania, które zostanie zainicjowane przez obraz.
Podejście 1: Obraz używany samodzielnie jako połączone logo
Poniższy obraz jest jedyną treścią linku prowadzącego do strony głównej W3C. Ma alternatywny tekst "W3C home", aby wskazać miejsce, do którego link przeniesie użytkownika. Następny przykład: "Wizerunek grafiki w obrębie tekstu linku" opisuje, co zrobić, gdy w linku znajduje się więcej tekstu w celu zidentyfikowania miejsca docelowego:PRZYKŁAD:
FRAGMENT KODU:
<a href= "https://www.w3.org/" > <img src= "w3c.png" alt= "W3C home" > </a>
Uwaga 1: W tej sytuacji logo jest również obrazem tekstu "W3C", ale w tym przypadku jego podstawową funkcją jest link do strony głównej, więc do alternatywnego tekstu dodano słowo "home".
Uwaga 2: Obrazy używane jako logo są zwolnione z niektórych wymagań dotyczących dostępności, które mają zastosowanie do innych obrazów tekstu, na przykład nie ma minimalnych wymagań dotyczących kontrastu kolorów i rozmiaru tekstu.
Podejście 2: Obraz logo w tekście linku
W tym przykładzie logo W3C jest używane w celu uzupełnienia tekstu wewnątrz linku prowadzącego do strony głównej W3C. Obraz nie reprezentuje innej funkcjonalności ani nie przekazuje innych informacji niż ta, która została już podana w tekście linku, więc jest stosowana pusta wartość ( alt="" ), aby uniknąć nadmiarowości i powtarzania. W efekcie obraz jest ozdobnym dodatkiem lub wizualnym wskazówką do tekstu linku:PRZYKŁAD:
Strona główna W3C
FRAGMENT KODU:
<a href= "https://www.w3.org/" > <img src= "w3c.png" alt= "" > W3C home </a>
Podejście 3: Ikona przekazująca informację w tekście linku
W tym przykładzie obraz podąża za tekstem w obrębie linku, aby poinformować użytkowników, że link zostanie otwarty w nowym oknie. Ma on tekst alternatywny "nowe okno" do przekazania znaczenia ikony:PRZYKŁAD:
Strona główna W3C
FRAGMENT KODU:
<a href= "https://www.w3.org/" target= "_blank" > W3C Homepage <img src= "new-window.png" alt= "new window" > </a>
Uwaga: Ta technika jest często używana z ikonami do wskazywania różnych formatów plików, takich jak AVI, ODF, MP3, PDF, Word i wiele innych. W takim przypadku alternatywa tekstowa powinna również przekazać format reprezentowany przez każdą ikonę, patrz Obrazy informacyjne.
Podejście 4: Autonomiczny obraz ikonki, który posiada funkcję
Poniższy obraz to ikona reprezentująca drukarkę w celu oznaczenia funkcji drukowania. Ma on tekst alternatywny "Wydrukuj tę stronę", ponieważ jego celem jest uaktywnienie okna dialogowego drukowania, gdy jest zaznaczone:PRZYKŁAD:
FRAGMENT KODU:
<a href= "javascript:print()" > <img src= "print.png" alt= "Wydrukuj tę stronę" > </a>
Podejście 5: Obraz używany w przycisku
Poniższy obraz służy do nadania przyciskowi osobnego stylu. W tym przypadku jest to przycisk uruchamiający żądanie wyszukiwania i jest ikoną reprezentującą lupę. Alternatywą tekstową jest "wyszukiwanie" w celu przekazania celu przycisku:PRZYKŁAD:
Szukaj:
FRAGMENT KODU:
<input type="image" src="searchbutton.png" alt="Szukaj" >
Powiązane zasoby WCAG 2.0
Te samouczki zapewniają najlepsze praktyczne wskazówki dotyczące wdrażania dostępności w różnych sytuacjach. Na tej stronie zostały połączone następujące kryteria sukcesu WCAG 2.0 i techniki z różnych poziomów zgodności:
Techniki:
- H36: używanie atrybutów alt na obrazkach używanych jako przyciski akcji
- H37: używanie atrybutów alt w elementach img
Dalej: Obrazy tekstu
Na podstawie:
https://www.w3.org/WAI/tutorials/images/functional/
