Progress bar #a11y #html

progress.html

<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#accessibility_concerns -->

<!-- OPTION A -->

<label
  >Uploading Document: <progress value="70" max="100">70 %</progress></label
>

<!-- OPTION B -->

<label for="progress-bar">Uploading Document</label>
<progress id="progress-bar" value="70" max="100">70 %</progress>

<!-- ----- -->

<!-- If the <progress> element is describing the loading progress of a section of a page -->

<div aria-busy="true" aria-describedby="progress-bar">
  <!-- content for this region is loading -->
</div>

<!-- ... -->

<progress id="progress-bar" aria-label="Content loading…"></progress>