Source

Prístupnosť

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

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

Väčšina farieb, ktoré v súčasnosti tvoria predvolenú paletu Bootstrapu – používaná v rámci celého rámca na veci, ako sú variácie tlačidiel, variácie upozornení, indikátory overenia formulárov – vedie k nedostatočnému farebnému kontrastu (pod odporúčaným farebným kontrastným pomerom WCAG 2.0 4,5:1 ) pri použití proti svetlé pozadie. Autori budú musieť manuálne upraviť/rozšíriť tieto predvolené farby, aby zabezpečili adekvátne pomery farebného kontrastu.

Vizuálne skrytý obsah

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 .sr-onlytriedy. 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="sr-only">Danger: </span>
  This action is not reversible
</p>

Pre vizuálne skryté interaktívne ovládacie prvky, ako sú tradičné „preskakovacie“ odkazy, .sr-onlyje možné kombinovať s .sr-only-focusabletriedou. Tým sa zabezpečí, že po zaostrení bude ovládací prvok viditeľný (pre vidiacich používateľov klávesnice).

<a class="sr-only sr-only-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 pre znížený pohyb, bude väčšina prechodových efektov CSS v Bootstrape (napríklad keď sa otvorí alebo zatvorí modálne dialógové okno alebo posuvná animácia v karuseloch) zakázaná.

Dodatočné zdroje