🤖 Deploy to GitHub Pages: 784d405 from branch refs/heads/main

techniques/aria/ARIA11.html

@@ -120,7 +120,7 @@ <h2 class="box-h box-h-icon">About this Technique</h2>
 </p>
       <p>Landmarks also can help sighted keyboard-only users navigate to sections of a page using a <a href="https://www.tpgi.com/improving-access-to-landmark-navigation/">browser plugin</a>. 
 </p>
-      <p>Landmarks are inserted into the page using the role attribute on an element that marks the section. The value of the attribute is the name of the landmark. These role values are listed below:</p>
+      <p>Landmarks are inserted into the page using the role attribute on an element that marks the section. The value of the attribute is the name of the landmark. These role values are listed below. For HTML mappings of landmark roles, refer to the <cite>Rules of ARIA attribute usage by HTML element</cite> table in the <a href="https://www.w3.org/TR/html-aria/">ARIA In HTML recommendation</a>.</p>
       <ul>
          <li><code class="language-html">banner</code>: A region that contains the prime heading or internal title of a page.</li>
          <li><code class="language-html">navigation</code>: A region that contains navigation links links to other pages or different parts of the same page.</li>

techniques/aria/ARIA22.html

@@ -110,20 +110,20 @@ <h2 class="box-h box-h-icon">About this Technique</h2>
 			<h2>Description</h2>
 			<p>
 				This technique uses the <code>status</code> role from the ARIA specification to notify Assistive Technologies (AT) when content has been updated with information about the user's or application's status. This is done by adding <code>role="status"</code> to the element that contains the <a href="https://w3c.github.io/wcag/guidelines/22/#dfn-status-messages" target="terms">status message</a>. The aria live region role of <code>status</code> has an implicit <code>aria-live</code> value of <code>polite</code>, which allows a user to be notified via AT (such as a screen reader) when status messages are added. The role of <code>status</code> also has a default <code>aria-atomic</code> value of <code>true</code>, so that updates to the container marked with a role of <code>status</code> will result in the AT presenting the entire contents of the container to the user, including any author-defined labels (or additional nested elements). Such additional context can be critical where the status message text alone will not provide an equivalent to the visual experience. The content of the aria-live container is automatically read by the AT, without the AT having to focus on the place where the text is displayed. See <a href="https://www.w3.org/TR/wai-aria/#status">WAI-ARIA status (role)</a> for more details.</p>
-
+<p>Note that since <code>role="status"</code> is currently not treated as atomic by default in some environments, it is advisable to add an explicit <code>aria-atomic="true"</code> if the entire contents of the container should be announced.</p>
 		</section>
 		<section id="examples">
 			<h2>Examples</h2>
 			<section class="example" id="example-1-including-a-search-results-message">
 				<h3>Example 1: Including a search results message</h3>
 				<p>After a user presses a Search button, the page content is updated to include the results of the search, which are displayed in a section below the Search button. The change to content also includes the message <samp>"5 results returned"</samp> near the top of this new content. This text is given an appropriate role for a status message. A screen reader will announce "5 results returned".</p>
-<pre xml:space="preserve"><code class="language-html">&lt;div role="status"&gt;5 results returned.&lt;/div&gt;</code></pre>
+<pre xml:space="preserve"><code class="language-html">&lt;div role="status" aria-atomic="true"&gt;5 results returned.&lt;/div&gt;</code></pre>
 				<p class="working-example"><a href="../../working-examples/aria-role-status-searchresults/">Working example: role=status on search results</a></p>
 			</section>
 			<section class="example" id="example-2-updating-the-shopping-cart-status">
 				<h3>Example 2: Updating the shopping cart status</h3>
-				<p>After a user presses an Add to Shopping Cart button, content near the Shopping Cart icon updates to read "1 items". The container for this text (in this case a <code class="language-html">&lt;p&gt;</code>) is marked with the role of <code class="language-html">status</code>. Because it adds visual context, the shopping cart image — with succinct and accurate <code class="language-html">alt</code> text — is also placed in the container. Due to the default <code class="language-html">aria-atomic</code> value, a screen reader will announce "Shopping cart, six items".</p>
-<pre xml:space="preserve"><code class="language-html">&lt;p role="status" &gt;
+				<p>After a user presses an Add to Shopping Cart button, content near the Shopping Cart icon updates to read "1 items". The container for this text (in this case a <code class="language-html">&lt;p&gt;</code>) is marked with the role of <code class="language-html">status</code>. Because it adds visual context, the shopping cart image — with succinct and accurate <code class="language-html">alt</code> text — is also placed in the container. Due to the <code class="language-html">aria-atomic</code> value, a screen reader will announce "Shopping cart, six items".</p>
+<pre xml:space="preserve"><code class="language-html">&lt;p role="status" aria-atomic="true"&gt;
   &lt;img src="shopping-cart.png" alt="Shopping Cart"&gt;
   &lt;span id="cart"&gt;0&lt;/span&gt; items
 &lt;/p&gt;

working-examples/aria-role-status-searchresults/index.html

@@ -19,7 +19,7 @@ <h1>Using <code>role=status</code> to Provide Status Message on Search Results</
 			</div>
 				<h2>Results</h2>
 
-				<p role="status" id="resultsmsg"></p>
+				<p role="status" aria-atomic="true" id="resultsmsg"></p>
 
 
 		</div>

working-examples/aria-role-status-shoppingcart/index.html

@@ -17,7 +17,7 @@
 			<h1>Using <code>role=status</code> to Provide Status Message on Shopping Cart</h1>
 			<p>This simple script demonstrates how a shopping cart counter is updated and surfaced using the aria <code>status</code> role. Here the role is placed on the paragraph containing the dynamically updated text, and the shopping cart image's alt provides additional context. Due to the default <code>aria-atomic="true"</code>, a screenreader should announce "Shopping Cart # items" or (depending on browser compatibility) "# items" each time the Buy Pink Flamingos button is selected.</p>	
 			<hr>
-			<p role="status"><img src="shopping-cart.png" alt="Shopping Cart"><br>
+			<p role="status" aria-atomic="true"><img src="shopping-cart.png" alt="Shopping Cart"><br>
 			<span id="cart">0</span> items</p>
 
 			<h2>Shop at our single-product store</h2>