Kolor, wzór i bezpośrednie etykiety
Koduj serie tak, aby mogły je odczytać osoby z zaburzeniami rozpoznawania kolorów.
Kolor, wzór i bezpośrednie etykiety 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.
Sam kolor wprowadza niektórych w błąd
Około 1 na 12 mężczyzn nie potrafi niezawodnie rozróżniać niektórych kolorów. Jeśli na wykresie czerwony oznacza stratę, takie osoby nie zobaczą żadnej różnicy. 🎨
Zasada dwóch kanałów
Przedstawiaj każdą serię za pomocą drugiego kanału, oprócz koloru: wzoru, kształtu albo bezpośredniej etykiety. Kolor staje się dodatkiem, a nie jedyną wskazówką.
Wzory wypełniają lukę
Nadaj słupkom i obszarom różne wzory, takie jak paski lub kropki. Wypełnienie pozwala odróżnić serie nawet w odcieniach szarości.
<rect fill="url(#stripes)" />Różne kształty na wykresach liniowych
Na wykresach liniowych oznaczaj punkty różnymi kształtami: kołami, kwadratami lub trójkątami. Każda linia pozostanie rozróżnialna bez polegania na odcieniu koloru.
Bezpośrednie etykiety są lepsze od legend
Oddzielna legenda zmusza użytkownika do dopasowywania kolorów. Umieść etykietę bezpośrednio na linii lub wycinku, aby nazwa znajdowała się obok danych.
Wybierz paletę bezpieczną dla osób z daltonizmem
Niektóre pary odcieni, na przykład czerwony i zielony, są najtrudniejsze do rozróżnienia. Paleta bezpieczna dla osób z daltonizmem, taka jak Okabe-Ito, pozwala uniknąć tych problemów.
Kontrast nadal ma znaczenie
Sąsiadujące serie i ich etykiety tekstowe potrzebują odpowiedniego kontrastu. WCAG wymaga co najmniej proporcji 3:1 między istotnymi elementami graficznymi.
Testuj w odcieniach szarości
Szybki test: wyświetl wykres w odcieniach szarości. Jeśli nie potrafisz odróżnić serii, osoba z daltonizmem również tego nie zrobi. Popraw wykres przed wdrożeniem.
filter: grayscale(100%);Celem jest nadmiarowe kodowanie
Takie łączenie wskazówek nazywa się nadmiarowym kodowaniem: kolor oraz wzór i etykieta. Jeśli jedna wskazówka zniknie, wykres nadal pozostanie czytelny.
Nie przesadzaj z liczbą wskazówek
Równowaga ma znaczenie. Jednoczesne użycie wszystkich wzorów powoduje wizualny chaos. Dodaj tylko tyle, aby każda seria była wyraźnie odrębna, a wykres pozostał przejrzysty.
Pomaga to także przy słabym oświetleniu
Bezpośrednie etykiety i wzory pomagają również w przypadku wykresów oglądanych w słońcu, na tanich ekranach lub wydrukowanych w czerni i bieli. Zyskują na tym wszyscy. ☀️
Szybkie sprawdzenie
Dlaczego sam kolor jest niewłaściwym sposobem rozróżniania serii na wykresie?
Podsumowanie: więcej niż jedna wskazówka
Nauczyłeś się, aby nigdy nie polegać wyłącznie na kolorze: dodawaj wzory, kształty lub bezpośrednie etykiety, wybieraj bezpieczne palety i testuj wykresy w odcieniach szarości. 🖤
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 „Kolor, wzór i bezpośrednie etykiety” jest bezpłatna?
Tak — pełny tekst „Kolor, wzór i bezpośrednie etykiety” 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 „Kolor, wzór i bezpośrednie etykiety”?
Koduj serie tak, aby mogły je odczytać osoby z zaburzeniami rozpoznawania kolorów. Ć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 „Kolor, wzór i bezpośrednie etykiety”?
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
- Każdy wykres potrzebuje tekstowej alternatywy
- Tabela danych jako rozwiązanie zastępcze
- Kolor, wzór i bezpośrednie etykiety
- Interaktywne wykresy obsługiwane z klawiatury