Accesibilitate

O scurtă prezentare generală a caracteristicilor și limitărilor Bootstrap pentru crearea de conținut accesibil.

Pe aceasta pagina

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.

Prezentare generală și limitări

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.1 (A/AA/AAA), Secțiunea 508 și standarde și cerințe similare de accesibilitate.

Markup structural

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.

Componente interactive

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 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.

Contrastul culorilor

Unele combinații de culori care alcătuiesc în prezent paleta implicită a Bootstrap - utilizate în cadrul cadru pentru lucruri precum variații de butoane, variații de alertă, indicatori de validare a formularelor - pot duce la un contrast de culoare insuficient (sub raportul de contrast al culorilor recomandat WCAG 2.1 de 4,5:1). și raportul de contrast al culorilor WCAG 2.1 non-text de 3:1 ), în special atunci când este utilizat pe un fundal deschis. Autorii sunt încurajați să-și testeze utilizările specifice ale culorii și, acolo unde este necesar, să modifice/extinde manual aceste culori implicite pentru a asigura rapoarte adecvate de contrast de culoare.

Conținutul care ar trebui să fie ascuns vizual, dar să rămână accesibil tehnologiilor de asistență, cum ar fi cititoarele de ecran, poate fi stilat folosind .visually-hiddenclasa. Acest lucru poate fi util în situațiile în care informațiile vizuale suplimentare sau indicii (cum ar fi sensul indicat prin utilizarea culorii) trebuie să fie transmise și utilizatorilor non-vizuali.

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

Pentru controale interactive ascunse vizual, cum ar fi linkurile tradiționale „săriți”, utilizați .visually-hidden-focusableclasa. Acest lucru va asigura că controlul devine vizibil odată focalizat (pentru utilizatorii de tastatură văzători). Atenție, în comparație cu echivalentul .sr-onlyși cu .sr-only-focusableclasele din versiunile anterioare, Bootstrap 5 .visually-hidden-focusableeste o clasă de sine stătătoare și nu trebuie utilizată în combinație cu .visually-hiddenclasa.

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

Mișcare redusă

Bootstrap include suport pentru prefers-reduced-motioncaracteristica media . În browserele/mediile care permit utilizatorului să-și specifice preferința pentru mișcare redusă, majoritatea efectelor de tranziție CSS din Bootstrap (de exemplu, când este deschisă sau închisă un dialog modal sau animația glisantă în carusele) vor fi dezactivate și animațiile semnificative ( precum spinnerele) vor fi încetinite.

Pe browserele care acceptă prefers-reduced-motion, și unde utilizatorul nu a semnalat în mod explicit că ar prefera mișcare redusă (adică unde prefers-reduced-motion: no-preference), Bootstrap permite derularea lină folosind scroll-behaviorproprietatea.