progressbar

Kiedy używać

Używaj <progress value="42" max="100">. Element natywny jest trudny do jednolitego ostylowania w różnych przeglądarkach — to główny powód, dla którego sięga się po role="progressbar" na własnym <div>.

Dwa warianty:

• Determistyczny — znasz łączną wartość. Ustaw aria-valuemin, aria-valuemax i aktualizuj aria-valuenow w miarę postępu pracy.
• Niedetermistyczny — nie znasz łącznej wartości. Pomiń aria-valuenow (lub go nie ustawiaj). Czytnik ekranu ogłasza „zajęty” / „ładowanie” bez wartości procentowej.

Ustaw aria-valuetext, gdy sama liczba nie jest znacząca — np. aria-valuetext="Przesyłanie zdjęcia 3 z 8" brzmi lepiej niż „37 procent”.

Progressbar NIE jest regionem na żywo — czytniki ekranu nie ogłaszają każdej zmiany aria-valuenow. Jeśli potrzebujesz, żeby zmiana była odczytana, użyj dodatkowo role="status" na elemencie towarzyszącym z tekstem postępu czytelnym dla człowieka.

Typowe błędy

• role="progressbar" na kręcącym się wskaźniku bez aria-label. Rola jest ogłaszana, ale brak nazwy zadania.
• Używanie role="progressbar" dla niedetermistycznego wskaźnika przy jednoczesnym ustawieniu aria-valuenow="0". Ogłasza „0 procent ukończone” w nieskończoność.
• Zapomnienie o usunięciu progressbar (lub jego aria-busy) po zakończeniu pracy. Niektóre czytniki ekranu nadal odpytują element.
• Łączenie progressbar z ukrytym wizualnie procentem bez aktualizacji któregokolwiek z nich podczas zawieszenia przesyłania. Użytkownicy otrzymują zablokowany stan bez ogłoszenia.
• Umieszczenie role="progressbar" zarówno na kontenerze opakowującym, jak i na wewnętrznym pasku wypełnienia. Zduplikowane role; wybierz jedną.

Przykład

<!-- Zalecane -->
<label for="upload">Przesyłanie</label>
<progress id="upload" value="42" max="100">42%</progress>

<!-- Własny wskaźnik determistyczny -->
<div id="uploadLabel">Przesyłanie zdjęcia 3 z 8</div>
<div
  role="progressbar"
  aria-labelledby="uploadLabel"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="37"
></div>