Phihlelelo

Kakaretšo ye kopana ya dikarolo tša Bootstrap le mellwane ya tlholo ya diteng tše di fihlelelwago.

Letlakaleng le

Bootstrap e fana ka tlhako ye bonolo go e šomiša ya mekgwa ye e lokišitšwego, didirišwa tša peakanyo, le dikarolo tša tirišano, go dumelela bahlami go hlama diwepesaete le dikgopelo tšeo di kgahlišago ka pono, di humilego ka mošomo, le tšeo di fihlelelwago ka ntle ga lepokisi.

Kakaretšo le mellwane

Phihlelelo ya kakaretšo ya projeke efe goba efe yeo e agilwego ka Bootstrap e ithekgile ka karolo ye kgolo ka go swaya ga mongwadi, setaele sa tlaleletšo, le go ngwala mo ba akaretšago. Le ge go le bjalo, ge fela tše di phethagaditšwe ka nepo, go swanetše go kgonega ka mo go phethagetšego go hlama diwepesaete le dikgopelo ka Bootstrap tšeo di phethagatšago WCAG 2.1 (A/AA/AAA), Karolo 508 , le maemo le dinyakwa tše di swanago tša phihlelelo.

Go swaya ga sebopego

Setaele le peakanyo ya Bootstrap di ka dirišwa go dibopego tše dintši tša go swaya. Ditokomane tše di ikemišeditše go fa bahlami mehlala ya mekgwa ye mekaone go laetša tšhomišo ya Bootstrap ka boyona le go bontšha go swaya ga maleba ga semantiki, go akaretšwa ditsela tšeo ka tšona dipelaelo tšeo di ka bago gona tša phihlelelo di ka rarollwago.

Dikarolo tša tirišano

Dikarolo tša tirišano tša Bootstrap—tše bjalo ka dipoledišano tša modal, dimenu tša go theoga le ditšhišinyo tša didirišwa tša tlwaelo—di hlametšwe go šomela badiriši ba go kgoma, toeba le khiiboto. Ka tšhomišo ya dikarolo le dika tša maleba tša WAI - ARIA , dikarolo tše gape di swanetše go kwešišega le go šoma ka go šomiša theknolotši ya go thuša (go swana le dibadi tša skrine).

Ka lebaka la gore dikarolo tša Bootstrap di hlamilwe ka morero gore e be tše di akaretšago ka toka, bangwadi ba ka swanelwa ke go akaretša dikarolo tše dingwe tša ARIA le dika, gammogo le boitshwaro bja JavaScript, go fetišetša ka nepo kudu tlhago ye e nepagetšego le mošomo wa karolo ya bona. Se gantši se lemogwa ka ditokomaneng.

Phapano ya mebala

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.