Skip to content

Commit 2eb7413

Browse files
committed
added note about aria-value* attrs and status message
1 parent 9bd31aa commit 2eb7413

File tree

1 file changed

+4
-1
lines changed

1 file changed

+4
-1
lines changed

techniques/aria/technique-using-progressbar-role-with-a-status-message.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,10 @@ <h2>Description</h2>
1414
<section id="example">
1515
<h2>Example</h2>
1616
<p>This example simulates the progress of uploading a document. The progress of the upload is communicated to the user with an ARIA <code>progressbar</code> and visible text underneath the progress bar. The visible text is contained in an element with an <code>aria-live="polite"</code> attribute. This attribute tells screen readers to announce updates made to the content of the element.</p>
17-
<p>The following example can be seen as a <a href="../../working-examples/aria-role-status-progressbar/">working example</a>.</p>
17+
18+
<p class="note">The <code>aria-valuemin</code>, <code>aria-valuemax</code>, and <code>aria-valuenow</code> values on the <code>progressbar</code> component programmatically communicate the progress of the upload, but because the <code>progressbar</code> role is not a live region screen readers won't announce updates to those values. Programmatically connecting a status message to the <code>progressbar</code> to announce the changes in value, and a final "upload complete" message creates a better user experience.</p>
19+
20+
<p>The following code can also be seen as a <a href="../../working-examples/aria-role-status-progressbar/">working example</a>.</p>
1821

1922
<pre><code class="language-html">&lt;p id=&quot;upload-progress-label&quot;&gt;Uploading document: &lt;strong&gt;report.pdf&lt;/strong&gt;&lt;/p&gt;
2023
&lt;div

0 commit comments

Comments
 (0)