Acessibilidade
Uma breve visão geral dos recursos e limitações do Bootstrap para a criação de conteúdo acessível.
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.
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.0 (A/AA/AAA), Seção 508 e padrões e requisitos de acessibilidade semelhantes.
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.
Os componentes interativos do Bootstrap - como diálogos 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 de seu componente. Isso geralmente é observado na documentação.
A maioria das cores que atualmente compõem a paleta padrão do Bootstrap - usada em toda a estrutura para coisas como variações de botões, variações de alertas, indicadores de validação de formulário - leva a um contraste de cores insuficiente (abaixo da proporção de contraste de cores WCAG 2.0 recomendada de 4,5:1 ) quando usado contra um fundo claro. Os autores precisarão 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 .sr-onlyclasse. 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="sr-only">Danger: </span>
This action is not reversible
</p>Para controles interativos visualmente ocultos, como links tradicionais de “pular”, .sr-onlypodem ser combinados com a .sr-only-focusableclasse. Isso garantirá que o controle fique visível uma vez focado (para usuários de teclado com visão).
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>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) será desabilitada. Atualmente, o suporte é limitado ao Safari no macOS e iOS.