Source

Достъпност

Кратък преглед на функциите и ограниченията на Bootstrap за създаване на достъпно съдържание.

Bootstrap предоставя лесна за използване рамка от готови стилове, инструменти за оформление и интерактивни компоненти, позволявайки на разработчиците да създават уебсайтове и приложения, които са визуално привлекателни, функционално богати и достъпни веднага.

Преглед и ограничения

Цялостната достъпност на всеки проект, създаден с Bootstrap, зависи до голяма степен от маркирането на автора, допълнителния стил и скриптовете, които са включили. Въпреки това, при условие че те са внедрени правилно, трябва да е напълно възможно да се създават уебсайтове и приложения с Bootstrap, които отговарят на WCAG 2.0 (A/AA/AAA), раздел 508 и подобни стандарти и изисквания за достъпност.

Структурно маркиране

Стилът и оформлението на Bootstrap могат да бъдат приложени към широк набор от структури за маркиране. Тази документация има за цел да предостави на разработчиците примери за най-добри практики, за да демонстрира използването на самия Bootstrap и да илюстрира подходящо семантично маркиране, включително начини, по които могат да бъдат адресирани потенциални проблеми с достъпността.

Интерактивни компоненти

Интерактивните компоненти на Bootstrap - като модални диалогови прозорци, падащи менюта и персонализирани подсказки - са проектирани да работят за потребители с докосване, мишка и клавиатура. Чрез използването на съответните WAI - ARIA роли и атрибути, тези компоненти също трябва да бъдат разбираеми и работещи с помощта на помощни технологии (като екранни четци).

Тъй като компонентите на Bootstrap са нарочно проектирани да бъдат сравнително общи, авторите може да се наложи да включат допълнителни ARIA роли и атрибути, както и поведение на JavaScript, за да предадат по-точно точното естество и функционалност на техния компонент. Това обикновено се отбелязва в документацията.

Цветен контраст

Повечето цветове, които в момента съставляват палитрата по подразбиране на Bootstrap – използвани в цялата рамка за неща като вариации на бутони, вариации на предупреждения, индикатори за валидиране на формуляри – водят до недостатъчен цветови контраст (под препоръчаното WCAG 2.0 цветово контрастно съотношение от 4,5:1 ), когато се използват срещу светъл фон. Авторите ще трябва ръчно да променят/разширят тези цветове по подразбиране, за да осигурят адекватни съотношения на цветовия контраст.

Визуално скрито съдържание

Съдържание, което трябва да бъде визуално скрито, но остава достъпно за помощни технологии като екранни четци, може да бъде стилизирано с помощта на .sr-onlyкласа. Това може да бъде полезно в ситуации, в които допълнителна визуална информация или знаци (като значение, обозначено чрез използване на цвят) също трябва да бъдат предадени на невизуални потребители.

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

За визуално скрити интерактивни контроли, като традиционни връзки за „пропускане“, .sr-onlyмогат да се комбинират с .sr-only-focusableкласа. Това ще гарантира, че контролата ще стане видима, след като бъде фокусирана (за зрящи потребители на клавиатура).

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

Допълнителни ресурси