Source

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

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

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

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

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

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

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>

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

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

Кошумча ресурстар