Accesibilidade

Unha breve visión xeral das funcións e limitacións de Bootstrap para a creación de contido accesible.

Nesta páxina

Bootstrap ofrece un marco fácil de usar de estilos preparados, ferramentas de deseño e compoñentes interactivos, o que permite aos desenvolvedores crear sitios web e aplicacións visualmente atractivos, ricos funcionalmente e accesibles desde o primeiro momento.

Visión xeral e limitacións

A accesibilidade global de calquera proxecto construído con Bootstrap depende en gran parte do marcado do autor, do estilo adicional e dos scripts que incluíron. Non obstante, sempre que estes se implementaran correctamente, debería ser perfectamente posible crear sitios web e aplicacións con Bootstrap que cumpran coa WCAG 2.1 (A/AA/AAA), Sección 508 e estándares e requisitos de accesibilidade similares.

Marcado estrutural

O estilo e o deseño de Bootstrap pódense aplicar a unha ampla gama de estruturas de marcado. Esta documentación ten como obxectivo proporcionar aos desenvolvedores exemplos de mellores prácticas para demostrar o uso de Bootstrap en si e ilustrar a marcaxe semántica adecuada, incluíndo formas en que se poden abordar os posibles problemas de accesibilidade.

Compoñentes interactivos

Os compoñentes interactivos de Bootstrap, como diálogos modais, menús despregables e consellos personalizados, están deseñados para funcionar con usuarios táctiles, ratos e teclados. Mediante o uso de funcións e atributos WAI - ARIA relevantes , estes compoñentes tamén deberían ser comprensibles e operables mediante tecnoloxías de asistencia (como lectores de pantalla).

Dado que os compoñentes de Bootstrap están deseñados a propósito para ser bastante xenéricos, os autores poden ter que incluír outros roles e atributos ARIA , así como o comportamento de JavaScript, para transmitir con máis precisión a natureza e a funcionalidade precisas do seu compoñente. Isto adoita indicarse na documentación.

Contraste de cor

Algunhas combinacións de cores que constitúen actualmente a paleta predeterminada de Bootstrap (utilizadas en todo o marco para cousas como variacións de botóns, variacións de alertas e indicadores de validación de formularios) poden provocar un contraste de cores insuficiente (por debaixo da proporción de contraste de cor de texto recomendada WCAG 2.1 de 4,5:1). e a relación de contraste de cores sen texto WCAG 2.1 de 3:1 ), especialmente cando se usa sobre un fondo claro. Anímase aos autores a probar os seus usos específicos da cor e, se é necesario, modificar/ampliar manualmente estas cores predeterminadas para garantir unhas proporcións de contraste de cores adecuadas.

O contido que debería estar oculto visualmente, pero que permanecerá accesible para tecnoloxías de asistencia, como lectores de pantalla, pódese modificar mediante a .visually-hiddenclase. Isto pode ser útil en situacións nas que tamén hai que transmitir información ou pistas visuais adicionais (como o significado indicado mediante o uso da cor) a usuarios non visuais.

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

Para os controis interactivos ocultos visualmente, como as ligazóns de "omitir" tradicionais, usa a .visually-hidden-focusableclase. Isto garantirá que o control se faga visible unha vez enfocado (para usuarios de teclado videntes). Coidado, en comparación co equivalente .sr-onlye .sr-only-focusableas clases das versións anteriores, Bootstrap 5 .visually-hidden-focusableé unha clase independente e non debe usarse en combinación coa .visually-hiddenclase.

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

Movemento reducido

Bootstrap inclúe soporte para a prefers-reduced-motionfunción multimedia . Nos navegadores/entornos que permiten ao usuario especificar a súa preferencia para o movemento reducido, a maioría dos efectos de transición CSS en Bootstrap (por exemplo, cando se abre ou se pecha un diálogo modal ou a animación deslizante en carruseles) desactivaranse e as animacións significativas ( como spinners) ralentizarase.

Nos navegadores que admiten prefers-reduced-motion, e onde o usuario non indicou explícitamente que prefire o movemento reducido (é dicir, onde prefers-reduced-motion: no-preference), Bootstrap permite un desprazamento suave usando a scroll-behaviorpropiedade.