Interaktywne wykresy obsługiwane z klawiatury
Umożliw użytkownikom analizowanie punktów danych bez myszy.
Interaktywne wykresy obsługiwane z klawiatury 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.
Samo najechanie kursorem nie wystarczy
Interaktywne wykresy często pokazują wartości dopiero po najechaniu kursorem. Użytkownicy klawiatury i urządzeń dotykowych nigdy nie wykonują tej czynności, więc dane pozostają dla nich niedostępne.
Umożliw fokusowanie punktów danych
Pozwól użytkownikom przechodzić klawiszem Tab do każdego punktu danych lub serii, nadając im tabindex="0". Dzięki temu klawiatura może dotrzeć do elementów, nad którymi można umieścić kursor.
<circle tabindex="0" role="img" aria-label="March: 240 sales" />Każdy punkt potrzebuje nazwy
Punkt, który można fokusować, ale który niczego nie komunikuje, jest bezużyteczny. Nadaj każdemu punktowi dostępną nazwę zawierającą etykietę i wartość, na przykład „marzec, 240 sprzedaży”.
Klawisze strzałek do przechodzenia między punktami
Przechodzenie klawiszem Tab przez 100 punktów jest uciążliwe. Użyj klawiszy strzałek do przechodzenia z punktu do punktu, a klawisz Tab pozostaw do wchodzenia na wykres i opuszczania go.
Wzorzec roving tabindex
Pozostaw jeden punkt z tabindex ustawionym na 0, a pozostałym ustaw wartość -1, przenosząc 0 w reakcji na naciśnięcia strzałek. Ten roving tabindex utrzymuje rozsądną liczbę miejsc zatrzymania klawisza Tab.
Pokazuj podpowiedzi również po uzyskaniu fokusu
Wszystko, co podpowiedź pokazuje po najechaniu kursorem, pokazuj również po uzyskaniu fokusu. Każdemu modułowi obsługi mouseenter przypisz moduł obsługi fokusu, aby oba sposoby interakcji działały tak samo.
point.addEventListener('focus', showTooltip);Zachowaj widoczny obrys fokusu
Wyróżnij aktualnie fokusowany punkt wyraźnym obrysem lub znacznikiem. Bez tego użytkownicy klawiatury nie będą wiedzieć, gdzie się znajdują.
Ogłaszaj zmiany w odpowiedni sposób
Gdy fokus przechodzi do nowego punktu, region aria-live może odczytać jego wartość. Pomaga to, gdy etykieta jest renderowana wizualnie, ale nie znajduje się w DOM.
<div aria-live="polite">March: 240 sales</div>Grupuj wykres jako figure
Umieść całość w elemencie figure z nazwą, aby użytkownicy mogli łatwo znaleźć wykres i pominąć go jako jedną całość po zakończeniu analizy.
<figure role="group" aria-label="Sales over time, interactive"> ... </figure>Zawsze zachowuj tabelę zastępczą
Interaktywność jest dodatkiem, a nie zamiennikiem. Zawsze zachowuj zwykłą tabelę danych, aby użytkownicy mieli prostą alternatywę, gdy przechodzenie strzałkami jest zbyt wolne.
Testuj za pomocą Tab i strzałek
Odłóż mysz i obsługuj wykres wyłącznie za pomocą klawisza Tab i klawiszy strzałek. Jeśli nie możesz dotrzeć do każdej wartości, Twoi użytkownicy również nie będą mogli. ⌨️
Szybkie sprawdzenie
Jak użytkownik klawiatury powinien przechodzić między wieloma punktami danych na wykresie?
Podsumowanie: wykresy, które można obsługiwać
Nauczyłeś się, jak umożliwić fokusowanie punktów i nadawać im nazwy, poruszać się między nimi za pomocą strzałek i roving tabindex, odwzorowywać działanie po najechaniu kursorem po uzyskaniu fokusu oraz zawsze zachowywać tabelę zastępczą. 🚀
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 „Interaktywne wykresy obsługiwane z klawiatury” jest bezpłatna?
Tak — pełny tekst „Interaktywne wykresy obsługiwane z klawiatury” 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 „Interaktywne wykresy obsługiwane z klawiatury”?
Umożliw użytkownikom analizowanie punktów danych bez myszy. Ć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 „Interaktywne wykresy obsługiwane z klawiatury”?
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