Acessibilidade

Uma breve visão geral dos recursos e limitações do Bootstrap para a criação de conteúdo acessível.

Nesta página

O Bootstrap fornece uma estrutura fácil de usar de estilos prontos, ferramentas de layout e componentes interativos, permitindo que os desenvolvedores criem sites e aplicativos visualmente atraentes, funcionalmente ricos 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 do autor, estilo adicional e scripts incluídos. No entanto, desde que implementados corretamente, deve ser perfeitamente possível criar sites e aplicativos com Bootstrap que atendam às WCAG 2.1 (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 aos desenvolvedores exemplos de práticas recomendadas para demonstrar o uso do próprio Bootstrap e ilustrar a marcação semântica apropriada, incluindo maneiras pelas quais possíveis preocupações de acessibilidade podem ser abordadas.

Componentes interativos

Os componentes interativos do Bootstrap — como caixas de diálogo modais, menus suspensos e dicas de ferramentas personalizadas — são projetados para funcionar com usuários de toque, mouse e teclado. Por meio do uso de funções 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, os autores podem precisar incluir outras funções e atributos ARIA , bem como o comportamento do 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—usada em toda a estrutura para coisas como variações de botão, variações de alerta, indicadores de validação de formulário—podem levar a um contraste de cor insuficiente (abaixo da taxa de contraste de cor de texto recomendada WCAG 2.1 de 4,5:1 e a relação de contraste de cores sem texto WCAG 2.1 de 3:1 ), especialmente quando usado contra um fundo claro. Os autores são incentivados a testar seus usos específicos de cores e, quando necessário, modificar/estender manualmente essas cores padrão para garantir taxas de contraste de cores adequadas.

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

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

Para controles interativos visualmente ocultos, como links tradicionais de “pular”, use a .visually-hidden-focusableclasse. Isso garantirá que o controle fique visível uma vez focado (para usuários de teclado com visão). Cuidado, comparado ao equivalente .sr-onlye .sr-only-focusableclasses em versões anteriores, o Bootstrap 5 .visually-hidden-focusableé uma classe autônoma e não deve ser usado em combinação com a .visually-hiddenclasse.

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

Movimento reduzido

Bootstrap inclui suporte para o prefers-reduced-motionrecurso de mídia . Em navegadores/ambientes que permitem ao usuário especificar sua preferência por movimento reduzido, a maioria dos efeitos de transição CSS no Bootstrap (por exemplo, quando uma caixa de diálogo modal é aberta ou fechada, ou a animação deslizante em carrosséis) será desabilitada e animações significativas ( como spinners) serão mais lentos.

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