Złożone obrazy: wykresy, mapy i długie opisy
Obsługuj obrazy, które wymagają czegoś więcej niż krótkiej frazy
Złożone obrazy: wykresy, mapy i długie opisy to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 4 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.
Gdy alt nie wystarcza
Niektóre obrazy zawierają zbyt wiele informacji, aby opisać je krótką frazą. Wykresy, mapy i diagramy wymagają planu dłuższego opisu.
Zacznij od krótkiego alt
Nawet złożony obraz nadal otrzymuje krótkie określenie w atrybucie alt, które go nazywa, na przykład „wykres słupkowy miesięcznej sprzedaży w 2024 roku”.
<img src="chart.png" alt="Bar chart of monthly sales for 2024">Dodaj szczegóły
Krótki tekst alternatywny nazywa obraz, a umieszczony obok długi opis przekazuje rzeczywiste dane lub zależności, które obraz przedstawia.
Opisz najważniejszy wniosek
Dobry długi opis przedstawia najważniejszy wniosek, na przykład informację, że sprzedaż osiągnęła szczyt w grudniu, zamiast suchej listy wszystkich wartości.
Tabela danych jako rozwiązanie zastępcze
W przypadku wykresów najlepszą alternatywą jest często prawdziwa tabela HTML table z tymi samymi liczbami, umieszczona bezpośrednio pod grafiką.
Połącz z opisem
Długi opis można umieścić na stronie i połączyć go za pomocą aria-describedby, wskazując identyfikator elementu.
<img src="map.png" alt="Store map" aria-describedby="mapdesc">Figure i Figcaption
Umieść obraz i jego widoczne objaśnienie w elementach figure i figcaption, aby powiązanie było jasne dla wszystkich.
<figure><img src="flow.png" alt="Checkout flow"><figcaption>Three-step checkout</figcaption></figure>Mapy wymagają danych
Obraz mapy jest bezużyteczny bez podstawowych informacji, dlatego jako tekstowy odpowiednik należy podać adres, wskazówki dojazdu lub listę.
Diagramy i przepływy
W przypadku schematu blokowego należy opisać słownie poszczególne kroki i ich kolejność, aby logika pozostała zrozumiała bez układu wizualnego.
Zadbaj o możliwość znalezienia
Upewnij się, że długi opis można łatwo znaleźć. Ukryty tekstowy odpowiednik, do którego użytkownicy nie mogą dotrzeć, nie stanowi żadnej pomocy.
Dopasuj wysiłek do złożoności
Im bogatszy obraz, tym więcej musi przekazywać jego tekstowy odpowiednik. To złożoność obrazu powinna decydować o długości opisu.
Szybkie sprawdzenie
Wybierz najlepszy sposób postępowania w przypadku złożonego wykresu.
Podsumowanie
Udało się! Złożone obrazy otrzymują krótki tekst alt oraz prawdziwy tekstowy odpowiednik, tabelę danych, figcaption lub aria-describedby przekazujące najważniejszy wniosek.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „Złożone obrazy: wykresy, mapy i długie opisy” jest bezpłatna?
Tak — pełny tekst „Złożone obrazy: wykresy, mapy i długie opisy” 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 „Złożone obrazy: wykresy, mapy i długie opisy”?
Obsługuj obrazy, które wymagają czegoś więcej niż krótkiej frazy Ć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 4 z 4.
Ile czasu zajmuje lekcja „Złożone obrazy: wykresy, mapy i długie opisy”?
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