Accessibilitat

Una breu visió general de les característiques i limitacions de Bootstrap per a la creació de contingut accessible.

En aquesta pàgina

Bootstrap ofereix un marc fàcil d'utilitzar d'estils ja fets, eines de disseny i components interactius, que permet als desenvolupadors crear llocs web i aplicacions visualment atractives, funcionalment riques i accessibles des de la caixa.

Visió general i limitacions

L'accessibilitat general de qualsevol projecte construït amb Bootstrap depèn en gran part del marcatge de l'autor, l'estil addicional i els scripts que hagin inclòs. No obstant això, sempre que s'hagin implementat correctament, hauria de ser perfectament possible crear llocs web i aplicacions amb Bootstrap que compleixin les normes i requisits d'accessibilitat WCAG 2.1 (A/AA/AAA), Secció 508 i similars.

Marcatge estructural

L'estil i el disseny de Bootstrap es poden aplicar a una àmplia gamma d'estructures de marques. Aquesta documentació pretén proporcionar als desenvolupadors exemples de bones pràctiques per demostrar l'ús del propi Bootstrap i il·lustrar el marcatge semàntic adequat, incloses les maneres en què es poden abordar possibles problemes d'accessibilitat.

Components interactius

Els components interactius de Bootstrap, com ara els diàlegs modals, els menús desplegables i els consells d'eines personalitzats, estan dissenyats per funcionar per a usuaris tàctils, ratolí i teclat. Mitjançant l'ús de rols i atributs WAI - ARIA rellevants , aquests components també haurien de ser comprensibles i operables mitjançant tecnologies d'assistència (com ara lectors de pantalla).

Com que els components de Bootstrap estan dissenyats a propòsit per ser força genèrics, és possible que els autors hagin d'incloure més funcions i atributs ARIA , així com el comportament de JavaScript, per transmetre amb més precisió la naturalesa i la funcionalitat precisa del seu component. Això normalment s'anota a la documentació.

Contrast de color

Algunes combinacions de colors que componen actualment la paleta predeterminada de Bootstrap, que s'utilitzen a tot el marc per a coses com ara variacions de botons, variacions d'alerta, indicadors de validació de formularis, poden provocar un contrast de color insuficient (per sota de la proporció de contrast de color del text recomanada WCAG 2.1 de 4,5:1). i la relació de contrast de color no text WCAG 2.1 de 3:1 ), especialment quan s'utilitza sobre un fons clar. S'anima als autors a provar els seus usos específics del color i, quan sigui necessari, modificar/ampliar manualment aquests colors per defecte per garantir unes proporcions de contrast de color adequades.

El contingut que s'hauria d'ocultar visualment, però romandre accessible per a tecnologies d'assistència com ara lectors de pantalla, es pot dissenyar amb la .visually-hiddenclasse. Això pot ser útil en situacions en què també cal transmetre informació visual o indicis addicionals (com ara el significat indicat mitjançant l'ús del color) als usuaris no visuals.

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

Per als controls interactius visualment ocults, com ara els enllaços tradicionals de "omissió", utilitzeu la .visually-hidden-focusableclasse. Això garantirà que el control es faci visible un cop enfocat (per a usuaris de teclat vidents). Vigileu, en comparació amb l'equivalent .sr-onlyi .sr-only-focusableles classes de les versions anteriors, Bootstrap 5 .visually-hidden-focusableés una classe autònoma i no s'ha d'utilitzar en combinació amb la .visually-hiddenclasse.

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

Moviment reduït

Bootstrap inclou suport per a la prefers-reduced-motionfunció multimèdia . En els navegadors/entorns que permeten a l'usuari especificar la seva preferència per al moviment reduït, la majoria dels efectes de transició CSS a Bootstrap (per exemple, quan s'obre o tanca un diàleg modal, o l'animació lliscant en carrusels) es desactivaran i les animacions significatives ( com els spinners) es reduirà.

Als navegadors que admeten prefers-reduced-motion, i on l'usuari no ha indicat explícitament que preferiria el moviment reduït (és a dir, on prefers-reduced-motion: no-preference), Bootstrap permet un desplaçament suau mitjançant la scroll-behaviorpropietat.