Ruigsinneachd

Sealladh farsaing air feartan agus crìochan Bootstrap airson susbaint ruigsinneach a chruthachadh.

Air an duilleig seo

Tha Bootstrap a’ toirt seachad frèam furasta a chleachdadh de stoidhlichean deiseil, innealan cruth, agus co-phàirtean eadar-ghnìomhach, a’ leigeil le luchd-leasachaidh làraich-lìn agus tagraidhean a chruthachadh a tha tarraingeach gu fradharcach, beairteach le gnìomhachd agus ruigsinneach a-mach às a’ bhogsa.

Sealladh farsaing agus crìochan

Tha ruigsinneachd iomlan pròiseact sam bith a chaidh a thogail le Bootstrap gu mòr an urra ri comharrachadh an ùghdair, an stoidhle a bharrachd, agus an sgrìobhadh a tha iad air a ghabhail a-steach. Ach, fhad ‘s a tha iad sin air an cur an gnìomh gu ceart, bu chòir gum biodh e comasach gu foirfe làraich-lìn agus tagraidhean a chruthachadh le Bootstrap a choileanas WCAG 2.1 (A/AA/AAA), Earrann 508 , agus inbhean is riatanasan ruigsinneachd coltach ris.

Comharrachadh structarail

Faodar stoidhle agus cruth Bootstrap a chuir an sàs ann an raon farsaing de structaran comharrachaidh. Tha an sgrìobhainn seo ag amas air eisimpleirean de chleachdadh as fheàrr a thoirt do luchd-leasachaidh gus cleachdadh Bootstrap fhèin a nochdadh agus comharrachadh semantach iomchaidh a nochdadh, a’ toirt a-steach dòighean anns an gabh dèiligeadh ri draghan ruigsinneachd.

Co-phàirtean eadar-ghnìomhach

Bootstrap’s interactive components—such as modal dialogs, dropdown menus, and custom tooltips—are designed to work for touch, mouse, and keyboard users. Through the use of relevant WAI-ARIA roles and attributes, these components should also be understandable and operable using assistive technologies (such as screen readers).

Because Bootstrap’s components are purposely designed to be fairly generic, authors may need to include further ARIA roles and attributes, as well as JavaScript behavior, to more accurately convey the precise nature and functionality of their component. This is usually noted in the documentation.

Color contrast

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.