w3c · kfranqueiro · Sep 12, 2025 · Sep 12, 2025 · Sep 13, 2025 · Sep 13, 2025
diff --git a/techniques/aria/ARIA1.html b/techniques/aria/ARIA1.html
@@ -4,7 +4,7 @@
       <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove">
    </head>
    <body>
-      <h1>Using the <code class="language-html">aria-describedby</code> property to provide a descriptive label for user interface controls</h1>
+      <h1>Using the <code>aria-describedby</code> property to provide a descriptive label for user interface controls</h1>
       <section class="meta">
          <p class="id">ID: ARIA1</p>
          <p class="technology">Technology: aria</p>
@@ -16,29 +16,29 @@ <h2>When to Use</h2>
    </section>
    <section id="description">
       <h2>Description</h2>
-      <p>The purpose of this technique is to demonstrate how to use the WAI-ARIA <a href="https://www.w3.org/TR/wai-aria-1.2/#aria-describedby"><code class="language-html">aria-describedby</code></a> property to provide programmatically determined, descriptive information about a user interface element. The <code class="language-html">aria-describedby</code> property may be used to attach descriptive information to one or more elements through the use of an <code class="language-html">id</code> reference list. The <code class="language-html">id</code> reference list contains one or more unique element <code class="language-html">id</code>s.</p>
+      <p>The purpose of this technique is to demonstrate how to use the WAI-ARIA <a href="https://www.w3.org/TR/wai-aria-1.2/#aria-describedby"><code>aria-describedby</code></a> property to provide programmatically determined, descriptive information about a user interface element. The <code>aria-describedby</code> property may be used to attach descriptive information to one or more elements through the use of an <code>id</code> reference list. The <code>id</code> reference list contains one or more unique element <code>id</code>s.</p>
       <p>Refer to <a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a> for information on how to provide WAI-ARIA States and Properties with HTML. WAI-ARIA States and Properties are compatible with other languages as well; refer to documentation in those languages.</p>
       <div class="note">
-         <p>The <code class="language-html">aria-describedby</code> property is not designed to reference descriptions on an external resource - since it is an <code class="language-html">id</code>, it must reference an element in the same <abbr title="Document Object Model">DOM</abbr> document.</p>
+         <p>The <code>aria-describedby</code> property is not designed to reference descriptions on an external resource - since it is an <code>id</code>, it must reference an element in the same <abbr title="Document Object Model">DOM</abbr> document.</p>
       </div>
    </section>
    <section id="examples">
       <h2>Examples</h2>
       <section class="example">
-         <h3>Using <code class="language-html">aria-describedby</code> to associate instructions with form fields</h3>
+         <h3>Using <code>aria-describedby</code> to associate instructions with form fields</h3>
 
-            <p>Sample form field using <code class="language-html">aria-describedby</code> to associate instructions with form fields while there is a form label.</p>
-<pre xml:space="preserve"><code class="language-html">&lt;form&gt;
+            <p>Sample form field using <code>aria-describedby</code> to associate instructions with form fields while there is a form label.</p>
+<pre><code>&lt;form&gt;
   &lt;label for="fname"&gt;First name&lt;/label&gt;
   &lt;input aria-describedby="int2" autocomplete="given-name" id="fname" type="text"&gt;
   &lt;p id="int2"&gt;Your first name is sometimes called your "given name".&lt;/p&gt;
 &lt;/form&gt;</code></pre>
 
       </section>
       <section class="example">
-         <h3>Using <code class="language-html">aria-describedby</code> property to provide more detailed information about the button</h3>
+         <h3>Using <code>aria-describedby</code> property to provide more detailed information about the button</h3>
 
-<pre xml:space="preserve"><code class="language-html">&lt;div&gt;
+<pre><code>&lt;div&gt;
   &lt;span id="fontDesc"&gt;Select the font faces and sizes to be used on this page&lt;/span&gt;
   &lt;button aria-describedby="fontDesc" id="fontB" type="button"&gt;Fonts&lt;/button&gt;
 &lt;/div&gt;
@@ -59,7 +59,7 @@ <h2>Tests</h2>
       <section class="procedure">
          <h3>Procedure</h3>
          <ol>
-            <li>Check that there is a user interface control having an <code class="language-html">aria-describedby</code> attribute that references one or more elements via unique <code class="language-html">id</code>.</li>
+            <li>Check that there is a user interface control having an <code>aria-describedby</code> attribute that references one or more elements via unique <code>id</code>.</li>
             <li>Check that the referenced element or elements provide additional information about the user interface control.</li>
          </ol>
       </section>
@@ -93,7 +93,7 @@ <h2>Resources</h2>
               <a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a>.
             </li>
             <li>
-              <a href="https://developer.mozilla.org/en-US/docs/web/accessibility/aria/attributes/aria-describedby"><code class="language-html">aria-describedby</code> attribute (<abbr title="Mozilla Developer Network">MDN</abbr>)</a>.
+              <a href="https://developer.mozilla.org/en-US/docs/web/accessibility/aria/attributes/aria-describedby"><code>aria-describedby</code> attribute (<abbr title="Mozilla Developer Network">MDN</abbr>)</a>.
             </li>
             <li>
               <a href="https://www.w3.org/TR/aria-in-html/">Using WAI-ARIA in HTML</a>.

diff --git a/techniques/aria/ARIA10.html b/techniques/aria/ARIA10.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html><html lang="en"><head><title>Using aria-labelledby to provide a text alternative for non-text content</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></head><body><h1>Using aria-labelledby to provide a text alternative for non-text content</h1><section class="meta"><p class="id">ID: ARIA10</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>This technique applies to HTML with <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>.</p>
    </section><section id="description"><h2>Description</h2>
-      <p>The purpose of this technique is to provide a short description for an element that can be read by assistive technologies by using the <code class="language-html">aria-labelledby</code> attribute. The <code class="language-html">aria-labelledby</code> attribute associates an element with text that is visible elsewhere on the page by using an <code class="language-html">id</code> reference value that matches the <code class="language-html">id</code> attribute of the labeling element. Assistive technology such as screen readers use the text of the element identified by the value of the <code class="language-html">aria-labelledby</code> attribute as the text alternative for the element with the attribute.</p>
+      <p>The purpose of this technique is to provide a short description for an element that can be read by assistive technologies by using the <code>aria-labelledby</code> attribute. The <code>aria-labelledby</code> attribute associates an element with text that is visible elsewhere on the page by using an <code>id</code> reference value that matches the <code>id</code> attribute of the labeling element. Assistive technology such as screen readers use the text of the element identified by the value of the <code>aria-labelledby</code> attribute as the text alternative for the element with the attribute.</p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          <h3>Providing a short description for a complex graphic</h3>
 
-            <p>This example shows how to use the <code class="language-html">aria-labelledby</code> attribute to provide a short text description for a read-only complex graphic of an star rating pattern; the graphic is composed of several image elements. The text alternative for the graphic is the label, visible on the page beneath the star pattern.</p>
-<pre xml:space="preserve"><code class="language-html">&lt;div role="img" aria-labelledby="star-id"&gt;
+            <p>This example shows how to use the <code>aria-labelledby</code> attribute to provide a short text description for a read-only complex graphic of an star rating pattern; the graphic is composed of several image elements. The text alternative for the graphic is the label, visible on the page beneath the star pattern.</p>
+<pre><code>&lt;div role="img" aria-labelledby="star-id"&gt;
   &lt;img src="fullstar.png" alt=""&gt;
   &lt;img src="fullstar.png" alt=""&gt;
   &lt;img src="fullstar.png" alt=""&gt;
@@ -22,9 +22,9 @@ <h3>Providing a short description for a complex graphic</h3>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
          <ol>
-            <li>Examine each element where the <code class="language-html">aria-labelledby</code> attribute is present and the element does not support the <code class="language-html">alt</code> attribute.</li>
-            <li>Check whether the value of the <code class="language-html">aria-labelledby</code> attribute is the <code class="language-html">id</code> of an element on the web page.</li>
-            <li>Determine that the text of the element identified by the <code class="language-html">aria-labelledby</code> attribute accurately labels the element, provides a description of its purpose, or provides equivalent information.</li>
+            <li>Examine each element where the <code>aria-labelledby</code> attribute is present and the element does not support the <code>alt</code> attribute.</li>
+            <li>Check whether the value of the <code>aria-labelledby</code> attribute is the <code>id</code> of an element on the web page.</li>
+            <li>Determine that the text of the element identified by the <code>aria-labelledby</code> attribute accurately labels the element, provides a description of its purpose, or provides equivalent information.</li>
          </ol>
       </section>
       <section class="results"><h3>Expected Results</h3>

diff --git a/techniques/aria/ARIA11.html b/techniques/aria/ARIA11.html
@@ -22,14 +22,14 @@ <h1>Using ARIA landmarks to identify regions of a page</h1>
 </p>
       <p>Landmarks are inserted into the page using the role attribute on an element that marks the section. The value of the attribute designates the type of 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 mostly site-oriented content, such as the logo or a site-specific search tool.</li>
-         <li><code class="language-html">navigation</code>: A region that contains navigation links to other pages or different parts of the same page.</li>
-         <li><code class="language-html">main</code>: A region that contains a page's main content.</li>
-         <li><code class="language-html">region</code>: A region that contains a perceivable section of the page containing content that is sufficiently important for users to be able to navigate to the section. A <code class="language-html">region</code> landmark isn't exposed as a landmark region unless it has an accessible name, often provided using <code class="language-html">aria-label</code> or <code class="language-html">aria-labelledby</code>.</li>
-         <li><code class="language-html">form</code>: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing. A <code class="language-html">form</code> landmark isn't exposed as a landmark region unless it has an accessible name.</li></li>
-         <li><code class="language-html">search</code>: A region of the page containing search functionality.</li>
-         <li><code class="language-html">complementary</code>: Any section of the document that supports the main content, yet is separate and meaningful on its own.</li>
-         <li><code class="language-html">contentinfo</code>: A region that contains information about the parent document such as copyrights and links to privacy statements.</li>
+         <li><code>banner</code>: A region that contains mostly site-oriented content, such as the logo or a site-specific search tool.</li>
+         <li><code>navigation</code>: A region that contains navigation links to other pages or different parts of the same page.</li>
+         <li><code>main</code>: A region that contains a page's main content.</li>
+         <li><code>region</code>: A region that contains a perceivable section of the page containing content that is sufficiently important for users to be able to navigate to the section. A <code>region</code> landmark isn't exposed as a landmark region unless it has an accessible name, often provided using <code>aria-label</code> or <code>aria-labelledby</code>.</li>
+         <li><code>form</code>: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing. A <code>form</code> landmark isn't exposed as a landmark region unless it has an accessible name.</li></li>
+         <li><code>search</code>: A region of the page containing search functionality.</li>
+         <li><code>complementary</code>: Any section of the document that supports the main content, yet is separate and meaningful on its own.</li>
+         <li><code>contentinfo</code>: A region that contains information about the parent document such as copyrights and links to privacy statements.</li>
       </ul>
 
       <p>There are cases when a particular landmark role could be used more than once on a page, such as on primary and secondary blocks of navigation. In these cases, identical roles should be named using a valid technique for labeling regions.</p>
@@ -43,7 +43,7 @@ <h1>Using ARIA landmarks to identify regions of a page</h1>
       <h3>Simple landmarks</h3>
 
       <p>The following example shows how landmarks might be added to an HTML document:</p>
-            <pre xml:space="preserve"><code class="language-html">&lt;div role="banner"&gt;site logo and name, etc. here&lt;/div&gt;
+            <pre><code>&lt;div role="banner"&gt;site logo and name, etc. here&lt;/div&gt;
 &lt;div role="search"&gt;search functionality here&lt;/div&gt;
 &lt;div role="navigation"&gt;a list of navigation links here&lt;/div&gt;
 &lt;div role="form"&gt;a sign-up form here&lt;/div&gt;
@@ -56,9 +56,9 @@ <h3>Simple landmarks</h3>
 <section class="example" id="multiple-landmarks-aria-labelledby">
    <h3>Multiple landmarks of the same type and aria-labelledby</h3>
 
-   <p>The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page. For instance, if a navigation role is used multiple times on a page, each instance may have a unique label specified using <code class="language-html">aria-labelledby</code>:</p>
+   <p>The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page. For instance, if a navigation role is used multiple times on a page, each instance may have a unique label specified using <code>aria-labelledby</code>:</p>
 
-<pre xml:space="preserve"><code class="language-html">&lt;div aria-labelledby="site-nav-heading" role="navigation"&gt;
+<pre><code>&lt;div aria-labelledby="site-nav-heading" role="navigation"&gt;
   &lt;h2 id="site-nav-heading"&gt;Site&lt;/h2&gt;
     &lt;ul&gt;
       &lt;li&gt;&lt;a href="..."&gt;nav link 1&lt;/a&gt;&lt;/li&gt;  
@@ -80,7 +80,7 @@ <h3>Multiple landmarks of the same type and aria-labelledby</h3>
       <h3>Multiple landmarks of the same type and aria-label</h3>
 
       <p>The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page, and there is no existing text on the page that can be referenced as the label:</p>
-<pre xml:space="preserve"><code class="language-html">&lt;div aria-label="Site" role="navigation"&gt;
+<pre><code>&lt;div aria-label="Site" role="navigation"&gt;
    &lt;ul&gt;
       &lt;li&gt;&lt;a href="..."&gt;nav link 1&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="..."&gt;nav link 2&lt;/a&gt;&lt;/li&gt;
@@ -97,8 +97,8 @@ <h3>Multiple landmarks of the same type and aria-label</h3>
    </section>
    <section class="example" id="search-form">
       <h3>Search form</h3>
-      <p>The following example shows a search form with a "search" landmark. The <code class="language-html">search</code> role typically goes on the <code class="language-html">form</code> element or a <code class="language-html">div</code> surrounding the form:</p>
-<pre xml:space="preserve"><code class="language-html">&lt;form role="search"&gt;
+      <p>The following example shows a search form with a "search" landmark. The <code>search</code> role typically goes on the <code>form</code> element or a <code>div</code> surrounding the form:</p>
+<pre><code>&lt;form role="search"&gt;
    &lt;label for="product-search" id="search-label"&gt;Search&lt;/label&gt;
    &lt;input id="product-search" placeholder="title, author, or ISBN" type="text"&gt;
    &lt;button type="submit"&gt;Find Books&lt;/button&gt;
@@ -110,7 +110,7 @@ <h3>Search form</h3>
          <h3>Procedure</h3>
          <ol>
             <li>Examine each element with a <a href="https://www.w3.org/TR/wai-aria/#landmark_roles">landmark role</a>.</li>
-            <li>Examine whether the correct element has been used to mark up content. For example: a <code class="language-html">navigation</code> role has been used to mark up a section with navigation links, or the <code class="language-html">main</code> role is used to contain the page's main content.</li>
+            <li>Examine whether the correct element has been used to mark up content. For example: a <code>navigation</code> role has been used to mark up a section with navigation links, or the <code>main</code> role is used to contain the page's main content.</li>
             <li>If a landmark region needs to have an accessible name to be exposed as a landmark, check to see that there is an accessible name.</li>
             <li>If the same type of landmark appears multiple times on the page, check that each one is given a unique and meaningful accessible name.</li>
          </ol>