Kodėl prieinamos lentelės svarbios
Prieinamos lentelės leidžia visų gebėjimų naudotojams suprasti ir naršyti lentelės duomenis. Privalumai:
- Įtraukimas: Užtikrina, kad ekrano skaitytuvai galėtų tiksliai perduoti duomenis silpnaregiams naudotojams.
- Patobulinta vartotojo patirtis: Pagerina naudojimą visiems lankytojams, įskaitant tuos, kurie turi pažinimo sutrikimų.
- Teisinė atitiktis: Padeda jūsų svetainei atitikti pritaikymo neįgaliesiems standartus, pvz., WCAG ir ADA.
Žingsnis po žingsnio prieinamų lentelių kūrimo vadovas
1 veiksmas: naudokite lenteles duomenims, o ne išdėstymui
Užtikrinkite, kad lentelės būtų naudojamos tik duomenims pateikti, o ne puslapių išdėstymui. Šiuolaikinės CSS technologijos geriau tinka maketavimui.
2 veiksmas: pridėkite lentelės antraštes
Antraštės suteikia lentelės duomenų kontekstą ir yra būtinos ekrano skaitytuvams. Naudokite <th> elementas antraštėms apibrėžti.
Vardas Amžius Vieta Jonas 30 Niujorkas
3 veiksmas: naudokite antraštes
Įtraukite antraštę, apibūdinančią lentelės paskirtį. Antraštės padeda vartotojams suprasti duomenų kontekstą.
Darbuotojo duomenys ... ...
4 veiksmas: pridėkite taikymo srities atributus
Geriausios scope atributas apibrėžia ryšį tarp antraštės ir duomenų langelių, pagerindamas ekrano skaitytuvų naršymą.
Vardas Jonas
5 veiksmas: jei reikia, naudokite ARIA vaidmenis
Sudėtingose lentelėse apsvarstykite galimybę naudoti ARIA atributus, pvz aria-labelledby or aria-describedby suteikti papildomo konteksto.
6 veiksmas: užtikrinkite tinkamą kontrastą
Įsitikinkite, kad lentelės tekstas turi pakankamai kontrasto fone, kad jį būtų galima skaityti. Naudokite tokius įrankius kaip BANGA kontrasto santykiams patikrinti.
7 veiksmas: patikrinkite savo stalą
Norėdami patikrinti lentelės tinkamumą naudoti, naudokite pagalbines technologijas, pvz., ekrano skaitytuvus ir klaviatūros naršymą. Prireikus pakoreguokite pagal atsiliepimus.
Geriausia pritaikytų stalų praktika
- Kad lentelės būtų paprastos: Venkite pernelyg sudėtingų struktūrų.
- Naudokite antraštes ir antraštes: Pateikite visų duomenų kontekstą.
- Suderinamumo testas: Užtikrinkite, kad jūsų stalai gerai veiktų naudodami pagalbines technologijas.
Atvejų analizė: veikia prieinamos lentelės
1 atvejo analizė: švietimo platforma
Internetinė mokymosi platforma į savo lenteles įtraukė antraštes, antraštes ir ARIA vaidmenis, pagerindama pritaikymo neįgaliesiems balus ir mokinių atsiliepimus.
2 atvejo analizė: finansinė informacijos suvestinė
Finansinė tarnyba ataskaitoms teikti naudojo prieinamas lenteles, todėl naudotojai su regėjimo negalia buvo geriau naršomi ir patenkinti.
DUK: „WordPress“ prieinamos lentelės
Kodėl prieinamos lentelės yra svarbios?
Prieinamos lentelės užtikrina, kad visi vartotojai, įskaitant neįgaliuosius, galėtų suprasti lentelės duomenis ir juos naršyti.
Kokie papildiniai gali padėti sukurti prieinamas lenteles?
Pluginai patinka TablePress bei WP One Tap pritaikymo neįgaliesiems papildinys pasiūlyti prieinamų lentelių kūrimo funkcijų.
Kaip galiu išbandyti lentelės prieinamumą?
Naudokite tokius įrankius kaip WAVE arba Lighthouse ir išbandykite naudodami ekrano skaitytuvus, kad užtikrintumėte pasiekiamumą.
Koks yra scope atributas?
Geriausios scope atributas padeda ekrano skaitytuvams suprasti ryšį tarp antraštės ir duomenų langelių.
Ar turėčiau vengti naudoti lenteles išdėstymui?
Taip, lenteles naudokite tik lentelės duomenims. Išdėstymui naudokite CSS.
