Merge two PRs: #3381 and #3738

Merges #3381 and #3738 to: - update / correct WCAG links - update resource links - add support for syntax highlighting
w3c · Mar 25, 2024 · 3cfa340 · 3cfa340
2 parents 7f88ee9 + dbe4723
commit 3cfa340
Show file tree

Hide file tree

Showing 55 changed files with 1,646 additions and 1,549 deletions.
diff --git a/techniques/html/H100.html b/techniques/html/H100.html
@@ -1,11 +1,9 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
-
   <head>
     <title>Providing properly marked up email and password inputs</title>
     <link rel="stylesheet" type="text/css" href="../../css/editors.css" />
   </head>
-
   <body>
     <h1>Providing properly marked up email and password inputs</h1>
     <section id="meta">
@@ -26,23 +24,19 @@ <h2>Description</h2>
       <h2>Examples</h2>
       <section class="example">
         <h3>properly marked up email and password inputs</h3>
-        <p>A secure website has an email and password based login form. </p>
-        <pre>
-<code class="language-html">
-&lt;form method=&quot;post&quot; action=&quot;login&quot;&gt;
- &lt;div&gt;
-   &lt;label for=&quot;email&quot;&gt;Email&lt;/label&gt;
-   &lt;input id=&quot;email&quot; type=&quot;email&quot; autocomplete=&quot;email&quot; ... &gt;
+        <p>A secure website has an email and password based login form.</p>
+        <pre xml:space="preserve"><code class="language-html">&lt;form method="post" action="login"&gt;
+  &lt;div&gt;
+    &lt;label for="email"&gt;Email&lt;/label&gt;
+    &lt;input autocomplete="email" id="email" type="email" ...&gt;
   &lt;/div&gt;
   &lt;div&gt;
-    &lt;label for=&quot;password&quot;&gt;Password&lt;/label&gt;
-    &lt;input id=&quot;password&quot; type=&quot;password&quot; autocomplete=&quot;current-password&quot; ... &gt;
+    &lt;label for="password"&gt;Password&lt;/label&gt;
+    &lt;input autocomplete="current-password" id="password" type="password" ...&gt;
   &lt;/div&gt;
-    &lt;input type=&quot;submit&quot; value=&quot;Login&quot; &gt;
+    &lt;input type="submit" value="Login"&gt;
   &lt;/div&gt;
-&lt;/form&gt;
-</code>
-			</pre>
+&lt;/form&gt;</code></pre>
       </section>
     </section>
     <section id="tests">
@@ -69,5 +63,4 @@ <h2>Resources</h2>
       </ul>
     </section>
   </body>
-
 </html>
diff --git a/techniques/html/H101.html b/techniques/html/H101.html
@@ -2,7 +2,7 @@
 <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>Using semantic HTML elements to identify regions of a page</title>
-    <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link>
+    <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove" />
   </head>
   <body>
     <h1>Using semantic <abbr title="HyperText Markup Language">HTML</abbr> elements to identify regions of a page</h1>
@@ -48,20 +48,20 @@ <h2>Examples</h2>
     <section class="example" id="simple-identical-landmarks">
       <h3>Simple landmarks</h3>
       <p>The following example shows how landmarks might be added to an HTML document:</p>
-        <pre xml:space="preserve">&lt;header&gt; site logo and name, etc. here &lt;/header&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;header&gt; site logo and name, etc. here &lt;/header&gt;
 &lt;form aria-label="site search"&gt; search functionality here &lt;/form&gt;
 &lt;nav&gt; a list of navigation links here &lt;/nav&gt;
 &lt;main&gt; the page's main content here &lt;/main&gt;
-&lt;section&gt; a sponsor's promotion here &lt;/aside&gt;
+&lt;section&gt; a sponsor's promotion here &lt;/section&gt;
 &lt;aside&gt; sidebar content here &lt;/aside&gt;
-&lt;footer&gt; site contact details, copyright information, etc. here &lt;/footer&gt;</pre>
+&lt;footer&gt; site contact details, copyright information, etc. here &lt;/footer&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 <code class="language-html">nav</code> element 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;nav aria-labelledby="site-nav-heading"&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;nav aria-labelledby="site-nav-heading"&gt;
   &lt;h2 id="site-nav-heading"&gt;Site&lt;/h2&gt;
   &lt;ul&gt;
     &lt;li&gt;&lt;a href="/news"&gt;News&lt;/a&gt;&lt;/li&gt;  
@@ -76,14 +76,14 @@ <h3>Multiple landmarks of the same type and aria-labelledby</h3>
     &lt;li&gt;&lt;a href="/local-weather"&gt;Local Weather&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="/local-sport"&gt;Local Sport&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
-&lt;/nav&gt;</pre>
+&lt;/nav&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;nav aria-label="Vehicles"&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;nav aria-label="Vehicles"&gt;
   &lt;ul&gt;
     &lt;li&gt;&lt;a aria-current="page" href="/cars"&gt;Cars&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="/trucks"&gt;Trucks&lt;/a&gt;&lt;/li&gt;
@@ -98,17 +98,17 @@ <h3>Multiple landmarks of the same type and aria-label</h3>
     &lt;li&gt;&lt;a href="/cars-working"&gt;Rugged Cars For Working&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="/cars-commuting"&gt;Cars For Suburban Commuting&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
-&lt;/nav&gt;</pre>
+&lt;/nav&gt;</code></pre>
   </section>
 
   <section class="example" id="search-form">
     <h3>Search form</h3>
     <p>The following example shows a search form. A <code class="language-html">form</code> element must have an accessible name to be exposed as a landmark area:</p>
-<pre xml:space="preserve">&lt;form aria-labelledby="search-label"&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;form aria-labelledby="search-label"&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">

diff --git a/techniques/html/H2.html b/techniques/html/H2.html
@@ -2,7 +2,7 @@
 <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <title>Combining adjacent image and text links for the same resource</title>
-      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove" />
    </head>
    <body>
       <h1>Combining adjacent image and text links for the same resource</h1>
@@ -13,37 +13,32 @@ <h1>Combining adjacent image and text links for the same resource</h1>
       </section>
       <section id="applicability">
          <h2>When to Use</h2>
-      <p>HTML documents that contain links.</p>
+      <p><abbr title="HyperText Markup Language">HTML</abbr> documents that contain links.</p>
    </section>
    <section id="description">
       <h2>Description</h2>
       <p>This objective of this technique is to provide both text and iconic representations of links without making the web page more confusing or difficult for keyboard users or assistive technology users. Since different users finding text and icons more usable, providing both can improve the accessibility of the link.</p>
       <p>Many links have both a text and iconic representation adjacent to each other, but rendered in separate <code class="language-html">a</code> elements. Visually they appear to be a single link, but many users encounter them as adjacent identical links. For a keyboard user, it is tedious to navigate through redundant links. For users of assistive technologies, it can be confusing to encounter successive identical links. When the text alternative for the icon is a duplicate of the link text, it is repetitive as screen readers read the description twice.</p> 
-      <p>If the author omitted alternative text from the link image, it would fail <a href="/TR/WCAG/#non-text-content">Success Criterion 1.1.1</a> because the text alternative would not serve the same purpose as the graphical link.</p> 
+      <p>If the author omitted alternative text from the link image, it would fail <a href="../../understanding/20/non-text-content.html">Success Criterion 1.1.1</a> because the text alternative would not serve the same purpose as the graphical link.</p> 
       <p>This technique provides such links by putting the text and image together in one <code class="language-html">a</code> element and providing null alternative text on the image to eliminate duplication of text. In this way, both representations of the link are provided, but keyboard users only encounter one link and assistive technology that provides users with link lists for a web page do not include duplicate links.</p>
-      <p>Sometimes the text and the icon link are rendered in separate, adjacent table cells to facilitate page layout. Although WCAG 2 does not prohibit the use of layout tables, CSS-based layouts are recommended in order to retain the defined semantic meaning of the HTML table elements and to conform to the coding practice of separating presentation from content. If CSS is used, this technique can be applied to combine the links.</p>
+      <p>Sometimes the text and the icon link are rendered in separate, adjacent table cells to facilitate page layout. Although WCAG 2 does not prohibit the use of layout tables, <abbr title="Cascading Style Sheets">CSS</abbr>-based layouts are recommended in order to retain the defined semantic meaning of the HTML table elements and to conform to the coding practice of separating presentation from content. If CSS is used, this technique can be applied to combine the links.</p>
    </section>
    <section id="examples">
       <h2>Examples</h2>
       <section class="example">
 
          <p>The icon and text are contained in the same <code class="language-html">a</code> element.</p>
 
-         <pre xml:space="preserve"> &lt;a href="products.html"&gt;
-   &lt;img src="icon.gif" alt=""&gt;
-   Products page
- &lt;/a&gt;</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;a href="products.html"&gt;
+  &lt;img src="icon.gif" alt=""&gt;Products page
+&lt;/a&gt;</code></pre>
       </section>
       <section class="example">
+         <p>A link contains an icon and text, and the site help refers to the icon. The <code class="language-html">img</code> has a text alternative which is the name used for the icon in the site help, which describes clicking the home page icon.</p>
 
-            <p>A link contains an icon and text, and the site help refers to the icon. The
-                  <code class="language-html">img</code> has a text alternative which is the name used for the icon in the
-                site help, which describes clicking the home page icon.</p>
-
-         <pre xml:space="preserve">&lt;a href="home.html"&gt;
-  &lt;img src="house.gif" alt="home page icon"&gt;
-  Go to the home page
-&lt;/a&gt;</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;a href="home.html"&gt;
+  &lt;img src="house.gif" alt="home page icon"&gt;Go to the home page
+&lt;/a&gt;</code></pre>
       </section>
    </section>
    <section id="tests">

diff --git a/techniques/html/H24.html b/techniques/html/H24.html
@@ -2,7 +2,7 @@
 <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <title> Providing text alternatives for the area elements of image maps</title>
-      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove" />
    </head>
    <body>
       <h1>Providing text alternatives for the <code class="language-html">area</code> elements of image maps</h1>
@@ -13,7 +13,7 @@ <h1>Providing text alternatives for the <code class="language-html">area</code>
       </section>
       <section id="applicability">
          <h2>When to Use</h2>
-      <p>HTML documents that contain <code class="language-html">area</code> elements.</p>
+      <p><abbr title="HyperText Markup Language">HTML</abbr> documents that contain <code class="language-html">area</code> elements.</p>
    </section>
    <section id="description">
       <h2>Description</h2>
@@ -29,15 +29,12 @@ <h2>Examples</h2>
       <section class="example">
          <p>This example uses the <code class="language-html">alt</code> attribute of the <code class="language-html">area</code> element to provide text that describes the purpose of the image map areas.</p>
 
-         <pre xml:space="preserve">&lt;img src="welcome.gif" usemap="#map1" 
-    alt="Areas in the library. Select an area for
-    more information on that area."&gt; 
+<pre xml:space="preserve"><code class="language-html">&lt;img src="welcome.gif" usemap="#map1" 
+     alt="Areas in the library. Select an area for more information on that area."&gt; 
 &lt;map id="map1" name="map1"&gt;
-  &lt;area shape="rect" coords="0,0,30,30"
-    href="reference.html" alt="Reference"&gt;
-  &lt;area shape="rect" coords="34,34,100,100"
-    href="media.html" alt="Audio visual lab"&gt;
-&lt;/map&gt;</pre>
+  &lt;area shape="rect" coords="0,0,30,30" href="reference.html" alt="Reference"&gt;
+  &lt;area shape="rect" coords="34,34,100,100" href="media.html" alt="Audio visual lab"&gt;
+&lt;/map&gt;</code></pre>
       </section>
    </section>
    <section id="tests">
@@ -68,13 +65,13 @@ <h2>Related Techniques</h2>
 </section>
 <section id="resources">
    <h2>Resources</h2>   
-         <ul>
-            <li>
-               <a href="https://html.spec.whatwg.org/multipage/image-maps.html#image-maps">HTML - Image maps</a>.
-            </li>
-            <li>
-               <a href="https://html.spec.whatwg.org/multipage/images.html#alt">HTML - Requirements for providing text to act as an alternative for images</a>.
-            </li>
-         </ul>
-      
-   </section></body></html>
+   <ul>
+      <li>
+         <a href="https://html.spec.whatwg.org/multipage/image-maps.html#image-maps">HTML - Image maps</a>.
+      </li>
+      <li>
+         <a href="https://html.spec.whatwg.org/multipage/images.html#alt">HTML - Requirements for providing text to act as an alternative for images</a>.
+      </li>
+   </ul> 
+   </section>
+</body></html>
diff --git a/techniques/html/H25.html b/techniques/html/H25.html
@@ -2,7 +2,7 @@
 <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <title>Providing a title using the title element</title>
-      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove" />
    </head>
    <body>
       <h1>Providing a title using the title element</h1>
@@ -13,7 +13,7 @@ <h1>Providing a title using the title element</h1>
       </section>
       <section id="applicability">
          <h2>When to Use</h2>
-         <p>HTML</p>
+         <p><abbr title="HyperText Markup Language">HTML</abbr></p>
       </section>
       <section id="description">
          <h2>Description</h2>
@@ -25,15 +25,15 @@ <h2>Examples</h2>
       <section class="example">   
          <p>This example defines a document's title.</p>
 
-<pre xml:space="preserve">&lt;!doctype html&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;!doctype html&gt;
 &lt;html lang="en"&gt;
   &lt;head&gt;
     &lt;title&gt;The World Wide Web Consortium&lt;/title&gt;     
   &lt;/head&gt;
   &lt;body&gt;
       ...   
   &lt;/body&gt; 
-&lt;/html&gt;</pre>
+&lt;/html&gt;</code></pre>
       </section>
    </section>
    <section id="tests">
@@ -66,7 +66,6 @@ <h2>Resources</h2>
          <a href="https://html.spec.whatwg.org/multipage/semantics.html#the-title-element">HTML - The <code class="language-html">title</code> element</a>.
       </li>
    </ul>
-
    </section>
 </body>
 </html>
diff --git a/techniques/html/H28.html b/techniques/html/H28.html
@@ -12,7 +12,7 @@ <h1>Providing definitions for abbreviations by using the abbr element</h1>
    </section>
    <section id="applicability">
       <h2>When to Use</h2>
-      <p>HTML</p>
+      <p><abbr title="HyperText Markup Language">HTML</abbr></p>
    </section>
 
    <section id="description">
@@ -25,28 +25,28 @@ <h2>Description</h2>
       <h2>Examples</h2>
       <section class="example">
          <h3>Using <code class="language-html">abbr</code> element to expand abbreviations</h3>
-<pre xml:space="preserve">&lt;p&gt;Sugar is commonly sold in 5 &lt;abbr title="pound"&gt;lb.&lt;/abbr&gt; bags.&lt;/p&gt;
-&lt;p&gt;Welcome to the &lt;abbr title="World Wide Web"&gt;WWW&lt;/abbr&gt;!&lt;/p&gt;</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;Sugar is commonly sold in 5 &lt;abbr title="pound"&gt;lb.&lt;/abbr&gt; bags.&lt;/p&gt;
+&lt;p&gt;Welcome to the &lt;abbr title="World Wide Web"&gt;WWW&lt;/abbr&gt;!&lt;/p&gt;</code></pre>
       </section>
 
       <section class="example">
          <h3>Using <code class="language-html">dfn</code> and <code class="language-html">abbr</code> element to define abbreviations</h3>
-<pre xml:space="preserve">&lt;p&gt;Tasini 
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;Tasini 
   &lt;dfn id="etal"&gt;&lt;abbr title="and others"&gt;et al.&lt;/abbr&gt;&lt;/dfn&gt;
   &lt;abbr title="versus"&gt;v.&lt;/abbr&gt;
   The New York Times &lt;abbr title="and others"&gt;et al.&lt;/abbr&gt; is the landmark lawsuit 
   brought by members of the National Writers Union against ...
-&lt;/p&gt;</pre>
+&lt;/p&gt;</code></pre>
       </section>
 
       <section class="example">
          <h3>Using the <code class="language-html">abbr</code> element to expand an acronym</h3>
-         <pre xml:space="preserve">&lt;p&gt;The use of &lt;abbr title="Keep It Simple Stupid"&gt;KISS&lt;/abbr&gt; became popular in ...&lt;/p&gt;</pre>
+         <pre xml:space="preserve"><code class="language-html">&lt;p&gt;Recent updates to the &lt;abbr title="Cascading Style Sheets"&gt;CSS&lt;/abbr&gt; color module ...&lt;/p&gt;</code></pre>
       </section>
 
       <section class="example">
          <h3> Using the <code class="language-html">abbr</code> element to expand an initialism</h3>
-         <pre xml:space="preserve"> &lt;p&gt;&lt;abbr title="British Broadcasting Corporation"&gt;BBC&lt;/abbr&gt;&lt;/p&gt;</pre>
+         <pre xml:space="preserve"><code class="language-html">&lt;p&gt;&lt;abbr title="British Broadcasting Corporation"&gt;BBC&lt;/abbr&gt;&lt;/p&gt;</code></pre>
       </section>
 
    </section>