Dostępność

Krótki przegląd funkcji i ograniczeń Bootstrap w zakresie tworzenia dostępnych treści.

Bootstrap zapewnia łatwą w użyciu strukturę gotowych stylów, narzędzi do układu i interaktywnych komponentów, umożliwiając programistom tworzenie stron internetowych i aplikacji, które są atrakcyjne wizualnie, bogate funkcjonalnie i dostępne po wyjęciu z pudełka.

Przegląd i ograniczenia

Ogólna dostępność każdego projektu zbudowanego za pomocą Bootstrap zależy w dużej mierze od znaczników autora, dodatkowych stylów i skryptów, które dołączył. Jednak pod warunkiem, że zostały one poprawnie zaimplementowane, tworzenie stron internetowych i aplikacji z Bootstrapem, które spełniają wymagania WCAG 2.0 (A/AA/AAA), Section 508 oraz podobne standardy i wymagania dotyczące dostępności, powinno być jak najbardziej możliwe.

Znaczniki strukturalne

Styl i układ Bootstrapa można zastosować do szerokiej gamy struktur znaczników. Ta dokumentacja ma na celu dostarczenie deweloperom przykładów najlepszych praktyk, aby zademonstrować użycie samego Bootstrap i zilustrować odpowiednie znaczniki semantyczne, w tym sposoby rozwiązania potencjalnych problemów z dostępnością.

Komponenty interaktywne

Interaktywne komponenty Bootstrap — takie jak modalne okna dialogowe, rozwijane menu i niestandardowe podpowiedzi — są zaprojektowane do pracy z użytkownikami dotyku, myszy i klawiatury. Dzięki wykorzystaniu odpowiednich ról i atrybutów WAI - ARIA , komponenty te powinny być również zrozumiałe i obsługiwane przy użyciu technologii wspomagających (takich jak czytniki ekranu).

Ponieważ komponenty Bootstrap są celowo zaprojektowane tak, aby były dość ogólne, autorzy mogą potrzebować dodatkowych ról i atrybutów ARIA , a także zachowania JavaScript, aby dokładniej przekazać naturę i funkcjonalność ich komponentu. Jest to zwykle odnotowywane w dokumentacji.

Kontrast kolorów

Większość kolorów, które obecnie tworzą domyślną paletę Bootstrap — używaną w całym systemie do takich rzeczy, jak odmiany przycisków, odmiany alertów, wskaźniki sprawdzania poprawności formularza — prowadzi do niewystarczającego kontrastu kolorów (poniżej zalecanego współczynnika kontrastu kolorów WCAG 2.0 wynoszącego 4,5:1 ) w przypadku użycia przeciwko jasne tło. Autorzy będą musieli ręcznie zmodyfikować/rozszerzyć te domyślne kolory, aby zapewnić odpowiednie współczynniki kontrastu kolorów.

Treści, które powinny być ukryte wizualnie, ale pozostają dostępne dla technologii pomocniczych, takich jak czytniki ekranu, mogą być stylizowane za pomocą .sr-onlyklasy. Może to być przydatne w sytuacjach, w których dodatkowe informacje wizualne lub wskazówki (takie jak znaczenie oznaczone przez użycie koloru) muszą być również przekazane użytkownikom niewizualnym.

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

W przypadku wizualnie ukrytych kontrolek interaktywnych, takich jak tradycyjne łącza „pomiń”, .sr-onlymożna połączyć z .sr-only-focusableklasą. Zapewni to, że kontrolka stanie się widoczna po skupieniu (dla widzących użytkowników klawiatury).

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

Zredukowany ruch

Bootstrap zawiera wsparcie dla funkcji prefers-reduced-motionmediów . W przeglądarkach/środowiskach, które pozwalają użytkownikowi określić preferencje dotyczące ograniczonego ruchu, większość efektów przejścia CSS w Bootstrap (na przykład, gdy modalne okno dialogowe jest otwierane lub zamykane) będzie wyłączona. Obecnie wsparcie jest ograniczone do Safari na macOS i iOS.