Пристапност
Краток преглед на карактеристиките и ограничувањата на 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 ), особено кога се користи на светла позадина. Авторите се охрабруваат да ја тестираат нивната специфична употреба на бои и, каде што е потребно, рачно да ги менуваат/прошират овие стандардни бои за да обезбедат соодветни соодноси на контраст на боите.
Визуелно скриена содржина
Содржините што треба да бидат визуелно скриени, но остануваат достапни за помошните технологии како што се читачите на екранот, може да се стилизираат со користење на .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>
Намалено движење
Bootstrap вклучува поддршка за prefers-reduced-motion
медиумската функција . Во прелистувачите/околините што му дозволуваат на корисникот да ја одреди својата претпочита за намалено движење, повеќето ефекти на транзиција на CSS во Bootstrap (на пример, кога ќе се отвори или затвори модален дијалог или кога лизгачката анимација во вртелешките) ќе бидат оневозможени, а значајните анимации ( како што се спинери) ќе бидат забавени.
Дополнителни ресурси
- Упатства за пристапност на веб-содржини (WCAG) 2.1
- Проектот A11Y
- Документација за пристапност на МДН
- Проверка на пристапност Tenon.io
- Анализатор за контраст на бои (CCA)
- Обележувач „HTML Codesniffer“ за идентификување на проблеми со пристапноста
- Microsoft Accessibility Insights
- Алатки за тестирање Deque Axe