Dostępność

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

Na tej stronie

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.1 (A/AA/AAA), Section 508 oraz podobne standardy i wymagania dotyczące dostępności , powinno być całkowicie 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

Niektóre kombinacje kolorów, które obecnie składają się na domyślną paletę Bootstrap—używaną w całym frameworku do takich rzeczy jak warianty przycisków, warianty alertów, wskaźniki sprawdzania poprawności formularza — mogą prowadzić do niewystarczającego kontrastu kolorów (poniżej zalecanego współczynnika kontrastu koloru tekstu WCAG 2.1 wynoszącego 4,5:1 oraz współczynnik kontrastu koloru nietekstowego WCAG 2.1 wynoszący 3: 1 ), zwłaszcza gdy jest używany na jasnym tle. Zachęca się autorów do przetestowania ich konkretnych zastosowań kolorów i, w razie potrzeby, do ręcznego modyfikowania/rozszerzania tych domyślnych kolorów, 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ą .visually-hiddenklasy. 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="visually-hidden">Danger: </span>
  This action is not reversible
</p>

W przypadku wizualnie ukrytych interaktywnych kontrolek, takich jak tradycyjne łącza „pomiń”, użyj .visually-hidden-focusableklasy. Zapewni to, że kontrolka stanie się widoczna po skupieniu (dla widzących użytkowników klawiatury). Uważaj, w porównaniu do odpowiednika .sr-onlyi .sr-only-focusableklas w poprzednich wersjach, Bootstrap 5 .visually-hidden-focusablejest klasą samodzielną i nie może być używany w połączeniu z .visually-hiddenklasą.

<a class="visually-hidden-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 zmniejszonego ruchu, większość efektów przejścia CSS w Bootstrap (na przykład, gdy modalne okno dialogowe jest otwierane lub zamykane albo animacja przesuwania w karuzeli) zostanie wyłączona, a znaczące animacje ( takich jak błystki obrotowe) zostaną spowolnione.

W przeglądarkach, które obsługują prefers-reduced-motion, i w których użytkownik nie zasygnalizował wyraźnie, że woli ograniczony ruch (tj. gdzie prefers-reduced-motion: no-preference), Bootstrap umożliwia płynne przewijanie za pomocą scroll-behaviorwłaściwości.