Merge pull request #2928 from w3c/syntax-highlighting-for-aria-techni…

…ques Syntax highlighting for aria techniques
w3c · Sep 18, 2023 · c37669a · c37669a
2 parents 5d37fd9 + e320f03
commit c37669a
Show file tree

Hide file tree

Showing 25 changed files with 841 additions and 976 deletions.
diff --git a/techniques/aria/ARIA1.html b/techniques/aria/ARIA1.html
@@ -19,7 +19,7 @@ <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>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="att">id</code>, it must reference an element in the same <abbr title="Document Object Model">DOM</abbr> document.</p>
+         <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>
       </div>
    </section>
    <section id="examples">
@@ -28,18 +28,17 @@ <h2>Examples</h2>
          <h3>Using <code class="language-html">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">&lt;form&gt;
+<pre xml:space="preserve"><code class="language-html">&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;
-</pre>
+&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>
 
-<pre xml:space="preserve">&lt;div&gt;
+<pre xml:space="preserve"><code class="language-html">&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;
@@ -50,8 +49,7 @@ <h3>Using <code class="language-html">aria-describedby</code> property to provid
 &lt;div&gt;
   &lt;span id="customDesc"&gt;Customize the layout and styles used on this page&lt;/span&gt;
   &lt;button aria-describedby="customDesc" id="customB" type="button"&gt;Customize&lt;/button&gt;
-&lt;/div&gt;
-</pre>
+&lt;/div&gt;</code></pre>
 
       </section>
 

diff --git a/techniques/aria/ARIA10.html b/techniques/aria/ARIA10.html
@@ -1,31 +1,30 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-labelledby to provide a text alternative for non-text content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></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>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><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"></link></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 (AT) by using the <code class="att">aria-labelledby</code> attribute. The <code class="att">aria-labelledby</code> attribute associates an element with text that is visible elsewhere on the page by using an ID reference value that matches the ID 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="att">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 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>
    </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="att">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">&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;
-&lt;img src="fullstar.png" alt=""/&gt;
-&lt;img src="emptystar.png" alt=""/&gt;
+            <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;
+  &lt;img src="fullstar.png" alt=""&gt;
+  &lt;img src="fullstar.png" alt=""&gt;
+  &lt;img src="fullstar.png" alt=""&gt;
+  &lt;img src="fullstar.png" alt=""&gt;
+  &lt;img src="emptystar.png" alt=""&gt;
 &lt;/div&gt;
-
-&lt;div id="star_id"&gt;4 of 5&lt;/div&gt;</pre>
+&lt;div id="star-id"&gt;4 of 5&lt;/div&gt;</code></pre>
             <p class="working-example">Working example: <a href="../../working-examples/aria-labelledby-description-complex-graphic/">Providing a short description for a complex graphic</a>.
 </p>
 
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
          <ol>
-            <li>Examine each element where the <code class="att">aria-labelledby</code> attribute is present and the element does not support the <code class="att">alt</code> attribute.</li>
-            <li>Check whether the value of the <code class="att">aria-labelledby</code> attribute is the id of an element on the web page.</li>
-            <li>Determine that the text of the element identified by the <code class="att">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 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>
          </ol>
       </section>
       <section class="results"><h3>Expected Results</h3>
@@ -50,4 +49,5 @@ <h3>Providing a short description for a complex graphic</h3>
                </li>
          </ul>
 
-   </section></body></html>
+   </section>
+</body></html>
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 is the name of the landmark. These role values are listed below:</p>
       <ul>
-         <li><code class="prop">banner</code>: A region that contains the prime heading or internal title of a page.</li>
-         <li><code class="prop">navigation</code>: A region that contains navigation links links to other pages or different parts of the same page.</li>
-         <li><code class="prop">main</code>: A region that contains a page's main content.</li>
-         <li><code class="prop">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="prop">region</code> landmark isn't exposed as a landmark region unless it has an accessible name.</li>
-         <li><code class="prop">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.</li>
-         <li><code class="prop">search</code>: A region of the page containing search functionality.</li>
-         <li><code class="prop">complementary</code>: Any section of the document that supports the main content, yet is separate and meaningful on its own.</li>
-         <li><code class="prop">contentinfo</code>: A region that contains information about the parent document such as copyrights and links to privacy statements.</li>
+         <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>
+         <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.</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.</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>
       </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 labeled using a valid technique for labelling regions.</p>
@@ -43,22 +43,22 @@ <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">&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;
-&lt;div role="main"&gt; the page's main content here &lt;/div&gt;
-&lt;div role="region"&gt; a sponsor's promotion here &lt;/div&gt;
-&lt;div role="complementary"&gt; sidebar content here &lt;/div&gt;
-&lt;div role="contentinfo"&gt; site contact details, copyright information, etc. here &lt;/div&gt;</pre>
+            <pre xml:space="preserve"><code class="language-html">&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;
+&lt;div role="main"&gt;the page's main content here&lt;/div&gt;
+&lt;div role="region"&gt;a sponsor's promotion here&lt;/div&gt;
+&lt;div role="complementary"&gt;sidebar content here&lt;/div&gt;
+&lt;div role="contentinfo"&gt; site contact details, copyright information, etc. here &lt;/div&gt;</code></pre>
 
 </section>
 <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="prop">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 class="language-html">aria-labelledby</code>:</p>
 
-<pre xml:space="preserve">&lt;div aria-labelledby="site-nav-heading" role="navigation"&gt;
+<pre xml:space="preserve"><code class="language-html">&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;  
@@ -73,18 +73,18 @@ <h3>Multiple landmarks of the same type and aria-labelledby</h3>
       &lt;li&gt;&lt;a href="..."&gt;topic link 2&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="..."&gt;topic link 3&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
-&lt;/div&gt;</pre>
+&lt;/div&gt;</code></pre>
 
    </section>
    <section class="example" id="multiple-landmarks-aria-label">
       <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">&lt;div aria-label="Site" role="navigation"&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;div aria-label="Site" role="navigation"&gt;
    &lt;ul&gt;
-      &lt;li&gt;&lt; href="..."&gt;nav link 1&lt;/a&gt;&lt;/li&gt;
-      &lt;li&gt;&lt; href="..."&gt;nav link 2&lt;/a&gt;&lt;/li&gt;
-      &lt;li&gt;&lt; href="..."&gt;nav link 3&lt;/a&gt;&lt;/li&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;
+      &lt;li&gt;&lt;a href="..."&gt;nav link 3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
 &lt;/div&gt;
 &lt;div aria-label="Tags" role="navigation"&gt;
@@ -93,24 +93,24 @@ <h3>Multiple landmarks of the same type and aria-label</h3>
       &lt;li&gt;&lt;a href="..."&gt;tag link 2&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="..."&gt;tag link 3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
-&lt;/div&gt;</pre>
+&lt;/div&gt;</code></pre>
    </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="prop">search</code> role typically goes on the <code class="el">form</code> element or a <code class="el">div</code> surrounding the form:</p>
-<pre xml:space="preserve">&lt;form role="search"&gt;
+      <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;
    &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;
-&lt;/form&gt;</pre>
+&lt;/form&gt;</code></pre>
 
    </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure" id="test-procedure">
          <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="prop">navigation</code> role has been used to mark up a section with navigation links, or the <code class="prop">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 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>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>
          </ol>
       </section>