Достъпност

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

На тази страница

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Намалено движение

Bootstrap включва поддръжка за prefers-reduced-motionмедийната функция . В браузъри/среди, които позволяват на потребителя да посочи своите предпочитания за намалено движение, повечето CSS ефекти на прехода в Bootstrap (например, когато модален диалогов прозорец се отваря или затваря, или плъзгащата се анимация във въртележки) ще бъдат деактивирани и значимите анимации ( като спинери) ще се забавят.

В браузъри, които поддържат prefers-reduced-motionи където потребителят не е сигнализирал изрично, че предпочита намалено движение (т.е. където prefers-reduced-motion: no-preference), Bootstrap позволява плавно превъртане с помощта на scroll-behaviorсвойството.