Jesteś tutaj:Strona główna / WCAG 2.0 Zasada 1: Percepcja / Wytyczna 1.4 Treść rozróżnialna / 1.4.5 Grafiki tekstowe (AA)

1.4.5 Grafiki tekstowe (AA) - WCAG 2.0

Nie należy używać grafiki, aby przedstawić tekst, jeśli ta sama prezentacja wizualna może być zaprezentowana jedynie przy użyciu tekstu.

Wyjątkiem jest tekst, który jest częścią logo lub nazwy własnej produktu.

Przykład niepoprawnego użycia:

CSS
#tel {
 display:block;
 width:200px;
 height:50px;
 background:url("nr_tel.jpg") top left no-repeat; 
}

HTML
<div id="tel"></div>

W powyższym przykładzie warstwa o identyfikatorze “tel”  jest elementem blokowym o ustalonej szerokości i wysokości oraz ustawionym tle „nr_tel.jpg”, na którym ładną czcionką napisany jest numer telefonu. Program czytający nie odczyta numeru telefonu, ponieważ nie ma go w kodzie HTML pod żadną postacią. Jeśli wyłączymy style, również nie zobaczymy numeru. Roboty wyszukiwarek go nie zarejestrują.

Jeśli już musimy zamieścić ważną informację w grafice, np. powyższy numer telefonu, możemy zastosować poniższe rozwiązanie (Uwaga: w tym rozwiązaniu nie używa się plików z przezroczystością).

Przykład:

CSS
#tel {
 position:relative;
 width:200px;
 height:50px;
 overflow:hidden;
}

#tel span {
 display:block;
 position:absolute;
 left:0;
 top:0;
 z-index:1;
 width:100%;
 height:100%;
 background:url("nr_tel.jpg") top left no-repeat;
}

HTML
<div id="tel"><span></span>Nasz numer telefonu: +48 34 111 11 11</div>

Powrót do: Wytyczna 1.4 Treść rozróżnialna