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

Most colors that currently make up Bootstrap’s default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—lead to insufficient color contrast (below the recommended WCAG 2.0 color contrast ratio of 4.5:1) when used against a light background. Authors will need to manually modify/extend these default colors to ensure adequate color contrast ratios.

Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the .sr-only class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users.

<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).