Přístupnost

Stručný přehled funkcí a omezení Bootstrapu pro vytváření přístupného obsahu.

Na této straně

Bootstrap poskytuje snadno použitelný rámec hotových stylů, nástrojů pro rozvržení a interaktivních komponent, což umožňuje vývojářům vytvářet webové stránky a aplikace, které jsou vizuálně přitažlivé, funkčně bohaté a přístupné ihned po vybalení.

Přehled a omezení

Celková dostupnost jakéhokoli projektu vytvořeného pomocí Bootstrap závisí z velké části na označení autora, dodatečném stylu a skriptech, které zahrnul. Pokud však byly implementovány správně, mělo by být dokonale možné vytvářet webové stránky a aplikace s Bootstrap, které splňují WCAG 2.1 (A/AA/AAA), oddíl 508 a podobné standardy a požadavky na přístupnost.

Strukturální značení

Styl a rozvržení Bootstrapu lze aplikovat na širokou škálu značkovacích struktur. Cílem této dokumentace je poskytnout vývojářům příklady osvědčených postupů, které demonstrují použití samotného Bootstrapu a ilustrují vhodné sémantické značení, včetně způsobů, jak lze řešit potenciální problémy s přístupností.

Interaktivní komponenty

Interaktivní komponenty Bootstrapu – jako jsou modální dialogy, rozevírací nabídky a vlastní popisky nástrojů – jsou navrženy tak, aby fungovaly pro uživatele dotyku, myši a klávesnice. Díky použití příslušných rolí a atributů WAI - ARIA by tyto komponenty měly být také srozumitelné a ovladatelné pomocí asistenčních technologií (jako jsou čtečky obrazovky).

Protože komponenty Bootstrapu jsou záměrně navrženy tak, aby byly poměrně obecné, autoři možná budou muset zahrnout další role a atributy ARIA a také chování JavaScriptu, aby přesněji vyjádřili přesnou povahu a funkčnost jejich komponenty. To je obvykle uvedeno v dokumentaci.

Barevný kontrast

Některé kombinace barev, které v současnosti tvoří výchozí paletu Bootstrapu – používané v rámci celého rámce pro věci, jako jsou varianty tlačítek, variace výstrah, indikátory ověření formuláře – mohou vést k nedostatečnému barevnému kontrastu (pod doporučeným barevným kontrastem textu WCAG 2.1 4,5:1 a netextový barevný kontrastní poměr WCAG 2.1 3:1 ), zejména při použití na světlém pozadí. Autorům se doporučuje, aby otestovali svá konkrétní použití barev a v případě potřeby ručně upravili/rozšířili tyto výchozí barvy, aby zajistili odpovídající poměry barevného kontrastu.

Obsah, který by měl být vizuálně skrytý, ale měl by zůstat přístupný pomocným technologiím, jako jsou čtečky obrazovky, lze stylizovat pomocí .visually-hiddentřídy. To může být užitečné v situacích, kdy je potřeba sdělit nevizuálním uživatelům další vizuální informace nebo vodítka (jako je význam označený pomocí barvy).

<p class="text-danger">
  <span class="visually-hidden">Danger: </span>
  This action is not reversible
</p>

Pro vizuálně skryté interaktivní ovládací prvky, jako jsou tradiční „přeskakovací“ odkazy, použijte .visually-hidden-focusabletřídu. To zajistí, že ovládací prvek bude po zaostření viditelný (pro vidoucí uživatele klávesnice). Pozor, ve srovnání s ekvivalentem .sr-onlya .sr-only-focusabletřídami v minulých verzích je Bootstrap 5 .visually-hidden-focusablesamostatnou třídou a nesmí se používat v kombinaci s .visually-hiddentřídou.

<a class="visually-hidden-focusable" href="#content">Skip to main content</a>

Snížený pohyb

Bootstrap zahrnuje podporu pro funkci prefers-reduced-motionmédií . V prohlížečích/prostředích, která uživateli umožňují zadat preferenci pro omezený pohyb, bude většina přechodových efektů CSS v Bootstrapu (například při otevření nebo zavření modálního dialogu nebo posuvné animace v karuselech) zakázána a smysluplné animace ( jako jsou spinnery) budou zpomaleny.

V prohlížečích, které podporují prefers-reduced-motion, a kde uživatel výslovně nesignalizoval , že by preferoval omezený pohyb (tj. kde prefers-reduced-motion: no-preference), Bootstrap umožňuje plynulé posouvání pomocí scroll-behaviorvlastnosti.