Tabela danych jako rozwiązanie zastępcze
Udostępnij dane źródłowe w dostępnej tabeli.
Tabela danych jako rozwiązanie zastępcze to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 2 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 słowa nie wystarczą
Jednozdaniowe podsumowanie przedstawia najważniejsze informacje, ale niektórzy użytkownicy potrzebują również liczb. Tabela danych zawiera surowe wartości przedstawione na wykresie.
Tabela jest źródłem prawdy
Potraktuj wykres jako wizualizację tabeli. Udostępnij tę samą tabelę w prawidłowym znaczniku, a każda technologia asystująca będzie mogła ją poprawnie odczytać.
Używaj prawdziwego elementu table
Czytniki ekranu dobrze rozumieją natywny element table: wiersze, kolumny i nagłówki są poprawnie ogłaszane bez dodatkowych atrybutów ARIA.
<table>
<tr><th>Month</th><th>Sales</th></tr>
<tr><td>Jan</td><td>120</td></tr>
</table>Dodaj tabeli element caption
caption nadaje tabeli nazwę, dzięki czemu słuchacz wie, jakie dane zostały przedstawione. Jest odczytywany, gdy fokus znajdzie się na tabeli.
<table><caption>Monthly sales in 2024</caption> ... </table>Komórki nagłówkowe z th i scope
Oznacz etykiety jako th i dodaj atrybut scope, aby każda wartość była ogłaszana wraz z nagłówkiem kolumny i wiersza. Ten kontekst ma w tabeli kluczowe znaczenie.
<th scope="col">Sales</th>
<th scope="row">January</th>Umieść ją obok wykresu
Umieść tabelę zastępczą obok wykresu, a nie na osobnej stronie. Użytkownicy powinni móc dotrzeć do danych bez ich wyszukiwania.
Opcjonalnie ukryj ją wizualnie
Jeśli tabela zaburza wygląd interfejsu, ukryj ją wizualnie, ale pozostaw dostępną dla czytników ekranu za pomocą klasy visually-hidden, nigdy display none.
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; }Nigdy nie ukrywaj danych za pomocą display none
Uważaj: display: none całkowicie usuwa treść z drzewa dostępności. Ukryta w ten sposób tabela zastępcza nikomu nie pomoże.
Element details również się sprawdzi
Umieść tabelę w elemencie details, aby użytkownicy widzący mogli na żądanie rozwinąć liczby, a tabela nadal była w pełni dostępna.
<details><summary>View data table</summary>
<table>...</table>
</details>Zachowaj synchronizację tabeli i wykresu
Jeśli wykres się aktualizuje, tabela również musi się aktualizować. Nieaktualne liczby pod świeżym wykresem mogą w niezauważalny sposób wprowadzać w błąd osoby, które na nich polegają.
Jedno źródło, dwa widoki
Najlepiej, aby zarówno wykres, jak i tabela były generowane z tych samych danych. Dzięki temu pozostają zgodne, a Ty nie musisz utrzymywać dwóch wersji prawdy. 🔗
Szybkie sprawdzenie
Jak należy ukryć tabelę danych, którą nadal chcesz udostępniać do odczytu czytnikom ekranu?
Podsumowanie: liczby kryjące się za obrazem
Nauczyłeś się uzupełniać każdy wykres prawdziwą tabelą: z podpisem, nagłówkami i określonym zakresem, utrzymywaną w synchronizacji oraz bezpiecznie ukrywaną w razie potrzeby — nigdy za pomocą display none. 📋
Często zadawane pytania
Czy lekcja „Tabela danych jako rozwiązanie zastępcze” jest bezpłatna?
Tak — pełny tekst „Tabela danych jako rozwiązanie zastępcze” 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 „Tabela danych jako rozwiązanie zastępcze”?
Udostępnij dane źródłowe w dostępnej tabeli. Ć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 2 z 4.
Ile czasu zajmuje lekcja „Tabela danych jako rozwiązanie zastępcze”?
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