Accesibilidade

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

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 as normas e requisitos de accesibilidade WCAG 2.1 (A/AA/AAA), Sección 508 e similares.

Marcaxe estrutural

O estilo e 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 de ferramentas 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 compoñ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 .sr-onlyclase. 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="sr-only">Danger: </span>
  This action is not reversible
</p>

Para os controis interactivos visualmente ocultos, como as ligazóns de "omitir" tradicionais, .sr-onlypódense combinar coa .sr-only-focusableclase. Isto garantirá que o control se faga visible unha vez enfocado (para usuarios de teclado videntes).

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