Megközelíthetőség
Rövid áttekintés a Bootstrap funkcióiról és az elérhető tartalom létrehozására vonatkozó korlátairól.
A Bootstrap könnyen használható keretrendszert kínál kész stílusokból, elrendezési eszközökből és interaktív komponensekből, lehetővé téve a fejlesztők számára, hogy vizuálisan tetszetős, funkcionálisan gazdag és a dobozból elérhető webhelyeket és alkalmazásokat hozzanak létre.
Áttekintés és korlátozások
A Bootstrap segítségével épített projektek általános hozzáférhetősége nagymértékben függ a szerző jelölésétől, további stílusától és szkriptektől. Feltéve azonban, hogy ezeket megfelelően implementálták, tökéletesen lehetségesnek kell lennie olyan webhelyek és alkalmazások létrehozásának a Bootstrap segítségével, amelyek megfelelnek a WCAG 2.1 (A/AA/AAA) 508. szakaszának , valamint a hasonló akadálymentesítési szabványoknak és követelményeknek.
Strukturális jelölés
A Bootstrap stílusa és elrendezése a jelölési struktúrák széles körére alkalmazható. Ennek a dokumentációnak az a célja, hogy a fejlesztők számára bevált gyakorlati példákat nyújtson magának a Bootstrap használatának bemutatására és a megfelelő szemantikai jelölések illusztrálására, beleértve a lehetséges akadálymentesítési problémák megoldásának módjait.
Interaktív komponensek
A Bootstrap interaktív összetevőit – például a modális párbeszédpaneleket, a legördülő menüket és az egyéni eszköztippeket – úgy tervezték, hogy az érintést, egeret és billentyűzetet használók számára is működjenek. A vonatkozó WAI – ARIA szerepkörök és attribútumok használatával ezeknek az összetevőknek is érthetőnek és működőképesnek kell lenniük kisegítő technológiák (például képernyőolvasók) segítségével.
Mivel a Bootstrap összetevőit szándékosan úgy tervezték, hogy meglehetősen általánosak legyenek, előfordulhat, hogy a szerzőknek további ARIA -szerepeket és -attribútumokat, valamint JavaScript-viselkedést kell megadniuk, hogy pontosabban közvetítsék összetevőjük természetét és funkcióit. Ezt általában fel kell tüntetni a dokumentációban.
Színkontraszt
Egyes színkombinációk, amelyek jelenleg a Bootstrap alapértelmezett palettáját alkotják – amelyeket a keretrendszerben használnak például gombváltozatokhoz, riasztási variációkhoz, űrlapellenőrzési jelzőkhöz – elégtelen színkontraszthoz vezethetnek (a WCAG 2.1 javasolt szövegszínkontraszt aránya 4,5:1 alatt van). és a WCAG 2.1 nem szöveges színkontraszt aránya 3:1 ), különösen világos háttér előtt használva. A szerzőket arra biztatjuk, hogy teszteljék sajátos színhasználatukat, és ahol szükséges, manuálisan módosítsák/kibővítsék ezeket az alapértelmezett színeket a megfelelő színkontraszt arány biztosítása érdekében.
Vizuálisan rejtett tartalom
A vizuálisan elrejtett, de a kisegítő technológiák, például a képernyőolvasók számára elérhető tartalmak stílusát az .visually-hidden
osztály használatával lehet alakítani. Ez olyan helyzetekben lehet hasznos, amikor további vizuális információkat vagy jelzéseket (például színhasználattal jelölt jelentést) is át kell adni a nem vizuális felhasználóknak.
<p class="text-danger">
<span class="visually-hidden">Danger: </span>
This action is not reversible
</p>
A vizuálisan rejtett interaktív vezérlőkhöz, például a hagyományos „kihagyó” hivatkozásokhoz használja az .visually-hidden-focusable
osztályt. Ez biztosítja, hogy a vezérlőelem a fókuszálás után láthatóvá váljon (látó billentyűzet-felhasználók számára). Vigyázz, a korábbi verziók megfelelőihez .sr-only
és .sr-only-focusable
osztályaihoz képest a Bootstrap 5 .visually-hidden-focusable
egy önálló osztály, és nem használható az .visually-hidden
osztállyal együtt.
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
Csökkentett mozgás
A Bootstrap támogatja a prefers-reduced-motion
médiafunkciót . Azokban a böngészőkben/környezetekben, amelyek lehetővé teszik a felhasználó számára, hogy megadja a csökkentett mozgás preferenciáját, a Bootstrap legtöbb CSS-átmeneti effektusa (például egy modális párbeszédpanel megnyitásakor vagy bezárásakor, vagy a körhinta csúszó animációja esetén) le lesz tiltva, és az értelmes animációk ( például a fonók) lelassul.
Azokon a böngészőkön, amelyek támogatják a -t prefers-reduced-motion
, és ahol a felhasználó nem jelezte kifejezetten, hogy a csökkentett mozgást részesítené előnyben (azaz ahol prefers-reduced-motion: no-preference
), a Bootstrap lehetővé teszi a zökkenőmentes görgetést a scroll-behavior
tulajdonság használatával.
További források
- Webtartalom hozzáférhetőségi irányelvei (WCAG) 2.1
- Az A11Y projekt
- MDN akadálymentesítési dokumentáció
- Tenon.io kisegítő lehetőségek ellenőrzője
- Színkontraszt-analizátor (CCA)
- „HTML Codesniffer” könyvjelző a kisegítő lehetőségek azonosításához
- Microsoft Accessibility Insights
- Deque Axe tesztelő eszközök
- Bevezetés a webes akadálymentesítésbe