Уңайлык

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's .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