Lekcja 18. Dostępność

Cztery atrybuty i dwie decyzje

SVG może być najbardziej dostępnym formatem graficznym w webie albo całkowicie niemym. Różnica to kilka linijek — i jedno pytanie, które trzeba sobie zadać przed ich napisaniem.

Pytanie brzmi: czy ta grafika coś znaczy?

Trzy rodzaje grafik

Dekoracyjna. Ozdobnik, tło, ikona stojąca obok napisu, który mówi dokładnie to samo. Czytnik ekranu ma ją pominąć, bo odczytanie „gwiazdka Ulubione" dwa razy pod rząd tylko przeszkadza.

html

<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">

aria-hidden usuwa grafikę z drzewa dostępności. focusable="false" wyłącza ją z nawigacji klawiaturą — pochodzi z czasów starych przeglądarek, ale nadal nie szkodzi.

Informacyjna. Niesie treść, której nie ma nigdzie indziej: wykres, mapa, ikona bez podpisu, diagram. Musi mieć nazwę dostępną.

Interaktywna. Można w nią kliknąć. To osobna historia i wrócę do niej za chwilę, bo tu popełnia się najwięcej błędów.

Nazwa dostępna

html

<svg role="img" aria-labelledby="tytul opis" viewBox="0 0 120 120">
  <title id="tytul">Ulubione</title>
  <desc id="opis">Gwiazdka oznaczająca element dodany do listy</desc>
  <path d="..."/>
</svg>

Cztery elementy tej układanki:

role="img" mówi technologiom asystującym, żeby traktowały całość jak jeden obrazek, a nie zbiór ścieżek. Bez tego czytnik potrafi zapowiedzieć zawartość element po elemencie.

<title> to krótka nazwa. Musi być pierwszym dzieckiem znacznika svg — postawiony niżej bywa ignorowany.

<desc> to dłuższy opis, dla grafik, których jedno zdanie nie wyczerpuje.

aria-labelledby wiąże jedno z drugim, wskazując identyfikatory. Samo <title> bywa odczytywane, ale wsparcie jest nierówne — z aria-labelledby jest przewidywalnie.

Najedź myszą na gwiazdkę w podglądzie. Dymek, który się pojawia, to zawartość <title> — przeglądarka renderuje ją natywnie. To dobra ilustracja tego, że <title> jest treścią, a nie komentarzem. Przełącz nazwę, a dymek zmieni się razem z nią.

Właśnie dlatego <title> i <desc> nie są metadanymi do wycięcia przez optymalizator, o czym była mowa w poprzedniej lekcji.

Gdy SVG jest w <img>

Wtedy jest łatwiej, bo obowiązują zwykłe zasady obrazków:

html

<img src="wykres.svg" alt="Sprzedaż wzrosła o 12% w trzecim kwartale">
<img src="ozdobnik.svg" alt="">

Puste alt oznacza „to jest dekoracja, pomiń" i jest czymś zupełnie innym niż brak atrybutu. Brakujący alt sprawia, że czytnik odczyta nazwę pliku, a ozdobnik-final-v3.svg nikomu nie pomaga.

Warto też zauważyć, że dobry alt dla wykresu opisuje wniosek, a nie wygląd. „Wykres słupkowy z czterema kolumnami" nie mówi nic. „Sprzedaż wzrosła o 12%" mówi wszystko.

Grafika klikalna

Tu jest najczęstszy błąd i wart osobnego akapitu.

Kuszące jest powieszenie onclick na samym SVG. Nie rób tego. Taki element nie jest osiągalny klawiszem Tab, nie reaguje na Enter ani spację, nie ma stanu skupienia i nie zapowiada się jako przycisk.

Właściwe rozwiązanie jest prostsze:

html

<button type="button" class="przycisk-ikona">
  <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
    <path d="..."/>
  </svg>
  <span class="tylko-dla-czytnika">Dodaj do ulubionych</span>
</button>

Prawdziwy <button> daje za darmo fokus, obsługę klawiatury i właściwą rolę. Ikona w środku jest dekoracyjna, bo nazwę niesie tekst — ukryty wizualnie, ale obecny w drzewie dostępności.

Jeśli tekstu nie chcesz w ogóle, wystarczy aria-label na przycisku. Zasada zostaje ta sama: interaktywny jest przycisk, nie grafika.

Kolor i kontrast

Dwie rzeczy, o których łatwo zapomnieć przy ikonach i wykresach.

Grafika niosąca znaczenie potrzebuje kontrastu co najmniej 3:1 wobec tła. To mniej niż wymagane 4.5:1 dla tekstu, ale wciąż więcej, niż wychodzi przy jasnych, pastelowych ikonach na białym tle.

Zjedź suwakiem w stronę koloru ikony. Moment, w którym przestajesz ją pewnie rozpoznawać, jest mniej więcej tam, gdzie kończy się zgodność z wytycznymi — a Ty patrzysz na nią na dobrym ekranie, w dobrym świetle.

Kolor nie może być jedynym nośnikiem informacji. Wykres, w którym serie różnią się wyłącznie barwą, jest nieczytelny dla części odbiorców. Dołóż wzór kreskowania, inny kształt punktu albo podpis przy linii — SVG daje do tego wszystkie narzędzia z tego kursu.

Rzeczy z poprzednich lekcji, które wracają

Tekst zamieniony na krzywe przestaje istnieć dla czytnika ekranu. Jeśli musisz go zamienić, treść musi wrócić w <title>albo w aria-label.

Ruch potrafi szkodzić. prefers-reduced-motion z lekcji dwunastej to ta sama rodzina zagadnień — dla części odbiorców to warunek korzystania ze strony, nie preferencja.

Optymalizator nie odróżnia metadanych od dostępności. Sprawdź wynik, zanim wgrasz plik.

Jak to sprawdzić

Trzy szybkie testy, które wyłapują większość problemów:

1. Tab przez stronę. Czy da się dojść do wszystkich klikalnych grafik i czy widać, na czym stoi fokus?
2. Inspektor drzewa dostępności w narzędziach deweloperskich. Każda grafika ma tam nazwę i rolę — sprawdź, czy są sensowne.
3. Czytnik ekranu. NVDA na Windowsie jest darmowy, VoiceOver na macOS wbudowany. Pięć minut z włączonym czytnikiem mówi więcej niż godzina czytania wytycznych.

Podsumowanie

• Zdecyduj najpierw, czy grafika jest dekoracyjna, informacyjna czy interaktywna.
• Dekoracyjna: aria-hidden="true" i focusable="false", bez opisu.
• Informacyjna: role="img", <title> jako pierwsze dziecko, <desc> gdy trzeba, spięte przez aria-labelledby.
• W <img> obowiązuje alt; puste alt="" to nie to samo co jego brak.
• Klikalna ma być otoczka <button>, a nie samo SVG.
• Kontrast co najmniej 3:1, a kolor nie może być jedyną informacją.
• <title> i <desc> to treść — chroń je przed optymalizatorem.

Zostały dwie lekcje. W następnej: bezpieczeństwo, czyli dlaczego SVG bywa traktowany jak plik wykonywalny — i słusznie.

---

Do wypróbowania: w presecie title / desc przenieś <title> poniżej <path>. Obrazek nie zmieni się wcale, ale dymek po najechaniu przestanie działać w części przeglądarek. To najprostszy dowód na to, że kolejność w tym jednym przypadku naprawdę ma znaczenie.