Přístupnost

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

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.0 (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 – 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

Většina barev, které v současnosti tvoří výchozí paletu Bootstrapu – používaná v celém rámci pro věci, jako jsou variace tlačítek, variace výstrah, indikátory ověření formuláře – vede k nedostatečnému barevnému kontrastu (pod doporučeným barevným kontrastním poměrem WCAG 2.0 4,5:1 ) při použití proti světlé pozadí. Autoři budou muset ručně upravit/rozšířit 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í .sr-onlytří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="sr-only">Danger: </span>
  This action is not reversible
</p>

Pro vizuálně skryté interaktivní ovládací prvky, jako jsou tradiční „přeskakovací“ odkazy, .sr-onlylze kombinovat s .sr-only-focusabletřídou. To zajistí, že ovládací prvek bude po zaostření viditelný (pro vidoucí uživatele klávesnice).

<a class="sr-only sr-only-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é umožňují uživateli 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) zakázána. V současné době je podpora omezena na Safari na macOS a iOS.