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?
- 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]
- 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ć?
Nie definiuj alt=" "
. Atrybut alt
powinien być pustym tekstem, nie spacją.
Nie określaj atrybutu alt
dla taga <body>
, nawet jeśli zawiera on obrazek tła, np. tak:
<body background="
">
Grafika w tle jest zawsze ignorowana przez niegraficzne przeglądarki.
Nie określaj atrybutu alt dla taga <td>
, nawet jeśli zawiera on obrazek tła tabeli, np.:
<td background="
">
Grafika w tle tabel jest także ignorowana przez przeglądarki niegraficzne.
Zobacz także
- WebAIM: How to Create Accessible Graphics : Provide text alternatives for all images opisuje potrzebę stosowania tekstów alternatywnych dla obrazków na stronach internetowych. (Strona w języku angielskim)
Zmodyfikowano: 12.08.2005, 13:01