Czcionki ikon i problemy z ich dostępnością
Dowiedz się, dlaczego czcionki glifów często są odczytywane jako niezrozumiałe znaki.
Czcionki ikon i problemy z ich dostępnością 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.
Czym jest font ikon
Font ikon przypisuje znaki do glifów, dzięki czemu litera jest wyświetlana jako serce lub strzałka. Ułatwia skalowanie, ale stanowi pole minowe dla czytników ekranu.
Problem z niezrozumiałymi znakami
Wiele fontów ikon umieszcza glify w obszarze prywatnego użytku Unicode. Gdy font nie jest dostępny, czytnik ekranu może odczytać przypadkowy kwadrat lub dziwną literę.
Fonty mogą się nie załadować
Jeśli plik fontu zostanie zablokowany lub nie załaduje się, zamiast ikony pojawi się glif zastępczy. Użytkownicy zobaczą wtedy zbędny znak tam, gdzie powinna znajdować się czytelna ikona.
Treść CSS nie jest prawdziwym tekstem
Fonty ikon często wstawiają glify za pomocą pseudoelementów CSS. Taka generowana treść jest nietrwała i może zostać błędnie odczytana przez technologie asystujące.
i.icon-star::before {
content: "\e801";
}Ukryj dekoracyjne glify ikon
Jeśli glif z fontu ikon jest dekoracyjny, opakuj go i dodaj aria-hidden="true", aby pozbawiony znaczenia znak nigdy nie trafił do drzewa dostępności.
<span class="icon-star" aria-hidden="true"></span>Znaczące glify potrzebują tekstu
Gdy glif przekazuje znaczenie, połącz ukrytą ikonę z prawdziwym tekstem ukrytym wizualnie, aby znaczenie pozostało dostępne nawet po awarii fontu.
<span class="icon-warn" aria-hidden="true"></span>
<span class="sr-only">Warning</span>Arkusze stylów użytkownika je psują
Niektórzy użytkownicy zastępują fonty ze względu na dysleksję lub słaby wzrok. Ich font zastępuje Państwa font, a każdy glif fontu ikon staje się zwykłą literą.
Narzędzia tłumaczeniowe je zniekształcają
Tłumaczenie w przeglądarce może zamienić znaki glifów na inny tekst, niszcząc ikony, ponieważ technicznie są one literami, a nie obrazami.
Dlaczego SVG wygrywa
Wbudowany element SVG omija wszystkie te problemy: jest prawdziwym obrazem, działa mimo zmiany fontów i tłumaczenia oraz poprawnie obsługuje role i etykiety.
Rezygnacja z fontów ikon
Współczesna praktyka zaleca wycofanie fontów ikon na rzecz wbudowanego SVG lub sprite'ów SVG. Zyskujesz wyraźne renderowanie i znacznie mniej pułapek związanych z dostępnością.
Przetestuj przy wyłączonym foncie
Zablokuj font w narzędziach deweloperskich i odśwież stronę. Jeśli zamiast ikon zobaczysz zbędne znaki, musisz poprawić rozwiązania zastępcze i etykiety.
Szybkie sprawdzenie
Odziedziczyli Państwo stronę, która używa fontu ikon do przedstawienia znaczącej oceny w postaci gwiazdek. Jakie rozwiązanie dotyczące dostępności jest najbezpieczniejsze?
Podsumowanie: ostrożnie używaj fontów ikon
Glify fontów ikon to nietrwały tekst: dekoracyjne ukrywaj za pomocą aria-hidden, znaczące uzupełniaj prawdziwym tekstem i preferuj SVG. 🎯
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 „Czcionki ikon i problemy z ich dostępnością” jest bezpłatna?
Tak — pełny tekst „Czcionki ikon i problemy z ich dostępnością” 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 „Czcionki ikon i problemy z ich dostępnością”?
Dowiedz się, dlaczego czcionki glifów często są odczytywane jako niezrozumiałe znaki. Ć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 „Czcionki ikon i problemy z ich dostępnością”?
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ą