Accesibilitate
O scurtă prezentare generală a caracteristicilor și limitărilor Bootstrap pentru crearea de conținut accesibil.
Bootstrap oferă un cadru ușor de utilizat de stiluri gata făcute, instrumente de aspect și componente interactive, permițând dezvoltatorilor să creeze site-uri web și aplicații care sunt atrăgătoare din punct de vedere vizual, bogate din punct de vedere funcțional și accesibile imediat.
Accesibilitatea generală a oricărui proiect construit cu Bootstrap depinde în mare parte de marcajul autorului, stilul suplimentar și scriptul pe care le-au inclus. Cu toate acestea, cu condiția ca acestea să fi fost implementate corect, ar trebui să fie perfect posibil să se creeze site-uri web și aplicații cu Bootstrap care să îndeplinească WCAG 2.0 (A/AA/AAA), Secțiunea 508 și standarde și cerințe similare de accesibilitate.
Stilul și aspectul Bootstrap pot fi aplicate unei game largi de structuri de marcare. Această documentație își propune să ofere dezvoltatorilor exemple de cele mai bune practici pentru a demonstra utilizarea Bootstrap în sine și pentru a ilustra marcarea semantică adecvată, inclusiv modalități prin care pot fi rezolvate potențialele probleme de accesibilitate.
Componentele interactive ale Bootstrap, cum ar fi dialogurile modale, meniurile drop-down și sfaturile personalizate, sunt concepute pentru a funcționa pentru utilizatorii de atingere, mouse și tastatură. Prin utilizarea rolurilor și atributelor relevante WAI - ARIA , aceste componente ar trebui, de asemenea, să fie înțelese și operabile folosind tehnologii de asistență (cum ar fi cititoarele de ecran).
Deoarece componentele Bootstrap sunt concepute în mod intenționat pentru a fi destul de generice, autorii ar putea avea nevoie să includă alte roluri și atribute ARIA , precum și comportamentul JavaScript, pentru a transmite mai precis natura și funcționalitatea exactă a componentei lor. Acest lucru este de obicei menționat în documentație.
Most colors that currently make up Bootstrap’s default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—lead to insufficient color contrast (below the recommended WCAG 2.0 color contrast ratio of 4.5:1) when used against a light background. Authors will need to 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 .sr-only 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="sr-only">Danger: </span>
This action is not reversible
</p>For visually hidden interactive controls, such as traditional “skip” links, .sr-only can be combined with the .sr-only-focusable class. This will ensure that the control becomes visible once focused (for sighted keyboard users).
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>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) will be disabled. Currently, support is limited to Safari on macOS and iOS.