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.0 (A/AA/AAA), Sección 508 e similares.

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

A maioría das cores que constitúen actualmente a paleta predeterminada de Bootstrap, usadas en todo o marco para cousas como variacións de botóns, variacións de alertas, indicadores de validación de formularios, levan a un contraste de cores insuficiente (por debaixo da relación de contraste de cores recomendada WCAG 2.0 de 4,5:1 ) cando se usa contra un fondo claro. Os autores terán que 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).