Қол жетімділік

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және сыныптармен салыстырғанда, Bootstrap 5 жеке сынып болып табылады және оны сыныппен бірге пайдалануға болмайды ..sr-only-focusable.visually-hidden-focusable.visually-hidden

<a class="visually-hidden-focusable" href="#content">Skip to main content</a>

Қысқартылған қозғалыс

prefers-reduced-motionBootstrap медиа мүмкіндігін қолдауды қамтиды . Пайдаланушыға қысқартылған қозғалысқа өз қалауын көрсетуге мүмкіндік беретін шолғыштарда/орталарда Bootstrap жүйесіндегі CSS өту әсерлерінің көпшілігі (мысалы, модальды диалог ашылғанда немесе жабылғанда немесе карусельдердегі жылжымалы анимация) өшіріледі және мағыналы анимациялар ( спиннер сияқты) баяулайды.

Қолдайтын браузерлерде prefers-reduced-motionжәне пайдаланушы қысқартылған қозғалысты қалайтынын (яғни, қайда) анық білдірмеген болса, Bootstrap сипатты prefers-reduced-motion: no-preferenceпайдаланып біркелкі айналдыруды қосады .scroll-behavior