Generator dostępnego spinera CSS

Co robi wygenerowany CSS, a czego nie obejmuje

Narzędzie daje część wizualną: obramowany okrąg i obrót. Sam wizualny wskaźnik nie ma znaczenia dla technologii asystujących, ponieważ element jest pusty. Dostępność zapewniają znaczniki i jedna dodatkowa reguła CSS, którą dodajesz wokół nich.

Znaczniki informujące o stanie

<div class="loader" role="status" aria-label="Ładowanie wyników"></div>

role="status" oznacza element jako region na żywo, dzięki czemu wiele czytników ekranu ogłasza jego etykietę po pojawieniu się. aria-label powinna opisywać, co się ładuje, na przykład „Ładowanie wyników” lub „Zapisywanie”, a nie ogólnikowe słowo. Usuń element po zakończeniu pracy i pokaż nową treść.

Możesz też umieścić widoczny tekst obok pierścienia. Widoczny tekst pomaga wszystkim, także osobom, które słabo widzą ruch.

Uwzględnij ograniczenie ruchu

Niektórzy odwiedzający włączają ustawienie systemowe, które prosi strony o ograniczenie animacji. Uszanuj je, dodając zapytanie o media po wygenerowanym CSS:

@media (prefers-reduced-motion: reduce) {
  .loader {
    animation-duration: 3s;
  }
}

Ta reguła spowalnia obrót zamiast go usuwać, więc wskaźnik nadal wygląda na żywy, ale bez szybkiego ruchu. Jeśli wolisz sygnał statyczny, użyj animation: none; i pokaż obok pierścienia tekst „Ładowanie”.

Lista kontrolna kontrastu i rozmiaru

Ograniczenia

• Generator sam wybiera kolor toru (#eee). Zmień go w wklejonym CSS, jeśli tło strony jest podobne.
• Bardzo duża wartość prędkości sprawia, że pierścień migocze. Unikaj wartości poniżej około 0,5 sekundy.
• Nie polegaj wyłącznie na spinerze przy długim oczekiwaniu. Napisz tekstem, co się dzieje.

Szybki test

Włącz w systemie opcję ograniczenia ruchu i przeładuj stronę: pierścień powinien obracać się wolniej. Następnie przejdź po stronie klawiszem Tab, aby sprawdzić, czy spinner nigdy nie zabiera fokusu z elementu, z którego korzystał odwiedzający. Na koniec włącz czytnik ekranu i wywołaj raz stan ładowania, aby sprawdzić, czy etykieta jest ogłaszana po pojawieniu się elementu oraz czy nowa treść jest dostępna później.