progressbar

När ska det användas

Använd <progress value="42" max="100">. Det inbyggda elementet är svårt att formatera konsekvent i olika webbläsare, vilket är huvudskälet till att nå för role="progressbar" på en anpassad <div> i stället.

Två varianter:

• Bestämd — du vet totalen. Sätt aria-valuemin, aria-valuemax och uppdatera aria-valuenow allteftersom arbetet fortskrider.
• Obestämd — du vet inte totalen. Utelämna aria-valuenow (eller sätt det inte). Skärmläsaren meddelar “pågående” / “läser in” utan en procentsats.

Sätt aria-valuetext när det bara siffra inte är meningsfullt — t.ex. aria-valuetext="Laddar upp foto 3 av 8" läses bättre än “37 procent”.

En progressbar är INTE ett levande område — skärmläsare meddelar inte varje aria-valuenow-förändring. Om du vill att förändringen ska läsas upp, använd också role="status" på ett kompanjonelement med den lättlästa framstegstext.

Vanliga fel

• role="progressbar" på en spinner utan aria-label. Rollen meddelas men det finns inget namn på uppgiften.
• Att använda role="progressbar" för en obestämd spinner OCH sätta aria-valuenow="0". Det meddelar “0 procent klart” för alltid.
• Att glömma att ta bort progressbar (eller dess aria-busy) när arbetet är klart. Vissa skärmläsare fortsätter att avfråga.
• Att kombinera en progressbar med en visuellt dold procentsats men inte uppdatera någotdera när uppladdningen stannar. Användare får ett fruset tillstånd utan meddelande.
• Att placera role="progressbar" på den omslutande behållaren OCH på den inre fyllningsstapeln. Duplicerade roller; välj en.

Exempel

<!-- Föredraget -->
<label for="upload">Uploading</label>
<progress id="upload" value="42" max="100">42%</progress>

<!-- Anpassad bestämd -->
<div id="uploadLabel">Uploading photo 3 of 8</div>
<div
  role="progressbar"
  aria-labelledby="uploadLabel"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="37"
></div>