Dzień 23: Odpowiedniki tekstowe dla obrazków

To jest najważniejszy dzień z całej serii, więc proszę o uwagę:

Każdy obrazek na każdej stronie Twojego serwisu powinien mieć odpowiednik tekstowy, tekst alternatywny, określony przez arybut alt w tagu <img>.

Program udźwiękawiający czyta ten tekst, przeglądarka tekstowa pokazuje go zamiast grafiki, Google go indeksuje, a przeglądarka graficzna może go pokazać jako podpowiedź czy dodatkowy opis obrazka. Widzieliśmy już jak określić pusty atrybut alt dla obrazków pozycjonujących oraz poznaliśmy kilka sposobów na tworzenie dostępnych list z wypunktowaniem. Co jeszcze zostało?

  • Ikony linków do wpisów
  • Ikony "Powered by"
  • Ikony "Mail-to"
  • Różne małe obrazki, które dajesz w treści swoich wpisów, np. emotikony
  • Wszelkie inne obrazki jakie umieszczasz na stronie

Wszystkie one potrzebują odpowiedniego tekstu alternatywnego w atrybucie alt.

Kto na tym skorzysta?

  1. Jadzia, ponieważ JAWS czyta tekst z atrybutu alt. Jeśli nie podasz tekstu alternatywnego, Jadzia słyszy nazwę pliku obrazka, co brzmi okropnie.
  2. Marek skorzysta. Lynx, jako przeglądarka tekstowa, nie pokazuje żadnej grafiki, tylko w miejsce obrazków wstawia tekst z atrybutu alt. Jeżeli nie ma tekstu alt, Lynx pokazuje nazwę pliku obrazka, co wygląda równie źle jak to co czyta JAWS.
  3. Michał skorzysta. Links, jako przeglądarka tekstowa, nie pokazuje żadnej grafiki, tylko w miejsce obrazków wstawia tekst z atrybutu alt. Jeżeli nie ma tekstu alt, Links nie pokazuje nic, chyba że obrazek jest linkiem, wtedy pokazuje po prostu "[IMG]". Kiedy Michał używa Opery i wyłączy pobieranie obrazków, widzi tekst z alt w miejscu, w którym byłaby grafika.
  4. Julia skorzysta. Internet Explorer pokazuje tekst alt jako tooltip (chociaż można to zablokować).
  5. Google indeksuje teksty alternatywne dla obrazków i używa ich nie tylko do znajdywania słów kluczowych podczas normalnego wyszukiwania, ale również podczas wyszukiwania grafiki. (A myślałeś, że niby jak to działa? Przecież Google nie widzi tej grafiki.)

Jak to zrobić?

  • Standardowe szablony blog.pl na stronie głównej i stronie archiwum zawierają ikonkę "blog.pl". Niestety nie ma ona zdefiniowanego atrybutu alt - należy wiec go uzupełnić:

    <img src="http://www.blog.pl/img/blog_ikonka.gif" width="40" height="12" border="0" alt="blog.pl">

    Jeżeli w użytym przez Ciebie szablonie są jakieś inne grafiki czy ikonki, to też sprawdź, czy mają zdefiniowany sensowny (lub pusty w przypadku obrazków pozycjonujących) tekst alternatywny.

  • Domyślne szablony Movable Type nie zawierają obrazków. Jednak jeżeli używasz grafiki "Powered by Movable Type", upewnij się, że tag <img> posiada atrybut alt="Powered by Movable Type".

  • Domyślny szablon Greymatter zawiera tylko jeden obrazek, generowany przez makro {{gmicon}}. Wstawia ono na stronie tag <img>, który zawiera już odpowiedni atrybut alt - "Powered by Greymatter".

  • Radio automatycznie generuje odpowiednie teksty alternatywne dla standardowych ikon:

    • kubek XML: alt="Subscribe to <site name> in Radio UserLand."
    • ikona XML: alt="Click to see the XML version of this web page."
    • ikona poczty: alt="Click here to send an email to the editor of this weblog."

    Jak widać są to teksty w języku angielskim, ale jeśli zechcesz, możesz je przetłumaczyć na polski:

    1. Otwórz właściwą aplikację Radio klikając prawym klawiszem myszy ikonkę Radio w trayu i wybierając "Open Radio".

    2. W menu "Tools" wybierz "Developers", "Jump..." (Control+J) i przejdź do "radio.macros.xmlCoffeeMug" (bez cudzysłowu).

    3. Zlokalizuj linie:

      local (img = radio.macros.imageref ("/system/images/icons/xmlCoffeeCup.gif", alt:"Subscribe to "" + title + "" in Radio UserLand."))
      return ("<a href=\"" + url + "\" title=\"Click on the XML coffee mug to subscribe to "" + title + "" in Radio UserLand.\">" + img + "</a>")

      i zamień je na:

      local (img = radio.macros.imageref ("/system/images/icons/xmlCoffeeCup.gif", alt:"Subskrybuj "" + title + "" w Radio UserLand."))
      return ("<a href=\"" + url + "\" title=\"Kliknij na kubek aby zasubskrybować "" + title + "" w Radio UserLand.\">" + img + "</a>")

      Wciśnij klawisz Compile i zamknij okno.

    4. W menu "Tools" wybierz "Developers", "Jump..." (Control+J) i przejdź do "radio.macros.mailto" (bez cudzysłowu).

    5. Zlokalizuj linię:

      local (tooltip = "Click here to send an email to the editor of this weblog.")

      i zamień ją na:

      local (tooltip = "Wyślij e-mail do autora tego bloga.")

      Wciśnij klawisz "Compile" i zamknij okno.

    Zmiany odniosą skutek od następnej publikacji strony.

    Natomiast dla pozostałych, niestandardowych obrazków atrybut alt można określić za pomocą menu dostępnego z lokalnej strony bloga. Przejdź do Prefs, następnie Customized Images (w sekcji Templates) i dodaj atrybuty alt:

    • Day-level permalink: alt="Link bezpośredni: <%longDate%>".
    • Item-level permalink: alt="Link bezpośredni".
    • Source link icon: alt="źródło".
    • Enclosure link icon: alt="załącznik".

Oczywiście, niezależnie od stosowanego narzędzia publikacji, jeżeli dodajesz własne obrazki do szablonów to również powinieneś im uzupełnić atrybut alt.

Oprócz określania tekstu alternatywnego możesz również dodać title="", co spowoduje, że w przeglądarkach graficznych nie będzie pokazywany tooltip.

Przykłady złych tekstów alt

  • Dowolny kod HTML. Atrybut alt może zawierać tylko czysty tekst, bez innych tagów.
  • alt="filename.jpg". To nic nie daje. Dalej nie wiadomo co prezentuje dana grafika lub jaka jest jej funkcja. Kogo obchodzi jak się nazywa plik?
  • alt="alt text". Wstawiane przez niektóre edytory HTML jako przypomnienie, że to należy uzupełnić, i zostawione przez nieuważnych autorów.
  • alt="Kliknij tutaj!". To nie daje żadnej użytecznej informacji (chyba, że ten obrazek faktycznie przedstawia tekst "Kliknij tutaj!").
  • alt="Włącz obrazki!". To tak jakby na pytanie niewidomej osoby o to, która jest godzina, odpowiadać "Zobacz sobie!". Pokazywanie obrazków może być wyłączone specjalnie (niska przepustowość łączy Michała), mogą być w ogóle niedostępne (przeglądarka tekstowa Marka), albo nawet mogą wcale nie być wyłączone (program udźwiękawiający Jadzi odczytuje tekst alt, mimo że obrazki są pokazane na ekranie).
  • Więcej przykładów złych tekstów alt (Strona w języku angielskim)

Przykłady dobrych tekstów alt

  • Dave na swoim blogu umieścił obrazki służące jako nagłówki zapisane ozdobną czcionką. Każdy z nich ma tekst alternatywny oddający dokładnie treść zawartą na obrazku, np. alt="Dave Daily", alt="piszę od czasu do czasu".
  • Szymon Boniecki na swoim blogu umieścił "batony", z których każdy ma poprawny tekst alternatywny oddający zawartość grafiki.
  • Jonathon Delacour w nagłówku strony ma graficzny symbol chiński. Tekst alternatywny opisuje treść obrazka: alt="Site logo: xin, the Chinese character for heart". (Strona w języku angielskim)

Zobacz także (strony w języku angielskim)

 
<< Dzień 22: Używanie prawdziwych list (albo dobrze udawanych) | Spis treści | Dzień 24: Odpowiedniki tekstowe dla map graficznych >>