Жеткиликтүүлүк

Жеткиликтүү мазмунду түзүү үчүн Bootstrap өзгөчөлүктөрү жана чектөөлөрүнүн кыскача баяндамасы.

Бул бетте

Bootstrap даяр стилдердин, макет куралдарынын жана интерактивдүү компоненттердин колдонууга оңой алкагын камсыздайт, бул иштеп чыгуучуларга визуалдык жактан жагымдуу, функционалдык жактан бай жана кутудан тышкары жеткиликтүү веб-сайттарды жана тиркемелерди түзүүгө мүмкүндүк берет.

Обзор жана чектөөлөр

Bootstrap менен курулган ар кандай долбоордун жалпы жеткиликтүүлүгү көбүнчө автордун белгилөөсүнө, кошумча стилдештирүүгө жана алар камтыган сценарийге көз каранды. Бирок, алар туура ишке ашырылган шартта, WCAG 2.1 (A/AA/AAA), 508 -бөлүм жана ушул сыяктуу жеткиликтүүлүк стандарттары менен талаптарын аткарган Bootstrap менен веб-сайттарды жана тиркемелерди түзүүгө толук мүмкүн болушу керек.

Структуралык белгилөө

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>

Кыскартылган кыймыл

prefers-reduced-motionBootstrap медиа өзгөчөлүгүн колдоону камтыйт . Колдонуучуга кыскартылган кыймылга болгон каалоосун көрсөтүүгө мүмкүндүк берген браузерлерде/чөйрөлөрдө Bootstrap ичиндеги CSS өткөөл эффекттеринин көбү (мисалы, модалдык диалог ачылганда же жабылганда, же каруселдердеги жылма анимация) өчүрүлөт жана маанилүү анимациялар ( спиннерлор сыяктуу) басаңдатылат.

Колдонуучу браузерлерде prefers-reduced-motionжана колдонуучу кыймылды азайтууну каалаарын ачык билдирбесе (б.а. кайда prefers-reduced-motion: no-preference), Bootstrap касиетти колдонуу менен жылмакай сыдырууну иштетет scroll-behavior.