Tabele układu to pułapka
Dowiedz się, dlaczego tabele używane do układu dezorientują czytniki ekranu.
Tabele układu to pułapka 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.
Tabele były kiedyś używane do układu strony
Wiele lat temu programiści budowali układy stron za pomocą elementu table. Ten nawyk pozostał w starym kodzie i nadal powoduje dziś rzeczywiste szkody w dostępności.
Dlaczego tabele układu strony szkodzą
Czytnik ekranu traktuje każdą tabelę jak dane. Odczytuje wiersze, kolumny i liczbę komórek w tabeli użytej do utworzenia układu, zasypując użytkowników pozbawioną znaczenia strukturą.
Kolejność odczytu zostaje zaburzona
Tabele układu strony często rozmieszczają treści w komórkach w mylącej kolejności. Kolejność wizualna i kolejność odczytu przestają być zgodne, przez co użytkownicy tracą orientację.
Używaj CSS do tworzenia układu
Współczesne układy tworzy się za pomocą CSS. Do rozmieszczania elementów strony używaj flexbox lub grid, a element table zachowaj wyłącznie do prawdziwych danych tabelarycznych.
.cards { display: grid; grid-template-columns: 1fr 1fr; }Flexbox dla jednego wymiaru
Gdy układasz elementy w wierszu lub kolumnie, flexbox jest naturalnym narzędziem. Dopasowuje się do zawartości, a semantyka tabeli nie przeszkadza w układzie.
.row { display: flex; gap: 1rem; }Grid dla dwóch wymiarów
Do układów obejmujących jednocześnie wiersze i kolumny CSS grid zapewnia prawdziwy system tworzenia układu. Oddziela wygląd strony od znaczenia jej znaczników.
Zachowaj prawidłową semantykę
Dzięki układowi CSS kod HTML może używać prawdziwych punktów orientacyjnych, takich jak header, nav i main. Użytkownicy czytników ekranu otrzymują znaczącą mapę strony zamiast informacji o liczbie komórek.
Ostateczność: role=presentation
Jeśli naprawdę nie możesz usunąć starej tabeli układu strony, dodaj role=presentation. Usuwa to semantykę tabeli, dzięki czemu technologie asystujące ignorują siatkę.
<table role="presentation"> ... </table>Presentation to rozwiązanie tymczasowe, nie plan
Traktuj role=presentation jak tymczasowy opatrunek. Właściwym rozwiązaniem jest przejście na CSS, które usuwa problem, zamiast tylko go ukrywać.
Jak rozpoznać tabelę układu strony
Brak podpisu, brak th oraz komórki zawierające całe sekcje zamiast wartości to sygnały ostrzegawcze. Taki układ niemal zawsze wskazuje na tabelę układu strony, którą należy zrefaktoryzować.
Jedna tabela, jeden cel
Zadaj proste pytanie dotyczące każdej tabeli: czy przedstawia dane w postaci wierszy i kolumn powiązanych wartości? Jeśli nie, jest tabelą układu strony i należy zastąpić ją CSS.
Szybkie sprawdzenie
Odziedziczyli Państwo stronę, która używa tabeli wyłącznie do rozmieszczenia kolumn treści.
Podsumowanie: tabele do danych, CSS do układu
Nigdy nie twórz układu strony za pomocą elementu table. Używaj flexbox lub grid, przeznaczaj table na prawdziwe dane, a role=presentation traktuj wyłącznie jako rozwiązanie tymczasowe w starym kodzie.
Często zadawane pytania
Czy lekcja „Tabele układu to pułapka” jest bezpłatna?
Tak — pełny tekst „Tabele układu to pułapka” 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 „Tabele układu to pułapka”?
Dowiedz się, dlaczego tabele używane do układu dezorientują 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 4 z 4.
Ile czasu zajmuje lekcja „Tabele układu to pułapka”?
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
- th, scope i element caption
- Prawidłowe nagłówki wierszy i kolumn
- Złożone tabele: parowanie headers i id
- Tabele układu to pułapka