Пристапност

Краток преглед на карактеристиките и ограничувањата на 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 вклучува поддршка за prefers-reduced-motionмедиумската функција . Во прелистувачите/околините што му дозволуваат на корисникот да ја одреди својата претпочитање за намалено движење, повеќето ефекти на транзиција на CSS во Bootstrap (на пример, кога се отвора или затвора модален дијалог, или кога лизгачката анимација во вртелешките) ќе бидат оневозможени, а значајните анимации ( како што се спинери) ќе бидат забавени.

На прелистувачите што поддржуваат prefers-reduced-motionи каде што корисникот не сигнализирал експлицитно дека претпочита намалено движење (т.е. каде prefers-reduced-motion: no-preference), Bootstrap овозможува непречено лизгање со користење на scroll-behaviorсвојството.