Tworzenie dostępnych zasobów: Obrazy i ikony

Uczynienie Twojej witryny dostępną oznacza zapewnienie, że wszyscy odwiedzający, w tym osoby z wadami wzroku, mogą w pełni korzystać z Twoich treści. W tym artykule wyjaśniono, jak używać obrazów i ikon w sposób zgodny ze standardami dostępności, dodając alternatywny tekst, używając znaczących elementów wizualnych i unikając typowych pułapek. Postępuj zgodnie z tymi najlepszymi praktykami, aby stworzyć integracyjne, przyjazne dla użytkownika zasoby dla swojej witryny lub strony docelowej.

Wymagania

• Wszystkie obrazy i ikony zawierające informacje powinny mieć alternatywny tekst opisujący zawartość obrazu lub ikony
  • Tekst alternatywny nie powinien zawierać słów identyfikujących element jako grafikę lub obraz (np. unikaj zwrotów takich jak “grafika” lub “obraz” itp.), ponieważ czytniki ekranu już określają tę rolę (np. mówiąc “grafika”, a następnie czytając tekst alternatywny).
  • Unikaj używania wielkich liter, ponieważ niektóre czytniki ekranu odczytają każdą literę
  • Wymagane dla:
    • obrazów używających <img>
    • aktywnych obrazów
    • obrazów wejściowych formularzy
    • SVG przy użyciu <img>
    • SVG przy użyciu <SVG>
    • Kanwa HTML5
    • czcionki ikon
• Opisy tekstu alternatywnego powinny zapewniać kontekst dla użytkownika i muszą być znaczące
  • Obraz/ikona łącza powinien opisywać miejsce docelowe łącza.
  • Obraz/ikona linków do przycisków/kontrolek powinna opisywać cel przycisku lub kontrolki i/lub wynikającą z niego akcję.
  • Długość tekstu alternatywnego dla obrazów/ikon informacyjnych powinna być zwięzła (nie więcej niż 250 znaków)
• Tekst alternatywny powinien być zlokalizowany zgodnie z językiem używanym na stronie.
• Nie używaj tekstu w obrazach, jeśli możesz zamiast tego użyć prawdziwego tekstu, chyba że jest to niezbędne (np. logo) lub potrzebujesz określonych czcionek, rozmiarów, kolorów lub tła.
• Jeśli konieczne jest użycie obrazu tekstu, postępuj zgodnie z wytycznymi dotyczącymi kolorów i kontrastu.
• Jeśli obraz tła zawiera przydatne informacje, należy dodać tekst alternatywny (np. za pomocą zwykłego widocznego tekstu, dodając role="image" i aria-label lub w inny sposób).
• Jeśli nad obrazem znajduje się tekst, przetestuj kontrast nakładającego się tekstu z co najmniej 8 kolorami z obrazu.
• Zapewnij elementy sterujące (przyciski pauzy, strzałki) dla treści, które uruchamiają się automatycznie, takich jak: karuzele, suwaki obrazów i filmy w tle.
• Nie uruchamiaj karuzeli automatycznie.
• Nie używaj przycisków-duchów nad obrazami (przyciski bez tła lub konturu).
• Żadna zawartość nie powinna migać więcej niż trzy razy na sekundę.
• Obiekty graficzne, takie jak samodzielna ikona, wykres lub obraz, muszą mieć minimalny kontrast 3:1 między elementem a jego tłem.
• Ikony używane na wielu stronach muszą mieć to samo znaczenie i funkcjonalność.
• Jeśli używamy konkretnej ikony do zainicjowania akcji (np. strzałki w dół do rozwijania lub akordeonu/rozwijania), nie używamy jej dekoracyjnie na innej stronie.

Wyjątki

Dekoracyjne lub zbędne obrazy lub ikony

Gdy obrazy nie służą celom treści, są czysto dekoracyjne lub powielają informacje już przekazane w tekście, zaleca się przypisanie im zerowego (pustego) tekstu alternatywnego(alt="), oznaczenie ich za pomocą ARIA role="presentation" lub zaimplementowanie ich jako tła CSS.

Dekoracyjne lub zbędne obrazy tła

Nie nadawaj tekstu alternatywnego dla obrazów tła, które nie są ważne i nie niosą informacji dla użytkownika.

Przykłady

	TAK: Tekst w alt zapewnia kontekst i informacje: “dojrzała kobieta pracująca na laptopie, ubrana w strój biurowy i uśmiechnięta, stojąca na białym tle”. NIE: Opis nie jest wystarczająco szczegółowy: “dojrzała kobieta”.
	Ikona jest nośnikiem informacji i jest ważna dla użytkownika. Tekst w alt: “ikona facebook”, “ikona Instagram”, “ikona Pinterest”.
	Na stronie znajduje się sześć opisów z ikoną ilustracyjną. Obrazy te są obrazami dekoracyjnymi. Ustawiamy to poprzez dodanie pustego atrybutu alt: <img src="filename.png" alt="">. Technologie wspomagające, takie jak czytnik ekranu, zignorują obraz. Bez pustego atrybutu alt, czytnik ekranu może odczytać nazwę pliku, co nie ma sensu i dezorientuje użytkownika.
	W tym przykładzie logo służy dwóm celom: poinformowaniu użytkowników, na której stronie znajduje się użytkownik i zapewnieniu linku do strony głównej. TAK: Opisz obraz i jego rolę, np. używając aria-label-"Strona główna GetResponse".