Good Mood

Page Content

terminologia

istnieje kilka terminów, które są powszechnie używane do opisu tekstu alt. Mogą być używane w różnych kontekstach, nawet w ramach tej strony internetowej.,

• tekst altowy – pojęcie polegające na dodaniu tekstu przyjaznego czytelnikowi tekstu alternatywnego opisu obrazu. Można to zaimplementować w różny sposób w różnych typach dokumentów.
• atrybut ALT (HTML) – w HTML tekst ALT jest wstawiany do atrybutu ALT w znaczniku IMG.
• ALT „Tag” – skrócone odniesienie do atrybutu ALT.

Demo tekstu ALT

cel

tekst ALT dodaje opis tekstowy do obrazu na stronie internetowej i powinien być używany dla wszystkich obrazów, punktorów graficznych i graficznych reguł poziomych.,

tekst alternatywny jest dostępny dla użytkowników czytnika ekranu, aby zapewnić im tekstowy odpowiednik obrazów. W przeglądarkach wizualnych, takich jak Firefox, tekst alternatywny jest wyświetlany, gdy obraz jest uszkodzony lub gdy wszystkie obrazy zostały wyłączone.

wytyczne WCAG

wytyczne WCAG 2.0 1.1.1.- „Wszystkie treści nietekstowe, które są prezentowane użytkownikowi, mają alternatywę tekstową, która służy równoważnemu celowi.”

przykłady przycisków obrazków

,
uwaga: każdy tekst użyty w obrazie powinien być zgodny z wytycznymi dotyczącymi czytelności i kontrastu.

wyjście czytnika ekranu z tagiem alt

jeśli obrazy nie zostaną załadowane, tekst alt pokaże, co obrazy byłyby napisane w przeglądarce, takiej jak Firefox.

wyjście czytnika ekranu bez znacznika ALT

bez tekstu ALT, nikt nie może wiedzieć, jaka byłaby zawartość obrazu.

implementacja atrybutu alt

poniżej przedstawiamy kilka przykładów implementacji tekstu Alt w zależności od kontekstu.

George Washington Painting

Wyświetl kod

zaimplementuj tekst ALT jako atrybut w znaczniku IMG. Zobacz przykład poniżej.

Uwaga: zalecana długość tekstu ALT wynosi około 125 znaków. W ten sposób mieści się pole tekstowe JAWS screen reader ALT. Nie jest to jednak zgodne z wytycznymi WCAG.

podpisy do obrazów a tekst ALT

wszelkie informacje o obrazie, takie jak informacje o prawach autorskich, źródło obrazu lub dodatkowe informacje, powinny być umieszczane w tekście podpisu pod obrazem, a nie w tekście ALT. Zobacz przykład poniżej.

podpis: Obraz „Washington and Lafayette at Valley Forge” autorstwa Johna Warda Dunsmore ' a z 1907 roku. Zdjęcie dzięki uprzejmości Biblioteki Kongresu.,

logotypy

w przypadku logotypów, szczególnie logotypów, które się powtarzają, wystarczy określić, które to logo, niekoniecznie w pełni je opisać

niewłaściwe użycie tekstu ALT

nie powinno być używane do:

• wprowadzania tekstu podpowiedzi,
• podawania informacji o prawach autorskich lub źródłowych o obrazie lub
• przekazywania dodatkowych informacji o grafice.,
• wprowadź wyszukiwane hasła(można to zrobić poprzez dobre wykorzystanie nagłówków).

pusty tekst Alt dla obrazów dekoracyjnych

niektóre obrazy są używane wyłącznie do celów układu lub do ulepszania treści dla obserwowanych użytkowników i nie dostarczają treści.

znacznik ALT dla tych obrazów może być pusty ( <alt= „” > lub <alt=” „>), aby czytniki ekranu całkowicie je ignorowały.,

poniższy przykład wykorzysta przykładowy obraz paska narzędzi rainbow, a następnie kilka dostępnych i niedostępnych przykładów kodu.

pasek narzędzi Rainbow

Załóżmy, że strona internetowa została zaprojektowana z paskiem narzędzi rainbow służącym do oddzielania fragmentów tekstu.

Uwaga: atrybut ALT ze znakiem spacji jest uważany za mniej poprawny, ale może być jedyną opcją dozwoloną w niektórych systemach zarządzania treścią.

zwięzły tekst Alt

Jeśli opis tekstowy jest już dostępny dla obrazu w głównym tekście strony, znacznik ALT może po prostu dostarczyć podsumowanie obrazu, a nie Pełny opis.,

Zobacz złożone obrazy, aby znaleźć przykłady, jak można to wykorzystać w różnych sytuacjach.

przykładowy tekst z obrazkiem

Poniżej znajduje się obraz cząsteczki tłuszczów nasyconych z 18 cząsteczkami węgla. Zauważ, że pojedyncze wiązania między pierwiastkami sprawiają, że łańcuch węglowy jest stosunkowo prosty.,

linki do rozszerzonych opisów

w niektórych przypadkach może być konieczne dodanie linku do rozszerzonego opisu obrazu, szczególnie w przypadkach, gdy obrazy są używane do przekazywania istotnych treści. Można to osiągnąć na kilka sposobów—w tym tag LONGDESC, D-link lub bardziej jawny link do dłuższego opisu. Poniżej znajdują się przykłady

Link do tekstu podpisu

Jeśli informacje są krytyczne, najlepszym rozwiązaniem może być jawny link do podpisu. Ta metoda zapewnia najczystszą wskazówkę, że dostępny jest dłuższy opis.,

wyświetl rozszerzony opis tekstu

d-links

niektórzy eksperci opowiadają się za użyciem D-link do sygnalizowania obecności rozszerzonego opisu tekstu. Jednak niektórzy użytkownicy mogą nie być świadomi konwencji. Ta metoda jest najlepiej stosowana do dostarczania informacji, które są czysto uzupełniające.

D

Longdesc atrybut

jest to atrybut ukryty w przeglądarkach wizualnych, ale rozpoznawany przez niektóre czytniki ekranu. LONGDESC jest najlepszy do zapewnienia dodatkowych szczegółów, które zwiększa zawartość, ale nie jest krytyczna., Należy zauważyć, że LONGDESC ma niepełne wsparcie zarówno wśród przeglądarek wizualnych i czytników ekranu, i jest przestarzały w HTML5.

linki i przyciski

w przypadku obrazów używanych jako elementy nawigacyjne do uruchamiania funkcji, takich jak drukowanie, przesyłanie lub zapisywanie, tekst alternatywny powinien opisywać miejsce docelowe lub funkcję, a nie Obraz.

Clickable vs.Non-Clickable Penn State Shield

gdy na stronie internetowej używana jest tarcza Penn State, używany tekst ALT zależy od tego, czy jest klikalny (np. linki do strony głównej Penn State), czy nie.,

Jeśli obraz tarczy stanu Penn jest używany do zapewnienia klikalnego łącza do strony głównej, tekst ALT powinien wskazywać miejsce docelowe (tj. ALT=”Strona główna stanu Penn”) należy pamiętać, że znacznik IMG jest osadzony w znaczniku a dla łącza.

Uwaga: Jeśli tarcza nie jest klikalna, wtedy alternatywnym tekstem może być „Penn State” lub „Penn State shield”.

atrybut TITLE dla podpowiedzi

atrybut TITLE tekstu IMG może być użyty do wygenerowania podpowiedzi dla obserwowanych użytkowników. Ale proszę o tym pamiętać.,

• atrybut TITLE nie jest domyślnie odczytywany na głos w większości czytników ekranu.
• tekst alternatywny nie jest zwykle wyświetlany jako wskazówka narzędziowa w większości przeglądarek.

Jeśli potrzebna jest podpowiedź dla obserwowanych użytkowników, można użyć zarówno atrybutu TITLE, jak i ALT z tymi samymi informacjami, aby zapewnić, że te same informacje są dostarczane obu odbiorcom.

patrz poniższy przykład

przycisk Ulubione serce z podpowiedzią

rozważ wersję poniższego obrazu serca, która może być używana w interfejsie do wybierania ulubionych elementów (np. ulubionych piosenek lub e-booków).,

zarówno tekst ALT, jak i atrybut TITLE są „ulubione”

zobacz kod