Acessibilidade#

O Bootstrap fornece um framework fácil de usar de estilos prontos, ferramentas de layout e componentes interativos, permitindo que as pessoas desenvolvedoras criem sites e aplicações que sejam visualmente atraentes, funcionalmente ricas e acessíveis imediatamente.

Visão geral e limitações#

A acessibilidade geral de qualquer projeto criado com o Bootstrap depende em grande parte da marcação das pessoas autoras, estilo adicional e script que elas incluíram. No entanto, desde que tenham sido implementados corretamente, deve ser perfeitamente possível criar sites e aplicações com o Bootstrap que atendam à WCAG 2.2 (A/AA/AAA), Seção 508 e padrões e requisitos de acessibilidade semelhantes.

Marcação estrutural#

O estilo e o layout do Bootstrap podem ser aplicados a uma ampla variedade de estruturas de marcação. Esta documentação tem como objetivo fornecer às pessoas desenvolvedoras exemplos de melhores práticas para demonstrar o uso do Bootstrap em si e ilustrar a marcação semântica apropriada, incluindo maneiras pelas quais potenciais preocupações com acessibilidade podem ser abordadas.

Componentes interativos#

Os componentes interativos do Bootstrap — como caixas de diálogo modais, menus suspensos e tooltips personalizados — são projetados para funcionar para pessoas usuárias de toque, mouse e teclado. Por meio do uso de papéis e atributos WAI-ARIA relevantes, esses componentes também devem ser compreensíveis e operáveis usando tecnologias assistivas (como leitores de tela).

Como os componentes do Bootstrap são projetados propositalmente para serem bastante genéricos, as pessoas autoras podem precisar incluir mais papéis e atributos ARIA, bem como comportamento JavaScript, para transmitir com mais precisão a natureza e a funcionalidade precisas de seu componente. Isso geralmente é observado na documentação.

Contraste de cores#

Algumas combinações de cores que atualmente compõem a paleta padrão do Bootstrap — usadas em todo o framework para coisas como variações de botões, variações de alertas, indicadores de validação de formulários — podem levar a contrastes de cores insuficientes (abaixo da proporção de contraste de cores de texto recomendada pelo WCAG 2.2 de 4,5:1 e da proporção de contraste de cores não textuais do WCAG 2.2 de 3:1), particularmente quando usadas em um fundo claro. As pessoas autoras são encorajadas a testar seus usos específicos de cores e, quando necessário, modificar/estender manualmente essas cores padrão para garantir proporções de contraste de cores adequadas.

Conteúdo visualmente oculto#

O conteúdo que deve ser visualmente oculto, mas permanecer acessível a tecnologias assistivas, como leitores de tela, pode ser estilizado usando a classe .visually-hidden. Isso pode ser útil em situações em que informações ou dicas visuais adicionais (como significado denotado pelo uso de cores) também precisam ser transmitidas a pessoas usuárias não visuais.

<p class="text-danger">
  <span class="visually-hidden">Perigo: </span>
  Esta ação não é reversível
</p>

Para controles interativos visualmente ocultos, como links tradicionais de "pular", use a classe .visually-hidden-focusable. Isso garantirá que o controle se torne visível quando focado (para pessoas usuárias de teclado com visão). Cuidado, comparada às classes equivalentes .sr-only e .sr-only-focusable em versões anteriores, .visually-hidden-focusable do Bootstrap 5 é uma classe que funciona sozinha e não deve ser usada em combinação com a classe .visually-hidden.

<a class="visually-hidden-focusable" href="#content">Pular para o conteúdo principal</a>

Movimento reduzido#

O Bootstrap inclui suporte para o recurso de mídia prefers-reduced-motion. Em navegadores/ambientes que permitem que a perssoa usuária especifique sua preferência por movimento reduzido, a maioria dos efeitos de transição CSS no Bootstrap (por exemplo, quando um diálogo modal é aberto ou fechado, ou a animação deslizante em carrosséis) serão desabilitados, e animações significativas (como spinners) serão desaceleradas.

Em navegadores que suportam prefers-reduced-motion, e onde a pessoa usuária não sinalizou explicitamente que prefere movimento reduzido (ou seja, onde prefers-reduced-motion: no-preference), o Bootstrap habilita a rolagem suave usando a propriedade scroll-behavior.