Pusty alt i ukryty obraz dekoracyjny
Użyj pustego atrybutu alt, aby czytniki ekranu go pominęły
Pusty alt i ukryty obraz dekoracyjny to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Web Accessibility Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Sposób na pusty alt
W przypadku obrazów dekoracyjnych właściwym rozwiązaniem jest pusty alt: zapisz alt jako dwa cudzysłowy bez żadnej zawartości.
<img src="flourish.png" alt="">Co robi pusty alt
Pusty alt oznacza obraz jako dekoracyjny, dzięki czemu czytniki ekranu całkowicie go pomijają i nigdy go nie odczytują.
Pusty nie znaczy brakujący
Pusty alt i brakujący alt to zupełnie różne rzeczy. Pusty oznacza celowe pominięcie, a brakujący — że autor o nim zapomniał.
Skutki brakującego alt
Gdy nie ma atrybutu alt, wiele czytników ekranu odczytuje na głos nazwę pliku, na przykład IMG underscore 4823 dot jpg.
Zawsze dodawaj ten atrybut
Zasada jest prosta: każdy element img potrzebuje atrybutu alt. Jedyne pytanie brzmi, czy ma on być pusty, czy zawierać tekst.
Elementy odstępu i separatory
Wizualne odstępy, linie i separatory nie niosą znaczenia, dlatego są podręcznikowymi przykładami zastosowania pustego atrybutu alt.
<img src="line.png" alt="">Nie umieszczaj białych znaków wewnątrz
Nie umieszczaj spacji między cudzysłowami. Prawdziwy pusty alt nie zawiera niczego, nawet pojedynczego białego znaku.
Jeszcze lepiej — użyj CSS
Jeśli obraz jest naprawdę dekoracyjny, często najczystszym rozwiązaniem jest obraz tła CSS, który jest całkowicie pomijany przez drzewo dostępności.
Ukrywanie za pomocą aria-hidden
Możesz także ukryć dekoracyjną grafikę, ustawiając aria-hidden na true. Często stosuje się to w przypadku ikon SVG w wierszu obok widocznego tekstu.
<svg aria-hidden="true"><use href="#star"></use></svg>Nie ukrywaj rzeczywistej treści
Zachowaj ostrożność: nigdy nie używaj pustego alt ani aria-hidden dla obrazu informacyjnego, ponieważ po cichu usuniesz go dla części użytkowników.
Gdy dekoracja jest linkiem
Jeśli dekoracyjny obraz znajduje się wewnątrz linku, link nadal potrzebuje gdzieś dostępnego tekstu, inaczej pozostanie bez nazwy.
Szybkie sprawdzenie
Znajdź różnicę, która ma znaczenie.
Podsumowanie
Dobra robota! Pusty alt celowo ukrywa dekorację, brakujący alt jest błędem, a aria-hidden i tła CSS również pozwalają zachować ciszę ozdobnych elementów.
Często zadawane pytania
Czy lekcja „Pusty alt i ukryty obraz dekoracyjny” jest bezpłatna?
Tak — pełny tekst „Pusty alt i ukryty obraz dekoracyjny” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Web Accessibility Academy, przejdź na CoddyKit PRO. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Pusty alt i ukryty obraz dekoracyjny”?
Użyj pustego atrybutu alt, aby czytniki ekranu go pominęły Ćwiczysz Web Accessibility Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Web Accessibility Academy?
Nie wymagamy żadnego doświadczenia. Web Accessibility Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Pusty alt i ukryty obraz dekoracyjny”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Web Accessibility Academy?
Tak. Każda lekcja Web Accessibility Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Informacyjne czy dekoracyjne: pierwsza decyzja
- Pisanie tekstu alt, który przekazuje znaczenie, a nie piksele
- Pusty alt i ukryty obraz dekoracyjny
- Złożone obrazy: wykresy, mapy i długie opisy