Dzień 21: Ignorowanie obrazków pozycjonujących

Wielu autorów stron internetowych używa przezroczystych obrazków do precyzyjnego wpływania na układ strony w przeglądarkach graficznych. Możesz ich używać do woli, pod warunkiem, że dla każdego podasz pusty opis (atrybut alt), aby przeglądarki niegraficzne wiedziały, że mają ten obrazek zignorować.

Kto na tym skorzysta?

  1. Marek skorzysta. Domyślnie Lynx pokazuje nazwę pliku dla każdego obrazka, który nie ma zdefiniowanego atrybutu alt. Jeżeli Twoja strona zawiera przezroczyste obrazki służące do wprowadzenia odstępu, spozycjonowania tytułu itp., to Ty ich nie widzisz w swojej przeglądarce graficznej, ale Marek zobaczy np. coś takiego:

    [shim.gif] [shim.gif]
[shim.gif]
[shim.gif]
Witam na mojej stronie
[ciblueHeader2.gif]
[ciblueCurve2.gif]

  2. Jadzia skorzysta. Domyślnie JAWS czyta nazwy plików wszystkich obrazków, które nie mają zdefiniowanego atrybutu alt. Jeśli uważasz, że Marek mógłby się zirytować, wyobraź sobie jak frustrujące jest dla Jadzi słuchanie czegoś takiego:

    graphic shim dot gif graphic shim dot gif graphic shim dot gif graphic shim dot gif witam na mojej stronie graphic c i blue header two dot gif graphic c i blue curve two dot gif

    Jeśli spróbujesz się przedstawiać w taki sposób w normalnym życiu, to nikt nawet nie zechce z Tobą gadać.

Jak to zrobić?

Użytkownicy systemu Radio mogą odpocząć. Radio automatycznie generuje puste atrybuty alt dla wszystkich obrazków pozycjonujących. Jeżeli jednak w kodzie swojej strony nie widzisz alt="" dla tych obrazków, uaktualnij Radio.root i opublikuj stronę ponownie.

Użytkownicy innych narzędzi powinni sprawdzić wszystkie szablony w poszukiwaniu tagów <img> z nazwami plików w stylu "spacer.gif", "shim.gif", "1.gif" itp., albo obrazków występujących w szablonie wielokrotnie i za każdym razem z innymi wartościami atrybutów width i height.

Przykładowo, dla każdego obrazka opisanego tak:

<img src="spacer.gif" width="1" height="10">

uzupełnij kod następująco:

<img src="spacer.gif" alt="" width="1" height="10">

Jeżeli używasz tego samego obrazka wiele razy na stronie, to prawdopodobnie najłatwiej jest zrobić to przez globalną zamianę wszystkich wystąpień np. tekstu src="spacer.gif" na src="spacer.gif" alt="".

Czego nie robić?

  1. Nie definiuj alt=" ". Atrybut alt powinien być pustym tekstem, nie spacją.

  2. Nie określaj atrybutu alt dla taga <body>, nawet jeśli zawiera on obrazek tła, np. tak:

    <body background="http://url/to/image.gif">

    Grafika w tle jest zawsze ignorowana przez niegraficzne przeglądarki.

  3. Nie określaj atrybutu alt dla taga <td>, nawet jeśli zawiera on obrazek tła tabeli, np.:

    <td background="http://url/to/image.gif">

    Grafika w tle tabel jest także ignorowana przez przeglądarki niegraficzne.

Zobacz także

 
<< Dzień 20: Tworzenie streszczenia dla tabel | Spis treści | Dzień 22: Używanie prawdziwych list (albo dobrze udawanych) >>