Prístupnosť

Stručný prehľad funkcií a obmedzení Bootstrapu pre vytváranie prístupného obsahu.

Na tejto stránke

Bootstrap poskytuje jednoducho použiteľný rámec hotových štýlov, nástrojov na rozloženie a interaktívnych komponentov, čo umožňuje vývojárom vytvárať webové stránky a aplikácie, ktoré sú vizuálne príťažlivé, funkčne bohaté a dostupné hneď po vybalení.

Prehľad a obmedzenia

Celková dostupnosť akéhokoľvek projektu vytvoreného pomocou Bootstrapu závisí vo veľkej miere od značky autora, dodatočného štýlu a skriptovania, ktoré obsahuje. Avšak za predpokladu, že boli implementované správne, malo by byť dokonale možné vytvárať webové stránky a aplikácie s Bootstrap, ktoré spĺňajú WCAG 2.1 (A/AA/AAA), sekciu 508 a podobné štandardy a požiadavky na prístupnosť.

Štrukturálne označenie

Štýl a rozloženie Bootstrapu možno použiť na širokú škálu značkovacích štruktúr. Cieľom tejto dokumentácie je poskytnúť vývojárom príklady osvedčených postupov na demonštráciu použitia samotného Bootstrapu a na ilustráciu vhodného sémantického značenia vrátane spôsobov, ktorými možno riešiť potenciálne problémy s prístupnosťou.

Interaktívne komponenty

Interaktívne komponenty Bootstrapu – ako sú modálne dialógy, rozbaľovacie ponuky a vlastné popisy nástrojov – sú navrhnuté tak, aby fungovali pre používateľov dotyku, myši a klávesnice. Vďaka použitiu príslušných rolí a atribútov WAI - ARIA by tieto komponenty mali byť tiež zrozumiteľné a použiteľné pomocou asistenčných technológií (ako sú čítačky obrazovky).

Pretože komponenty Bootstrapu sú zámerne navrhnuté tak, aby boli dosť všeobecné, autori možno budú musieť zahrnúť ďalšie roly a atribúty ARIA , ako aj správanie JavaScriptu, aby presnejšie vyjadrili presnú povahu a funkčnosť ich komponentu. Toto je zvyčajne uvedené v dokumentácii.

Farebný kontrast

Niektoré kombinácie farieb, ktoré v súčasnosti tvoria predvolenú paletu Bootstrapu – používané v rámci rámca na veci, ako sú variácie tlačidiel, variácie upozornení, indikátory overenia formulára – môžu viesť k nedostatočnému farebnému kontrastu (pod odporúčaným farebným kontrastným pomerom textu WCAG 2.1 4,5:1 a netextový farebný kontrastný pomer WCAG 2.1 3:1 ), najmä pri použití na svetlom pozadí. Autorom sa odporúča, aby otestovali svoje špecifické použitie farieb a tam, kde je to potrebné, manuálne upravili/rozšírili tieto predvolené farby, aby zabezpečili adekvátne pomery farebného kontrastu.

Obsah, ktorý by mal byť vizuálne skrytý, ale mal by zostať prístupný pomocným technológiám, ako sú čítačky obrazovky, je možné upraviť pomocou .visually-hiddentriedy. To môže byť užitočné v situáciách, keď je potrebné poskytnúť nevizuálnym používateľom aj ďalšie vizuálne informácie alebo podnety (napríklad význam označený použitím farby).

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

Pre vizuálne skryté interaktívne ovládacie prvky, ako sú tradičné „preskakovacie“ odkazy, použite .visually-hidden-focusabletriedu. Tým sa zabezpečí, že po zaostrení bude ovládací prvok viditeľný (pre vidiacich používateľov klávesnice). Pozor, v porovnaní s ekvivalentom .sr-onlya .sr-only-focusabletriedami v minulých verziách je Bootstrap 5 .visually-hidden-focusablesamostatnou triedou a nesmie sa používať v kombinácii s touto .visually-hiddentriedou.

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

Znížený pohyb

Bootstrap obsahuje podporu pre funkciu prefers-reduced-motionmédií . V prehliadačoch/prostrediach, ktoré umožňujú používateľovi špecifikovať preferencie obmedzeného pohybu, bude väčšina prechodových efektov CSS v Bootstrape (napríklad pri otvorení alebo zatvorení modálneho dialógu alebo posuvnej animácie v karuseloch) zakázaná a zmysluplné animácie ( ako sú rotačky) budú spomalené.

V prehliadačoch, ktoré podporujú prefers-reduced-motion, a kde používateľ výslovne nesignalizoval, že uprednostňuje znížený pohyb (napr. kde prefers-reduced-motion: no-preference), Bootstrap umožňuje plynulé posúvanie pomocou scroll-behaviorvlastnosti.