Хүртээмжтэй байдал

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>

Хөдөлгөөний бууралт

Bootstrap нь prefers-reduced-motionмедиа функцийг дэмждэг . Хөдөлгөөнийг багасгахын тулд хэрэглэгчдэд өөрийн сонголтоо тодорхойлох боломжийг олгодог хөтөч/орчинд Bootstrap дээрх ихэнх CSS шилжилтийн эффектүүд (жишээ нь, модаль харилцах цонх нээгдэх эсвэл хаагдах үед эсвэл тойруулга дахь гулсах хөдөлгөөнт дүрс) идэвхгүй болж, утга учиртай хөдөлгөөнт дүрсүүд ( спиннер гэх мэт) удаашрах болно.

-г дэмждэг хөтчүүд prefers-reduced-motionболон хэрэглэгч хөдөлгөөнийг багасгахыг илүүд үздэг (өөрөөр хэлбэл хаана ) гэж тодорхой мэдэгдээгүй тохиолдолд Bootstrap нь өмчийг prefers-reduced-motion: no-preferenceашиглан жигд гүйлгэх боломжийг олгодог .scroll-behavior