Accessibility

Brevis perceptio notarum et limitationum Bootstrap pro creatione contenti perviae.

In hac pagina

Bootstrap praebet facilem ad usum compagem stylorum factorum, instrumentorum layout, et partium interactivarum, permittens tincidunt ad creandas paginas et applicationes quae uisum appellantes, officiatorie divites, et accessibiles ex archa.

Overview et limitations

Suprema accessibilitas cuiuslibet projecti cum Bootstrap constructo magna ex parte dependet a nota auctoris, addito stilo, et scripto comprehenderunt. Attamen, dummodo haec recte perficiantur, perfecte fieri potest ut paginas et applicationes cum Bootstrap quae impleat WCAG 2.1 (A/AA/AAA), Sectio 508 , et similia signa accessibilitas ac requisita.

Structural markup

Bootstrap stylus et layout applicari potest ad amplis structurarum notarum notas. Haec documenta intendit ut tincidunt optimo usu exemplorum ad usum ipsius Bootstrap demonstrandum et apta velad notam illustrandam, additis modis in quibus potentiae accessibilitas sollicitudines dirigi possunt.

Interactive components

Bootstrap interactivos compositiones, ut alternis modalibus, menus stillicidiis et instrumentorum consuetudinum - ad tactum, murem et ad usores claviaturos ordinantur. Per functiones et attributa WAI - ARIA pertinentes adhibita, haec membra etiam intellegentia et operabilia esse debent utendi technologiae assistivae (ut lectorum tegumentum).

Quia partes Bootstrap de industria ad satis genericum dispositae sunt, auctoribus opus est ut ulteriores partes et attributa ARIA includant , necnon JavaScript mores, ad accuratam indolem et functionem earum componentium accuratius deferre. Hoc notari solet in documentis.

Color antithesis

Some combinations of colors that currently make up Bootstrap’s default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to insufficient color contrast (below the recommended WCAG 2.1 text color contrast ratio of 4.5:1 and the WCAG 2.1 non-text color contrast ratio of 3:1), particularly when used against a light background. Authors are encouraged to test their specific uses of color and, where necessary, manually modify/extend these default colors to ensure adequate color contrast ratios.

Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the .visually-hidden class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users.

<p class="text-danger">
  <span class="visually-hidden">Danger: </span>
  This action is not reversible
</p>

For visually hidden interactive controls, such as traditional “skip” links, use the .visually-hidden-focusable class. This will ensure that the control becomes visible once focused (for sighted keyboard users). Watch out, compared to the equivalent .sr-only and .sr-only-focusable classes in past versions, Bootstrap 5’s .visually-hidden-focusable is a standalone class, and must not be used in combination with the .visually-hidden class.

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

Reduced motion

Bootstrap includes support for the prefers-reduced-motion media feature. In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in Bootstrap (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels) will be disabled, and meaningful animations (such as spinners) will be slowed down.

On browsers that support prefers-reduced-motion, and where the user has not explicitly signaled that they’d prefer reduced motion (i.e. where prefers-reduced-motion: no-preference), Bootstrap enables smooth scrolling using the scroll-behavior property.