Даступнасць

Кароткі агляд функцый і абмежаванняў 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 includes support for the prefers-reduced-motion media feature. In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in Bootstrap (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels) will be disabled, and meaningful animations (such as spinners) will be slowed down.

On browsers that support prefers-reduced-motion, and where the user has not explicitly signaled that they’d prefer reduced motion (i.e. where prefers-reduced-motion: no-preference), Bootstrap enables smooth scrolling using the scroll-behavior property.