Wbudowany SVG: role img i title
Nadaj znaczącej grafice nazwę odczytywaną przez czytniki ekranu.
Wbudowany SVG: role img i title to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 1 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.
Obraz bez słów
Wbudowany element SVG rysuje kształty, które podobają się oczom, ale czytnik ekranu widzi zbiór ścieżek i nie przekazuje żadnych użytecznych informacji. 🖼️
Znaczący czy tylko ładny?
Zanim cokolwiek nazwiesz, zadaj jedno pytanie: czy ta grafika ma znaczenie, czy jest wyłącznie dekoracyjna? Od tej odpowiedzi zależy cały wybór znaczników.
Poinformuj przeglądarkę, że to obraz
W przypadku znaczącej grafiki dodaj role="img", aby technologia asystująca traktowała cały element SVG jako jeden obraz, a nie zbiór luźnych kształtów.
<svg role="img" viewBox="0 0 24 24">
<path d="M12 2 L22 22 H2 Z" />
</svg>Nadaj nazwę za pomocą title
Element <title> wewnątrz SVG dostarcza dostępnej nazwy, którą czytnik ekranu odczyta na głos jako nazwę grafiki.
<svg role="img" viewBox="0 0 24 24">
<title>Warning</title>
<path d="M12 2 L22 22 H2 Z" />
</svg>Umieść title jako pierwszy
Umieść <title> jako pierwsze dziecko elementu SVG. Niektóre czytniki ekranu niezawodnie odczytują go tylko wtedy, gdy występuje przed kształtami.
Połącz za pomocą aria-labelledby
Aby zapewnić niezawodną obsługę, nadaj tytułowi id i wskaż go za pomocą aria-labelledby na elemencie svg.
<svg role="img" aria-labelledby="t1">
<title id="t1">Search</title>
<path d="..." />
</svg>aria-label jako skrót
Masz mało znaczników? aria-label na elemencie svg nadaje mu nazwę bezpośrednio, bez konieczności dodawania podrzędnego title. Zastępuje również tekst title znajdujący się wewnątrz.
<svg role="img" aria-label="Home">
<path d="M3 11 L12 3 L21 11" />
</svg>Nazwij znaczenie, nie kształty
Podaj nazwę opisującą cel grafiki, na przykład Download, a nie jej elementy wizualne, takie jak strzałka w dół nad linią.
desc dodaje dłuższy opis
Potrzebujesz czegoś więcej niż krótkiej nazwy? Element <desc> zawiera dłuższy opis, który można powiązać za pomocą aria-describedby, aby dodać kontekst.
<svg role="img" aria-labelledby="t2" aria-describedby="d2">
<title id="t2">Sales chart</title>
<desc id="d2">Revenue rose each quarter in 2025.</desc>
</svg>focusable powoduje problemy w starszym IE
Stare przeglądarki pozwalały elementom SVG przejmować fokus klawiatury. Dodanie focusable="false" usuwa nieinteraktywną grafikę z kolejności przechodzenia klawiszem Tab.
<svg role="img" focusable="false" aria-label="Star">
<path d="..." />
</svg>Zweryfikuj w inspektorze
Otwórz panel dostępności w przeglądarce i sprawdź, czy SVG jest wyświetlany jako obraz z dokładnie taką nazwą, jaką zamierzasz nadać.
Szybkie sprawdzenie
Chcesz, aby znaczący wbudowany element SVG został odczytany jako pojedynczy obraz z nazwą wypowiadaną na głos. Które połączenie to zapewnia?
Podsumowanie: nazwij to, co znaczące
Znaczące elementy SVG otrzymują role="img" oraz title lub aria-label określający ich cel. Sprawdź wynik w inspektorze, a grafiki wreszcie zaczną przekazywać informacje. ✅
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 „Wbudowany SVG: role img i title” jest bezpłatna?
Tak — pełny tekst „Wbudowany SVG: role img i title” 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 „Wbudowany SVG: role img i title”?
Nadaj znaczącej grafice nazwę odczytywaną przez czytniki ekranu. Ć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 1 z 4.
Ile czasu zajmuje lekcja „Wbudowany SVG: role img i title”?
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
- Wbudowany SVG: role img i title
- Ukrywanie dekoracyjnych ikon za pomocą aria-hidden
- Przyciski ikonowe, które nadal mają nazwę
- Czcionki ikon i problemy z ich dostępnością