Accessibilitat

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

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

Visió general i limitacions

L'accessibilitat global de qualsevol projecte creat 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.0 (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 oferir 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, de ratolí i de 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 rols 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

La majoria dels 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, provoquen un contrast de color insuficient (per sota de la relació de contrast de color recomanada WCAG 2.0 de 4,5:1 ) quan s'utilitza contra un fons clar. Els autors hauran de 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 .sr-onlyclasse. 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="sr-only">Danger: </span>
  This action is not reversible
</p>

Per als controls interactius visualment ocults, com els enllaços tradicionals de "omissió", .sr-onlyes poden combinar amb la .sr-only-focusableclasse. Això garantirà que el control es faci visible un cop enfocat (per a usuaris de teclat vidents).

<a class="sr-only sr-only-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 de 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.