From 26f403a42b9d60e94c7a4243d4d675c37655e436 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 1 Sep 2023 14:04:39 -0700 Subject: [PATCH 01/67] Update H2 * add syntax highlighting support * fix broken link --- techniques/html/H2.html | 25 ++++++++++--------------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/techniques/html/H2.html b/techniques/html/H2.html index 669d718cfd..84b2795481 100644 --- a/techniques/html/H2.html +++ b/techniques/html/H2.html @@ -13,15 +13,15 @@

Combining adjacent image and text links for the same resource

When to Use

-

HTML documents that contain links.

+

HTML documents that contain links.

Description

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.

Many links have both a text and iconic representation adjacent to each other, but rendered in separate a 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.

-

If the author omitted alternative text from the link image, it would fail Success Criterion 1.1.1 because the text alternative would not serve the same purpose as the graphical link.

+

If the author omitted alternative text from the link image, it would fail Success Criterion 1.1.1 because the text alternative would not serve the same purpose as the graphical link.

This technique provides such links by putting the text and image together in one a 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.

-

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.

+

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.

Examples

@@ -29,21 +29,16 @@

Examples

The icon and text are contained in the same a element.

- 
 <a href="products.html">
-   <img src="icon.gif" alt="">
-   Products page
- </a>
+
<a href="products.html">
+  <img src="icon.gif" alt="">Products page
+</a>
+

A link contains an icon and text, and the site help refers to the icon. The img has a text alternative which is the name used for the icon in the site help, which describes clicking the home page icon.

-

A link contains an icon and text, and the site help refers to the icon. The - img has a text alternative which is the name used for the icon in the - site help, which describes clicking the home page icon.

- - 
<a href="home.html">
-  <img src="house.gif" alt="home page icon">
-  Go to the home page
-</a>
+
<a href="home.html">
+  <img src="house.gif" alt="home page icon">Go to the home page
+</a>
From 52548328d0f9948a0e2ce90a041ca9b79839fad7 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 1 Sep 2023 14:05:02 -0700 Subject: [PATCH 02/67] Update h24 for syntax highlighting --- techniques/html/H24.html | 35 ++++++++++++++++------------------- 1 file changed, 16 insertions(+), 19 deletions(-) diff --git a/techniques/html/H24.html b/techniques/html/H24.html index 636a74c993..9559b14fc8 100644 --- a/techniques/html/H24.html +++ b/techniques/html/H24.html @@ -13,7 +13,7 @@

Providing text alternatives for the area

When to Use

-

HTML documents that contain area elements.

+

HTML documents that contain area elements.

Description

@@ -29,15 +29,12 @@

Examples

This example uses the alt attribute of the area element to provide text that describes the purpose of the image map areas.

- 
<img src="welcome.gif" usemap="#map1" 
-    alt="Areas in the library. Select an area for
-    more information on that area."> 
+
<img src="welcome.gif" usemap="#map1" 
+     alt="Areas in the library. Select an area for more information on that area."> 
 <map id="map1" name="map1">
-  <area shape="rect" coords="0,0,30,30"
-    href="reference.html" alt="Reference">
-  <area shape="rect" coords="34,34,100,100"
-    href="media.html" alt="Audio visual lab">
-</map>

+  <area shape="rect" coords="0,0,30,30" href="reference.html" alt="Reference">
+  <area shape="rect" coords="34,34,100,100" href="media.html" alt="Audio visual lab">
+</map>
@@ -68,13 +65,13 @@

Related Techniques

Resources

- - -
\ No newline at end of file + + + \ No newline at end of file From 7fee788efc67d0fedaecbb1f3dc8c86a44020214 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 1 Sep 2023 14:05:19 -0700 Subject: [PATCH 03/67] Update h25 for syntax highlighting support --- techniques/html/H25.html | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/techniques/html/H25.html b/techniques/html/H25.html index 80c6bf4c4e..a8f970ad5b 100644 --- a/techniques/html/H25.html +++ b/techniques/html/H25.html @@ -13,7 +13,7 @@

Providing a title using the title element

When to Use

-

HTML

+

HTML

Description

@@ -25,7 +25,7 @@

Examples

This example defines a document's title.

-
<!doctype html>
+
<!doctype html>
 <html lang="en">
   <head>
     <title>The World Wide Web Consortium</title>     
@@ -33,7 +33,7 @@ 
Examples

   <body>
       ...   
   </body> 
-</html>

+</html>
@@ -66,7 +66,6 @@

Resources

HTML - The title element. -
\ No newline at end of file From 3bea23512110510ace75455c7658234a1d68356e Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 1 Sep 2023 14:05:59 -0700 Subject: [PATCH 04/67] Update h28 * add support for syntax highlighting * update one example --- techniques/html/H28.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/techniques/html/H28.html b/techniques/html/H28.html index 6fcfb73be7..0292b98cac 100644 --- a/techniques/html/H28.html +++ b/techniques/html/H28.html @@ -12,7 +12,7 @@

Providing definitions for abbreviations by using the abbr element

When to Use

-

HTML

+

HTML

@@ -25,28 +25,28 @@

Description

Examples

Using abbr element to expand abbreviations

-
<p>Sugar is commonly sold in 5 <abbr title="pound">lb.</abbr> bags.</p>
-<p>Welcome to the <abbr title="World Wide Web">WWW</abbr>!</p>
+
<p>Sugar is commonly sold in 5 <abbr title="pound">lb.</abbr> bags.</p>
+<p>Welcome to the <abbr title="World Wide Web">WWW</abbr>!</p>

Using dfn and abbr element to define abbreviations

-
<p>Tasini 
+
<p>Tasini 
   <dfn id="etal"><abbr title="and others">et al.</abbr></dfn>
   <abbr title="versus">v.</abbr>
   The New York Times <abbr title="and others">et al.</abbr> is the landmark lawsuit 
   brought by members of the National Writers Union against ...
-</p>

+</p>

Using the abbr element to expand an acronym

- 
<p>The use of <abbr title="Keep It Simple Stupid">KISS</abbr> became popular in ...</p>
+ 
<p>Recent updates to the <abbr title="Cascading Style Sheets">CSS</abbr> color module ...</p>

Using the abbr element to expand an initialism

- 
 <p><abbr title="British Broadcasting Corporation">BBC</abbr></p>
+ 
<p><abbr title="British Broadcasting Corporation">BBC</abbr></p>
From be168c29cf8689a69030f217a16d9357546e3349 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 1 Sep 2023 14:06:32 -0700 Subject: [PATCH 05/67] Update h30 for syntax highlighting support --- techniques/html/H30.html | 46 ++++++++++++++++++++-------------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/techniques/html/H30.html b/techniques/html/H30.html index d6b12f138e..0c12263282 100644 --- a/techniques/html/H30.html +++ b/techniques/html/H30.html @@ -13,68 +13,68 @@

Providing link text that describes the purpose of a link for anchor elements

When to Use

-

HTML documents that contain links, (<a href> elements)

+

HTML documents that contain links, (<a href> elements)

Description

-

The objective of this technique is to describe the purpose of a link by providing descriptive text as the content of the a element. The description lets a user distinguish this link from other links in the Web page and helps the user determine whether to follow the link. The URI of the destination is generally not sufficiently descriptive.

+

The objective of this technique is to describe the purpose of a link by providing descriptive text as the content of the a element. The description lets a user distinguish this link from other links in the Web page and helps the user determine whether to follow the link. The URI of the destination is generally not sufficiently descriptive.

When an image is the only content of a link, the text alternative for the image describes the unique function of the link.

When the content of a link contains both text and one or more images, if the text is sufficient to describe the purpose of the link, the images may have an empty text alternative. (See Using null alt text and no title attribute on img elements for images that assistive technology should ignore.) When the images convey information beyond the purpose of the link, they must also have appropriate alt text.

Examples

-

Describing the purpose of a link in HTML in the text content of the a element.

+

Describing the purpose of a link in HTML in the text content of the a element.

-
<a href="routes.html">
+
<a href="routes.html">
   Current routes at Boulders Climbing Gym
-</a>

+</a>
-

Using the alt attribute for the img element to describe the purpose of a graphical link.

+

Using the alt attribute for the img element to describe the purpose of a graphical link.

-
<a href="routes.html">
+
<a href="routes.html">
   <img src="topo.gif" alt="Current routes at Boulders Climbing Gym"> 
-</a> 

+</a>
-

Using an empty alt attribute when the anchor (a) element contains text that describes the purpose of the link in addition to the img element. Note that the link text will appear on the page next to the image.

+

Using an empty alt attribute when the anchor (a) element contains text that describes the purpose of the link in addition to the img element. Note that the link text will appear on the page next to the image.

-
<a href="routes.html">
+
<a href="routes.html">
   <img src="topo.gif" alt="">
   Current routes at Boulders Climbing Gym
-</a>

+</a>

A site allows users to provide feedback on products by clicking on the "Feedback" link in a product detail page. Other users are able to provide a response to any feedback. When a response to the user's feedback is available, the feedback link displays an icon, with "response received" as its text alternative, after the "Feedback" text. The site's help document describes this icon as a speech bubble containing quotation marks and includes the icon, with its text alternative, as an example. The same text alternative is used in the product detail pages (when a response is available) to help ensure that users following the documentation can identify the image correctly as documented.

-
<a href="prod_123_feedback.htm">
+
<a href="prod_123_feedback.htm">
   Feedback 
   <img src="response.gif" width="15" height="15" alt="response received">
-</a>

+</a>

A link contains text and an icon, and the icon provides additional information about the target.

-
<a href="WMFP.pdf">
+
<a href="WMFP.pdf">
   Woodend Music Festival Program
   <img src="pdficon.gif" alt="PDF format">
-</a>

+</a>
-

The "MyCorp" company's annual report is made available on the corporate website as a PDF file, and the annual corporate budget is made available as an Excel file on the web site.

+

The "MyCorp" company's annual report is made available on the corporate website as a PDF, and the annual corporate budget is made available as an Excel file on the web site.

Many users prefer to know the file type when opening a file that results in opening a new application to view the file, so it is often regarded as useful to include this additional information. However, this is not required for compliance with this Success Criterion.

-
<ul>
+
<ul>
   <li>
     <a href="2009mycorp_report.pdf">MyCorp 2009 Annual Report (PDF)</a>
   </li>
   <li>			
     <a href="2009mycorp_budget.xls">MyCorp 2009 Annual Budget (Excel)</a>
   </li>		
-</ul>

+</ul>
@@ -83,13 +83,13 @@

Tests

For each link in the content that uses this technique:

  1. Check that text or a text alternative for non-text content is included in the - a element.
    2. -
  2. If an img element is the only content of the a element, + a element.
    3. +
  3. If an img element is the only content of the a element, check that its text alternative describes the purpose of the link.
    4. -
  4. If the a element contains one or more img element(s) - and the text alternative of the img element(s) is empty, check that +
  5. If the a element contains one or more img element(s) + and the text alternative of the img element(s) is empty, check that the text of the link describes the purpose of the link.
    6. -
  6. If the a element only contains text, check that the text describes +
  7. If the a element only contains text, check that the text describes the purpose of the link.
From 0cc7e4328150c9f896c47c89dfdc9024941981bd Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 1 Sep 2023 14:06:49 -0700 Subject: [PATCH 06/67] Update h32 for syntax highlighting support --- techniques/html/H32.html | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/techniques/html/H32.html b/techniques/html/H32.html index 75c6f94a58..3886ac73aa 100644 --- a/techniques/html/H32.html +++ b/techniques/html/H32.html @@ -24,13 +24,12 @@

Examples

A basic example of a form with a submit button

-
-<form action="/subscribe" method="post">
+
<form action="/subscribe" method="post">
  <p>Enter your email address to subscribe to our mailing list.</p>
  <label for="address">Your email address:</label>
  <input autocomplete="email" id="address" name="address" type="text"> 
  <input type="submit" value="Subscribe">
-</form>

+</form>
From 8b1b956599aec835761921c3c42e69376c4015b3 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 1 Sep 2023 14:08:19 -0700 Subject: [PATCH 07/67] Update H33 * added support for syntax highlighting * updated resources link --- techniques/html/H33.html | 88 ++++++++++++++++++++++++---------------- 1 file changed, 54 insertions(+), 34 deletions(-) diff --git a/techniques/html/H33.html b/techniques/html/H33.html index d929197766..4671bf04b8 100644 --- a/techniques/html/H33.html +++ b/techniques/html/H33.html @@ -1,45 +1,65 @@ -Supplementing link text with the title attribute

Supplementing link text with the title attribute

ID: H33

Technology: html

Type: Technique

When to Use

-

HTML and XHTML

-

Description

-

The objective of this technique is to demonstrate how to use a title - attribute on an anchor element to provide additional text describing a link. The - title attribute is used to provide additional information to help clarify - or further describe the purpose of a link. If the supplementary information provided - through the title attribute is something the user should know before - following the link, such as a warning, then it should be provided in the link text - rather than in the title attribute.

+ + + + Supplementing link text with the title attribute + + + +

Supplementing link text with the title attribute

+
+

ID: H33

+

Technology: html

+

Type: Technique

+
+
+

When to Use

+

HTML

+
+
+

Description

+

The objective of this technique is to demonstrate how to use a title attribute on an anchor element to provide additional text describing a link. The title attribute is used to provide additional information to help clarify or further describe the purpose of a link. If the supplementary information provided through the title attribute is something the user should know before following the link, such as a warning, then it should be provided in the link text rather than in the title attribute.

Because of the extensive user agent limitations in supporting access to the title attribute, authors should use caution in applying this technique. For this reason, it is preferred that the author use technique C7: Using CSS to hide a portion of the link text or H30: Providing link text that describes the purpose of a link for anchor elements.

-

Examples

-
-

Clarifying the purpose of a link

- 
<a href="http://example.com/WORLD/africa/kenya.elephants.ap/index.html" 
+
+
+

Examples

+
+

Clarifying the purpose of a link

+ 
<a href="https://example.com/world/africa/kenya.elephants.ap/index.html" 
    title="Read more about failed elephant evacuation">
-   Evacuation Crumbles Under Jumbo load
-</a>
+ Evacuation Crumbles Under Jumbo Load +</a>
-

Tests

-

Procedure

+
+
+

Tests

+
+

Procedure

Examine the source code for anchor elements.

    -
  1. For each anchor element that has a title attribute, check that the - title attribute together with the link text describes the purpose - of the link.
    2. +
  2. For each anchor element that has a title attribute, check that the title attribute together with the link text describes the purpose of the link.
-

Expected Results

+
+

Expected Results

  • Check #1 is true.
-

Resources

- - - -
\ No newline at end of file +
+ +
+

Resources

+ +
+ + \ No newline at end of file From 2fc240ac7031141372768bbced9954ee19687985 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 1 Sep 2023 14:14:48 -0700 Subject: [PATCH 08/67] Update H34 - update out of date resource links --- techniques/html/H34.html | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/techniques/html/H34.html b/techniques/html/H34.html index 12aa763b53..e427b2f148 100644 --- a/techniques/html/H34.html +++ b/techniques/html/H34.html @@ -70,16 +70,13 @@

Related Techniques

Resources

From 6f354ccfc17bcf7649993bec796af4f72131e997 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 1 Sep 2023 15:13:45 -0700 Subject: [PATCH 09/67] Update h36 for syntax highlighting --- techniques/html/H36.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/techniques/html/H36.html b/techniques/html/H36.html index fba48ce853..cd402f7c9b 100644 --- a/techniques/html/H36.html +++ b/techniques/html/H36.html @@ -24,11 +24,11 @@

Examples

An input element with an alt attribute

-
<form action="/find" method="post" role="search">
+
<form action="/find" method="post" role="search">
   <label for="look-up">Find books<label>
   <input id="look-up" type="text">
   <input alt="Search" src="button.gif" type="image">
-</form>

+</form>
@@ -56,7 +56,7 @@

Related Techniques

Resources

From 1aebc64fa354637e3439bed504a154c5c68ee941 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 1 Sep 2023 15:14:23 -0700 Subject: [PATCH 10/67] Update h37 for syntax highlighting --- techniques/html/H37.html | 36 +++++++++++++++++------------------- 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/techniques/html/H37.html b/techniques/html/H37.html index 3a0a86aeba..01ffa0128e 100644 --- a/techniques/html/H37.html +++ b/techniques/html/H37.html @@ -13,7 +13,7 @@

Using alt attributes on

When to Use

-

Images used within HTML documents.

+

Images used within HTML documents.

Description

@@ -31,9 +31,9 @@

Examples

An image on a Website provides a link to a free newsletter. The image contains the text "Free newsletter. Get free recipes, news, and more. Learn more." The alt text matches the text in the image.

- -
<img src="newsletter.gif" alt="Free newsletter. 
- Get free recipes, news, and more. Learn more.">
+ +
<img src="newsletter.gif" alt="Free newsletter. 
+ Get free recipes, news, and more. Learn more.">

An image on a Web site depicts the floor plan of a building. The image is an @@ -46,36 +46,34 @@

Examples

Tests

-

Procedure

+

Procedure

  1. Examine each img element in the content.
    2. -
  2. Check that each img element which conveys meaning contains an - alt attribute.
    3. -
  3. If the image contains words that are important to understanding the content, the - words are included in the text alternative.
    4. +
  4. Check that each img element which conveys meaning contains an alt attribute.
    5. +
  5. If the image contains words that are important to understanding the content, the words are included in the text alternative.
-

Expected Results

+

Expected Results

Checks #2 and #3 are true.

Resources

- -
\ No newline at end of file +
  • HTML - img element.
    • +
  • HTML - alt attribute.
    • +
  • HTML - Requirements for providing text to act as an alternative for images.
    • + +
    + + \ No newline at end of file From 3c191e691b87afc8d05fe2e30b0c52a814166fe5 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Tue, 5 Sep 2023 09:16:31 -0700 Subject: [PATCH 11/67] Update H39 for syntax highlighting --- techniques/html/H39.html | 27 ++++++++++++--------------- 1 file changed, 12 insertions(+), 15 deletions(-) diff --git a/techniques/html/H39.html b/techniques/html/H39.html index f29eb2a672..17801d66fc 100644 --- a/techniques/html/H39.html +++ b/techniques/html/H39.html @@ -13,14 +13,13 @@

    Using caption elements to associate data

    When to Use

    -

    HTML data tables

    +

    HTML data tables

    Description

    The objective of this technique is to programmatically associate captions for data tables where captions are provided in the presentation. The caption for a table is a table identifier and acts like a title or heading for the table.

    -

    The caption element is the appropriate markup for such text and it ensures - that the table identifier remains associated with the table, including visually (by default). In addition, using the caption element allows screen reading software to navigate directly to the caption for a table if one is present.

    +

    The caption element is the appropriate markup for such text and it ensures that the table identifier remains associated with the table, including visually (by default). In addition, using the caption element allows screen reading software to navigate directly to the caption for a table if one is present.

    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 a table is used for layout, the caption element is not used. The purpose of a layout table is simply to control the placement of content; the table itself is "transparent" to the user. A caption would "break" this transparency by calling attention to the table. See F46 for details.

    @@ -28,28 +27,28 @@

    Description

    Examples

    -

    An appointment calendar with a caption

    -
    <table>
+				
    An appointment calendar with a caption
    
+
    <table>
   <caption>Schedule for the week of March 6</caption>
   ...
-</table>
    
+</table>

    Tests

    -

    Procedure

    -

    For each data table:

    -
      -
    1. Check that the table has content that is presented as a table caption.
      2. -
    2. Check that the table includes a caption element.
      3. -
    3. Check that the content of the caption element identifies the table.
      4. +

      Procedure

      +

      For each data table:

      +
        +
      1. Check that the table has content that is presented as a table caption.
        2. +
      2. Check that the table includes a caption element.
        3. +
      3. Check that the content of the caption element identifies the table.

    Expected Results

      -
    • #1, #2, and #3 are true.
      • +
    • #1, #2, and #3 are true.
    @@ -62,11 +61,9 @@

    Related Techniques

    Resources

    - -
    From 8a1c27bb54604e10467c407eed1f90a82d2db3ed Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Tue, 5 Sep 2023 09:26:42 -0700 Subject: [PATCH 12/67] Update H40 for syntax highlighting --- techniques/html/H40.html | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/techniques/html/H40.html b/techniques/html/H40.html index 62bca05baf..d5d955953a 100644 --- a/techniques/html/H40.html +++ b/techniques/html/H40.html @@ -13,7 +13,7 @@

    Using description lists

    When to Use

    -

    HTML

    +

    HTML

    Description

    @@ -24,8 +24,7 @@

    Description

    Examples

    A list of descriptions of nautical terms used on a Website about sailing.

    - -
    <dl title="Nautical terms">
+
    <dl title="Nautical Terms">
   <dt>Knot</dt>
   <dd>
     A <i>knot</i> is a unit of speed equaling 1 
@@ -46,7 +45,7 @@ 
    Examples
    
     side of a vessel, as perceived by a person 
     facing towards the bow (the front of the vessel).
   </dd>
-</dl>
    
+</dl>
    From 0e7d7d80bacbcf9c4c4e0dc63bf7813caf8b0053 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Tue, 5 Sep 2023 09:35:35 -0700 Subject: [PATCH 13/67] Update h42 for syntax highlighting --- techniques/html/H42.html | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/techniques/html/H42.html b/techniques/html/H42.html index 481e6856db..f162bbb80b 100644 --- a/techniques/html/H42.html +++ b/techniques/html/H42.html @@ -13,7 +13,7 @@

    Using h1-h6 to identify headings

    When to Use

    -

    HTML

    +

    HTML

    Description

    @@ -26,7 +26,7 @@

    Hierarchical Heading Organization

    In the following example, headings are used in a hierarchical layout with h3 as a subsection of h2, which is a subsection of h1.

    -
    <h1>Plant Foods that Humans Eat</h1>
+
    <h1>Plant Foods that Humans Eat</h1>
 <p>There are an abundant number of plants that humans eat ...</p>
 <h2>Fruit</h2>
 <p>A fruit is a structure of a plant that contains its seeds ...</p>
@@ -45,17 +45,17 @@ 
    Hierarchical Heading Organization
    
    of wild cabbage ...</p>
 <h3>Green beans</h3>
 <p>Green beans have been bred for the fleshiness, flavor, or
-   sweetness of their pods ...</p>
    
+   sweetness of their pods ...</p>
    -

    Headings in a 3-column layout

    +

    Headings in a three-column layout

    -

    In this example, the main content of the page is in the middle column of a 3-column page. The title of the main content matches the title of the page, and is marked as h1, even though it is not the first thing on the page. The content in the first and third columns is less important, and marked with h2.

    +

    In this example, the main content of the page is in the middle column of a three-column page. The title of the main content matches the title of the page, and is marked as h1, even though it is not the first thing on the page. The content in the first and third columns is less important, and marked with h2.

    It is important to note that the example code below is not intended to prescribe what level of heading should be used for a particular section of the web page. In the example, the layout could be presented with the first heading in each column at the same logical level (such as an h1), or as found in the example, where the logical level reflects its importance in relation to the main content.

    -
    <!doctype html>
+
    <!doctype html>
 <html lang="en">
 <head>
   <title>Stock Market Up Today</title>
@@ -79,7 +79,7 @@ 
    Headings in a 3-column layout
    
     <!-- content here -->
   </aside>
 </body>
-</html>
    
+</html>
    @@ -122,5 +122,6 @@

    Resources

    WebAIM: Semantic Structure: Regions, Headings, and Lists. - -
    + + + From a7fe836681886acccca907882842fdb6e6510043 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Tue, 5 Sep 2023 09:39:33 -0700 Subject: [PATCH 14/67] Update h43 for syntax highlighting --- techniques/html/H43.html | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/techniques/html/H43.html b/techniques/html/H43.html index 5de94cd852..f857e5615b 100644 --- a/techniques/html/H43.html +++ b/techniques/html/H43.html @@ -13,7 +13,7 @@

    Using id and

    When to Use

    -

    HTML

    +

    HTML

    Description

    @@ -25,7 +25,7 @@

    Description

    Examples

    A table with multiple rows of headers

    -
    <table>
+
    <table>
   <tr>
     <th rowspan="2" id="h">Homework</th>
     <th colspan="3" id="e">Exams</th>
@@ -48,7 +48,7 @@ 
    A table with multiple rows of headers
    
     <td headers="p p2">10%</td>
     <td headers="p pf">15%</td>
   </tr>
-</table>
    
+</table>
    @@ -63,7 +63,7 @@

    Procedure

    1. Check that each id listed in the headers attribute of the data cell matches the id attribute of a cell that is used as a header element.
    2. Check that the headers attribute of a data cell contains the id attribute of all headers associated with the data cell.
      3. -
    3. Check that all ids are unique (that is, no two elements in the page have the same id).
      4. +
    4. Check that all ids are unique (that is, no two elements in the page have the same id).
    @@ -87,10 +87,10 @@

    Related Techniques

    Resources

    - - - -
    \ No newline at end of file + + + + \ No newline at end of file From 1e453600c08d251c64301fe14855463f0bbe3a93 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Tue, 5 Sep 2023 09:43:11 -0700 Subject: [PATCH 15/67] Update h44 for syntax highlighting --- techniques/html/H44.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/techniques/html/H44.html b/techniques/html/H44.html index a8fe0efad0..41c144dfac 100644 --- a/techniques/html/H44.html +++ b/techniques/html/H44.html @@ -80,19 +80,19 @@

    Examples

    A text input field

    The text field in this example has the explicit label of "First name:". The label element's for attribute matches the id attribute of the input element.

    -
    <label for="firstname">First name:</label> 
-<input id="firstname" name="firstname" type="text">
    +
    <label for="firstname">First name:</label> 
+<input id="firstname" name="firstname" type="text">

    A checkbox

    -
    <input checked id="markuplang" name="computerskills" type="checkbox">
-<label for="markuplang">HTML</label>
    +
    <input checked id="markuplang" name="computerskills" type="checkbox">
+<label for="markuplang">HTML</label>

    A group of radio buttons

    A small, related group of radio buttons with a clear description and labels for each individual element.

    -
    <h1>Doughnut Selection</h1>
+
    <h1>Doughnut Selection</h1>
 <form action="/buy-doughnuts" method="post">
   <fieldset>
     <legend>Pick the doughnut you would like</legend>
@@ -104,7 +104,7 @@ 
    A group of radio buttons
    
     <label for="dn-raspberry">Raspberry Filled</label>
   </fieldset>
   <input type="submit" value="Purchase Your Doughnut">
-</form>
    
+</form>
    From 3d7f985421ed51176309ddaeb1999dec32d3b395 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Tue, 5 Sep 2023 10:10:29 -0700 Subject: [PATCH 16/67] H48 update el class --- techniques/html/H48.html | 36 +++++++++++++++++------------------- 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/techniques/html/H48.html b/techniques/html/H48.html index fd3d62a49c..f6373f19ec 100644 --- a/techniques/html/H48.html +++ b/techniques/html/H48.html @@ -13,7 +13,7 @@

    Using ol, ul<

    When to Use

    -

    HTML

    +

    HTML

    Description

    @@ -28,37 +28,36 @@

    Examples

    A list showing steps in a sequence

    This example uses an ordered list to show the sequence of steps in a process.

    -
    <ol>
+
    <ol>
   <li>Mix flour, eggs, milk, and seasoning in a bowl.</li>
   <li>Whisk until the batter is smooth.</li>
   <li>Rest the batter for at least 30 minutes before cooking.</li>
-</ol>
    
+</ol>

    A grocery list

    This example shows an unordered list of items to buy at the store.

    - 
    <ul>
+
    <ul>
   <li>Milk</li>
   <li>Eggs</li>
   <li>Butter</li>
-</ul>
    
+</ul>

    A word and its definition

    - -

    This example uses a description list to group a definition with the term that is being defined.

    - -
    <dl>
+         
    This example uses a description list to group a definition with the term that is being defined.
    
+
+
    <dl>
   <dt>blink</dt>
   <dd>turn on and off between 0.5 and 3 times per second</dd>
-</dl>
    
+</dl>

    Contact information using a description list

    This example uses a description list to mark up pairs of related items. The pairs themselves are a logically related list.

    -
    <dl>
+
    <dl>
   <div>
     <dt>Name:</dt>
     <dd>Taisha Silveri</dd>
@@ -71,18 +70,15 @@ 
    Contact information using a description list
    
     <dt>Email:</dt>
     <dd>taisha-silveri@example.com</dd>
   </div>
-</dl>
-
    
+</dl>

    This is shown in the working example of contact information using a description list.

    -

    Using lists to group links

    +

    In this example the links are grouped using the ul and li elements.

    -

    In this example the links are grouped using the ul and li elements.

    - -
    <h2 id="product-categories">Product Categories</h2>
+
    <h2 id="product-categories">Product Categories</h2>
 <nav aria-labelledby="product-categories">
   <ul>
     <li><a href="kitchen.html">Kitchen</a></li>
@@ -91,7 +87,7 @@ 
    Using lists to group links
    
     <li><a href="lighting.html">Lighting</a></li>
     <li><a href="storage.html">Storage</a><li>
   </ul>
-</nav>
    
+</nav>
    @@ -131,4 +127,6 @@

    Resources

    -
    \ No newline at end of file + + + \ No newline at end of file From b3992d0cff7c78a2fc8f0cd2d2c8246ec62be423 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Tue, 5 Sep 2023 10:10:56 -0700 Subject: [PATCH 17/67] Update el class attributes --- techniques/html/H28.html | 2 +- techniques/html/H43.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/techniques/html/H28.html b/techniques/html/H28.html index 0292b98cac..38c58de8b9 100644 --- a/techniques/html/H28.html +++ b/techniques/html/H28.html @@ -18,7 +18,7 @@

    When to Use

    Description

    The objective of this technique is to provide expansions or definitions for - abbreviations by using the abbr element. It is always appropriate to use the abbr element for any abbreviation, including acronyms and initialisms.

    + abbreviations by using the abbr element. It is always appropriate to use the abbr element for any abbreviation, including acronyms and initialisms.

    diff --git a/techniques/html/H43.html b/techniques/html/H43.html index f857e5615b..70383be0a5 100644 --- a/techniques/html/H43.html +++ b/techniques/html/H43.html @@ -18,7 +18,7 @@

    When to Use

    Description

    The objective of this technique is to associate each data cell (in a data table) with the appropriate headers. This technique adds a headers attribute to each data cell (td element). It also adds an id attribute to any cell used as a header for other cells. The headers attribute of a cell contains a list of the id attributes of the associated header cells. If there is more than one id, they are separated by spaces.

    -

    This technique is used when data cells are associated with more than one row and/or one column header. This allows screen readers to speak the headers associated with each data cell when the relationships are too complex to be identified using the th element alone or the th element with the scope attribute. Using this technique also makes these complex relationships perceivable when the presentation format changes.

    +

    This technique is used when data cells are associated with more than one row and/or one column header. This allows screen readers to speak the headers associated with each data cell when the relationships are too complex to be identified using the th element alone or the th element with the scope attribute. Using this technique also makes these complex relationships perceivable when the presentation format changes.

    This technique is not recommended for layout tables since its use implies a relationship between cells that is not meaningful when tables are used for layout.

    From ae307e4b808197373e44fca3d808e571739c6a05 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Tue, 5 Sep 2023 10:18:41 -0700 Subject: [PATCH 18/67] Update H49 for syntax highlighting --- techniques/html/H49.html | 49 +++++++++++++++++++++------------------- 1 file changed, 26 insertions(+), 23 deletions(-) diff --git a/techniques/html/H49.html b/techniques/html/H49.html index 03008ebc08..6e464d6b55 100644 --- a/techniques/html/H49.html +++ b/techniques/html/H49.html @@ -13,7 +13,7 @@

    Using semantic markup to mark emphasized or special text

    When to Use

    -

    HTML

    +

    HTML

    Description

    @@ -38,50 +38,50 @@

    Using the em and ... What she <em>really</em> meant to say was, &quot;This is not OK, - it is <strong>excellent</strong>&quot;! ... + 
     ... What she <em>really</em> meant to say was, &quot;This is not OK, 
+ it is <strong>excellent</strong>&quot;! ...

    Using the blockquote element to mark up long quotations from another source

    This example also demonstrates the use of the cite element to specify a reference.

    - 
    <p>The following is an excerpt from the <cite>The Story Of My Life</cite> 
+         
    <p>The following is an excerpt from the <cite>The Story Of My Life</cite> 
    by Helen Keller:</p>
 <blockquote>
   <p>Even in the days before my teacher came, I used to feel along the square stiff
      boxwood hedges, and, guided by the sense of smell, would find the first violets
      and lilies. There, too, after a fit of temper, I went to find comfort and to hide
      my hot face in the cool leaves and grass.</p>
-</blockquote>
    
+</blockquote>

    Using the q element to mark up a shorter quotation from another source

    Quotation marks aren't manually added to the quote because they are added by the user agent.

    -
    <p>Helen Keller said, <q>Self-pity is our worst enemy and if we yield to it, 
-   we can never do anything good in the world</q>.</p>
    +
    <p>Helen Keller said, <q>Self-pity is our worst enemy and if we yield to it, 
+   we can never do anything good in the world</q>.</p>

    Using the sup and sub elements to mark up superscripts and subscripts

    The sup and sub elements must be used only to mark up typographical conventions with specific meanings, not for typographical presentation for presentation's sake.

    -
    <p>Beth won 1<sup>st</sup> place in the 9<sup>th</sup> grade science competition.</p>
-<p>The chemical notation for water is H<sub>2</sub>O.</p>
    +
    <p>Henry won 1<sup>st</sup> place in the 9<sup>th</sup> grade science competition.</p>
+<p>The chemical notation for water is H<sub>2</sub>O.</p>

    Using the code element to mark up code

    This example shows use of the code element to provide visual emphasis for a CSS rule:

    - 
    <code>
-#trial {
+   		
    <code>
+.trial {
   background-image: url(30daytrial.jpg);
   background-position: left top;
   background-repeat: no-repeat;
   padding-top: 68px;
 } 
-</code>
    
+</code>

    Tests

    Procedure

    @@ -98,14 +98,17 @@

    Expected Results

    Resources

    - - - -
    \ No newline at end of file + + +
    +

    Resources

    + +
    + + \ No newline at end of file From 5e03dd11eb717468a1509a5b8a430de86cc62d94 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Tue, 5 Sep 2023 10:25:43 -0700 Subject: [PATCH 19/67] Update H51 for syntax highlighting --- techniques/html/H51.html | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/techniques/html/H51.html b/techniques/html/H51.html index 6d71c51d5e..9bc0a6e748 100644 --- a/techniques/html/H51.html +++ b/techniques/html/H51.html @@ -13,7 +13,7 @@

    Using table markup to present tabular information

    When to Use

    -

    HTML

    +

    HTML

    Description

    @@ -28,7 +28,7 @@

    Description

    th, and td makes these relationships perceivable. Techniques such as inserting tabs to create columns or using the pre element are purely visual, and visually implied logical relationships are lost if the user cannot see the table or the visual presentation is changed.

    Simple tables generally have only one level of headers for columns and/or one level of headers on the rows.

    -

    Usually, for simple tables, row 1 column 1 is either blank or describes the contents of the entire column 1. Row 1 columns are not blank (i.e. they contain "column headings"), describe the contents of the entire column, and allow the reader to distinguish the difference in meaning between that column and other columns.

    +

    Usually, for simple tables, row 1 column 1 is either blank or describes the contents of the entire column 1. Row 1 columns are not blank (i.e., they contain "column headings"), describe the contents of the entire column, and allow the reader to distinguish the difference in meaning between that column and other columns.

    Column 1 rows are usually not blank, they often contain "row headings" which describe the contents of the entire row, and allow the reader to distinguish the difference in meaning between that row and the other rows. Otherwise, the Column 1 would contain simple data.

    @@ -39,7 +39,7 @@

    A schedule marked up as a simple data table with column and row headers

    This example uses markup for a simple data table. The first row shows the days of the week. Time intervals are shown in the first column. These cells are marked with the th element. This identifies the days of the week as column headers and the time intervals as row headers.

    Screen readers speak header information that changes as the user navigates the table. Thus, when screen reader users move to left or right along a row, they will hear the day of the week (the column header) followed by the appointment (if any). They will hear the time interval as they move up or down within the same column.

    -
    <table>
+
    <table>
   <tr>
     <th>Time</th>
     <th>Monday</th>
@@ -51,20 +51,20 @@ 
    A schedule marked up as a simple data table with column and row headers
    
   <tr>
     <th scope="row">8:00-9:00</th>
     <td>Meet with Sam</td>
-    <td> </td>
-    <td> </td>
-    <td> </td>
-    <td> </td>
+    <td></td>
+    <td></td>
+    <td></td>
+    <td></td>
   </tr>
   <tr>
     <th scope="row">9:00-10:00</th>
-    <td> </td>
-    <td> </td>
+    <td></td>
+    <td></td>
     <td>Doctor Williams</td>
     <td>Sam again</td>
     <td>Leave for San Antonio</td>
   </tr>
-</table> 
    
+</table>
    From 2ec5538e9c5be29f373279291c527a88f42f8942 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Tue, 5 Sep 2023 10:38:36 -0700 Subject: [PATCH 20/67] Update H53 * syntax highlighting * replaced HTML 4.01 link to living standard --- techniques/html/H53.html | 116 +++++++++++++++++++++------------------ 1 file changed, 64 insertions(+), 52 deletions(-) diff --git a/techniques/html/H53.html b/techniques/html/H53.html index 389338cf3f..fa90d6502e 100644 --- a/techniques/html/H53.html +++ b/techniques/html/H53.html @@ -1,70 +1,82 @@ -Using the body of the object element

    Using the body of the object element

    ID: H53

    Technology: html

    Type: Technique

    When to Use

    -

    Documents that load media with the object element.

    -

    Description

    + + + + Using the body of the object element + + + +

    Using the body of the object element

    +
    +

    ID: H53

    +

    Technology: html

    Type: Technique

    When to Use

    +

    Documents that load media with the object element.

    +
    +
    +

    Description

    The objective of this technique is to provide a text alternative for content rendered - using the object element. The body of the object element can be used to provide a - complete text alternative for the object, or may contain additional non-text content with - text alternatives.

    -

    Fallback content for the object element is only available to the user when the media loaded by the element is not rendered by the user agent, because the user agent does not support the media technology or the user has instructed the user agent not to render that technology. In these situations, the fallback content will be presented to the user. If the media is rendered without the fallback content, the media needs to be directly accessible. Authors can only rely on this technique to satisfy the success criterion if they are not relying on the direct accessibility of the media's technology in their conformance claim, and reasonably expect users will be able to access the fallback.

    -

    Examples

    + using the object element. The body of the object element can be used to provide a complete text alternative for the object, or may contain additional non-text content with text alternatives.

    +

    Fallback content for the object element is only available to the user when the media loaded by the element is not rendered by the user agent, because the user agent does not support the media technology or the user has instructed the user agent not to render that technology. In these situations, the fallback content will be presented to the user. If the media is rendered without the fallback content, the media needs to be directly accessible. Authors can only rely on this technique to satisfy the success criterion if they are not relying on the direct accessibility of the media's technology in their conformance claim, and reasonably expect users will be able to access the fallback.

    +
    +
    +

    Examples

    -

    An object includes a long description that describes it

    - 
     <object classid="http://www.example.com/analogclock.py">
+				
    An object includes a long description that describes it
    
+				
    <object classid="https://www.example.com/analogclock.py">
   <p>Here is some text that describes the object and its operation.</p>
-</object>
    
+</object>

    An object includes non-text content with a text alternative

    - 
    <object classid="http://www.example.com/animatedlogo.py">
-  <img src="staticlogo.gif" alt="Company Name" />
-</object>   
-
    + 
    <object classid="https://www.example.com/animatedlogo.py">
+  <img src="staticlogo.gif" alt="Company Name">
+</object>
    -

    The image object has content that provides a brief description of the function of - the image

    - 
    <object data="companylogo.gif" type="image/gif">
+         
    The image object has content that provides a brief description of the function of the image
    
+         
    <object data="companylogo.gif" type="image/gif">
   <p>Company Name</p>
-</object>
    
+</object>
    +

    This example takes advantage of the fact the object elements may be nested to provide for alternative representations of information.

    -

    This example takes advantage of the fact the object elements may be nested - to provide for alternative representations of information.

    - - 
    <object classid="java:Press.class" width="500" height="500">
-  <object data="Pressure.mpeg" type="video/mpeg">
-    <object data="Pressure.gif" type="image/gif">
+         
    <object classid="java:Press.class" width="500" height="500">
+  <object data="pressure.mpeg" type="video/mpeg">
+    <object data="pressure.gif" type="image/gif">
       As temperature increases, the molecules in the balloon...
     </object>
   </object>
-</object>  
    
+</object>
    -

    Tests

    -

    Procedure

    -
      -
    1. Check that the body of each object element contains a text alternative - for the object.
      2. -
    +
    +
    +

    Tests

    +
    +

    Procedure

    +
      +
    1. Check that the body of each object element contains a text alternative for the object.
      2. +
    -

    Expected Results

    -
      -
    • #1 is true.
      • -
    +
    +

    Expected Results

    +
      +
    • #1 is true.
      • +
    -

    Resources

    - - - -
    \ No newline at end of file +
    + +
    +

    Resources

    + +
    + + \ No newline at end of file From f717de56c18b9ba4e5649a2e10765c9b3ec491d8 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Tue, 5 Sep 2023 10:46:02 -0700 Subject: [PATCH 21/67] Update H54 * support for syntax highlighting * replaced HTML 4.01 link to living standard --- techniques/html/H54.html | 84 +++++++++++++++++++++++++--------------- 1 file changed, 53 insertions(+), 31 deletions(-) diff --git a/techniques/html/H54.html b/techniques/html/H54.html index f389c0946b..056806dd05 100644 --- a/techniques/html/H54.html +++ b/techniques/html/H54.html @@ -1,47 +1,69 @@ -Using the dfn element to identify the defining instance of a word

    Using the dfn element to identify the defining instance of a word

    ID: H54

    Technology: html

    Type: Technique

    When to Use

    -

    HTML and XHTML

    -

    Description

    -

    The objective of this technique is to use the dfn to mark the use of a - word or phrase where it is defined. The dfn element is used to indicate the + + + + Using the dfn element to identify the defining instance of a word + + +

    Using the dfn element to identify the defining instance of a word

    +
    +

    ID: H54

    +

    Technology: html

    +

    Type: Technique

    +
    +
    +

    When to Use

    +

    HTML

    +
    +
    +

    Description

    +

    The objective of this technique is to use the dfn to mark the use of a + word or phrase where it is defined. The dfn element is used to indicate the defining instance of the enclosed term. In other words, it marks the occurrence of the term where the term is defined. Note that it encloses the term, not the definition. This - technique would be used in combination with Using - inline definitions to provide the definition.

    -

    Examples

    -
    - -

    The following code snippet demonstrates the use of the dfn - element.

    + technique would be used in combination with Using inline definitions to provide the definition.

    +
    +
    +

    Examples

    +
    +

    The following code snippet demonstrates the use of the dfn element.

    - 
    <p>The Web Content Accessibility Guidelines require that non-text content
+         
    <p>The Web Content Accessibility Guidelines require that non-text content
 has a text alternative. <dfn>Non-text content</dfn> is content that is not a sequence
 of characters that can be programmatically determined or where the sequence is
 not expressing something in human language; this includes ASCII Art (which is a
 pattern of characters), emoticons, leetspeak (which is character substitution), and
-images representing text .</p> 
    
+images representing text.</p>
    -

    Tests

    -

    Procedure

    +
    +
    +

    Tests

    +
    +

    Procedure

    1. Identify all words that are defined inline in the text, that is, where the - definition occurs in a sentence near an occurrence of the word.
      2. -
    2. Check that each word that is defined inline is contained in a dfn - element.
      3. + definition occurs in a sentence near an occurrence of the word. +
    3. Check that each word that is defined inline is contained in a dfn element.
    -

    Expected Results

    +
    +

    Expected Results

    • Check #2 is true.
    -

    Resources

    - - - -
    \ No newline at end of file +
    + +
    +

    Resources

    + +
    + + \ No newline at end of file From 7073de21893d8d3fa2afa0ee5e5e76bee8d0df47 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Tue, 5 Sep 2023 10:59:58 -0700 Subject: [PATCH 22/67] Update H56 * syntax highlighting * replaced out of date resource link --- techniques/html/H56.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/techniques/html/H56.html b/techniques/html/H56.html index 6b77a1dabb..7c7903af2a 100644 --- a/techniques/html/H56.html +++ b/techniques/html/H56.html @@ -5,7 +5,7 @@ -

    Using the dir attribute on an inline element to resolve problems +

    Using the dir attribute on an inline element to resolve problems with nested directional runs

    ID: H56

    @@ -70,7 +70,7 @@

    Resources

    HTML - bidirectional text.
  • - Authoring HTML: Handling Right-to-left Scripts. + Creating HTML Pages in Arabic, Hebrew and Other Right-to-left Scripts (tutorial).
    • From eba52194a41c1122ec2b833383ffc9a89498d3dd Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Thu, 7 Sep 2023 10:13:08 -0700 Subject: [PATCH 23/67] Update H57 for syntax highlighting --- techniques/html/H57.html | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/techniques/html/H57.html b/techniques/html/H57.html index 24cc9d064a..496f885e06 100644 --- a/techniques/html/H57.html +++ b/techniques/html/H57.html @@ -5,7 +5,7 @@ -

    Using the language attribute on the HTML element

    +

    Using the language attribute on the HTML element

    ID: H57

    3.1.1 Language of Page

    @@ -14,7 +14,7 @@

    Using the language attribute on the HTML element

    When to Use

    -

    HTML

    +

    HTML

    Description

    @@ -31,7 +31,8 @@

    Description

    Examples

    Defining the content of an HTML document to be in French

    -
    <!doctype html>
+
    
+
    <!doctype html>
 <html lang="fr"> 
 <head>
   <meta charset="utf-8">
@@ -40,7 +41,8 @@ 
    Defining the content of an HTML document to be in French
    
 <body>     
   ... document écrit en français ...
 </body>
-</html>
    
+</html>
    +
    @@ -67,8 +69,7 @@

    Related Techniques

    -

    Resources

    - +

    Resources

    - +
    From 12352df6b67393f9f630801a26846b5b45f42c1a Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Thu, 7 Sep 2023 10:32:39 -0700 Subject: [PATCH 24/67] Update H58 for syntax highlighting --- techniques/html/H58.html | 35 +++++++++++++++++------------------ 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/techniques/html/H58.html b/techniques/html/H58.html index b8f4ab5a03..cf5b500f42 100644 --- a/techniques/html/H58.html +++ b/techniques/html/H58.html @@ -4,7 +4,6 @@ Using language attributes to identify changes in the human language -

    Using language attributes to identify changes in the human language

    @@ -15,7 +14,7 @@

    Using language attributes to identify changes in the human language

    When to Use

    -

    HTML

    +

    HTML

    @@ -29,14 +28,16 @@

    Examples

    The use of the lang attribute to define a quote written in German

    -
    <blockquote lang="de">
+
    
+
    <blockquote lang="de">
   <p>
     Da dachte der Herr daran, ihn aus dem Futter zu schaffen,
     aber der Esel merkte, daß kein guter Wind wehte, lief fort
     und machte sich auf den Weg nach Bremen: dort, meinte er,
     könnte er ja Stadtmusikant werden.
   </p>
-</blockquote>
    
+</blockquote>
    +
    @@ -70,22 +71,20 @@

    Related Techniques

    Resources

    - -
    From 4ae5cc476707f337f01ae8f22cdf6c9b32a91a91 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Thu, 7 Sep 2023 10:38:01 -0700 Subject: [PATCH 25/67] Update H59 for syntax highlighting Note: this technique should be retired. See: [issue 1234](https://github.com/w3c/wcag/issues/1234) --- techniques/html/H59.html | 53 +++++++++++++++++----------------------- 1 file changed, 23 insertions(+), 30 deletions(-) diff --git a/techniques/html/H59.html b/techniques/html/H59.html index 56f31fe3ce..32179a4878 100644 --- a/techniques/html/H59.html +++ b/techniques/html/H59.html @@ -13,29 +13,23 @@

    Using the link element and navigation too

    When to Use

    -

    HTML

    +

    HTML

    Description

    -

    The objective of this technique is to describe how the link element can - provide metadata about the position of an HTML page within a set of Web pages or can - assist in locating content with a set of Web pages. The value of the rel - attributes indicates what type of relation is being described, and the href - attribute provides a link to the document having that relation. Different link element rel values are used to create relationships:

    -
      -
    • next: Refers to the next document in a linear sequence of documents.
      • -
    • prev: Refers to the previous document in an ordered series of documents.
      • -
    -
    -
    -

    Examples

    -
    +

    The objective of this technique is to describe how the link element can provide metadata about the position of an HTML page within a set of Web pages or can assist in locating content with a set of Web pages. The value of the rel attributes indicates what type of relation is being described, and the href attribute provides a link to the document having that relation. Different link element rel values are used to create relationships:

    +
      +
    • next: Refers to the next document in a linear sequence of documents.
      • +
    • prev: Refers to the previous document in an ordered series of documents.
      • +
    +
    +
    +

    Examples

    +
    +

    A Web page for Chapter 2 of an on-line book might contain the following links within the head section.

    -

    A Web page for Chapter 2 of an on-line book might contain the following links - within the head section.

    - -
    <link rel="prev" href="Chapter01.html" title="01. Why Volunteer?">
-<link rel="next" href="Chapter03.html" title="03. Who Volunteers?" />
    +
    <link rel="prev" href="chapter01.html" title="01. Why Volunteer?">
+<link rel="next" href="chapter03.html" title="03. Who Volunteers?" />
    @@ -72,14 +66,13 @@

    Related Techniques

    Resources

    - - - -
    + +
    + From 0f062c23b15e81b09b2a593a25fd62a216c7bd27 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Thu, 7 Sep 2023 13:06:20 -0700 Subject: [PATCH 26/67] H58: add lang to German code sample --- techniques/html/H58.html | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/techniques/html/H58.html b/techniques/html/H58.html index cf5b500f42..76f4f6202f 100644 --- a/techniques/html/H58.html +++ b/techniques/html/H58.html @@ -27,17 +27,15 @@

    Description

    Examples

    The use of the lang attribute to define a quote written in German

    - -
    + 
    <blockquote lang="de">
   <p>
-    Da dachte der Herr daran, ihn aus dem Futter zu schaffen,
+    Da dachte der Herr daran, ihn aus dem Futter zu schaffen,
     aber der Esel merkte, daß kein guter Wind wehte, lief fort
     und machte sich auf den Weg nach Bremen: dort, meinte er,
-    könnte er ja Stadtmusikant werden.
+    könnte er ja Stadtmusikant werden.
   </p>
 </blockquote>
    -
    From 4211805a5e14bc34dea041acc5de3fe46533f80f Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Thu, 7 Sep 2023 14:27:41 -0700 Subject: [PATCH 27/67] Update H62 * add support for syntax highlighting * update links from W3C HTML spec to WHATWG * add lang support for change of languages * removed references to XHTML and HTML5 --- techniques/html/H62.html | 191 +++++++++++++++++---------------------- 1 file changed, 84 insertions(+), 107 deletions(-) diff --git a/techniques/html/H62.html b/techniques/html/H62.html index 57c55f72c7..1182cd98a4 100644 --- a/techniques/html/H62.html +++ b/techniques/html/H62.html @@ -1,126 +1,103 @@ -Using the ruby element

    Using the ruby element

    ID: H62

    Technology: html

    Type: Technique

    When to Use

    -

    XHTML 1.1 and HTML5

    -

    Description

    -

    The objective of this technique is to use ruby annotation to provide information about - the pronunciation and meaning of a run of text where meaning is determined by - pronunciation.

    -

    There are many languages in which a run of text may mean different things depending on - how the text is pronounced. This is common in East Asian languages as well as Hebrew, - Arabic, and other languages; it also occurs in English and other Western European - languages.

    -

    Ruby Annotation allows the author to annotate a "base text," providing a guide to - pronunciation and, in some cases, a definition as well. Ruby is commonly used for text - in Japanese and other East Asian languages. Ruby Annotation is defined as a module for - XHTML 1.1 or HTML5.

    -

    There are two types of Ruby markup: simple and complex. Simple Ruby markup applies to a - run of text such as a complete word or phrase. This is known as the "base" text - (rb element). The Ruby annotation that indicates how to pronounce the term (the - rt element, or Ruby text) is shown in a smaller font. (The term "Ruby" is - derived from a small font used for this purpose in printed texts.) The Ruby text is - usually rendered above or immediately before the base text, that is, immediately above - horizontal text or immediately to the right of vertical text. Sometimes Japanese uses - Ruby to provide the meaning of text on the other side of the base text (visually) from - the phonetic annotation. Simple Ruby markup also provides a "fallback" option for user - agents that do not support Ruby markup (that is, user agents that do not support XHTML - 1.1 or HTML5).

    -

    Complex Ruby markup makes it possible to divide the base text into smaller units, each - of which may be associated with a separate Ruby annotation. Complex Ruby markup does not - support the fallback option.

    -

    Ruby annotation is uncommon in languages such as Hebrew, where Unicode fonts can - include diacritical marks that convey pronunciation. It is also uncommon in English and - European languages.

    -

    Note: The primary reason for indicating pronunciation through Ruby or any other means - is to make the content accessible to people with disabilities who could read and - understand the language of the content if information about pronunciation were provided. - It is not necessary to provide information about pronunciation for use by people who are - not familiar with the language of the content.

    -

    Examples

    + + + + Using the ruby element + + + +

    Using the ruby element

    +
    +

    ID: H62

    +

    Technology: html

    +

    Type: Technique

    +
    +
    +

    When to Use

    +

    HTML

    +
    +
    +

    Description

    +

    The objective of this technique is to use ruby annotation to provide information about the pronunciation and meaning of a run of text where meaning is determined by pronunciation.

    +

    There are many languages in which a run of text may mean different things depending on how the text is pronounced. This is common in East Asian languages as well as Hebrew, Arabic, and other languages; it also occurs in English and other Western European languages.

    +

    Ruby Annotation allows the author to annotate a "base text," providing a guide to pronunciation and, in some cases, a definition as well. Ruby is commonly used for text in Japanese and other East Asian languages.

    +

    There are two types of Ruby markup: simple and complex. Simple Ruby markup applies to a run of text such as a complete word or phrase. This is known as the "base" text (rb element). The Ruby annotation that indicates how to pronounce the term (the rt element, or Ruby text) is shown in a smaller font. (The term "Ruby" is derived from a small font used for this purpose in printed texts.) The Ruby text is usually rendered above or immediately before the base text, that is, immediately above horizontal text or immediately to the right of vertical text. Sometimes Japanese uses Ruby to provide the meaning of text on the other side of the base text (visually) from the phonetic annotation. Simple Ruby markup also provides a "fallback" option for user agents that do not support Ruby markup (that is, user agents that do not support HTML).

    +

    Complex Ruby markup makes it possible to divide the base text into smaller units, each of which may be associated with a separate Ruby annotation. Complex Ruby markup does not support the fallback option.

    +

    Ruby annotation is uncommon in languages such as Hebrew, where Unicode fonts can include diacritical marks that convey pronunciation. It is also uncommon in English and European languages.

    +

    Note: The primary reason for indicating pronunciation through Ruby or any other means is to make the content accessible to people with disabilities who could read and understand the language of the content if information about pronunciation were provided. It is not necessary to provide information about pronunciation for use by people who are not familiar with the language of the content.

    +
    +
    +

    Examples

    -

    Ruby markup providing pronunciation information for an initialism

    - -

    This example uses Ruby annotation to give the pronunciation of the initialism - (acronym) formed by the first letters of the words Web Content Accessibility - Guidelines. The letters WCAG are the base (the rb element), and the pronunciation - information is shown by the Ruby text (the rt element). The Ruby parenthesis element - rp is used for user agents that do not support Ruby annotations to - indicate that the text in the rt element provides the pronunciation - information. The pronunciation information is rendered in parentheses immediately - following the base text. (User agents that support Ruby do not show the - parentheses.)

    - - 
    <p>When we talk about these guidelines, we often just call them
+				
    Ruby markup providing pronunciation information for an initialism
     
+        
    This example uses Ruby annotation to give the pronunciation of the initialism (acronym) formed by the first letters of the words Web Content Accessibility Guidelines. The letters WCAG are the base (the rb element), and the pronunciation information is shown by the Ruby text (the rt element). The Ruby parenthesis element rp is used for user agents that do not support Ruby annotations to indicate that the text in the rt element provides the pronunciation information. The pronunciation information is rendered in parentheses immediately following the base text. (User agents that support Ruby do not show the parentheses.) 
     
+
    <p>When we talk about these guidelines, we often just call them
   <ruby>
     <rb>WCAG</rb>
     <rp>(</rp>
       <rt>Wuh-KAG</rt>
     <rp>)</rp>
   </ruby>.
-</p>
    
+</p>
    -

    Ruby annotation for Japanese

    - -

    The following is an example in Japanese. For Japanese, the Ruby is used to give - the reading of Han characters(Kanji). the Ruby parenthesis element rp is - used for user agents that do not support Ruby annotations to indicate that the text - in the rt element provides the pronunciation information. The pronunciation - information is rendered in parentheses immediately following the base text. (User - agents that support Ruby do not show the parentheses.)

    +

    Ruby annotation for Japanese

    +

    The following is an example in Japanese. For Japanese, the Ruby is used to give the reading of Han characters (Kanji). the Ruby parenthesis element rp is used for user agents that do not support Ruby annotations to indicate that the text in the rt element provides the pronunciation information. The pronunciation information is rendered in parentheses immediately following the base text. (User agents that support Ruby do not show the parentheses.)

    - 
    <p>
+
    <p>
   <ruby>
-    <rb>慶應大学</rb>
+    <rb>慶應大学</rb>
     <rp>(</rp>
-    <rt>けいおうだいがく</rt>
+    <rt>けいおうだいがく</rt>
     <rp>)</rp>
   </ruby>
-</p>    
    
+</p>
    -

    Tests

    -

    Procedure

    -

    For each run of text where a Ruby annotation is used to provide pronunciation - information:

    +
    +
    +

    Tests

    +
    +

    Procedure

    +

    For each run of text where a Ruby annotation is used to provide pronunciation information:

      -
    1. Check that a rt element contains pronunciation information for each - run of text defined by the rb element.
      2. -
    2. If simple Ruby markup is used, check that the rp element is present - to indicate to user agents that do not support Ruby annotations that the text in - the rt element provides the pronunciation information. .
      3. +
    3. Check that a rt element contains pronunciation information for each run of text defined by the rb element.
      4. +
    4. If simple Ruby markup is used, check that the rp element is present to indicate to user agents that do not support Ruby annotations that the text in the rt element provides the pronunciation information.
    -

    Expected Results

    -
      -
    • Checks #1 and #2 are true.
      • -
    +
    +

    Expected Results

    +
      +
    • Checks #1 and #2 are true.
      • +
    -

    Resources

    - - - -
    \ No newline at end of file +
    + +
    +

    Resources

    + +
    + + \ No newline at end of file From 80e251468a9fb6254c89b9b903845ecaf49f9165 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Thu, 7 Sep 2023 16:36:17 -0700 Subject: [PATCH 28/67] Update H63 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * add support for syntax highlighting * remove references to XHTML * update Resources links * remove test to check that `td` elements have `scope` attribute as that’s invalid HTML now * swapped a male name for a female one --- techniques/html/H63.html | 156 ++++++++++++++++++++------------------- 1 file changed, 82 insertions(+), 74 deletions(-) diff --git a/techniques/html/H63.html b/techniques/html/H63.html index 87406cd39c..3da231a42c 100644 --- a/techniques/html/H63.html +++ b/techniques/html/H63.html @@ -1,23 +1,28 @@ -Using the scope attribute to associate header cells and data cells in data - tables

    Using the scope attribute to associate header cells and data cells in data - tables

    ID: H63

    Technology: html

    Type: Technique

    When to Use

    -

    HTML and XHTML

    -

    Description

    -

    The objective of this technique is to associate header cells with data cells in complex tables using the - scope attribute. The scope attribute may be used to clarify - the scope of any cell used as a header. The scope identifies whether the cell is a - header for a row, column, or group of rows or columns. The values row, - col, rowgroup, and colgroup identify these - possible scopes respectively.

    -

    For simple data tables where the header is not in the first row or column, like the one - in Example 1, this technique can be used. Based on screen reader support today, its use - is suggested in two situations both relating to simple tables:

    + + + + Using the scope attribute to associate header cells and data cells in data tables + + + +

    Using the scope attribute to associate header cells and data cells in data tables

    + +
    +

    ID: H63

    +

    Technology: html

    +

    Type: Technique

    +
    +
    +

    When to Use

    +

    HTML

    +
    +
    +

    Description

    +

    The objective of this technique is to associate header cells with data cells in complex tables using the scope attribute. The scope attribute may be used to clarify the scope of any cell used as a header. The scope identifies whether the cell is a header for a row, column, or group of rows or columns. The values row, col, rowgroup, and colgroup identify these possible scopes respectively.

    +

    For simple data tables where the header is not in the first row or column, like the one in Example 1, this technique can be used. Based on screen reader support today, its use is suggested in two situations both relating to simple tables:

      -
    • data cells marked up with td that also function as row header or column - header
      • -
    • header cells marked up with td instead of th. Sometimes, authors - use this to avoid the display characteristics associated with th and also - do not choose to use CSS to control the display for th.
      • +
    • data cells marked up with td that also function as row header or column header
      • +
    • header cells marked up with td instead of th. Sometimes, authors use this to avoid the display characteristics associated with th and also do not choose to use CSS to control the display for th.

    For simple tables that have the headers in the first row or column then it is @@ -25,76 +30,79 @@

    For complex tables use ids and headers as in H43.

    Some users may find it easier to work with several simple tables than one more complex table. Authors may wish to consider whether they can convert complex tables to one or more simple tables.

    -

    Examples

    -
    -

    A simple schedule

    +
    +
    +

    Examples

    +
    +

    A simple schedule

    +

    In the following example, the first column contains serial numbers for rows in the table, and the second column contains the key value for the row. The cells in the second column may then use scope="row". The cells in the first row too are marked up with td and use scope="col".

    -

    In the following example, column #1 contains serial numbers for rows in the table - and the second column contains the key value for the row. The cells in the second - column may then use - scope="row". The cells in the first row too are - marked up with td and use - scope="col".

    - - 
     <table border="1">
+
    <table>
   <caption>Contact Information</caption>
   <tr>
     <td></td>
     <th scope="col">Name</th>
-    <th scope="col">Phone#</th>
-    <th scope="col">Fax#</th>
+    <th scope="col">Phone</th>
     <th scope="col">City</th>
-  </tr><tr>
-    <td>1.</td>
+  </tr>
+  <tr>
+    <td>0001</td>
     <th scope="row">Joel Garner</th>
     <td>412-212-5421</td>
-    <td>412-212-5400</td>
     <td>Pittsburgh</td>
-  </tr><tr>
-    <td>2.</td>
-    <th scope="row">Clive Lloyd</th>
+  </tr>
+  <tr>
+    <td>0002</td>
+    <th scope="row">Emma Smith</th>
     <td>410-306-1420</td>
-    <td>410-306-5400</td>
     <td>Baltimore</td>
-  </tr><tr>
-    <td>3.</td>
+  </tr>
+  <tr>
+    <td>0003</td>
     <th scope="row">Gordon Greenidge</th>
     <td>281-564-6720</td>
-    <td>281-511-6600</td>
     <td>Houston</td>
   </tr>
-</table> 
    
-
    -

    Tests

    -

    Procedure

    -

    For each data table:

    -
      -
    1. Check that all th elements have a scope attribute.
      2. -
    2. Check that all td elements that act as headers for other elements - have a scope attribute.
      3. -
    3. Check that all scope attributes have the value row, - col, rowgroup, or colgroup.
      4. -
    -
    -

    Expected Results

    -
      -
    • All checks above are true.
      • -
    +</table>
    -
    +
    +

    Tests

    +
    +

    Procedure

    +

    For each data table:

    +
      +
    1. Check that all th elements have a scope attribute.
      2. +
    2. Check that all scope attributes have the value row, col, rowgroup, or colgroup.
      3. +
    +
    +
    +

    Expected Results

    +
      +
    • All checks above are true.
      • +
    +
    +
    +

    Resources

    - - - -
    \ No newline at end of file + +
    +
    +

    Resources

    + +
    + + \ No newline at end of file From eccb3891c953b3c99d6e50aeb2f5c1ee18bf1e86 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Thu, 7 Sep 2023 16:47:33 -0700 Subject: [PATCH 29/67] Update H64 for syntax highlighting --- techniques/html/H64.html | 47 +++++++++++++++++++--------------------- 1 file changed, 22 insertions(+), 25 deletions(-) diff --git a/techniques/html/H64.html b/techniques/html/H64.html index 3e766a43e5..c6f37d01e0 100644 --- a/techniques/html/H64.html +++ b/techniques/html/H64.html @@ -7,31 +7,28 @@

    Using the title attribute of the iframe element

    -

    ID: H64

    -

    Technology: html

    -

    Type: Technique

    +

    ID: H64

    +

    Technology: html

    +

    Type: Technique

    -

    When to Use

    -

    HTML documents that use iframes

    +

    When to Use

    +

    HTML documents that use iframes

    -

    Description

    -

    The objective of this technique is to demonstrate the use of the title - attribute of the iframe element to describe its contents. This provides a label for the frame so users can determine which frame to enter and explore in detail. It does not label the content inside the iframe.

    -
    -

    The title attribute labels iframes, and is different from the title element which labels documents. Both should be provided, since the first facilitates navigation among iframes and the second clarifies the user's current page.

    -
    -

    The title attribute is not interchangeable with the name - attribute. The title labels the frame for users; the name - labels it for scripting and window targeting. The name is not presented to the user, only the title is.

    +

    Description

    +

    The objective of this technique is to demonstrate the use of the title attribute of the iframe element to describe its contents. This provides a label for the frame so users can determine which frame to enter and explore in detail. It does not label the content inside the iframe.

    +
    +

    The title attribute labels iframes, and is different from the title element which labels documents. Both should be provided, since the first facilitates navigation among iframes and the second clarifies the user's current page.

    +
    +

    The title attribute is not interchangeable with the name attribute. The title labels the frame for users; the name labels it for scripting and window targeting. The name is not presented to the user, only the title is.

    -

    Examples

    -
    -

    Using the title attribute with an iframe to describe the iframe's content

    +

    Examples

    +
    +

    Using the title attribute with an iframe to describe the iframe's content

    -
    <!doctype html>
+
    <!doctype html>
 <html lang="en">
 <head>
    <title>A document using an iframe</title>
@@ -39,7 +36,7 @@ 
    Using the title attribute with an 
+</html>
    @@ -59,12 +56,12 @@

    Expected Results

    -

    Resources

    - +

    Resources

    +
    \ No newline at end of file From 4218577ca112726f79cdabd16dccf66bfcd46822 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Thu, 7 Sep 2023 17:08:34 -0700 Subject: [PATCH 30/67] Update H65 * add support for syntax highlighting * remove references to HTML 4.01 --- techniques/html/H65.html | 157 +++++++++++++++++++-------------------- 1 file changed, 78 insertions(+), 79 deletions(-) diff --git a/techniques/html/H65.html b/techniques/html/H65.html index 3473d77177..a470af6c9c 100644 --- a/techniques/html/H65.html +++ b/techniques/html/H65.html @@ -1,91 +1,90 @@ -Using the title attribute to identify form controls when the label element - cannot be used

    Using the title attribute to identify form controls when the label element - cannot be used

    ID: H65

    Technology: html

    Type: Technique

    When to Use

    -

    HTML form controls that are not identified using value, - alt, or element content

    -

    Description

    -

    The objective of this technique is to use the title attribute to provide an accessible name for form controls when the visual design does not include text on the screen that can be associated with the control as a label. User agents, including assistive technology, can speak the - title attribute.

    -

    Examples

    -
    -

    A pulldown menu that limits the scope of a search

    - -

    A search form uses a pulldown menu to limit the scope of the search. The pulldown - menu is immediately adjacent to the text field used to enter the search term. The - relationship between the search field and the pulldown menu is clear to users who - can see the visual design, which does not have room for a separate visible label. The - title attribute is used to identify the select menu. The - title attribute can be spoken by screen readers or displayed as a - tool tip for people using screen magnifiers. There must be visual information on the page which allows sighted users to understand the purpose of the form controls and user agents.

    - - 
    <label for="searchTerm">Search for:</label>
-<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
+
+
+	
+		Using the title attribute to identify form controls when the label element cannot be used
+    
+	
+	
+		
    Using the title attribute to identify form controls when the label element cannot be used
    
+		
    
+			
    ID: H65
    
+			
    Technology: html
    
+			
    Type: Technique
    
+		
    
+		
    When to Use
    
+			
    HTML form controls that are not identified using value, alt, or element content
    
+   
    
+	 
    
+		
    Description
    
+    
    The objective of this technique is to use the title attribute to provide an accessible name for form controls when the visual design does not include text on the screen that can be associated with the control as a label. User agents, including assistive technology, can speak the title attribute.
    
+   
    
+	 
    
+		
    Examples
    
+		
    
+			
    A pulldown menu that limits the scope of a search
    
+      
    A search form uses a pulldown menu to limit the scope of the search. The pulldown menu is immediately adjacent to the text field used to enter the search term. The relationship between the search field and the pulldown menu is clear to users who can see the visual design, which does not have room for a separate visible label. The title attribute is used to identify the select menu. The title attribute can be spoken by screen readers or displayed as a tool tip for people using screen magnifiers. There must be visual information on the page which allows sighted users to understand the purpose of the form controls and user agents.
       
+
    <label for="search-term">Search for:</label>
+<input id="search-term" name="search-term" type="text" value="">
 <select title="Search in" id="scope">
-…
-</select> 
    
+  ...
+</select>
    -

    Input fields for a phone number

    - -

    A Web page contains controls for entering a phone number in the United States, with - three fields for area code, exchange, and last four digits.

    +

    Input fields for a phone number

    +

    A Web page contains controls for entering a phone number in the United States, with three fields for area code, exchange, and last four digits.

    - 
    <fieldset><legend>Phone number</legend>
-<input id="areaCode" name="areaCode" title="Area Code" 
-type="text" size="3" value="" >
-<input id="exchange" name="exchange" title="First three digits of phone number" 
-type="text" size="3" value="" >
-<input id="lastDigits" name="lastDigits" title="Last four digits of phone number" 
-type="text" size="4" value="" >
-</fieldset>
    +
    <fieldset>
+  <legend>Phone number</legend>
+  <input id="area-code" name="area-code" title="Area Code" 
+   type="text" size="3" value="">
+  <input id="exchange" name="exchange" title="First three digits of phone number" 
+   type="text" size="3" value="">
+  <input id="last-digits" name="last-digits" title="Last four digits of phone number" 
+   type="text" size="4" value="">
+</fieldset>
    -

    A Search Function

    - -

    A Web page contains a text field where the user can enter search terms and a button labeled "Search" for performing the search. The title attribute is used to identify the form control and the button is positioned right after the text field so that it is clear to the user that the text field is where the search term should be entered.

    - - 
    -<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>
-
    +

    A Search Function

    +

    A Web page contains a text field where the user can enter search terms and a button labeled "Search" for performing the search. The title attribute is used to identify the form control and the button is positioned right after the text field so that it is clear to the user that the text field is where the search term should be entered.

    +
    <input type="text" title="Type search term here"> <input type="submit" value="Search">
+
    -

    A data table of form controls

    - -

    A data table of form controls needs to associate each control with the column and row headers for that cell. Without a title (or off-screen label) it is difficult for non-visual users to pause and interrogate for corresponding row or column header values using their assistive technology while tabbing through the form.

    -

    For example, a survey form has four column headers in first row: Question, Agree, Undecided, Disagree. Each following row contains a question and a radio button in each cell corresponding to answer choice in the three columns. The title attribute for every radio button contains the information necessary to identify the control.

    - +

    A data table of form controls

    +

    A data table of form controls needs to associate each control with the column and row headers for that cell. Without a title (or off-screen label) it is difficult for non-visual users to pause and interrogate for corresponding row or column header values using their assistive technology while tabbing through the form.

    +

    For example, a survey form has four column headers in first row: Question, Agree, Undecided, Disagree. Each following row contains a question and a radio button in each cell corresponding to answer choice in the three columns. The title attribute for every radio button contains the information necessary to identify the control.

    -

    Tests

    -

    Procedure

    -

    For all form controls that are not associated with a label element:

    -
      -

    1. Check that the control has a title attribute

      2. -

    2. Check that the purpose of the form control is clear to users who can see the control.

      3. -
    3. Check that the title attribute identifies the purpose of the - control and that it matches the apparent visual purpose.
      4. +
    +
    +

    Tests

    +
    +

    Procedure

    +

    For all form controls that are not associated with a label element:

    +
      +
    1. Check that the control has a title attribute
      2. +
    2. Check that the purpose of the form control is clear to users who can see the control.
      3. +
    3. Check that the title attribute identifies the purpose of the control and that it matches the apparent visual purpose.
    -

    Expected Results

    -
      -
    • Checks above are true.
      • -
    +
    +

    Expected Results

    +
      +
    • Checks above are true.
      • +
    -

    Resources

    - - - -
    +
    + +
    +

    Resources

    + +
    + + From 28c39b33b2583d6cf50e2134ef902dc93c11d4a8 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Thu, 7 Sep 2023 17:16:22 -0700 Subject: [PATCH 31/67] Update H67 for syntax highlighting --- techniques/html/H67.html | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/techniques/html/H67.html b/techniques/html/H67.html index 5956347bb8..d80d71dd35 100644 --- a/techniques/html/H67.html +++ b/techniques/html/H67.html @@ -13,7 +13,7 @@

    Using null alt text and no

    When to Use

    -

    HTML documents that load images.

    +

    HTML documents that load images.

    Description

    @@ -26,11 +26,8 @@

    Description

    Examples

    -

    Inserting a decorative image on a Web page

    - -
    -<img alt="" src="squiggle.gif" height="20" width="20">
-
    +

    Inserting a decorative image on a Web page

    +
    <img alt="" src="squiggle.gif" height="20" width="20">
    From d54236448f01c1729f832810fb5639349ca73472 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Thu, 7 Sep 2023 18:09:23 -0700 Subject: [PATCH 32/67] Update H69 for syntax highlighting --- techniques/html/H69.html | 120 +++++++++++++++++++-------------------- 1 file changed, 60 insertions(+), 60 deletions(-) diff --git a/techniques/html/H69.html b/techniques/html/H69.html index 3dd1770291..3baa07ac97 100644 --- a/techniques/html/H69.html +++ b/techniques/html/H69.html @@ -13,31 +13,31 @@

    Providing heading elements at the beginning of each section of content

    When to Use

    -

    HTML

    +

    HTML

    -

    Description

    -

    The objective of this technique is to use section headings to convey the structure of the content. Heading markup can be used:

    -
      -
    • to indicate start of main content;
      • -
    • to mark up section headings within the main content area;
      • -
    • to demarcate different navigational sections like top or main navigation, left or secondary navigation and footer navigation;
      • -
    • to mark up images of text that are used as headings;
      • -
    • to allow users the ability to navigate a page by sections or skip repeated blocks of information.
      • -
    -

    Headings are designed to convey logical hierarchy. Skipping levels in the sequence of headings may create the impression that the structure of the document has not been properly thought through or that specific headings have been chosen for their visual rendering rather than their meaning. Authors are encouraged to nest headings hierarchically. When headings are nested hierarchically, the most important information is given the highest logical level, and subsections are given subsequent logical levels.(i.e., h2 is a subsection of h1). Providing this type of structure will help users understand the overall organization of the content more easily.

    -

    Since headings indicate the start of important sections of content, it is possible for users with assistive technology to jump directly to the appropriate heading and begin reading the content. This significantly speeds interaction for users who would otherwise access the content slowly. Headings create chunks of information that can be found easily by people with disabilities, such as a blind person using a screen reader, or a person with a cognitive disability who uses assistive technology that delineates groups of information, or someone with a communication disability or illiteracy, who uses a screen reader to assist them in their reading.

    -
    -

    All of our techniques assume that people needing special user agents (including assistive technology or special plug-ins) will get and be using that type of user agent (for example: a screen reader, or plug-in that allows keyboard navigation of properly marked up content, etc.).

    -
    -
    -
    -

    Examples

    -
    -

    Organizing the sections of a search page

    -

    This example marks up each section heading using h2 elements.

    +

    Description

    +

    The objective of this technique is to use section headings to convey the structure of the content. Heading markup can be used:

    +
      +
    • to indicate start of main content;
      • +
    • to mark up section headings within the main content area;
      • +
    • to demarcate different navigational sections like top or main navigation, left or secondary navigation and footer navigation;
      • +
    • to mark up images of text that are used as headings;
      • +
    • to allow users the ability to navigate a page by sections or skip repeated blocks of information.
      • +
    +

    Headings are designed to convey logical hierarchy. Skipping levels in the sequence of headings may create the impression that the structure of the document has not been properly thought through or that specific headings have been chosen for their visual rendering rather than their meaning. Authors are encouraged to nest headings hierarchically. When headings are nested hierarchically, the most important information is given the highest logical level, and subsections are given subsequent logical levels.(i.e., h2 is a subsection of h1). Providing this type of structure will help users understand the overall organization of the content more easily.

    +

    Since headings indicate the start of important sections of content, it is possible for users with assistive technology to jump directly to the appropriate heading and begin reading the content. This significantly speeds interaction for users who would otherwise access the content slowly. Headings create chunks of information that can be found easily by people with disabilities, such as a blind person using a screen reader, or a person with a cognitive disability who uses assistive technology that delineates groups of information, or someone with a communication disability or illiteracy, who uses a screen reader to assist them in their reading.

    +
    +

    All of our techniques assume that people needing special user agents (including assistive technology or special plug-ins) will get and be using that type of user agent (for example: a screen reader, or plug-in that allows keyboard navigation of properly marked up content, etc.).

    +
    +
    +
    +

    Examples

    +
    +

    Organizing the sections of a search page

    +

    This example marks up each section heading using h2 elements.

    -
    <h1>Search Technical Periodicals</h1>
+
    <h1>Search Technical Periodicals</h1>
  <h2>Search</h2>
  <form action="/search" role="search">
   <label for="searchInput">Enter search topic:</label>
@@ -55,13 +55,13 @@ 
    Organizing the sections of a search page
    
  <section>
    <h2>Search Results</h2>
    ... search results are returned in this section ...
- </section>
    
+ </section>

    Headings show the overall organization of the content

    In this example, heading markup is used to make the navigation and main content sections perceivable.

    -
    <main>
+
    <main>
   <h1>Why Monday Monkey Lives For The Weekend</h1>
   ... text, images, and other material making up the main content ...
 </main>
@@ -72,12 +72,12 @@ 
    Headings show the overall organization of the content
    
     <li><a href="/contact">Contact us</a></li>
     ...
   </ul>
-</nav>
    
+</nav>

    Headings show the organization of material within the main content

    - -
    <!doctype html>
+
+
    <!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
@@ -93,50 +93,50 @@ 
    Headings show the organization of material within the main content
    
       <p>... text of the section ...</p>
     </main>
   </body> 
-</html>
    
+</html>
    -

    Tests

    -
    -

    Procedure

    -
      -
    1. Check that the content is divided into separate sections.
      2. -
    2. Check that each section on the page starts with a heading.
      3. -
    +

    Tests

    +
    +

    Procedure

    +
      +
    1. Check that the content is divided into separate sections.
      2. +
    2. Check that each section on the page starts with a heading.
      3. +
    -

    Expected Results

    -
    -

    Resources

    - +

    Resources

    +
    From bf3f428f59e6d521f06a25ece6bf025f393da9c5 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Thu, 7 Sep 2023 18:16:18 -0700 Subject: [PATCH 33/67] Update H88 * fix typos * remove references to XHTML --- techniques/html/H88.html | 70 +++++++++++++++++++++++++++------------- 1 file changed, 47 insertions(+), 23 deletions(-) diff --git a/techniques/html/H88.html b/techniques/html/H88.html index c803b982fd..debc899675 100644 --- a/techniques/html/H88.html +++ b/techniques/html/H88.html @@ -1,22 +1,40 @@ -Using HTML according to spec

    Using HTML according to spec

    ID: H88

    Technology: html

    Type: Technique

    When to Use

    -

    HTML and XHTML

    -

    Description

    -

    The objective of this technique is to use HTML and XHTML according to their respective specifications. Technology specifications define the meaning and proper handling of features of the technology. Using those features in the manner described by the specification ensures that user agents, including assistive technologies, will be able to present representations of the feature that are accurate to the author's intent and interoperable with each other.

    -

    At the time this technique was published, the appropriate versions of these technologies is HTML 4.01 and XHTML 1.0. HTML 4.01 is the latest mature version of HTML, which provides specific accessibility features and is widely supported by user agents. XHTML 1.0 provides the same features as HTML 4.01, except that it uses an XML structure, and has a more strict syntax than the HTML structure. Later versions of these technologies are not mature and / or are not widely supported by user agents at this time.

    -

    There are a few broad aspects to using HTML and XHTML according to their specification.

    + + + + Using HTML according to spec + + + +

    Using HTML according to spec

    +
    +

    ID: H88

    +

    Technology: html

    +

    Type: Technique

    +
    +
    +

    When to Use

    +

    HTML

    +
    +
    +

    Description

    +

    The objective of this technique is to use HTML according to its specification. Technology specifications define the meaning and proper handling of features of the technology. Using those features in the manner described by the specification ensures that user agents, including assistive technologies, will be able to present representations of the feature that are accurate to the author's intent and interoperable with each other.

    +

    There are a few broad aspects to using HTML according to its specification.

    1. - Using only features that are defined in the specification HTML defines sets of elements, attributes, and attribute values that may be used on Web pages. These features have specific semantic meanings and are intended to be processed by user agents in particular ways. Sometimes, however, additional features come into common authoring practice. These are usually initially supported by only one user agent. When features not in the specification are used, many user agents may not support the feature for a while or ever. Furthermore, lacking standard specifications for the use of these features, different user agents may provide varying support. This impacts accessibility because assistive technologies, developed with fewer resources than mainstream user agents, may take a long time if ever to add useful support. Therefore, authors should avoid features not defined in HTML and XHTML to prevent unexpected accessibility problems.
      2. + Using only features that are defined in the specification HTML defines sets of elements, attributes, and attribute values that may be used on Web pages. These features have specific semantic meanings and are intended to be processed by user agents in particular ways. Sometimes, however, additional features come into common authoring practice. These are usually initially supported by only one user agent. When features not in the specification are used, many user agents may not support the feature for a while or ever. Furthermore, lacking standard specifications for the use of these features, different user agents may provide varying support. This impacts accessibility because assistive technologies, developed with fewer resources than mainstream user agents, may take a long time if ever to add useful support. Therefore, authors should avoid features not defined in HTML to prevent unexpected accessibility problems.
    2. - Using features in the manner prescribed by the specification The HTML specification provides specific guidance about how particular elements, attributes, and attribute values are to be processed and understood semantically. Sometimes, however, authors use features in a manner that is not supported by the specification, for example, using semantic elements to achieve visual effects without intending the underlying semantic message to be conveyed. This leads to confusion for user agents and assistive technologies that rely on correct semantic information to present a coherent representation of the page. It is important to use HTML features only as prescribed by the HTML specification.
      3. + Using features in the manner prescribed by the specification The HTML specification provides specific guidance about how particular elements, attributes, and attribute values are to be processed and understood semantically. Sometimes, however, authors use features in a manner that is not supported by the specification, for example, using semantic elements to achieve visual effects without intending the underlying semantic message to be conveyed. This leads to confusion for user agents and assistive technologies that rely on correct semantic information to present a coherent representation of the page. It is important to use HTML features only as prescribed by the HTML specification.
    3. - Making sure the content can be parsed HTML and XHTML also define how content should be encoded in order to be correctly processed by user agents. Rules about the structure of start and end tags, attributes and values, nesting of elements, etc. ensure that user agents will parse the content in a way to achieve the intended document representation. Following the structural rules in these specifications is an important part of using these technologies according to specification.
      4. + Making sure the content can be parsed HTML defines how content should be encoded in order to be correctly processed by user agents. Rules about the structure of start and end tags, attributes and values, nesting of elements, etc. ensure that user agents will parse the content in a way to achieve the intended document representation. Following the structural rules in these specifications is an important part of using these technologies according to specification.
    -

    Tests

    -

    Procedure

    -

    For each HTML or XHTML page:

    +
    +
    +

    Tests

    +
    +

    Procedure

    +

    For each HTML page:

      -
    1. Check that the page uses only elements, attributes, and attribute values that are defined in the relevant specification.
      2. +
    2. Check that the page uses only elements, attributes, and attribute values that are defined in the specification.
    3. Check that elements, attributes, and values are used in the manner prescribed by the relevant specification.
    4. Check that the page can be parsed correctly, according to the rules of the relevant specification.
    @@ -24,17 +42,23 @@

    Check #1 and #3 are most easily checked with page validation tools. Check #2 can be checked with the assistance of heuristic evaluation tools though manual judgment is usually required.

    -

    Expected Results

    +
    +

    Expected Results

    • Checks #1, #2, and #3 are true.
    -

    Resources

    - -

    Refer to the resources section of Validating Web - pages.

    - -
    \ No newline at end of file +
    + +
    +

    Resources

    +

    Refer to the resources section of Validating Web pages.

    +
    + + \ No newline at end of file From 25f573c0bfd0ebf1431492ed9c429a81993ba662 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Thu, 7 Sep 2023 18:25:18 -0700 Subject: [PATCH 34/67] Update H89 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * remove references to XHTML * change “box” to “component” * update `code` elements to support syntax highlighting --- techniques/html/H89.html | 89 +++++++++++++++++++++++++--------------- 1 file changed, 56 insertions(+), 33 deletions(-) diff --git a/techniques/html/H89.html b/techniques/html/H89.html index ea9a9fb3a8..39aeca2858 100644 --- a/techniques/html/H89.html +++ b/techniques/html/H89.html @@ -1,45 +1,68 @@ -Using the title attribute to provide context-sensitive help

    Using the title attribute to provide context-sensitive help

    ID: H89

    Technology: html

    Type: Technique

    When to Use

    -

    HTML and XHTML

    -

    Description

    -

    The objective of this technique is to provide context sensitive help for users as they enter data in forms by providing the help information in a title attribute. The help may include format information or examples of input.

    -
    -

    Current user agents and assistive technologies do not always provide the information contained in the title attribute to users. Avoid using this technique in isolation until the title attribute has wide-spread support.

    -
    -

    Examples

    + + + + Using the title attribute to provide context-sensitive help + + + +

    Using the title attribute to provide context-sensitive help

    +
    +

    ID: H89

    +

    Technology: html

    +

    Type: Technique

    +
    +
    +

    When to Use

    +

    HTML

    +
    +
    +

    Description

    +

    The objective of this technique is to provide context sensitive help for users as they enter data in forms by providing the help information in a title attribute. The help may include format information or examples of input.

    +
    +

    Current user agents and assistive technologies do not always provide the information contained in the title attribute to users. Avoid using this technique in isolation.

    +
    +
    +
    +

    Examples

    +

    A mapping application provides a form consisting of a label "Address:", an input component and a submit button with value "Find map". The input component has a title attribute value with an example of the address format the user should enter.

    -

    A mapping application provides a form consisting of a label "Address:", an input box and a submit button with value "Find map". The input box has a title attribute value with an example of the address format the user should enter.

    - - 
    -<label for="searchAddress">Address: </label>
-<input id="searchAddress" type="text" size="30" value="" name="searchAddress" 
- title="Address example: 101 Collins St, Melbourne, Australia" />
-
    +
    <label for="search-address">Address:</label>
+<input id="search-address" name="search-address" size="30"
+ title="Address example: 101 Collins St, Melbourne, Australia" type="text" value="">
    - -

    A form that allows users to pay their bill online requires the user to enter their account number. The input box associated with the "Account number" label has a title attribute providing information on locating the account number.

    - - 
    -<label for="accNum1">Account number: </label>
-<input id="accNum1" type="text" size="10" value="" title="Your account number 
- can be found in the top right-hand corner of your bill." />
-
    +

    A form that allows users to pay their bill online requires the user to enter their account number. The input component associated with the "Account number" label has a title attribute providing information on locating the account number.

    + +
    <label for="acc-num1">Account number:</label>
+<input id="acc-num1" size="10"
+ title="Your account number can be found in the top right-hand corner of your bill"
+ type="text" value="">
    -

    Tests

    -

    Procedure

    +
    +
    +

    Tests

    +
    +

    Procedure

      -
    1. Identify form controls that require text input.
      2. -
    2. Check that each form control has an explicitly associated label
      3. -
    3. Check that each form control has context-sensitive help provided in the title attribute.
      4. +
    4. Identify form controls that require text input.
      5. +
    5. Check that each form control has an explicitly associated label
      6. +
    6. Check that each form control has context-sensitive help provided in the title attribute.
    -

    Expected Results

    +
    +

    Expected Results

    • Checks #2 and #3 are true.
    -
    \ No newline at end of file +
    + + + \ No newline at end of file From 6a3c72d02a30af40081c22d6ef9d12ad5854bfc2 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Thu, 7 Sep 2023 19:32:39 -0700 Subject: [PATCH 35/67] Update H90 * remove references to XHML * update resources from HTML 4.01 and add link to legend element * update code examples to remove `br` elements * update `code` elements --- techniques/html/H90.html | 205 ++++++++++++++++++++++----------------- 1 file changed, 114 insertions(+), 91 deletions(-) diff --git a/techniques/html/H90.html b/techniques/html/H90.html index 562810d998..d3d7a35770 100644 --- a/techniques/html/H90.html +++ b/techniques/html/H90.html @@ -1,93 +1,116 @@ -Indicating required form controls using label or legend

    Indicating required form controls using label or legend

    ID: H90

    Technology: html

    Type: Technique

    When to Use

    -

    HTML and XHTML controls that use external labels.

    -

    Description

    -

    The objective of this technique is to provide a clear indication that a specific form control in a Web application or form is required for successful data submission. A symbol or text indicating that the control is required is programmatically associated with the field by using the label element, or the legend for groups of controls associated via fieldset. If a symbol is used, the user is advised of its meaning before the first use.

    -

    Examples

    -
    -

    Using text to indicate required state

    + + + + Indicating required form controls using label or legend + + + +

    Indicating required form controls using label or legend

    +
    +

    ID: H90

    +

    Technology: html

    +

    Type: Technique

    +
    +
    +

    When to Use

    +

    HTML controls that use external labels.

    +
    +
    +

    Description

    +

    The objective of this technique is to provide a clear indication that a specific form control in a Web application or form is required for successful data submission. A symbol or text indicating that the control is required is programmatically associated with the field by using the label element, or the legend for groups of controls associated via fieldset. If a symbol is used, the user is advised of its meaning before the first use.

    +
    +
    +

    Examples

    +
    +

    Using text to indicate required state

    +

    The text field in the example below has the explicit label of "First name (required):". The label element's for attribute matches the id attribute of the input element and the label text indicates that the control is required.

    +
    <label for="firstname">First name (required):</label> 
+<input id="firstname" name="firstname" type="text">
    +
    +

    Some authors abbreviate "required" to "req.". There is anecdotal evidence that suggests this abbreviation is confusing.

    +
    +
    +
    +

    Using an asterisk to indicate required state

    +

    The text field in the example below has an explicit label that includes an asterisk to indicate the control is required. It is important that the asterisk meaning is defined at the start of the form. In this example, the asterisk is contained within a abbr element to allow for the asterisk character to be styled so that it is larger than the default asterisk character, since the asterisk character can be difficult to see for those with impaired vision.

    +

    The CSS

    + 
    .req {font-size: 150%}
    +

    The HTML

    + 
    <p>Required fields are marked with an asterisk
+   (<abbr class="req" title="required">*</abbr>).</p>
+<form action="https://example.com" method="post">
+  <label for="firstname">First name <abbr class="req" title="required">*</abbr>:</label> 
+  <input id="firstname" name="firstname" type="text">
+  ...
+</form>
    +
    +
    +

    Using an image to indicate required state

    +

    The text field in the example below has an explicit label that includes an image to indicate the control is required. It is important that the image meaning is defined at the start of the form.

    -

    The text field in the example below has the explicit label of "First name (required):". The label element's for attribute matches the id attribute of the input element and the label text indicates that the control is required.

    +
    <p><img alt="required" src="req_img.gif"> indicates that the information is required</p>
+<form action="https://www.example.com" method="post">
+  <label for="firstname">First name <img alt="required" src="req_img.gif">:</label> 
+  <input id="firstname" name="firstname" type="text">
+  ...
+</form>
    +
    +
    +

    Indicating required state for groups of radio buttons or check box controls

    +

    Radio buttons and checkboxes are treated differently than other interactive controls since individual radio buttons and checkboxes are not required but indicates that a response for the group is required. The methods used in examples 1-3 apply to radio buttons and checkboxes, but the indication of the required state should be placed in the legend element instead of the label element.

    - 
    -<label for="firstname">First name (required):</label> 
-<input type="text" name="firstname" id="firstname" />
-
    - -
    -

    Some authors abbreviate "required" to "req." but there is anecdotal evidence that suggests that this abbreviation is confusing.

    -
    - -
    -
    -

    Using an asterisk to indicate required state

    - -

    The text field in the example below has an explicit label that includes an asterisk to indicate the control is required. It is important that the asterisk meaning is defined at the start of the form. In this example, the asterisk is contained within a abbr element to allow for the asterisk character to be styled so that it is larger than the default asterisk character, since the asterisk character can be difficult to see for those with impaired vision.

    - - 
    -CSS:
-.req {font-size: 150%} 
-
-HTML:
-
-<p> Required fields are marked with an asterisk (<abbr class="req" title="required">*</abbr>).</p>
-<form action="http://www.test.com" method="post">
-<label for="firstname">First name <abbr class="req" title="required">*</abbr>:</label> 
-<input type="text" name="firstname" id="firstname" />
-
    -
    -
    -

    Using an image to indicate required state

    - -

    The text field in the example below has an explicit label that includes an image to indicate the control is required. It is important that the image meaning is defined at the start of the form.

    - - 
    -<p><img src="req_img.gif" alt="Required Control" /> indicates that the form control is required</p>
-<form action="http://www.test.com" method="post">
-<label for="firstname">First name <img src="req_img.gif" alt="Required Control" />:</label> 
-<input type="text" name="firstname" id="firstname" />
-...
-
    -
    -
    -

    Indicating required state for groups of radio buttons or check box controls

    - -

    Radio buttons and checkboxes are treated differently than other interactive controls since individual radio buttons and checkboxes are not required but indicates that a response for the group is required. The methods used in examples 1-3 apply to radio buttons and checkboxes, but the indication of the required state should be placed in the legend element instead of the label element.

    - - 
    -<fieldset>
-<legend>I am interested in the following (Required):</legend>
-<input type="checkbox" id="photo" name="interests" value="ph">
-<label for="photo">Photography</label></br>
-<input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
-<label for="watercol">Watercolor</label></br>
-<input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
-<label for="acrylic">Acrylic</label>
-…
-</fieldset>
-
    -
    -

    Tests

    -

    Procedure

    -
      -
    1. For each required form control, check that the required status is indicated in the form control's label or legend.
      2. -
    2. For each indicator of required status that is not provided in text, check that the meaning of the indicator is explained before the form control that uses it.
      3. -
    -
    -

    Expected Results

    -
      -
    • All checks above are true.
      • -
    -
    -

    Resources

    - - - -
    \ No newline at end of file +
    <fieldset>
+  <legend>I am interested in the following (Required):</legend>
+  <div>
+    <input id="photo" name="interests" type="checkbox" value="ph">
+    <label for="photo">Photography</label>
+  </div>
+  <div>
+    <input checked id="watercol" name="interests" type="checkbox" value="wa">
+    <label for="watercol">Watercolor</label>
+  </div>
+  <div>
+    <input checked id="acrylic" name="interests" type="checkbox" value="ac">
+    <label for="acrylic">Acrylic</label>
+  </div>
+  ...
+</fieldset>
    +
    +
    +
    +

    Tests

    +
    +

    Procedure

    +
      +
    1. For each required form control, check that the required status is indicated in the form control's label or legend.
      2. +
    2. For each indicator of required status that is not provided in text, check that the meaning of the indicator is explained before the form control that uses it.
      3. +
    +
    +
    +

    Expected Results

    +
      +
    • All checks above are true.
      • +
    +
    +
    + +
    +

    Resources

    + +
    + + \ No newline at end of file From d761be9ee6b9560025b8990f868ce68aa181dcca Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Thu, 7 Sep 2023 19:48:46 -0700 Subject: [PATCH 36/67] Update H91 1. Remove out-of-date and unnecessary table. 2. Add resource links to HTML spec and MDN 3. Remove out of date resource links 4. De-emphasize the use of the `title` attribute in body copy and examples 5. Make headings into headings 6. Updated `code` elements with correct `class` attributes. 7. Added more resources --- techniques/html/H91.html | 440 +++++++++++++++------------------------ 1 file changed, 171 insertions(+), 269 deletions(-) diff --git a/techniques/html/H91.html b/techniques/html/H91.html index 60173e4358..f3890b0e38 100644 --- a/techniques/html/H91.html +++ b/techniques/html/H91.html @@ -1,287 +1,189 @@ -Using HTML form controls and links

    Using HTML form controls and links

    ID: H91

    Technology: html

    Type: Technique

    When to Use

    -

    HTML form controls and links

    -

    Description

    + + + + Using HTML form controls and links + + + +

    Using HTML form controls and links

    +
    +

    ID: H91

    +

    Technology: html

    +

    Type: Technique

    +
    +
    +

    When to Use

    +

    HTML form controls and links

    +
    +
    +

    Description

    The objective of this technique is to use standard HTML form controls and link elements to provide keyboard operation and assistive technology interoperability of interactive user interface elements.

    -

    User agents provide the keyboard operation of HTML form controls and links. In addition, the user agent maps the form controls and links to an accessibility API. Assistive technologies use the accessibility API to extract appropriate accessibility information, such as role, name, state, and value, and present them to users. The role is provided by the HTML element, and the name is provided by the text associated with that element. Elements for which values and states are appropriate also expose the values and states via multiple mechanisms.

    -

    In some cases, the text is already associated with the control through a required attribute. For example, submit buttons use the button element text or image 'alt' attribute as the name. In the case of form controls, label elements or 'title' attributes are used. The following table describes how the role, name, value, and state are determined for HTML links and form controls.

    +

    User agents provide the keyboard operation of HTML form controls and links. In addition, the user agent maps the form controls and links to an accessibility API. Assistive technologies use the accessibility API to extract appropriate accessibility information, such as role, name, state, and value, and present them to users. The role is provided by the HTML element, and the name is provided by the text associated with that element. Elements for which values and states are appropriate also expose the values and states via multiple mechanisms.

    +

    In some cases, the text is already associated with the control through a required attribute. For example, submit buttons use the button element text or image alt attribute as the name. In the case of form controls, label elements; the aria-label or aria-labelledby properties; or the title attribute are used.

    +
    +
    +

    Examples

    +
    +

    Links

    +

    User agents provide mechanisms to navigate to and select links. In each of the following examples, the role is "link" because the a element has an href attribute. An a element without an href isn't a link. The link's value is the URI in the href attribute.

    +

    Link example A

    +

    In example A, the name is the text inside the link, in this case "Example Site".

    +
    <a href="https://example.com">Example Site</a>
    +

    Link example B

    +

    In example B of an image inside a link, the alt attribute for the image provides the name.

    +
    <a href="https://example.com"><img alt="Example" src="example-logo.gif"></a>
    +

    Link example C

    +

    In example C, some assistive technology will not automatically insert a space character when concatenating the image's alt text and the text of the link. If the text should not be concatenated without a space, it is safest to insert a space between the image and the adjacent word so that words will not run together.

    +
    <a href="https://example.com"><img alt="Example " src="example_logo.gif">Text</a>
    +
    +
    +

    Buttons

    +

    There are several ways to create a button in HTML.

    +

    Buttons example A

    +

    In example A, the text contained in the button element, in this case "save", gives the button its name. There is no value.

    +
    <button type="button">Save</button>
    +

    Buttons example B

    +

    Example B uses the value attribute, in this case "Save", "Submit", or "Reset" as the name.

    +
    <input type="button" value="Save"> 
+<input type="submit" value="Submit">
+<input type="reset" value="Reset">
    +

    Buttons example C

    +

    Example C uses the alt attribute, in this case "save", as the name.

    +
    <input alt="save" src="save.gif" type="image">
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    HTML element RoleName Value State
    <a> link 'title' attribute, text within <a> element or 'alt' attribute if image link. Concatenated if both text and image 'alt' attribute are provided 'href' attribute
    <button> push button text inside <button> element or 'title' attribute
    <fieldset> grouping text inside <legend> element within fieldset element
    <input type = "button", "submit", or "reset"> push button 'value' attribute
    <input type = "image"> push button 'alt' attribute or 'title' attribute
    <input type = "text"> editable text <label> element associated with it or 'title' attribute 'value' attribute
    <input type = "password"> editable text <label> element associated with it or 'title' attribute value is purposefully hidden
    <input type="file"> editable text <label> element associated with it or 'title' attribute 'value' attribute
    <input type="checkbox"> checkbox <label> element associated with it or 'title' attribute 'checked' attribute -
    <input type="radio"> radio button <label> element associated with it or 'title' attribute 'checked' attribute - -
    <select> list box <label> element associated with it or 'title' attribute <option> element with 'selected' attribute set to "selected"
    <textarea> editable text <label> element associated with it or 'title' attribute text within <textarea> element
    - -

    Examples

    -
    -

    Links

    - -

    User agents provide mechanisms to navigate to and select links. In each of the following examples, the role is "link" from the <a href>. Note that <a name> does not provide a role of "link". The value is the URI in the 'href' attribute.

    -

    Example 1a

    -

    In example 1a, the name is the text inside the link, in this case "Example Site".

    - - 
    <a href="www.example.com">Example Site</a>
-
    - -

    Example 1b

    -

    In example 1b of an image inside a link, the 'alt' attribute for the image provides the name. Some tools for viewing APIs, such as Microsoft Inspect Objects, will not surface this, but AT does.

    - - 
    <a href="www.example.com"><img src="example_logo.gif" alt="Example"></a>
-
    - -

    Example 1c

    -

    In example 1c, some assistive technology will not automatically insert a space character when concatenating the image's alt text and the text of the link. If the text should not be concatenated without a space, it is safest to insert a space between the image and the adjacent word so that words will not run together.

    +

    Buttons example D

    +

    Example D clarifies how the user agent determines the name if the author specifies both the alt and title attributes of the input element. In this case, the user agent uses the alt attribute ("Save") and ignores the title attribute.

    - 
    <a href="www.example.com"><img src="example_logo.gif" alt="Example"> Text</a>
-
    +
    <input alt="save" src="save.gif" title="save the file" type="image">
    -

    Buttons

    - -

    There are several ways to create a button in HTML, and they all map to the "push button" role.

    -

    Example 2a

    -

    In example 2a, the text is contained in the button element, in this case "save", as the name. There is no value.

    - - 
    <button>Save</button>
-
    - -

    Example 2b

    -

    Example 2b uses the 'value' attribute, in this case "Save", "Submit", or "Reset" as the name.

    - - 
    <input type="button" value="Save" /> 
-<input type="submit" value="Submit" />  
-<input type="reset" value="Reset" />   
-
    - -

    Example 2c

    -

    Example 2c uses the 'alt' attribute, in this case "save", as the name.

    +

    Text Input

    +

    Text Input example A

    +

    In example A, the input field has a role of "editable text". The label element is associated to the input element via the for attribute which references the id attribute of the input element. The name comes from the label element, in this case, "Type of fruit". Its value comes from its value attribute, in this case "bananas".

    - 
    <input type="image" src="save.gif" alt="save" /> 
-
    +
    <label for="text-1">Type of fruit</label>
+<input id="text-1" type="text" value="bananas">
    -

    Example 2d

    -

    In example 2d, there is no 'alt' attribute so the 'title' attribute, in this case "save", is used as the name.

    +

    Text Input example B

    +

    In example B, the input field has the same role as example A, but the value is the empty string and the field gets its name from the aria-label property.

    - 
    <input type="image" src="save.gif" title="save" />
-
    - -

    Example 2e

    -

    Example 2e clarifies how the user agent determines the name if the author specifies both the 'alt' and 'title' attributes of the input element. In this case, the user agent uses the 'alt' attribute ("Save") and ignores the 'title' attribute.

    - - 
    <input type="image" src="save.gif" alt="save" title="save the file" />
-
    -
    -
    -

    - -

    Example 3a

    -

    In example 3a, the input field has a role of "editable text". The label element is associated to the input element via the 'for' attribute which references the 'id' attribute of the input> element. The name comes from the label element, in this case, "Type of fruit". Its value comes from its value attribute, in this case "bananas".

    - - 
    <label for="text_1">Type of fruit</label>
-<input id="text_1" type="text" value="bananas">
-
    - -

    Example 3b

    -

    In example 3b, the input field has the same role as example 3a, but the value is the empty string and the field gets its name from the 'title' attribute.

    - - 
    <input id="text_1" type="text" title="Type of fruit">
-
    +
    <input aria-label="Type of fruit" id="text-1" type="text">
    -

    Checkbox

    +

    Checkbox

    +

    This example has a role of checkbox, from the type attribute of the input element. The label element is associated with the input element via the for attribute which refers to the id attribute of the input element. The name comes from the label element, in this case "cheese". Its state can be checked or unchecked and comes from the checked attribute. The state can be changed by the user's interaction with the control.

    -

    Example 4 has a role of "checkbox", from the 'type' attribute of the input element. The label element is associated with the input element via the 'for' attribute which refers to the 'id' attribute of the input element. The name comes from the label element, in this case "cheese". Its state can be "checked" or "unchecked" and comes from the 'checked' attribute. The state can be changed by the user's interaction with the control.

    - - 
    <label for="cb_1">Cheese</label> 
-<input id="cb_1" type="checkbox" checked="checked">
-
    +
    <label for="cb-1">Cheese</label> 
+<input checked id="cb-1" type="checkbox">
    -

    Radio Buttons

    - -

    Example 5 has a role of "radio button" from the 'type' attribute on the input element. Its name comes from the label element. The state can be "checked" or "unchecked" and comes from the 'checked' attribute. The state can be changed by the user.

    +

    Radio Buttons

    +

    This example has a role of "radio button" from the type attribute on the input element. Its name comes from the label element. Its state can be checked or unchecked and comes from the checked attribute. The state can be changed by the user's interaction with the control.

    - 
    <input type="radio" name="color" id="r1" checked="checked"/><label for="r1">Red</label>
-<input type="radio" name="color" id="r2" /><label for="r2">Blue</label>
-<input type="radio" name="color" id="r3" /><label for="r3">Green</label>
-
    +
    <input checked id="r1" name="color" type="radio"><label for="r1">Red</label>
+<input id="r2" name="color" type="radio"><label for="r2">Blue</label>
+<input id="r3" name="color" type="radio"><label for="r3">Green</label>
    +
    +

    Radio Fieldset

    +

    The radio fieldset has a role of "grouping". The name comes from the legend element.

    +
    <fieldset>
+  <legend>Choose a Color:</legend>
+  <div>
+    <input id="red" name="color" type="radio" value="red">
+    <label for="red">Red</label>
+  </div>
+  <div>
+    <input id="blue" name="color" type="radio" value="blue">
+    <label for="blue">Blue</label>
+  </div>
+  <div>
+    <input id="green" name="color" type="radio" value="green">
+    <label for="green">Green</label> 
+</fieldset>
    +
    -

    - -

    Example 6a

    -

    Example 6a has a role of "list box" from the select element. Its name is "Numbers" from the label element. Forgetting to give a name to the select is a common error. The value is the option element that has the 'selected' attribute present (with a value of "selected" in XHTML). In this case, the default value is "Two".

    - - 
    <label for="s1">Numbers</label>
-<select id="s1" size="1">
- <option>One</option>
- <option selected="selected">Two</option>
- <option>Three</option>
-</select>
-
    - -

    Example 6b

    -

    Example 6b has the same name, role, and value as the above, but sets the name with the 'title' attribute on the select element. This technique can be used when a visible label is not desirable.

    - - 
    <select id="s1" title="Numbers" size="1">
- <option>One</option>
- <option selected="selected">Two</option>
- <option>Three</option>
-</select>
-
    -
    -
    -

    Textarea

    - -

    Example 7a

    -

    Example 7a has a role of "editable text" from the textarea element. The name is "Type your speech here" from the label element. The value is the content inside the textarea element, in this case "Four score and seven years ago".

    - - 
    <label for="ta_1">Type your speech here</label>
-<textarea id="ta_1" >Four score and seven years ago</textarea>
-
    - -

    Example 7b

    -

    Example 7b has the same role, the name is set using the 'title' attribute, and the value is the empty string.

    - - 
    <textarea id="ta_1" title="Type your speech here" >Four score and seven years ago</textarea>
-
    -
    -
    -

    - -

    Radio Fieldset

    -

    The radio fieldset in example 8 has a role of "grouping". The name comes from the legend element.

    - - 
    <fieldset>
-  <legend>Choose a Color:</legend> 
-     <input id="red" type="radio" name="color" value="red" /><label for="red">Red</label><br /> 
-     <input id="blue" type="radio" name="color" value="blue" /><label for="blue">Blue</label><br /> 
-     <input id="green" type="radio" name="color" value="green" /><label for="green">Green</label> 
-</fieldset>
-
    -
    -

    Tests

    -

    Procedure

    -
      -
    1. Inspect the HTML source code.
      2. -
    2. For each instance of links and form elements, check that the name, value, and state are specified as indicated in the table above.
      3. -
    -
    -

    Expected Results

    -
      -
    • Check #2 is true.
      • -
    -
    -

    Resources

    - -
      +

      Select Element

      +

      Select element example A

      +

      Example A has a role of "list box" from the select element. Its name is "Numbers" from the label element. Forgetting to give a name to the select is a common error. The value is the option element that has the selected attribute present. In this case, the default value is "Two".

      + +
      <label for="s1">Numbers</label>
+<select id="s1">
+  <option>One</option>
+  <option selected>Two</option>
+  <option>Three</option>
+</select>
      + +

      Select Element example B

      +

      Example B has the same name, role, and value as the above, but sets the name with the aria-label property on the select element. This technique can be used when a visible label is not possible.

      + +
      <select aria-label="Numbers" id="s1">
+  <option>One</option>
+  <option selected>Two</option>
+  <option>Three</option>
+</select>
      +
    +
    +

    Textarea

    +

    Textarea example A

    +

    Example A has a role of "editable text" from the textarea element. The name is "Type your speech here" from the label element. The value is the content inside the textarea element, in this case "Four score and seven years ago".

    + +
    <label for="ta-1">Type your speech here</label>
+<textarea id="ta-1">Four score and seven years ago</textarea>
    + +

    Textarea example B

    +

    Example B has the same role, the name is set using the title attribute, and the value is the empty string.

    + +
    <textarea title="Type your speech here">Four score and seven years ago</textarea>
    +
    +
    +
    +

    Tests

    +
    +

    Procedure

    +
      +
    1. Inspect the HTML source code.
      2. +
    2. For each instance of links and form elements, check that the name, value, and state are specified as indicated in the table above.
      3. +
    +
    +
    +

    Expected Results

    +
      +
    • Check #2 is true.
      • +
    +
    +
    + +
    +

    Resources

    + - -
    \ No newline at end of file + MDN - The Anchor element + +
  • + HTML Accessibility API Mappings +
    • +
  • + Accessible Name and Description Computation +
    • +
  • + Core Accessibility API Mappings +
    • + +
    + + \ No newline at end of file From 5d8a16ddd20a8cc6179956764da591929a34624b Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Thu, 7 Sep 2023 19:54:59 -0700 Subject: [PATCH 37/67] Update H93 * this is only relevant to the now removed 4.1.1 * updated for syntax highlighting --- techniques/html/H93.html | 124 +++++++++++++++++++++------------------ 1 file changed, 68 insertions(+), 56 deletions(-) diff --git a/techniques/html/H93.html b/techniques/html/H93.html index a77d4c0d64..fea525c298 100644 --- a/techniques/html/H93.html +++ b/techniques/html/H93.html @@ -1,56 +1,68 @@ -Ensuring that id attributes are unique on a Web page

    Ensuring that id attributes are unique on a Web page

    ID: H93

    Technology: html

    Type: Technique

    When to Use

    -

    All HTML pages

    -

    Description

    -

    The objective of this technique is to avoid key errors that are known - to cause problems for assistive technologies when they are trying to - parse content that has the same id attribute on different elements. - These errors can be avoided by making sure the Web page does not have - duplicate id values. This can be done manually or by using HTML's mechanism - to specify the technology and technology version, and validating the - document for this condition. There are several validators that the - developer can use; validation reports generally mention this type of - error. The document type declaration is not strictly necessary for - this type of evaluation, but specifying the document type declaration - makes it easier to use a validator.

    -

    Examples

    -
    -

    HTML Validators

    - -

    HTML pages include a document type declaration (sometimes referred - to as !DOCTYPE statement). The developer can use offline or online - validators (see Resources below) to check that id attributes values - are only used once on a page. The W3C validador, for example, will - report ID "X already defined" when it encounters the second - use of an id value.

    - -
    -

    Tests

    -

    Procedure

    -
      -
    1. Check that all id attribute values are unique on the web page.
      2. -
    -
    -

    Expected Results

    -
      -
    • Check 1 is true.
      • -
    -
    -

    Resources

    - - -

    For other resources, see G134: Validating Web pages.

    - -
    \ No newline at end of file + + + + Ensuring that id attributes are unique on a Web page + + + +

    Ensuring that id attributes are unique on a Web page

    +
    +

    ID: H93

    +

    Technology: html

    +

    Type: Technique

    +
    +
    +

    When to Use

    +

    All HTML pages

    +
    +
    +

    Description

    +

    The objective of this technique is to avoid errors that result from the same id attribute being used multiple times on the same page. These errors can be avoided by making sure the page doesn't have duplicate id values. This can be done manually or by using HTML's mechanism to specify the technology and technology version, and validating the document for this condition. There are several validators that the developer can use; validation reports generally mention this type of error. The document type declaration is not strictly necessary for this type of evaluation, but specifying the document type declaration makes it easier to use a validator.

    +
    +
    +

    Examples

    +
    +

    Duplicate id attributes in form elements

    +

    In this example, the first name and last name inputs both have an id attribute with the same value. Due to the way accessible names are computed, this results in the last name input having no accessible name.

    +
    <label for="fname">First Name</label>
+<input autocomplete="given-name" id="fname" type="text">
+<label for="lname">Last Name</label>
+<input autocomplete="family-name" id="fname" type="text">
    +
    +
    +

    HTML Validators

    +

    HTML pages include a document type declaration (sometimes referred to as !DOCTYPE statement). The developer can use offline or online validators (see Resources below) to check that id attribute values are only used once on a page. The W3C validator, for example, will report "Duplicate ID" when it encounters the subsequent uses of an id value.

    +
    +
    +
    +

    Tests

    +
    +

    Procedure

    +
      +
    1. Check that all id attribute values are unique on the page.
      2. +
    +
    +
    +

    Expected Results

    +
      +
    • Check #1 is true.
      • +
    +
    +
    +
    +

    Resources

    + +

    For other resources, see G134: Validating Web pages.

    +
    + + \ No newline at end of file From 58343f7ab705755b5bbc4b800c7ebcb7a2950cd0 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Thu, 7 Sep 2023 20:08:48 -0700 Subject: [PATCH 38/67] Updated H70 * added support for syntax highlighting * noted that frame and frames are obsolete in HTML --- techniques/html/H70.html | 100 +++++++++++++--------- techniques/html/H76.html | 2 +- techniques/html/H95.html | 12 +-- techniques/html/H96.html | 14 +-- techniques/smil/SM1.html | 4 +- working-examples/semantic-text/index.html | 10 +-- 6 files changed, 79 insertions(+), 63 deletions(-) diff --git a/techniques/html/H70.html b/techniques/html/H70.html index e0c29718ab..ce12ad2de2 100644 --- a/techniques/html/H70.html +++ b/techniques/html/H70.html @@ -1,6 +1,22 @@ -Using frame elements to group blocks of repeated material

    Using frame elements to group blocks of repeated material

    ID: H70

    Technology: html

    Type: Technique

    When to Use

    -

    HTML and XHTML documents that use frames

    -

    Description

    + + + + Using frame elements to group blocks of repeated material + + + +

    Using frame elements to group blocks of repeated material

    +
    +

    ID: H70

    +

    Technology: html

    +

    Type: Technique

    +
    +
    +

    When to Use

    +

    HTML documents that use frames

    +
    +
    +

    Description

    The objective of this technique is to demonstrate how framesets can be used to group blocks of repeated material. Since most user agents and assistive technology provide a way to navigate from frame to frame, using frames to organize elements can provide a @@ -13,53 +29,53 @@

    This technique is appropriate when framesets are already used to organize the content of the page; other techniques are preferred for pages that are not already using framesets, because many people using assistive technology have trouble with frames . An - advisory technique about using noframes is available in Success Criterion 1.1.1.

    -

    In HTML5 the frame element is marked as obsolete.

    -

    Examples

    + advisory technique about using noframes is available in Success Criterion 1.1.1.

    +
    +

    In HTML the frameset and frame elements are marked as obsolete.

    +
    +
    +
    +

    Examples

    +

    The following example shows the use of two frames to organize content. The source of the first frame is the Web page, navigation.html, which contains the HTML for the navigation. This frame has a title attribute which identifies it as a navigation bar. The second frame contains the main content of the site as indicated by the source parameter of main.html and the title attribute, "Main News Content" which identifies its function.

    -

    The following example shows the use of two frames to organize content. The source - of the first frame is the Web page, navigation.html, which contains the HTML for the - navigation. This frame has a title attribute which identifies it as a navigation - bar. The second frame contains the main content of the site as indicated by the - source parameter of main.html and the title attribute, "Main News Content" which - identifies its function.

    - - 
    <frameset cols="20%, *">
-  <frame src="navigation.html" name="navbar" title="Navigation Bar" />
-  <frame src="main.html" name="maincontent" title="Main News Content" />
+
    <frameset cols="20%, *">
+  <frame src="navigation.html" name="navbar" title="Navigation Bar">
+  <frame src="main.html" name="maincontent" title="Main News Content">
   <noframes>
     <p>View <a href="noframe.html">no frame version</a>.</p>
   </noframes>
-</frameset>   
    
+</frameset>
    -

    Tests

    -

    Procedure

    +
    +
    +

    Tests

    +
    +

    Procedure

    If the Web page uses frames to organize content:

      -
    1. Check if repeated blocks of content are organized into separate frames.
      2. -
    2. Check that the frames with repeated content appear in the same location within - each frameset.
      3. +
    3. Check if repeated blocks of content are organized into separate frames.
      4. +
    4. Check that the frames with repeated content appear in the same location within each frameset.
    -

    Expected Results

    -
      -
    • Checks #1 and #2 are true.
      • -
    +
    +

    Expected Results

    +
      +
    • Checks #1 and #2 are true.
      • +
    -

    Resources

    - - - -
    \ No newline at end of file +
    + +
    +

    Resources

    + +
    + + \ No newline at end of file diff --git a/techniques/html/H76.html b/techniques/html/H76.html index 5de7980b09..7583c2a142 100644 --- a/techniques/html/H76.html +++ b/techniques/html/H76.html @@ -18,7 +18,7 @@

    When to Use

    Description

    The objective of this technique is to enable redirects on the client side without confusing the user. Redirects are preferably implemented on the server side (see Implementing automatic redirects on the server side instead of on the client side), but authors do not always have control over server-side technologies.

    -

    In HTML, one can use the meta element with the value of the http-equiv attribute set to refresh and the value of the content attribute set to 0 (meaning zero seconds), followed by the URI that the browser should request. It is important that the time-out is set to zero, to avoid that content is displayed before the new page is loaded. The page containing the redirect code should only contain information related to the redirect.

    +

    In HTML, one can use the meta element with the value of the http-equiv attribute set to refresh and the value of the content attribute set to 0 (meaning zero seconds), followed by the URI that the browser should request. It is important that the time-out is set to zero, to avoid that content is displayed before the new page is loaded. The page containing the redirect code should only contain information related to the redirect.

    Examples

    diff --git a/techniques/html/H95.html b/techniques/html/H95.html index 34a468b19f..dfa399439b 100644 --- a/techniques/html/H95.html +++ b/techniques/html/H95.html @@ -1,9 +1,9 @@ Using the track element to provide captions

    Using the track element to provide captions

    ID: H95

    Technology: html

    Type: Technique

    When to Use

    HTML5

    Description

    -

    The objective of this technique is to use the HTML5 track element to specify a captions timed text track for a video element. Caption timed text tracks contain transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information, suitable for when sound is unavailable or not clearly audible.

    -

    The src attribute of the track element is a URL that is the address of the text track data.

    -

    The kind attribute of the track element indicates the kind of information in the timed text. captions text tracks provide a text version of dialogue and other sounds important to understanding the video. Subtitles contain only the dialogue. If other audio information is important to understanding the video, a subtitle track will not be sufficient to meet the success criterion.

    +

    The objective of this technique is to use the HTML5 track element to specify a captions timed text track for a video element. Caption timed text tracks contain transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information, suitable for when sound is unavailable or not clearly audible.

    +

    The src attribute of the track element is a URL that is the address of the text track data.

    +

    The kind attribute of the track element indicates the kind of information in the timed text. captions text tracks provide a text version of dialogue and other sounds important to understanding the video. Subtitles contain only the dialogue. If other audio information is important to understanding the video, a subtitle track will not be sufficient to meet the success criterion.

    Some regions use the term "subtitle" for any visible text representation of the audio track. An author may mark up a timed text track in the language of the audio track as kind=subtitles, instead of kind=captions, and may include additional relevant audio information. It is not best practice to use subtitles in this situation, since it may confuse users who are trying to find captions, but such a timed text track would meet the requirements of Success Criterion 1.2.2.

    @@ -11,7 +11,7 @@

    Captions in one language

    -

    A video element for a video in the English language with an English caption track. The captions are provided in the WebVTT format.

    +

    A video element for a video in the English language with an English caption track. The captions are provided in the WebVTT format.

     			 <video poster="myvideo.png" controls>
@@ -24,7 +24,7 @@ 
    Captions in one language
    
       
    
          
    Captions in multiple languages
    
          
-            
    A video element for a video in the English language with an English caption track. The captions are provided in the WebVTT format.
    
+            
    A video element for a video in the English language with an English caption track. The captions are provided in the WebVTT format.
    
          
          
     			  <video poster="myvideo.png" controls>
@@ -39,7 +39,7 @@ 
    Captions in multiple languages
    
       
    Procedure
    
          
    For each video element used to play a video:
    
          
      
-            
    1. Check that the video contains a track element of kind captions in the language of the video.
      2. 
+            
    2. Check that the video contains a track element of kind captions in the language of the video.
      3. 
          
    
       
    
       
    Expected Results
    
diff --git a/techniques/html/H96.html b/techniques/html/H96.html
index 1097541bab..d303625549 100644
--- a/techniques/html/H96.html
+++ b/techniques/html/H96.html
@@ -1,8 +1,8 @@
 Using the track element to provide audio descriptions
    Using the track element to provide audio descriptions
    ID: H96
    Technology: html
    Type: Technique
    When to Use
    
       
    HTML5
    
    
    Description
    
-      
    The objective of this technique is to use the HTML5 track element to specify a descriptions timed text track for a video element. Audio description timed text tracks contain textual descriptions of the video component of the media resource, intended for audio synthesis when the visual component is obscured, unavailable, or not usable. The user agent makes the cues available to the user in a non-visual fashion, for instance, by synthesizing them into speech.
    
-		
    The src attribute of the track element is an URL providing the text track data.
    
+      
    The objective of this technique is to use the HTML5 track element to specify a descriptions timed text track for a video element. Audio description timed text tracks contain textual descriptions of the video component of the media resource, intended for audio synthesis when the visual component is obscured, unavailable, or not usable. The user agent makes the cues available to the user in a non-visual fashion, for instance, by synthesizing them into speech.
    
+		
    The src attribute of the track element is an URL providing the text track data.
    
 		
    The audio description cues must fit into the gaps available in the audio component of the media resource. If there is not enough time to synthesize the description text in the track cue's time interval, user agents may truncate the speech. This limits the amount of supplementary information that can be added.
    
 
    User agents may also support extended audio descriptions by halting the video until the description has been completely synthesized, then restarting the video.
    
   
@@ -12,7 +12,7 @@
       
    
          
    Audio description in one language
    
          
-            
    A video element for a video in the English language. The audio descriptions are provided in the WebVTT format.
    
+            
    A video element for a video in the English language. The audio descriptions are provided in the WebVTT format.
    
          
          
     			 <video poster="myvideo.png" controls>
@@ -24,7 +24,7 @@ 
    Audio description in one language
    
       
    
          
    Audio description in multiple languages
    
          
-            
    A video element for a video with both an English and French language source element, and with an English and a French audio description track using the WebVTT (vtt) file format.
    
+            
    A video element for a video with both an English and French language source element, and with an English and a French audio description track using the WebVTT (vtt) file format.
    
          
          
     			 <video poster="myvideo.png" controls>
@@ -37,7 +37,7 @@ 
    Audio description in multiple languages
    
       
    
          
    Captions in multiple languages
    
          
-            
    A video, "Google self-driving car". with an audio description track.
    
+            
    A video, "Google self-driving car". with an audio description track.
    
          
          
     			<video controls tabindex="1">
@@ -49,9 +49,9 @@ 
    Captions in multiple languages
    
       
    
    
    Tests
    
       
    Procedure
    
-         
    For each video element used to play a video:
    
+         
    For each video element used to play a video:
    
          
      
-            
    1. Check that the video contains a track element of kind descriptions in the language of the video.
      2. 
+            
    2. Check that the video contains a track element of kind descriptions in the language of the video.
      3. 
          
    
       
    
       
    Expected Results
    
diff --git a/techniques/smil/SM1.html b/techniques/smil/SM1.html
index 2168872f00..acf72a5338 100644
--- a/techniques/smil/SM1.html
+++ b/techniques/smil/SM1.html
@@ -52,8 +52,8 @@ 
    SMIL 1.0 Video with audio descriptions that pause the main media in 4 locati
 </smil>
 
    
          
-            
    The markup above is broken into five <par> segments. In each, there is a <video> and an <audio> tag (the last <par> has no <audio> tag intentionally). The convention with extended audio descriptions is that the main media pauses during the description. The way to make this happen in SMIL 1.0 is to set a "clip-begin" and "clip-end" which dictate the start and end of the video clip, and to set a duration for the clip that is longer than what is defined by the "clip-begin" and "clip-end". The fill="freeze" holds the last frame of the video during the extended description. The <audio> tag has a "begin" attribute with a value that is equal to the "clip-end" value of the preceding <video> tag.
    
-            
    To determine the values for "clip-begin," "clip-end", and "dur", find the start and end time of the portion of the video being described, and find out the total length of the extended audio description. The "clip-begin" and "clip-end" define their own values, but the "dur" value is the sum of the length of the extended description and the clip defined by the "clip-begin" and "clip-end". In the first <par>, the video clip starts at 0 seconds, ends at 5.4 seconds, and the description length is 3.3 seconds, so the "dur" value is 5.4s + 3.3s = 8.7s.
    
+            
    The markup above is broken into five <par> segments. In each, there is a <video> and an <audio> tag (the last <par> has no <audio> tag intentionally). The convention with extended audio descriptions is that the main media pauses during the description. The way to make this happen in SMIL 1.0 is to set a "clip-begin" and "clip-end" which dictate the start and end of the video clip, and to set a duration for the clip that is longer than what is defined by the "clip-begin" and "clip-end". The fill="freeze" holds the last frame of the video during the extended description. The <audio> tag has a "begin" attribute with a value that is equal to the "clip-end" value of the preceding <video> tag.
    
+            
    To determine the values for "clip-begin," "clip-end", and "dur", find the start and end time of the portion of the video being described, and find out the total length of the extended audio description. The "clip-begin" and "clip-end" define their own values, but the "dur" value is the sum of the length of the extended description and the clip defined by the "clip-begin" and "clip-end". In the first <par>, the video clip starts at 0 seconds, ends at 5.4 seconds, and the description length is 3.3 seconds, so the "dur" value is 5.4s + 3.3s = 8.7s.
    
          
       
    
    
    Tests
    
diff --git a/working-examples/semantic-text/index.html b/working-examples/semantic-text/index.html
index baabb671cd..37e1631ce7 100644
--- a/working-examples/semantic-text/index.html
+++ b/working-examples/semantic-text/index.html
@@ -6,11 +6,11 @@
 
 
 
    Using Semantic markup to mark emphasized or special text
    
-
    Using the em and strong elements
+
    Using the em and strong elements
   to emphasize text
    
 
    ... What she really meant to say was, "This isn't ok, it is excellent! ...
    
-
    Using the blockquote element to mark up long quotations from another source
    
-
    This example also demonstrates the use of the cite element to specify a reference.
    
+
    Using the blockquote element to mark up long quotations from another source
    
+
    This example also demonstrates the use of the cite element to specify a reference.
    
 
    The following is an excerpt from the The Story Of My Life by Helen Keller:
    
  
    
  
    Even in the days before my teacher came, I used to feel along the square stiff boxwood
@@ -18,10 +18,10 @@ 
    Using the blockquote element to mark up long quotati
  There, too, after a fit of temper, I went to find comfort and to hide my hot face
  in the cool leaves and grass.
    
  
    
- 
    Using the q element to mark up a shorter quotation from another source
    
+ 
    Using the q element to mark up a shorter quotation from another source
    
  
    Helen Keller said, Self-pity is our worst enemy and if we yield to it,
  we can never do anything good in the world.
    
- 
    Using the sup and sub elements to mark up superscripts and subscripts
    
+ 
    Using the sup and sub elements to mark up superscripts and subscripts
    
  
    Beth won 1st place in the 9th grade science competition.
    
  
    The chemical notation for water is H2O.
    
 

From 137d6357718acf0cc92be1813b72909b72e1c6e2 Mon Sep 17 00:00:00 2001
From: Francis Storr 
Date: Thu, 7 Sep 2023 20:33:32 -0700
Subject: [PATCH 39/67] Update H71 for syntax highlighting

---
 techniques/html/H71.html | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/techniques/html/H71.html b/techniques/html/H71.html
index 36fa215f05..d6dc93f237 100644
--- a/techniques/html/H71.html
+++ b/techniques/html/H71.html
@@ -27,11 +27,10 @@ 
    Description
    
       
    
          
    Examples
    
          
    
-            
    A multiple choice test
    
-         
+            
    A multiple choice test
       
             
    This example shows a test item with one question and five possible answers. Each answer is represented by a radio button (input type="radio"). The radio buttons are contained within a fieldset. The test question is tagged with the legend element. Each field has the same name attribute, indicating these radio buttons are related, and should be grouped as shown. Also note that while the name attributes have the same value, the id attributes' values must be unique.
    
          
-
    <fieldset>
+
    <fieldset>
   <legend>The play <cite>Hamlet</cite> was written by:</legend>
   <div>
     <input checked="checked" id="shakesp" name="hamlet" type="radio" value="a">
@@ -53,13 +52,13 @@ 
    A multiple choice test
    
     <input id="dickens" name="hamlet" type="radio" value="e">
     <label for="dickens">Charles Dickens</label>
   </div>
-</fieldset>
    
+</fieldset>
    
       
    
       
    
          
    A set of checkboxes
    
          
    The User Profile page for a Web site allows users to indicate their interests by selecting multiple checkboxes. Each checkbox (input type="checkbox") has a label. The checkboxes are contained within a fieldset, and the legend element contains the prompt for the entire group of checkboxes.
    
          
-
    <fieldset>
+
    <fieldset>
   <legend>I am interested in the following (check all that apply):</legend>
   <div>
     <input id="photo" name="interests" type="checkbox" value="ph">
@@ -73,14 +72,14 @@ 
    A set of checkboxes
    
     <input checked="checked" id="acrylic" name="interests" type="checkbox" value="ac">
     <label for="acrylic">Acrylic</label>
   </div>
-</fieldset>
    
+</fieldset>
    
       
    
 
       
    
          
    Logically related controls
    
          
    In this example, form fields for residential and postal addresses are distinguished by the value of the legend in each fieldset grouping.
    
          
-
    <form action="/adduser" method="post">
+
    <form action="/adduser" method="post">
   <fieldset>
     <legend>Your Residential Address</legend>
     <div>
@@ -103,7 +102,7 @@ 
    Logically related controls
    
       <input autocomplete="postal-code" id="pzip" name="pzip" type="text">
     </div>    
   </fieldset>
-</form>
    
+</form>
    
       
    
    
    
    
    
@@ -140,5 +139,6 @@ 
    Resources
    
             HTML - the legend element.
          
       
-      
-   
    
+   
    
+
+

From f0abd0d457da1ef92cbb19ff197290feabed5db3 Mon Sep 17 00:00:00 2001
From: Francis Storr 
Date: Thu, 7 Sep 2023 20:36:36 -0700
Subject: [PATCH 40/67] Update H74 text tweak

---
 techniques/html/H74.html | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/techniques/html/H74.html b/techniques/html/H74.html
index d4ed30216b..1031558c48 100644
--- a/techniques/html/H74.html
+++ b/techniques/html/H74.html
@@ -13,7 +13,7 @@ 
    Ensuring that opening and closing tags are used according to specification
       
    
          
    When to Use
    
-         
    HTML
    
+         
    HTML
    
       
    
       
    
          
    Description
    
@@ -38,7 +38,7 @@ 
    Procedure
    
             
    
             
    
                
    Expected Results
    
-               
    Steps 1, 2, and 3 are true.
    
+               
    Steps #1, #2, and #3 are true.
    
             
    
          
    
          
       

From bf6f10c022c8852758d253c92a2cd56b470381ea Mon Sep 17 00:00:00 2001
From: Francis Storr 
Date: Thu, 7 Sep 2023 20:52:44 -0700
Subject: [PATCH 41/67] Update H75

* added text to multiple empty `h3` elements
* fixed out of date links in Resources
* fixed out of date links to tools
---
 techniques/html/H75.html | 123 ++++++++++++++++++++-------------------
 1 file changed, 63 insertions(+), 60 deletions(-)

diff --git a/techniques/html/H75.html b/techniques/html/H75.html
index d8a40a9006..332e85120f 100644
--- a/techniques/html/H75.html
+++ b/techniques/html/H75.html
@@ -1,7 +1,23 @@
-Ensuring that Web pages are well-formed
    Ensuring that Web pages are well-formed
    ID: H75
    Technology: html
    Type: Technique
    When to Use
    
-      
     Any XML-based markup languages. 
    
-   
    Description
    
-      
     The objective of this technique is to avoid key errors that are known to cause
+
+
+	
+		Ensuring that Web pages are well-formed
+		
+	
+	
+		
    Ensuring that Web pages are well-formed
    
+		
    
+			
    ID: H75
    
+			
    Technology: html
    
+			
    Type: Technique
    
+		
    
+		
    
+			
    When to Use
    
+      
    Any XML-based markup languages.
    
+   
    
+	 
    
+		
    Description
    
+      
    The objective of this technique is to avoid key errors that are known to cause
             problems for assistive technologies when they are trying to parse contents.
             Well-formedness is checked by parsing the document with a conforming XML parser and
             checking if the validation report mentions well-formedness errors. Every conforming XML
@@ -10,67 +26,54 @@
             validation).
    
    
    Examples
    
       
    
-         
    
-         
-            
    XML files include a document type declaration, a xsi:schemaLocation attribute or
-                other type of reference to a schema. The developer can use off-line or online
-                validators, an XML editor or an IDE with XML support (see Resources below) to check
-                well-formedness. 
    
-         
+         
    XML files include a document type declaration, a xsi:schemaLocation attribute or
+					other type of reference to a schema
    
+          
    The developer can use off-line or online validators, an XML editor or an IDE with XML support to check well-formedness.
    
       
    
       
    
-         
    
-         
-            
     When XML files do not include a document type declaration, a xsi:schemaLocation
-                attribute or a processing instruction referencing a schema even though there is a
-                schema for them, the relevant schema is specified by a command line instruction, a
-                user dialog or a configuration file, and the XML files are checked against the
-                schema.
    
-         
+         
    XML files do not include a document type declaration, a xsi:schemaLocation
+					attribute or a processing instruction referencing a schema even though there is a
+					schema for them
    
+          
    In this instance, the relevant schema is specified by a command line instruction, a user dialog or a configuration file, and the XML files are checked against the schema.
    
       
    
       
    
-         
    
-         
-            
    When XML files do not include a document type declaration, a xsi:schemaLocation
-                attribute or a processing instruction referencing a schema even though there is a
-                schema for them, the namespace is dereferenced to retrieve a schema document or
-                resource directory (Resource Directory Description Language: RDDL), and the XML files are checked against the
-                schema.
    
-         
+         
    XML files do not include a document type declaration, a xsi:schemaLocation
+					attribute or a processing instruction referencing a schema even though there is a
+					schema for them
    
+        	
    In this instance, the namespace is dereferenced to retrieve a schema document or resource directory (Resource Directory Description Language: RDDL), and the XML files are checked against the schema.
     
       
    
       
    
-         
    
-         
-            
    When a Website generates XML dynamically instead of serving only static documents,
-                a developer can use XMLUnit, XML Test Suite or a similar
-                framework to test the generated XML code. 
    
-         
+         
    When a Website generates XML dynamically instead of serving only static documents
    
+            
    In this instance, a developer can use XMLUnit, XML Test Suite or a similar framework to test the generated XML code.
    
       
    
-   
    Tests
    
-      
    Procedure
    
-         
      
-            
    1.  Load each file into a validating XML parser. 
      2. 
-            
    2.  Check that there are no well-formedness errors. 
      3. 
-         
    
+   
    
+	 
    
+		
    Tests
    
+		
    
+			
    Procedure
    
+			
      
+				
    1.  Load each file into a validating XML parser. 
      2. 
+				
    2.  Check that there are no well-formedness errors. 
      3. 
+			
    
+    
    
+    
    Expected Results
    
+      
    Step #2 is true.
    
       
    
-      
    Expected Results
    
-         
    Step 2 is true.
    
-      
    
-   
    Resources
    
-      
-         
-         
     For other resources, see Validating Web
-              pages. 
    
-      
-   
    
\ No newline at end of file
+   
    
+	 
+	
    
+		
    Resources
      
+		
+		
     For other resources, see Validating Web pages.
    
+   
    
+	
+	
\ No newline at end of file

From bfa5a30d488926440ca15a22b0869168876433b7 Mon Sep 17 00:00:00 2001
From: Francis Storr 
Date: Thu, 7 Sep 2023 20:56:27 -0700
Subject: [PATCH 42/67] Update H76 for syntax highlighting

---
 techniques/html/H76.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/techniques/html/H76.html b/techniques/html/H76.html
index 7583c2a142..e937b76862 100644
--- a/techniques/html/H76.html
+++ b/techniques/html/H76.html
@@ -13,18 +13,18 @@ 
    Using meta re
       
    
       
    
          
    When to Use
    
-         
    HTML
    
+         
    HTML
    
       
    
       
    
          
    Description
    
-         
    The objective of this technique is to enable redirects on the client side without confusing the user. Redirects are preferably implemented on the server side (see Implementing automatic redirects on the server side instead of on the client side), but authors do not always have control over server-side technologies.
    
+         
    The objective of this technique is to enable redirects on the client side without confusing the user. Redirects are preferably implemented on the server side (see Implementing automatic redirects on the server side instead of on the client side), but authors do not always have control over server-side technologies.
    
          
    In HTML, one can use the meta element with the value of the http-equiv attribute set to refresh and the value of the content attribute set to 0 (meaning zero seconds), followed by the URI that the browser should request. It is important that the time-out is set to zero, to avoid that content is displayed before the new page is loaded. The page containing the redirect code should only contain information related to the redirect.
    
       
    
       
    
          
    Examples
    
          
    
             
    Instantly redirecting a page
    
-
    <!doctype html>
+
    <!doctype html>
 <html lang="en">    
   <head>
     <meta charset="utf-8">
@@ -35,7 +35,7 @@ 
    Instantly redirecting a page
    
     <p>This page has moved to <a href="https://planet-express.example.com">
        Planet Express</a>.</p> 
   </body>  
-</html>
    
+</html>
    
          
    
       
    
       
    
@@ -50,7 +50,7 @@ 
    Procedure
    
          
    
          
    
             
    Expected Results
    
-            
    Steps 1 and 2 are true.
    
+            
    Steps #1 and #2 are true.
    
       
    
    
    
    
       
    
@@ -55,7 +55,7 @@ 
    Procedure
    
          
    
             
    Expected Results
    
             
      
-               
    • Steps 1 and 2 are true.
      • 
+               
    • Steps #1 and #2 are true.
      • 
             
    
          
    
       
    

From 2028ac4dbef0ca8de88860ffba7cb21ad4e7156a Mon Sep 17 00:00:00 2001
From: Francis Storr 
Date: Thu, 7 Sep 2023 21:23:50 -0700
Subject: [PATCH 45/67] Update H79 for syntax highlighting

---
 techniques/html/H79.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/techniques/html/H79.html b/techniques/html/H79.html
index f0e092a84b..8100dadecb 100644
--- a/techniques/html/H79.html
+++ b/techniques/html/H79.html
@@ -23,7 +23,7 @@ 
    Description
    
          
    Examples
    
          
    
             
    A table of rental car choices
    
-
    <table>
+
    <table>
   <caption>Available rental cars with cost per day</caption>
   <tr>
     <th>Type of car</th>
@@ -65,7 +65,7 @@ 
    A table of rental car choices
    
     <td><a href="full-av.html">$91</a></td>
     <td><a href="full-hz.html">$91</a></td>
   </tr>
-</table>
    
+</table>
    @@ -81,7 +81,7 @@

    Procedure

    Expected Results

      -
    • Steps 1 and 2 are true.
      • +
    • Steps #1 and #2 are true.
    From 1b94aeb18b44154e68e1edeab6522b4524ae02c1 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Thu, 7 Sep 2023 21:40:41 -0700 Subject: [PATCH 46/67] Update H80 for syntax highlighting --- techniques/html/H80.html | 112 ++++++++++++++++++++++++--------------- 1 file changed, 69 insertions(+), 43 deletions(-) diff --git a/techniques/html/H80.html b/techniques/html/H80.html index 62979a10b5..c6fcf1cfac 100644 --- a/techniques/html/H80.html +++ b/techniques/html/H80.html @@ -1,57 +1,74 @@ -Identifying the purpose of a link using link text combined with the preceding - heading element

    Identifying the purpose of a link using link text combined with the preceding - heading element

    ID: H80

    Technology: html

    Type: Technique

    When to Use

    -

    HTML and XHTML

    -

    Description

    + + + + Identifying the purpose of a link using link text combined with the preceding heading element + + + +

    Identifying the purpose of a link using link text combined with the preceding heading element

    +
    +

    ID: H80

    +

    Technology: html

    +

    Type: Technique

    +
    +
    +

    When to Use

    +

    HTML

    +
    +
    +

    Description

    The objective of this technique is to describe the purpose of a link from the context provided by its heading context. The preceding heading provides context for an otherwise unclear link. The description lets a user distinguish this link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link.

    -

    Whenever possible, provide link text that identifies the purpose of the link without - needing additional context.

    +

    Whenever possible, provide link text that identifies the purpose of the link without needing additional context.

    -

    Examples

    -
    -

    Blocks of information on hotels

    - -

    The information for each hotel consists of the hotel name, a description and a - series of links to a map, photos, directions, guest reviews and a booking form.

    - - 
    <h2><a href="royal_palm_hotel.html">Royal Palm Hotel</a></h2>
-  <ul class="horizontal">
-    <li><a href="royal_palm_hotel_map.html">Map</a></li>
-    <li><a href="royal_palm_hotel_photos.html">Photos</a></li>
-    <li><a href="hroyal_palm_hotel_directions.html">Directions</a></li>
-    <li><a href="royal_palm_hotel_reviews.html">Guest reviews</a></li>
-    <li><a href="royal_palm_hotel_book.html">Book now</a></li>
+
    +
    +

    Examples

    +
    +

    Blocks of information on hotels

    +

    The information for each hotel consists of the hotel name, a description and a series of links to a map, photos, directions, guest reviews and a booking form.

    + +
    <h2><a href="royal_palm_hotel.html" id="royal-heading">Royal Palm Hotel</a></h2>
+<nav aria-labelledby="royal-heading">
+  <ul>
+    <li><a href="royal-palm-hotel_map.html">Map</a></li>
+    <li><a href="royal-palm-hotel-photos.html">Photos</a></li>
+    <li><a href="hroyal-palm-hotel-directions.html">Directions</a></li>
+    <li><a href="royal-palm-hotel-reviews.html">Guest reviews</a></li>
+    <li><a href="royal-palm-hotel-book.html">Book now</a></li>
   </ul>
+</nav>	
 
-<h2><a href="hotel_three_rivers.html">Hotel Three Rivers</a></h2>
-  <ul class="horizontal">
-    <li><a href="hotel_three_rivers_map.html">Map</a></li>
-    <li><a href="hotel_three_rivers_photos.html">Photos</a></li>
-    <li><a href="hotel_three_rivers_directions.html">Directions</a></li>
-    <li><a href="hotel_three_rivers_reviews.html">Guest reviews</a></li>
-    <li><a href="hotel_three_rivers_book.html">Book now</a></li>
-  </ul>
    +<h2><a href="hotel-three-rivers.html" id="rivers-heading">Hotel Three Rivers</a></h2> +<nav aria-labelledby="rivers-heading"> + <ul> + <li><a href="hotel-three-rivers-map.html">Map</a></li> + <li><a href="hotel-three-rivers-photos.html">Photos</a></li> + <li><a href="hotel-three-rivers-directions.html">Directions</a></li> + <li><a href="hotel-three-rivers-reviews.html">Guest reviews</a></li> + <li><a href="hotel-three-rivers-book.html">Book now</a></li> + </ul> +</nav>
    -

    A document provided in three formats

    - 
    <h2>Annual Report 2006-2007</h2>
+				
    A document provided in three formats
    
+
    <h2>Annual Report 2006-2007</h2>
 <p> 
-  <a href="annrep0607.html">(HTML)</a>&nbsp;
-  <a href="annrep0607.pdf">(PDF)</a>&nbsp;
-  <a href="annrep0607.rtf">(RTF)</a>
-</p>       
    
+  <a href="annual-report-0607.html">HTML</a>
+  <a href="annual-report-0607.pdf">PDF</a>
+  <a href="annual-report-0607.rtf">RTF</a>
+</p>

    Newspaper Web site

    - 
    <div class="card-link">
-   <h2><a href="Stockmarket_05052007.htm>Stock market soars as bullishness prevails</a></h2>
+
    <div class="card-link">
+   <h2><a href="market-2023-09-27.html">Stock market soars as bullishness prevails</a></h2>
    <p>This week was a stellar week for the stock market as investing in gold rose 2%.</p>
-</div>
    
+</div>

    A script is used to find each element with a class of card-link and append an additional paragraph with a "Read more" link at the end of the div with the class .card-link that goes to the same location as the link in the heading.

    Tests

    @@ -59,16 +76,19 @@

    Newspaper Web site

    For each link in the content that uses this technique:

    1. Find the heading element that precedes the link
      2. -
    2. Check that the text of the link combined with the text of that heading describes - the purpose of the link.
      3. +
    3. Check that the text of the link combined with the text of that heading describes the purpose of the link.
    -

    Expected Results

    +
    +

    Expected Results

    • #2 is true.
    -
    +

    Resources

    + +
    +
    +

    Resources

    +
    + + From 5522425d48c523ff76575f5a4c2b74dd2dd2f28b Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 8 Sep 2023 12:36:28 -0700 Subject: [PATCH 47/67] Update H81 for syntax highlighting --- techniques/html/H81.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/techniques/html/H81.html b/techniques/html/H81.html index 9b21bf737d..33eb56d8c7 100644 --- a/techniques/html/H81.html +++ b/techniques/html/H81.html @@ -32,7 +32,7 @@

    Description

    Examples

    A document provided in three formats

    -
    <ul>
+
    <ul>
   <li>Annual Report 2021
     <ul> 
       <li>
@@ -59,13 +59,13 @@ 
    A document provided in three formats
    
       </li>
     </ul>
   </li>
-</ul>
    
+</ul>

    Blocks of information about hotels

    The information for each hotel consists of the hotel name, a description and a series of links to a map, photos, directions, guest reviews and a booking form.

    -
    <nav>
+
    <nav>
   <ul>
     <li><a href="royal-palm-hotel.html">Royal Palm Hotel</a>
       <ul>
@@ -86,7 +86,7 @@ 
    Blocks of information about hotels
    
       </ul>
     </li>
   </ul>
-</nav>
    
+</nav>
    @@ -103,7 +103,7 @@

    Procedure

    Expected Results

      -
    • Checks 2 and 3 are true.
      • +
    • Checks #2 and #3 are true.
    @@ -127,5 +127,5 @@

    Resources

  • HTML - the ul element.
    • - + \ No newline at end of file From 56bf3ff83b9baa03e2e07a603318adade6c8d431 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 8 Sep 2023 12:39:38 -0700 Subject: [PATCH 48/67] Update H83 for syntax highlighting --- techniques/html/H83.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/techniques/html/H83.html b/techniques/html/H83.html index 929d0d07aa..3b0c197c27 100644 --- a/techniques/html/H83.html +++ b/techniques/html/H83.html @@ -5,7 +5,7 @@ -

    Using the target attribute to open a new window on user request and indicating this in link text

    +

    Using the target attribute to open a new window on user request and indicating this in link text

    ID: H83

    Technology: html

    @@ -27,7 +27,7 @@

    Description

    Examples

    Using the target attribute in a link to indicate it will open in a new window

    - 
    <a href="help.html" target="_blank">Show Help (opens new window)</a>
    + 
    <a href="help.html" target="_blank">Show Help (opens new window)</a>
    @@ -43,7 +43,7 @@

    Procedure

    Expected Results

      -
    • Checks 2 and 3 are true.
      • +
    • Checks #2 and #3 are true.
    From a8eded62557fdff2222f3d15aa77cd75944b296d Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 8 Sep 2023 12:42:50 -0700 Subject: [PATCH 49/67] Update H84 for syntax highlighting --- techniques/html/H84.html | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/techniques/html/H84.html b/techniques/html/H84.html index b2857f06eb..160f8cd389 100644 --- a/techniques/html/H84.html +++ b/techniques/html/H84.html @@ -25,8 +25,7 @@

    Examples

    A calendar

    A Web page lets the user choose a quarter of any year and display the calendar for those months. After the user has set the quarter and year, they display the calendar by pressing the "Show" button. This example relies on client-side scripting to implement the action.

    -
    -<label for="quarter">Quarter:</label>
+
    <label for="quarter">Quarter:</label>
 <select id="quarter" name="quarter">
   <option value="1">Quarter 1 (January - March)</option>
   <option value="2">Quarter 2 (April - June)</option>
@@ -35,14 +34,13 @@ 
    A calendar
    
 </select> 
 <label for="year">Year:</label>
 <input name="year" type="text" id="year">
-<button name="show" type="button">Show</button>
    
+<button name="show" type="button">Show</button>

    Choosing an action

    A select element contains a list of possible actions. The action is not performed until the user presses the "Update" button.

    -
    -<form action="/action" method="post">
+
    <form action="/process-form" method="post">
   <label for="action">Options:</label>
   <select name="action" id="action">
     <option value="add">Add</option>
@@ -51,7 +49,7 @@ 
    Choosing an action
    
     <option value="order">Order</option>
   </select> 
   <button name="submit" type="submit">Update</button>
-</form>
    
+</form>
    From e2d8bb2acbb88835b62c989c255fef187a776e3d Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 8 Sep 2023 12:46:33 -0700 Subject: [PATCH 50/67] Update H85 for syntax highlighting --- techniques/html/H85.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/techniques/html/H85.html b/techniques/html/H85.html index 550ad23905..ca7925dbd0 100644 --- a/techniques/html/H85.html +++ b/techniques/html/H85.html @@ -27,7 +27,7 @@

    Examples

    The following combo box collects data about favorite foods. Grouping by type allows users to select their preference more quickly.

    -
    <form action="/favorite-food/" method="post">
+
    <form action="/favorite-food/" method="post">
   <label for="food">What is your favorite food?</label>
   <select id="food" name="food">
     <optgroup label="Fruits">
@@ -42,17 +42,17 @@ 
    Examples
    
     </optgroup>
     <optgroup label="Baked Goods">
       <option value="7">Apple Pie</option>
-      <option value="8">Bagel</option>
+      <option value="8">Bagels</option>
       <option value="9">Chocolate Cake</option>
     </optgroup>
    </select>
-</form>
    
+</form>

    The following example shows how a multi-select box can make use of the optgroup element.

    - 
    <form action="/animals/" method="post">
+  
    <form action="/animals/" method="post">
   <label for="animals">Pick your favorite animals:</label>
   <select id="animals" multiple name="animals" size="10">
     <optgroup label="Dinosaurs">
@@ -75,7 +75,7 @@ 
    Examples
    
       <option value="rabbit">Rabbit</option>
     </optgroup>
   </select>
-</form>
    
+</form>
    @@ -90,7 +90,7 @@

    Procedure

    Expected Results

      -
    • Check 2 is true.
      • +
    • Check #2 is true.
    From ffabfd14c30b6dd26b3f69bf9035fce7466c1789 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 8 Sep 2023 12:54:32 -0700 Subject: [PATCH 51/67] Update H86 for syntax highlighting --- techniques/html/H86.html | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/techniques/html/H86.html b/techniques/html/H86.html index d2c3e9a6cd..c32b672692 100644 --- a/techniques/html/H86.html +++ b/techniques/html/H86.html @@ -31,26 +31,26 @@

    Examples

    Marking up emojis in a sentence

    This shows a technique to mark up emojis with accessible names that differ from their default. Because you can't use an alt attribute on a span element and the ARIA recommendation disallows accessible names on generic elements, to give the emojis accessible names they are defined as images with the ARIA role="img" property which then allows the creation of an accessible name using the aria-label property.

    -
    <p>I smiled at my friend and said 
+
    <p>I smiled at my friend and gestured 
    <span aria-label="you" role="img">👉🏾</span>
    <span aria-label="rock" role="img">🤘🏾</span>!
-</p>
    
+</p>

    Four options for providing alternatives for an emoticon representing "smile"

    The following shows four options for providing alternatives for an emoticon representing "smile", which is consists of a colon followed by a closing parenthesis.

    -
    :) (smile)
-<abbr title="smile">:)</abbr>
+
    :) (smile)
+<abbr title="smile">:)</abbr>
 <span aria-label="smile" role="img">:)</span>
-<img alt="smile" src="smile.gif">
    
+<img alt="smile" src="smile.gif">

    Using the aria-label and role="img" properties

    Adding the role="img" property to the ASCII content's containing element defines it as an image, and the aria-label property gives it the required text alternative. Skip to the next ASCII example.

    -
    +
    
 <div aria-label="WCAG" role="img">
 oooooo   oooooo     oooo   .oooooo.         .o.         .oooooo.    
  `888.    `888.     .8'   d8P'  `Y8b       .888.       d8P'  `Y8b   
@@ -59,14 +59,13 @@ 
    Using the aria-label and 
          
    ASCII art with an explanation of the picture preceding it
    
          
    This example includes a link to skip over the ASCII art. Skip to the Leetspeak example.
    
          
-
    <figure>
+
    <figure>
   <figcaption>
     <p>Figure 1: ASCII art picture of a butterfly.
       <a href="#skipbutterfly">Skip ASCII butterfly image</a>
@@ -119,14 +118,13 @@ 
    ASCII art with an explanation of the picture preceding
                                LLLLLLLLLLLLL
                                  ~~~~~~~~~
 </figure>
-<p id="skipbutterfly">New content after the ASCII image.</p>
    
+<p id="skipbutterfly">New content after the ASCII image.</p>

    Marking up Leetspeak

    The following is Leetspeak for "Austin Rocks".

    -
    -<abbr title="Austin Rocks">Au5t1N r0xx0rz</abbr>
    +
    <abbr title="Austin Rocks">Au5t1N r0xx0rz</abbr>
    @@ -147,7 +145,7 @@

    Procedure

    Expected Results

      -
    • Checks 2 and 3 are true.
      • +
    • Checks #2 and #3 are true.
    @@ -157,6 +155,6 @@

    Resources

  • ARIA Recommendation.
  • Accessible Name and Description Computation.
    • -
    +
    \ No newline at end of file From d357d0763af45b9a215dcd2c3fa4ce27424dc3b4 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 8 Sep 2023 13:10:35 -0700 Subject: [PATCH 52/67] Update H94 for syntax highlighting --- techniques/html/H94.html | 103 ++++++++++++++++++++++----------------- 1 file changed, 58 insertions(+), 45 deletions(-) diff --git a/techniques/html/H94.html b/techniques/html/H94.html index de4b7317d7..b77f98a454 100644 --- a/techniques/html/H94.html +++ b/techniques/html/H94.html @@ -1,6 +1,22 @@ -Ensuring that elements do not contain duplicate attributes

    Ensuring that elements do not contain duplicate attributes

    ID: H94

    Technology: html

    Type: Technique

    When to Use

    -

    All HTML pages

    -

    Description

    + + + + Ensuring that elements do not contain duplicate attributes + + + +

    Ensuring that elements do not contain duplicate attributes

    +
    +

    ID: H94

    +

    Technology: html

    +

    Type: Technique

    +
    +
    +

    When to Use

    +

    All HTML pages

    +
    +
    +

    Description

    The objective of this technique is to avoid key errors that are known to cause problems for assistive technologies when they are trying to parse content that has duplicate attributes on the same element. This @@ -10,47 +26,44 @@ validation reports generally mention this type of error. The document type declaration is not strictly necessary for this type of evaluation, but specifying the document type declaration makes it easier to use - a validator.

    -

    Examples

    -
    -

    HTML Validators

    - -

    HTML pages include a document type declaration (sometimes referred - to as !DOCTYPE statement). The developer can use offline or online - validators (see Resources below) to check that attributes are only - used once on an element. The W3C validador, for example, will report "duplicate - specification of attribute X" when it encounters the second definition - of the same attribute on an element.

    - + a validator.

    +
    +
    +

    Examples

    +
    +

    HTML Validators

    +

    HTML pages include a document type declaration (sometimes referred to as !DOCTYPE statement). The developer can use offline or online validators (see Resources below) to check that attributes are only used once on an element. The W3C validator, for example, will report Error duplicate attribute [attribute name] when it encounters the second definition of the same attribute on an element.

    +
    +
    +
    +

    Tests

    +
    +

    Procedure

    +
      +
    1. Check that no attribute occurs more than once on any element
      2. +
    -

    Tests

    -

    Procedure

    -
      -
    1. Check that no attribute occurs more than once on any element
      2. -
    +
    +

    Expected Results

    +
      +
    • Check #1 is true.
      • +
    -

    Expected Results

    -
      -
    • Check 1 is true.
      • -
    -
    -

    Resources

    - - -

    For other resources, see G134: - Validating Web pages.

    - -
    \ No newline at end of file +
    +
    +

    Resources

    + +

    For other resources, see G134: Validating Web pages.

    +
    + + \ No newline at end of file From 9b0b8670e03e38307ea6868aa6c2c13869dc233b Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 8 Sep 2023 13:25:38 -0700 Subject: [PATCH 53/67] Update H95 * add support for syntax highlighting * update out of date links * fix typo --- techniques/html/H95.html | 119 +++++++++++++++++++++++---------------- 1 file changed, 70 insertions(+), 49 deletions(-) diff --git a/techniques/html/H95.html b/techniques/html/H95.html index dfa399439b..3043a567c6 100644 --- a/techniques/html/H95.html +++ b/techniques/html/H95.html @@ -1,69 +1,90 @@ -Using the track element to provide captions

    Using the track element to provide captions

    ID: H95

    Technology: html

    Type: Technique

    When to Use

    -

    HTML5

    -

    Description

    -

    The objective of this technique is to use the HTML5 track element to specify a captions timed text track for a video element. Caption timed text tracks contain transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information, suitable for when sound is unavailable or not clearly audible.

    -

    The src attribute of the track element is a URL that is the address of the text track data.

    + + + + Using the track element to provide captions + + + +

    Using the track element to provide captions

    +
    +

    ID: H95

    +

    Technology: html

    +

    Type: Technique

    +
    +
    +

    When to Use

    +

    HTML

    +
    +
    +

    Description

    +

    The objective of this technique is to use the HTML track element to specify a captions timed text track for a video element. Caption timed text tracks contain transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information, suitable for when sound is unavailable or not clearly audible.

    +

    The src attribute of the track element is a URL that is the address of the text track data.

    The kind attribute of the track element indicates the kind of information in the timed text. captions text tracks provide a text version of dialogue and other sounds important to understanding the video. Subtitles contain only the dialogue. If other audio information is important to understanding the video, a subtitle track will not be sufficient to meet the success criterion.

    -

    Some regions use the term "subtitle" for any visible text representation of the audio track. An author may mark up a timed text track in the language of the audio track as kind=subtitles, instead of kind=captions, and may include additional relevant audio information. It is not best practice to use subtitles in this situation, since it may confuse users who are trying to find captions, but such a timed text track would meet the requirements of Success Criterion 1.2.2.

    +

    Some regions use the term "subtitle" for any visible text representation of the audio track. An author may mark up a timed text track in the language of the audio track as kind=subtitles, instead of kind=captions, and may include additional relevant audio information. It is not best practice to use subtitles in this situation, since it may confuse users who are trying to find captions, but such a timed text track would meet the requirements of Success Criterion 1.2.2.

    -

    Examples

    +
    +
    +

    Examples

    Captions in one language

    - -

    A video element for a video in the English language with an English caption track. The captions are provided in the WebVTT format.

    - - 
    -			 <video poster="myvideo.png" controls>
-				 <source src="myvideo.mp4" srclang="en" type="video/mp4">
-				 <track src="myvideo_en.vtt" kind="captions" srclang="en" label="English">
-			  </video>
-
    +

    A video element for a video in the English language with an English caption track. The captions are provided in the WebVTT format.

    +
    <video poster="myvideo.png" controls>
+  <source src="myvideo.mp4" srclang="en" type="video/mp4">
+  <track kind="captions" label="English" src="myvideo_en.vtt" srclang="en">
+</video>

    Captions in multiple languages

    +

    A video element for a video in the English language with an English caption track. The captions are provided in the WebVTT format.

    -

    A video element for a video in the English language with an English caption track. The captions are provided in the WebVTT format.

    - - 
    -			  <video poster="myvideo.png" controls>
-				<source src="myvideo.mp4" srclang="en" type="video/mp4">
-				<source src="myvideo.webm" srclang="fr" type="video/webm">
-				<track src="myvideo_en.vtt" kind="captions" srclang="en" label="English">
-				<track src="myvideo_fr.ttml" kind="captions" srclang="fr" label="French">
-			  </video>
    - +
    <video poster="myvideo.png" controls>
+  <source src="myvideo.mp4" srclang="en" type="video/mp4">
+  <source src="myvideo.webm" srclang="fr" type="video/webm">
+  <track kind="captions" label="English" src="myvideo-en.vtt" srclang="en">
+  <track kind="captions" label="Français" src="myvideo-fr.ttml" srclang="fr">
+</video>
    -

    Tests

    -

    Procedure

    +
    +
    +

    Tests

    +
    +

    Procedure

    For each video element used to play a video:

    1. Check that the video contains a track element of kind captions in the language of the video.
    -

    Expected Results

    +
    +

    Expected Results

    • Check #1 is true.
    -

    Resources

    - - - -
    \ No newline at end of file +
    + +
    +

    Resources

    + +
    + + \ No newline at end of file From 56701ba584b5719a81019933e3588bef4a2d4222 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 8 Sep 2023 14:06:21 -0700 Subject: [PATCH 54/67] Update H96 * added support for syntax highlighting * re-tested for native support for descriptions. There still is none, so I updated the note with an up-to-date date. * fixed a typo * updated resource links --- techniques/html/H96.html | 136 +++++++++++++++++++++------------------ 1 file changed, 73 insertions(+), 63 deletions(-) diff --git a/techniques/html/H96.html b/techniques/html/H96.html index d303625549..b08808fbc9 100644 --- a/techniques/html/H96.html +++ b/techniques/html/H96.html @@ -1,77 +1,87 @@ -Using the track element to provide audio descriptions

    Using the track element to provide audio descriptions

    ID: H96

    Technology: html

    Type: Technique

    When to Use

    -

    HTML5

    -

    Description

    -

    The objective of this technique is to use the HTML5 track element to specify a descriptions timed text track for a video element. Audio description timed text tracks contain textual descriptions of the video component of the media resource, intended for audio synthesis when the visual component is obscured, unavailable, or not usable. The user agent makes the cues available to the user in a non-visual fashion, for instance, by synthesizing them into speech.

    -

    The src attribute of the track element is an URL providing the text track data.

    -

    The audio description cues must fit into the gaps available in the audio component of the media resource. If there is not enough time to synthesize the description text in the track cue's time interval, user agents may truncate the speech. This limits the amount of supplementary information that can be added.

    -

    User agents may also support extended audio descriptions by halting the video until the description has been completely synthesized, then restarting the video.

    - -

    As of February 2019 when this Advisory technique was last reviewed by the Working Group, there is no native support in user agents for this technique. However, support is available via JavaScript polyfills.

    + + + + Using the track element to provide audio descriptions + + + +

    Using the track element to provide audio descriptions

    +
    +

    ID: H96

    +

    Technology: html

    +

    Type: Technique

    +
    +
    +

    When to Use

    +

    HTML

    +
    +
    +

    Description

    +

    The objective of this technique is to use the HTML track element to specify a descriptions timed text track for a video element. Audio description timed text tracks contain textual descriptions of the video component of the media resource, intended for audio synthesis when the visual component is obscured, unavailable, or not usable. The user agent makes the cues available to the user in a non-visual fashion, for instance, by synthesizing them into speech.

    +

    The src attribute of the track element is an URL providing the text track data.

    +

    The audio description cues must fit into the gaps available in the audio component of the media resource. If there is not enough time to synthesize the description text in the track cue's time interval, user agents may truncate the speech. This limits the amount of supplementary information that can be added.

    +

    User agents may also support extended audio descriptions by halting the video until the description has been completely synthesized, then restarting the video.

    -

    Examples

    -
    -

    Audio description in one language

    - +
    +

    As of September 2023 when this Advisory technique was last reviewed by the Working Group, there is no native support in user agents for this technique. However, support is available via JavaScript polyfills.

    +
    +
    +
    +

    Examples

    +
    +

    Audio description in one language

    A video element for a video in the English language. The audio descriptions are provided in the WebVTT format.

    - - 
    -			 <video poster="myvideo.png" controls>
-				<source src="myvideo.mp4" srclang="en" type="video/mp4">
-				<track src="myvideo_en.vtt" kind="descriptions" srclang="en" label="English">
-			  </video>
-
    +
    <video poster="myvideo.png" controls>
+  <source src="myvideo.mp4" srclang="en" type="video/mp4">
+  <track kind="descriptions" label="English" src="myvideo-en.vtt" srclang="en">
+</video>

    Audio description in multiple languages

    - -

    A video element for a video with both an English and French language source element, and with an English and a French audio description track using the WebVTT (vtt) file format.

    - - 
    -			 <video poster="myvideo.png" controls>
-				<source src="myvideo.mp4" srclang="en" type="video/mp4">
-				<source src="myvideo.webm" srclang="fr" type="video/webm">
-				<track src="myvideo_en.vtt" kind="descriptions" srclang="en" label="English">
-				<track src="myvideo_fr.vtt" kind="descriptions" srclang="fr" label="French">
-			  </video>
    +

    A video element for a video with both an English and French language source element, and with an English and a French audio description track using the WebVTT file format.

    +
    <video poster="myvideo.png" controls>
+  <source src="myvideo.mp4" srclang="en" type="video/mp4">
+  <source src="myvideo.webm" srclang="fr" type="video/webm">
+  <track kind="descriptions" label="English" src="myvideo-en.vtt" srclang="en">
+  <track kind="descriptions" label="Français" src="myvideo-fr.vtt" srclang="fr">
+</video>
    -
    -

    Captions in multiple languages

    - -

    A video, "Google self-driving car". with an audio description track.

    - - 
    -			<video controls tabindex="1">
-				<source src="cdgQpa1pUUE.webm" type="video/webm">
-				<source src="cdgQpa1pUUE.mp4" type="video/mp4">
-				<track id="audesc" src="cdgQpa1pUUE.vtt" kind="descriptions" label="English descriptions" srclang="en-us"></track>
-			</video>
    - -
    -

    Tests

    -

    Procedure

    +
    +
    +

    Tests

    +
    +

    Procedure

    For each video element used to play a video:

      -
    1. Check that the video contains a track element of kind descriptions in the language of the video.
      2. +
    2. Check that the video contains a track element of kind="descriptions" in the language of the video.
    -

    Expected Results

    +
    +

    Expected Results

    • Check #1 is true.
    -

    Resources

    - - - -
    +
    + +
    +

    Resources

    + +
    + + From 9a143161b196b69839b86612be6ebff612b515e8 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 8 Sep 2023 14:18:58 -0700 Subject: [PATCH 55/67] Update H97 for syntax highlighting --- techniques/html/H97.html | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/techniques/html/H97.html b/techniques/html/H97.html index 0979b5cf51..e79d5d7125 100644 --- a/techniques/html/H97.html +++ b/techniques/html/H97.html @@ -13,7 +13,7 @@

    Grouping related links using the nav elem

    When to Use

    -

    HTML documents that contain related links.

    +

    HTML documents that contain related links.

    Description

    @@ -27,20 +27,19 @@

    Navigation links enclosed in a nav element

    This example uses a nav element to group navigation links in an accessibility curriculum.

    -
    -<nav>
+
    <nav>
   <ul>
     <li><a href="/web-accessibility.html">Web Accessibility</a></li>
     <li><a href="/doc-accessibility.html">Document Accessibility</a></li>
     <li><a href="/mobile-accessibility.html">Mobile Accessibility</a></li>
   </ul>    
-</nav>
    
+</nav>

    Multiple nav elements and aria-labelledby

    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 nav element is used multiple times on a page, each instance may have a unique label specified using aria-labelledby:

    -
    <nav aria-labelledby="site-nav-heading">
+
    <nav aria-labelledby="site-nav-heading">
   <h2 id="site-nav-heading">Site</h2>
     <ul>
       <li><a href="...">nav link 1</a></li>  
@@ -55,14 +54,14 @@ 
    Multiple nav elements and 
+</nav>

    Multiple nav elements and aria-label

    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:

    -
    <nav aria-label="Site">
+
    <nav aria-label="Site">
   <ul>
     <li>< href="...">nav link 1</a></li>
     <li>< href="...">nav link 2</a></li>
@@ -75,7 +74,7 @@ 
    Multiple nav elements and 
+</nav>
    From 80941370bd4b96e8edca56ba760fe3e2c65991e7 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 8 Sep 2023 14:19:21 -0700 Subject: [PATCH 56/67] Update H98 for syntax highlighting --- techniques/html/H98.html | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/techniques/html/H98.html b/techniques/html/H98.html index 1545559cb9..438ee9f84c 100644 --- a/techniques/html/H98.html +++ b/techniques/html/H98.html @@ -50,22 +50,22 @@

    Examples

    A user's credit card information

    This is a simple form that collects contact and credit card information from the user.

    - 
    <form method="post" action="step2">
+				
    <form method="post" action="step2">
   <div>
     <label for="fname">First Name</label>
-    <input autocomplete="given-name" id="fname" type="text">
+    <input autocomplete="given-name" id="fname" type="text">
   </div>
   <div>
     <label for="lname">Last Name</label>
-    <input autocomplete="family-name" id="lname" type="text">
+    <input autocomplete="family-name" id="lname" type="text">
   </div>
   <div>
     <label for="cc-num">Credit card number:</label>
-    <input autocomplete="cc-number" id="cc-num" type="text">
+    <input autocomplete="cc-number" id="cc-num" type="text">
   </div>
   <div>
     <label for="exp-date">Expiry Date:</label>
-    <input autocomplete="cc-exp" id="exp-date" type="month">
+    <input autocomplete="cc-exp" id="exp-date" type="month">
   </div>
   <div>
     <input type="submit" value="Continue">
@@ -91,11 +91,5 @@ 
    Expected Results
    - From 7e65db84bb7a6f45d322cd28176d6b2689dad5ab Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 8 Sep 2023 14:40:17 -0700 Subject: [PATCH 57/67] Update H99 * support for syntax highlighting * fixed broken resource links --- techniques/html/H99.html | 73 ++++++++++++++++++++-------------------- 1 file changed, 36 insertions(+), 37 deletions(-) diff --git a/techniques/html/H99.html b/techniques/html/H99.html index 204d71e320..d51dfebcde 100644 --- a/techniques/html/H99.html +++ b/techniques/html/H99.html @@ -22,11 +22,11 @@

    Description

    The page-selection mechanism provides a way to locate static page break locations (i.e., where each new page begins) within a digital publication. These locations typically come from a print equivalent of the edition and allow synchronization in, for example, a mix of print and digital publications in environments such as schools and universities.

    -

    The source of pagination is not limited to print but could match up to any statically paginated alternative, such as a PDF or even a fixed-layout EPUB (i.e., where the content does not reflow to fit the available screen size).

    +

    The source of pagination is not limited to print but could match up to any statically paginated alternative, such as a PDF or even a fixed-layout EPUB (i.e., where the content does not reflow to fit the available screen size).

    The order of the page break locations in a digital publication is not sequential in all cases, and not all page breaks may be represented. Publishers often rearrange and remove content from the paginated source content when creating a digital version.

    -

    Page lists are a central feature of many digital publishing formats. EPUB 3 defines the page list in its navigation document while EPUB 2 and DAISY 3 use the pageList element in the NCX. The DPUB-ARIA module also includes a doc-pagelist role for identifying the navigation element containing the page list.

    +

    Page lists are a central feature of many digital publishing formats. EPUB 3 defines the page list in its navigation document while EPUB 2 and DAISY 3 use the pageList element in the NCX. The DPUB-ARIA module also includes a doc-pagelist role for identifying the navigation element containing the page list.

    Other publications provide a means of page navigation through a 'go to' mechanism.

    @@ -34,50 +34,49 @@

    Description

    Examples

    -

    Page list in HTML publications

    -

    To add a page list to a web-based document, the role "doc-pagelist" is added to the element (typically a nav element) that encloses the list and its title.

    - 
    <nav role="doc-pagelist" aria-labelledby="pglist">
+				
    Page list in HTML publications
    
+				
    To add a page list to a web-based document, the role "doc-pagelist" is added to the element (typically a nav element) that encloses the list and its title.
    
+				
    <nav role="doc-pagelist" aria-labelledby="pglist">
  <h2 id="pglist">Page List</h2>
  <ol>
    <li><a href="intro.xhtml#pg1">1</a></li>
    <li><a href="intro.xhtml#pg2">2</a></li>
    …
  </ol>
-</nav>
-
    
+</nav>

    The destinations of the page list links are usually explicit page break markers like the following:

    - 
    <span id="pg1" role="doc-pagebreak" aria-label="page 1">
    + 
    <span id="pg1" role="doc-pagebreak" aria-label="page 1">

    Page list in EPUB 3 publications

    -

    EPUB 3 uses the epub:type attribute to identify the page list in the navigation document. The attribute is used on a nav element with the value "page-list" (note the different hyphenation). The ARIA role attribute has no effect unless the navigation document can be directly accessed by users (i.e., the document is in the EPUB spine). Like the previous HTML example, the contents of the nav element is a list of links to the page break locations.

    - 
    <nav epub:type="page-list" role="doc-pagelist" aria-labelledby="pglist">
-   <h2 id="pglist">Page List</h2>
-   <ol>
-      <li><a href="chapter01.xhtml#page001">1</a></li>
-      <li><a href="chapter01.xhtml#page002">2</a></li>
-      <li><a href="chapter01.xhtml#page003">3</a></li>
-      …
-   </ol>
-   </nav>
    +

    EPUB 3 uses the epub:type attribute to identify the page list in the navigation document. The attribute is used on a nav element with the value "page-list" (note the different hyphenation). The ARIA role attribute has no effect unless the navigation document can be directly accessed by users (i.e., the document is in the EPUB spine). Like the previous HTML example, the contents of the nav element is a list of links to the page break locations.

    + 
    <nav epub:type="page-list" role="doc-pagelist" aria-labelledby="pglist">
+  <h2 id="pglist">Page List</h2>
+  <ol>
+    <li><a href="chapter01.xhtml#page001">1</a></li>
+    <li><a href="chapter01.xhtml#page002">2</a></li>
+    <li><a href="chapter01.xhtml#page003">3</a></li>
+    ...
+  </ol>
+</nav>

    Page list in EPUB 2 and DAISY publications

    -

    The EPUB 2 and DAISY 3 formats both use an XML grammar called the NCX for expressing navigation aids. The page list is defined within the ncx element using the pageList tag. Each pageTarget within this element identifies a page break, providing both a label and a destination.

    - 
    <ncx xmlns="http://www.daisy.org/z3986/2005/ncx/"
+				
    The EPUB 2 and DAISY 3 formats both use an XML grammar called the NCX for expressing navigation aids. The page list is defined within the ncx element using the pageList tag. Each pageTarget within this element identifies a page break, providing both a label and a destination.
    
+
    <ncx xmlns="http://www.daisy.org/z3986/2005/ncx/"
      version="2005-1"
      xml:lang="en-US">
-   …
-   <pageList>
-      <pageTarget id="p1" type="normal" value="1">
-         <navLabel><text>1</text></navLabel>
-         <content src="content.html#p001"/>
-      </pageTarget>
-      <pageTarget id="p2" type="normal" value="2">
-         <navLabel><text>2</text></navLabel>
-         <content src="content.html#p002"/>
-      </pageTarget>
-   </pageList>
+  ...
+  <pageList>
+    <pageTarget id="p1" type="normal" value="1">
+      <navLabel><text>1</text></navLabel>
+      <content src="content.html#p001"/>
+    </pageTarget>
+    <pageTarget id="p2" type="normal" value="2">
+      <navLabel><text>2</text></navLabel>
+      <content src="content.html#p002"/>
+    </pageTarget>
+  </pageList>
 </ncx>
    @@ -88,9 +87,9 @@

    Go to page mechanism

    Resources

    @@ -98,9 +97,9 @@

    Tests

    Procedure

      -
    1. Check that a page-selection mechanism exists in the publication.
      2. -
    2. Check that all the static page break locations in the publication are represented in the selection mechanism.
      3. -
    3. Check that the entries in the page-selection mechanism link to the correct location in the publication.
      4. +
    4. Check that a page-selection mechanism exists in the publication.
      5. +
    5. Check that all the static page break locations in the publication are represented in the selection mechanism.
      6. +
    6. Check that the entries in the page-selection mechanism link to the correct location in the publication.
    From 0d04f27da5bba16a5055f0a632af6257261b4770 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 8 Sep 2023 14:45:42 -0700 Subject: [PATCH 58/67] Update H100 for syntax highlighting --- techniques/html/H100.html | 25 +++++++++---------------- 1 file changed, 9 insertions(+), 16 deletions(-) diff --git a/techniques/html/H100.html b/techniques/html/H100.html index f86fd4d95c..6c04546f6c 100644 --- a/techniques/html/H100.html +++ b/techniques/html/H100.html @@ -1,11 +1,9 @@ - Providing properly marked up email and password inputs -

    Providing properly marked up email and password inputs

    @@ -26,23 +24,19 @@

    Description

    Examples

    properly marked up email and password inputs

    -

    A secure website has an email and password based login form.

    - 
    -
-<form method="post" action="login">
- <div>
-   <label for="email">Email</label>
-   <input id="email" type="email" autocomplete="email" ... >
+        
    A secure website has an email and password based login form.
    
+        
    <form method="post" action="login">
+  <div>
+    <label for="email">Email</label>
+    <input autocomplete="email" id="email" type="email" ...>
   </div>
   <div>
-    <label for="password">Password</label>
-    <input id="password" type="password" autocomplete="current-password" ... >
+    <label for="password&quo">Password</label>
+    <input autocomplete="current-password" id="password" type="password" ...>
   </div>
-    <input type="submit" value="Login" >
+    <input type="submit" value="Login">
   </div>
-</form>
-
-			
    
+</form>
    @@ -69,5 +63,4 @@

    Resources

    - From 9dd6fcc1212179285398a5f480c4d873aaab4619 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 8 Sep 2023 14:54:32 -0700 Subject: [PATCH 59/67] Update H101 for syntax highlighting (and a typo) --- techniques/html/H101.html | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/techniques/html/H101.html b/techniques/html/H101.html index 3d65ca78c1..e80786c60f 100644 --- a/techniques/html/H101.html +++ b/techniques/html/H101.html @@ -48,20 +48,20 @@

    Examples

    Simple landmarks

    The following example shows how landmarks might be added to an HTML document:

    - 
    <header> site logo and name, etc. here </header>
+
    <header> site logo and name, etc. here </header>
 <form aria-label="site search"> search functionality here </form>
 <nav> a list of navigation links here </nav>
 <main> the page's main content here </main>
-<section> a sponsor's promotion here </aside>
+<section> a sponsor's promotion here </section>
 <aside> sidebar content here </aside>
-<footer> site contact details, copyright information, etc. here </footer>
    
+<footer> site contact details, copyright information, etc. here </footer>

    Multiple landmarks of the same type and aria-labelledby

    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 nav element is used multiple times on a page, each instance may have a unique label specified using aria-labelledby:

    -
    <nav aria-labelledby="site-nav-heading">
+
    <nav aria-labelledby="site-nav-heading">
   <h2 id="site-nav-heading">Site</h2>
   <ul>
     <li><a href="/news">News</a></li>  
@@ -76,14 +76,14 @@ 
    Multiple landmarks of the same type and aria-labelledby
    
     <li><a href="/local-weather">Local Weather</a></li>
     <li><a href="/local-sport">Local Sport</a></li>
   </ul>
-</nav>
    
+</nav>

    Multiple landmarks of the same type and aria-label

    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:

    -
    <nav aria-label="Vehicles">
+
    <nav aria-label="Vehicles">
   <ul>
     <li><a aria-current="page" href="/cars">Cars</a></li>
     <li><a href="/trucks">Trucks</a></li>
@@ -98,17 +98,17 @@ 
    Multiple landmarks of the same type and aria-label
    
     <li><a href="/cars-working">Rugged Cars For Working</a></li>
     <li><a href="/cars-commuting">Cars For Suburban Commuting</a></li>
   </ul>
-</nav>
    
+</nav>

    Search form

    The following example shows a search form. A form element must have an accessible name to be exposed as a landmark area:

    -
    <form aria-labelledby="search-label">
+
    <form aria-labelledby="search-label">
   <label for="product-search" id="search-label">Search</label>
   <input id="product-search" placeholder="title, author, or ISBN" type="text">
   <button type="submit">Find Books</button>
-</form>
    
+</form>
    From 557739e9f9038f5f9f67df10cc565a4e22651f86 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 8 Sep 2023 15:37:17 -0700 Subject: [PATCH 60/67] Adding an abbr --- techniques/html/H77.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/html/H77.html b/techniques/html/H77.html index 1943967c70..abcc8dfdb8 100644 --- a/techniques/html/H77.html +++ b/techniques/html/H77.html @@ -22,7 +22,7 @@

    Description

    otherwise unclear link when the list item is the nearest enclosing block-level ancestor element. The description lets a user distinguish this link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link. - Note that simply providing the URI of the destination is generally not sufficiently + Note that simply providing the URI of the destination is generally not sufficiently descriptive.

    These descriptions will be most useful to the user if the additional information needed to understand the link precedes the link. If the additional information follows the link, there can be confusion and difficulty for screen reader users who are reading through the page in order (top to bottom).

    From b9baf15f881a598409901ac97349dbca80484f53 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Wed, 29 Nov 2023 01:39:55 +0000 Subject: [PATCH 61/67] Update techniques/html/H100.html --- techniques/html/H100.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/html/H100.html b/techniques/html/H100.html index 6c04546f6c..d7a3e51fea 100644 --- a/techniques/html/H100.html +++ b/techniques/html/H100.html @@ -31,7 +31,7 @@

    properly marked up email and password inputs

    <input autocomplete="email" id="email" type="email" ...> </div> <div> - <label for="password&quo">Password</label> + <label for="password">Password</label> <input autocomplete="current-password" id="password" type="password" ...> </div> <input type="submit" value="Login"> From bd25fe8f5e20991860dfd0d62634ff18e9753c54 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Wed, 29 Nov 2023 02:07:02 +0000 Subject: [PATCH 62/67] Fixes --- techniques/html/H86.html | 2 +- techniques/html/H93.html | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/techniques/html/H86.html b/techniques/html/H86.html index c32b672692..12e6f56efb 100644 --- a/techniques/html/H86.html +++ b/techniques/html/H86.html @@ -33,7 +33,7 @@

    Marking up emojis in a sentence

    This shows a technique to mark up emojis with accessible names that differ from their default. Because you can't use an alt attribute on a span element and the ARIA recommendation disallows accessible names on generic elements, to give the emojis accessible names they are defined as images with the ARIA role="img" property which then allows the creation of an accessible name using the aria-label property.

    <p>I smiled at my friend and gestured 
    <span aria-label="you" role="img">👉🏾</span>
-   <span aria-label="rock" role="img">🤘🏾</span>!
+   <span aria-label="rock" role="img">🤘🏾</span>!
 </p>
    diff --git a/techniques/html/H93.html b/techniques/html/H93.html index fea525c298..6dffb4eaf7 100644 --- a/techniques/html/H93.html +++ b/techniques/html/H93.html @@ -24,9 +24,9 @@

    Examples

    Duplicate id attributes in form elements

    In this example, the first name and last name inputs both have an id attribute with the same value. Due to the way accessible names are computed, this results in the last name input having no accessible name.

    -
    <label for="fname">First Name</label>
+
    <label for="fname">First Name</label>
 <input autocomplete="given-name" id="fname" type="text">
-<label for="lname">Last Name</label>
+<label for="lname">Last Name</label>
 <input autocomplete="family-name" id="fname" type="text">
    From b6e1cbdc5a1d7fc6372be789b4f7b37cf8899b77 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Wed, 29 Nov 2023 02:09:34 +0000 Subject: [PATCH 63/67] preserve whitespace for `
    `

---
 techniques/html/H100.html |  2 +-
 techniques/html/H2.html   |  2 +-
 techniques/html/H24.html  |  2 +-
 techniques/html/H25.html  |  2 +-
 techniques/html/H28.html  |  8 ++++----
 techniques/html/H30.html  | 12 ++++++------
 techniques/html/H32.html  |  2 +-
 techniques/html/H33.html  |  2 +-
 techniques/html/H36.html  |  2 +-
 techniques/html/H37.html  |  2 +-
 techniques/html/H43.html  |  2 +-
 techniques/html/H44.html  |  6 +++---
 techniques/html/H48.html  | 10 +++++-----
 techniques/html/H49.html  | 10 +++++-----
 techniques/html/H51.html  |  2 +-
 techniques/html/H53.html  |  8 ++++----
 techniques/html/H54.html  |  2 +-
 techniques/html/H57.html  |  2 +-
 techniques/html/H58.html  |  2 +-
 techniques/html/H59.html  |  2 +-
 techniques/html/H62.html  |  2 +-
 techniques/html/H63.html  |  2 +-
 techniques/html/H65.html  |  6 +++---
 techniques/html/H67.html  |  2 +-
 techniques/html/H69.html  |  6 +++---
 techniques/html/H70.html  |  2 +-
 techniques/html/H71.html  |  6 +++---
 techniques/html/H76.html  |  2 +-
 techniques/html/H77.html  |  4 ++--
 techniques/html/H78.html  |  2 +-
 techniques/html/H79.html  |  2 +-
 techniques/html/H80.html  |  6 +++---
 techniques/html/H81.html  |  4 ++--
 techniques/html/H83.html  |  2 +-
 techniques/html/H84.html  |  2 +-
 techniques/html/H85.html  |  4 ++--
 techniques/html/H86.html  |  8 ++++----
 techniques/html/H89.html  |  4 ++--
 techniques/html/H90.html  | 10 +++++-----
 techniques/html/H91.html  | 32 ++++++++++++++++----------------
 techniques/html/H93.html  |  2 +-
 techniques/html/H95.html  |  4 ++--
 techniques/html/H96.html  |  4 ++--
 techniques/html/H97.html  |  6 +++---
 techniques/html/H98.html  |  2 +-
 techniques/html/H99.html  |  8 ++++----
 46 files changed, 108 insertions(+), 108 deletions(-)

diff --git a/techniques/html/H100.html b/techniques/html/H100.html
index d7a3e51fea..9111310b9b 100644
--- a/techniques/html/H100.html
+++ b/techniques/html/H100.html
@@ -25,7 +25,7 @@ 
    Examples
    
       
    
         
    properly marked up email and password inputs
    
         
    A secure website has an email and password based login form.
    
-        
    <form method="post" action="login">
+        
    <form method="post" action="login">
   <div>
     <label for="email">Email</label>
     <input autocomplete="email" id="email" type="email" ...>
diff --git a/techniques/html/H2.html b/techniques/html/H2.html
index 84b2795481..d3235b41a0 100644
--- a/techniques/html/H2.html
+++ b/techniques/html/H2.html
@@ -29,7 +29,7 @@ 
    Examples
    
          
          
    The icon and text are contained in the same a element.
    
          
-
    <a href="products.html">
+
    <a href="products.html">
   <img src="icon.gif" alt="">Products page
 </a>
    
       
    
diff --git a/techniques/html/H24.html b/techniques/html/H24.html
index 9559b14fc8..d9dc9e23d4 100644
--- a/techniques/html/H24.html
+++ b/techniques/html/H24.html
@@ -29,7 +29,7 @@ 
    Examples
    
       
    
          
    This example uses the alt attribute of the area element to provide text that describes the purpose of the image map areas.
    
          
-
    <img src="welcome.gif" usemap="#map1" 
+
    <img src="welcome.gif" usemap="#map1" 
      alt="Areas in the library. Select an area for more information on that area."> 
 <map id="map1" name="map1">
   <area shape="rect" coords="0,0,30,30" href="reference.html" alt="Reference">
diff --git a/techniques/html/H25.html b/techniques/html/H25.html
index a8f970ad5b..27211d7778 100644
--- a/techniques/html/H25.html
+++ b/techniques/html/H25.html
@@ -25,7 +25,7 @@ 
    Examples
    
       
       
          
    This example defines a document's title.
    
          
-
    <!doctype html>
+
    <!doctype html>
 <html lang="en">
   <head>
     <title>The World Wide Web Consortium</title>     
diff --git a/techniques/html/H28.html b/techniques/html/H28.html
index 38c58de8b9..55c8114271 100644
--- a/techniques/html/H28.html
+++ b/techniques/html/H28.html
@@ -25,13 +25,13 @@ 
    Description
    
       
    Examples
    
       
    
          
    Using abbr element to expand abbreviations
    
-
    <p>Sugar is commonly sold in 5 <abbr title="pound">lb.</abbr> bags.</p>
+
    <p>Sugar is commonly sold in 5 <abbr title="pound">lb.</abbr> bags.</p>
 <p>Welcome to the <abbr title="World Wide Web">WWW</abbr>!</p>
    
       
    
 
       
    
          
    Using dfn and abbr element to define abbreviations
    
-
    <p>Tasini 
+
    <p>Tasini 
   <dfn id="etal"><abbr title="and others">et al.</abbr></dfn>
   <abbr title="versus">v.</abbr>
   The New York Times <abbr title="and others">et al.</abbr> is the landmark lawsuit 
@@ -41,12 +41,12 @@ 
    Using dfn and 
          
    Using the abbr element to expand an acronym
    
-         
    <p>Recent updates to the <abbr title="Cascading Style Sheets">CSS</abbr> color module ...</p>
    
+         
    <p>Recent updates to the <abbr title="Cascading Style Sheets">CSS</abbr> color module ...</p>
    
       
    
 
       
    
          
     Using the abbr element to expand an initialism
    
-         
    <p><abbr title="British Broadcasting Corporation">BBC</abbr></p>
    
+         
    <p><abbr title="British Broadcasting Corporation">BBC</abbr></p>
    
       
    
 
    
    
diff --git a/techniques/html/H30.html b/techniques/html/H30.html
index 0c12263282..92be5a1bd7 100644
--- a/techniques/html/H30.html
+++ b/techniques/html/H30.html
@@ -26,21 +26,21 @@ 
    Examples
    
 		 
    
 			 
    Describing the purpose of a link in HTML in the text content of the a element.
    
          
-
    <a href="routes.html">
+
    <a href="routes.html">
   Current routes at Boulders Climbing Gym
 </a>
    
 		
    
     
    
 			
    Using the alt attribute for the img element to describe the purpose of a graphical link.
    
          
-
    <a href="routes.html">
+
    <a href="routes.html">
   <img src="topo.gif" alt="Current routes at Boulders Climbing Gym"> 
 </a> 
    
     
    
     
    
 			
    Using an empty alt attribute when the anchor (a) element contains text that describes the purpose of the link in addition to the img element. Note that the link text will appear on the page next to the image.
    
          
-
    <a href="routes.html">
+
    <a href="routes.html">
   <img src="topo.gif" alt="">
   Current routes at Boulders Climbing Gym
 </a>
    
@@ -48,7 +48,7 @@ 
    Examples
    
     
    
 			
    A site allows users to provide feedback on products by clicking on the "Feedback" link in a product detail page. Other users are able to provide a response to any feedback. When a response to the user's feedback is available, the feedback link displays an icon, with "response received" as its text alternative, after the "Feedback" text. The site's help document describes this icon as a speech bubble containing quotation marks and includes the icon, with its text alternative, as an example. The same text alternative is used in the product detail pages (when a response is available) to help ensure that users following the documentation can identify the image correctly as documented.
    
          
-
    <a href="prod_123_feedback.htm">
+
    <a href="prod_123_feedback.htm">
   Feedback 
   <img src="response.gif" width="15" height="15" alt="response received">
 </a>
    
@@ -56,7 +56,7 @@ 
    Examples
    
     
    
 			
    A link contains text and an icon, and the icon provides additional information about the target.
    
          
-
    <a href="WMFP.pdf">
+
    <a href="WMFP.pdf">
   Woodend Music Festival Program
   <img src="pdficon.gif" alt="PDF format">
 </a>
    
@@ -67,7 +67,7 @@ 
    Examples
    
 					
    Many users prefer to know the file type when opening a file that results in opening a new application to view the file, so it is often regarded as useful to include this additional information. However, this is not required for compliance with this Success Criterion.
    
 				
          
-
    <ul>
+
    <ul>
   <li>
     <a href="2009mycorp_report.pdf">MyCorp 2009 Annual Report (PDF)</a>
   </li>
diff --git a/techniques/html/H32.html b/techniques/html/H32.html
index 3886ac73aa..558db8d978 100644
--- a/techniques/html/H32.html
+++ b/techniques/html/H32.html
@@ -24,7 +24,7 @@ 
    Examples
    
       
    
          
    A basic example of a form with a submit button
    
          
-
    <form action="/subscribe" method="post">
+
    <form action="/subscribe" method="post">
  <p>Enter your email address to subscribe to our mailing list.</p>
  <label for="address">Your email address:</label>
  <input autocomplete="email" id="address" name="address" type="text"> 
diff --git a/techniques/html/H33.html b/techniques/html/H33.html
index 4671bf04b8..bb6f12266b 100644
--- a/techniques/html/H33.html
+++ b/techniques/html/H33.html
@@ -24,7 +24,7 @@ 
    Description
    
 		
    Examples
    
     
    
 			
    Clarifying the purpose of a link
    
-      	
    <a href="https://example.com/world/africa/kenya.elephants.ap/index.html" 
+      	
    <a href="https://example.com/world/africa/kenya.elephants.ap/index.html" 
    title="Read more about failed elephant evacuation">
    Evacuation Crumbles Under Jumbo Load
 </a>
    
diff --git a/techniques/html/H36.html b/techniques/html/H36.html
index cd402f7c9b..12b529fd96 100644
--- a/techniques/html/H36.html
+++ b/techniques/html/H36.html
@@ -24,7 +24,7 @@ 
    Examples
    
          
    
             
    An input element with an alt attribute
    
          
-
    <form action="/find" method="post" role="search">
+
    <form action="/find" method="post" role="search">
   <label for="look-up">Find books<label>
   <input id="look-up" type="text">
   <input alt="Search" src="button.gif" type="image">
diff --git a/techniques/html/H37.html b/techniques/html/H37.html
index 01ffa0128e..f900de49df 100644
--- a/techniques/html/H37.html
+++ b/techniques/html/H37.html
@@ -32,7 +32,7 @@ 
    Examples
    
                 text "Free newsletter. Get free recipes, news, and more. Learn more." The alt text
                 matches the text in the image.
    
 
-
    <img src="newsletter.gif" alt="Free newsletter. 
+
    <img src="newsletter.gif" alt="Free newsletter. 
  Get free recipes, news, and more. Learn more.">
    
       
    
       
    
diff --git a/techniques/html/H43.html b/techniques/html/H43.html
index 70383be0a5..c574426810 100644
--- a/techniques/html/H43.html
+++ b/techniques/html/H43.html
@@ -25,7 +25,7 @@ 
    Description
    
          
    Examples
    
          
    
             
    A table with multiple rows of headers
    
-
    <table>
+
    <table>
   <tr>
     <th rowspan="2" id="h">Homework</th>
     <th colspan="3" id="e">Exams</th>
diff --git a/techniques/html/H44.html b/techniques/html/H44.html
index 41c144dfac..808f4b4f72 100644
--- a/techniques/html/H44.html
+++ b/techniques/html/H44.html
@@ -80,19 +80,19 @@ 
    Examples
    
          
    A text input field
    
          
    The text field in this example has the explicit label of "First name:". The label element's for attribute matches the id attribute of the input element.
    
          
-
    <label for="firstname">First name:</label> 
+
    <label for="firstname">First name:</label> 
 <input id="firstname" name="firstname" type="text">
    
       
    
       
    
          
    A checkbox
    
-
    <input checked id="markuplang" name="computerskills" type="checkbox">
+
    <input checked id="markuplang" name="computerskills" type="checkbox">
 <label for="markuplang">HTML</label>
    
       
    
       
    
          
    A group of radio buttons
    
          
    A small, related group of radio buttons with a clear description and labels for each individual element.
    
          
-
    <h1>Doughnut Selection</h1>
+
    <h1>Doughnut Selection</h1>
 <form action="/buy-doughnuts" method="post">
   <fieldset>
     <legend>Pick the doughnut you would like</legend>
diff --git a/techniques/html/H48.html b/techniques/html/H48.html
index f6373f19ec..6fdc13feaa 100644
--- a/techniques/html/H48.html
+++ b/techniques/html/H48.html
@@ -28,7 +28,7 @@ 
    Examples
    
                
    A list showing steps in a sequence
    
                
    This example uses an ordered list to show the sequence of steps in a process.
    
          
-
    <ol>
+
    <ol>
   <li>Mix flour, eggs, milk, and seasoning in a bowl.</li>
   <li>Whisk until the batter is smooth.</li>
   <li>Rest the batter for at least 30 minutes before cooking.</li>
@@ -38,7 +38,7 @@ 
    A list showing steps in a sequence
    
          
    A grocery list 
    
          
    This example shows an unordered list of items to buy at the store.
    
          
-
    <ul>
+
    <ul>
   <li>Milk</li>
   <li>Eggs</li>
   <li>Butter</li>
@@ -48,7 +48,7 @@ 
    A grocery list 
    
          
    A word and its definition
    
          
    This example uses a description list to group a definition with the term that is being defined.
    
 
-
    <dl>
+
    <dl>
   <dt>blink</dt>
   <dd>turn on and off between 0.5 and 3 times per second</dd>
 </dl>
    
@@ -57,7 +57,7 @@ 
    A word and its definition
    
          
    Contact information using a description list
    
          
    This example uses a description list to mark up pairs of related items. The pairs themselves are a logically related list.
    
 
-
    <dl>
+
    <dl>
   <div>
     <dt>Name:</dt>
     <dd>Taisha Silveri</dd>
@@ -78,7 +78,7 @@ 
    Contact information using a description list
    
          
    Using lists to group links
    
          
    In this example the links are grouped using the ul and li elements.
    
          
-
    <h2 id="product-categories">Product Categories</h2>
+
    <h2 id="product-categories">Product Categories</h2>
 <nav aria-labelledby="product-categories">
   <ul>
     <li><a href="kitchen.html">Kitchen</a></li>
diff --git a/techniques/html/H49.html b/techniques/html/H49.html
index 6e464d6b55..d288eb9ca5 100644
--- a/techniques/html/H49.html
+++ b/techniques/html/H49.html
@@ -38,7 +38,7 @@ 
    Using the em and  ... What she <em>really</em> meant to say was, &quot;This is not OK, 
+         
     ... What she <em>really</em> meant to say was, &quot;This is not OK, 
  it is <strong>excellent</strong>&quot;! ...
    
       
    
       
    
@@ -46,7 +46,7 @@ 
    Using the blockquote element to mark up l
          
             
    This example also demonstrates the use of the cite element to specify a reference.
    
          
-         
    <p>The following is an excerpt from the <cite>The Story Of My Life</cite> 
+         
    <p>The following is an excerpt from the <cite>The Story Of My Life</cite> 
    by Helen Keller:</p>
 <blockquote>
   <p>Even in the days before my teacher came, I used to feel along the square stiff
@@ -60,7 +60,7 @@ 
    Using the q element to mark up a shorter
          
          
    Quotation marks aren't manually added to the quote because they are added by the user agent.
    
          
-
    <p>Helen Keller said, <q>Self-pity is our worst enemy and if we yield to it, 
+
    <p>Helen Keller said, <q>Self-pity is our worst enemy and if we yield to it, 
    we can never do anything good in the world</q>.</p>
    
       
    
       
    
@@ -68,13 +68,13 @@ 
    Using the sup and sup and sub elements must be used only to mark up typographical conventions with specific meanings, not for typographical presentation for presentation's sake.
    
          
-
    <p>Henry won 1<sup>st</sup> place in the 9<sup>th</sup> grade science competition.</p>
+
    <p>Henry won 1<sup>st</sup> place in the 9<sup>th</sup> grade science competition.</p>
 <p>The chemical notation for water is H<sub>2</sub>O.</p>
    
       
    
    	
    
          
    Using the code element to mark up code
    
    		
    This example shows use of the code element to provide visual emphasis for a CSS rule:
    
-   		
    <code>
+   		
    <code>
 .trial {
   background-image: url(30daytrial.jpg);
   background-position: left top;
diff --git a/techniques/html/H51.html b/techniques/html/H51.html
index 9bc0a6e748..1ee7453235 100644
--- a/techniques/html/H51.html
+++ b/techniques/html/H51.html
@@ -39,7 +39,7 @@ 
    A schedule marked up as a simple data table with column and row headers
    
             
    This example uses markup for a simple data table. The first row shows the days of the week. Time intervals are shown in the first column. These cells are marked with the th element. This identifies the days of the week as column headers and the time intervals as row headers.
    
             
    Screen readers speak header information that changes as the user navigates the table. Thus, when screen reader users move to left or right along a row, they will hear the day of the week (the column header) followed by the appointment (if any). They will hear the time interval as they move up or down within the same column.
    
          
-
    <table>
+
    <table>
   <tr>
     <th>Time</th>
     <th>Monday</th>
diff --git a/techniques/html/H53.html b/techniques/html/H53.html
index fa90d6502e..e4e84ce5b2 100644
--- a/techniques/html/H53.html
+++ b/techniques/html/H53.html
@@ -21,26 +21,26 @@ 
    Description
    
 		
    Examples
    
       
    
 				
    An object includes a long description that describes it
    
-				
    <object classid="https://www.example.com/analogclock.py">
+				
    <object classid="https://www.example.com/analogclock.py">
   <p>Here is some text that describes the object and its operation.</p>
 </object>
    
       
    
       
    
          
    An object includes non-text content with a text alternative 
    
-         
    <object classid="https://www.example.com/animatedlogo.py">
+         
    <object classid="https://www.example.com/animatedlogo.py">
   <img src="staticlogo.gif" alt="Company Name">
 </object>
    
       
    
       
    
          
    The image object has content that provides a brief description of the function of the image
    
-         
    <object data="companylogo.gif" type="image/gif">
+         
    <object data="companylogo.gif" type="image/gif">
   <p>Company Name</p>
 </object>
    
       
    
       
    
 				
    This example takes advantage of the fact the object elements may be nested to provide for alternative representations of information.
    
          
-         
    <object classid="java:Press.class" width="500" height="500">
+         
    <object classid="java:Press.class" width="500" height="500">
   <object data="pressure.mpeg" type="video/mpeg">
     <object data="pressure.gif" type="image/gif">
       As temperature increases, the molecules in the balloon...
diff --git a/techniques/html/H54.html b/techniques/html/H54.html
index 056806dd05..5721d158ce 100644
--- a/techniques/html/H54.html
+++ b/techniques/html/H54.html
@@ -27,7 +27,7 @@ 
    Examples
    
             
    
             
    The following code snippet demonstrates the use of the dfn element.
    
          
-         
    <p>The Web Content Accessibility Guidelines require that non-text content
+         
    <p>The Web Content Accessibility Guidelines require that non-text content
 has a text alternative. <dfn>Non-text content</dfn> is content that is not a sequence
 of characters that can be programmatically determined or where the sequence is
 not expressing something in human language; this includes ASCII Art (which is a
diff --git a/techniques/html/H57.html b/techniques/html/H57.html
index 496f885e06..b7d1ff4274 100644
--- a/techniques/html/H57.html
+++ b/techniques/html/H57.html
@@ -32,7 +32,7 @@ 
    Examples
    
       
    
          
    Defining the content of an HTML document to be in French
    
 
    
-
    <!doctype html>
+
    <!doctype html>
 <html lang="fr"> 
 <head>
   <meta charset="utf-8">
diff --git a/techniques/html/H58.html b/techniques/html/H58.html
index 76f4f6202f..fd19e8e35e 100644
--- a/techniques/html/H58.html
+++ b/techniques/html/H58.html
@@ -28,7 +28,7 @@ 
    Examples
    
       
    
          
    The use of the lang attribute to define a quote written in German
    
 
-
    <blockquote lang="de">
+
    <blockquote lang="de">
   <p>
     Da dachte der Herr daran, ihn aus dem Futter zu schaffen,
     aber der Esel merkte, daß kein guter Wind wehte, lief fort
diff --git a/techniques/html/H59.html b/techniques/html/H59.html
index 32179a4878..2339eba34a 100644
--- a/techniques/html/H59.html
+++ b/techniques/html/H59.html
@@ -28,7 +28,7 @@ 
    Examples
    
       
       
 				
    A Web page for Chapter 2 of an on-line book might contain the following links within the head section.
    
          
-
    <link rel="prev" href="chapter01.html" title="01. Why Volunteer?">
+
    <link rel="prev" href="chapter01.html" title="01. Why Volunteer?">
 <link rel="next" href="chapter03.html" title="03. Who Volunteers?" />
    
       
    
    
    
diff --git a/techniques/html/H62.html b/techniques/html/H62.html
index 1182cd98a4..086ac636db 100644
--- a/techniques/html/H62.html
+++ b/techniques/html/H62.html
@@ -43,7 +43,7 @@ 
    Ruby markup providing pronunciation information for an initialism
    
          
    Ruby annotation for Japanese
    
          
    The following is an example in Japanese. For Japanese, the Ruby is used to give the reading of Han characters (Kanji). the Ruby parenthesis element rp is used for user agents that do not support Ruby annotations to indicate that the text in the rt element provides the pronunciation information. The pronunciation information is rendered in parentheses immediately following the base text. (User agents that support Ruby do not show the parentheses.)
    
          
-
    <p>
+
    <p>
   <ruby>
     <rb>慶應大学</rb>
     <rp>(</rp>
diff --git a/techniques/html/H63.html b/techniques/html/H63.html
index 3da231a42c..d71f20d176 100644
--- a/techniques/html/H63.html
+++ b/techniques/html/H63.html
@@ -37,7 +37,7 @@ 
    Examples
    
 			
    A simple schedule
    
 			
    In the following example, the first column contains serial numbers for rows in the table, and the second column contains the key value for the row. The cells in the second column may then use scope="row". The cells in the first row too are marked up with td and use scope="col".
    
          
-
    <table>
+
    <table>
   <caption>Contact Information</caption>
   <tr>
     <td></td>
diff --git a/techniques/html/H65.html b/techniques/html/H65.html
index a470af6c9c..ae22ef8b53 100644
--- a/techniques/html/H65.html
+++ b/techniques/html/H65.html
@@ -23,7 +23,7 @@ 
    Examples
    
 		
    
 			
    A pulldown menu that limits the scope of a search
    
       
    A search form uses a pulldown menu to limit the scope of the search. The pulldown menu is immediately adjacent to the text field used to enter the search term. The relationship between the search field and the pulldown menu is clear to users who can see the visual design, which does not have room for a separate visible label. The title attribute is used to identify the select menu. The title attribute can be spoken by screen readers or displayed as a tool tip for people using screen magnifiers. There must be visual information on the page which allows sighted users to understand the purpose of the form controls and user agents.
       
-
    <label for="search-term">Search for:</label>
+
    <label for="search-term">Search for:</label>
 <input id="search-term" name="search-term" type="text" value="">
 <select title="Search in" id="scope">
   ...
@@ -33,7 +33,7 @@ 
    A pulldown menu that limits the scope of a search
    
 				
    Input fields for a phone number
     
 				
    A Web page contains controls for entering a phone number in the United States, with three fields for area code, exchange, and last four digits.
    
          
-
    <fieldset>
+
    <fieldset>
   <legend>Phone number</legend>
   <input id="area-code" name="area-code" title="Area Code" 
    type="text" size="3" value="">
@@ -46,7 +46,7 @@ 
    Input fields for a phone number
    
       
    
 				
    A Search Function
    
 				
    A Web page contains a text field where the user can enter search terms and a button labeled "Search" for performing the search. The title attribute is used to identify the form control and the button is positioned right after the text field so that it is clear to the user that the text field is where the search term should be entered.
     
-
    <input type="text" title="Type search term here"> <input type="submit" value="Search">
+
    <input type="text" title="Type search term here"> <input type="submit" value="Search">
 
    
       
    
       
    
diff --git a/techniques/html/H67.html b/techniques/html/H67.html
index d80d71dd35..3b2281ec83 100644
--- a/techniques/html/H67.html
+++ b/techniques/html/H67.html
@@ -27,7 +27,7 @@ 
    Description
    
       
    Examples
    
       
    
 				
    Inserting a decorative image on a Web page
     
-
    <img alt="" src="squiggle.gif" height="20" width="20">
    
+
    <img alt="" src="squiggle.gif" height="20" width="20">
    
       
    
    
    
    
    
diff --git a/techniques/html/H69.html b/techniques/html/H69.html
index 3baa07ac97..f6931c203d 100644
--- a/techniques/html/H69.html
+++ b/techniques/html/H69.html
@@ -37,7 +37,7 @@ 
    Examples
    
 					
    Organizing the sections of a search page
    
          	
    This example marks up each section heading using h2 elements.
    
          
-
    <h1>Search Technical Periodicals</h1>
+
    <h1>Search Technical Periodicals</h1>
  <h2>Search</h2>
  <form action="/search" role="search">
   <label for="searchInput">Enter search topic:</label>
@@ -61,7 +61,7 @@ 
    Organizing the sections of a search page
    
          
    Headings show the overall organization of the content
    
          
    In this example, heading markup is used to make the navigation and main content sections perceivable.
    
          
-
    <main>
+
    <main>
   <h1>Why Monday Monkey Lives For The Weekend</h1>
   ... text, images, and other material making up the main content ...
 </main>
@@ -77,7 +77,7 @@ 
    Headings show the overall organization of the content
    
       
    
          
    Headings show the organization of material within the main content
    
 
-
    <!doctype html>
+
    <!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
diff --git a/techniques/html/H70.html b/techniques/html/H70.html
index ce12ad2de2..d5cfdba216 100644
--- a/techniques/html/H70.html
+++ b/techniques/html/H70.html
@@ -39,7 +39,7 @@ 
    Examples
    
       
    
 				
    The following example shows the use of two frames to organize content. The source of the first frame is the Web page, navigation.html, which contains the HTML for the navigation. This frame has a title attribute which identifies it as a navigation bar. The second frame contains the main content of the site as indicated by the source parameter of main.html and the title attribute, "Main News Content" which identifies its function.
    
          
-
    <frameset cols="20%, *">
+
    <frameset cols="20%, *">
   <frame src="navigation.html" name="navbar" title="Navigation Bar">
   <frame src="main.html" name="maincontent" title="Main News Content">
   <noframes>
diff --git a/techniques/html/H71.html b/techniques/html/H71.html
index d6dc93f237..791948b686 100644
--- a/techniques/html/H71.html
+++ b/techniques/html/H71.html
@@ -30,7 +30,7 @@ 
    Examples
    
             
    A multiple choice test
       
             
    This example shows a test item with one question and five possible answers. Each answer is represented by a radio button (input type="radio"). The radio buttons are contained within a fieldset. The test question is tagged with the legend element. Each field has the same name attribute, indicating these radio buttons are related, and should be grouped as shown. Also note that while the name attributes have the same value, the id attributes' values must be unique.
    
          
-
    <fieldset>
+
    <fieldset>
   <legend>The play <cite>Hamlet</cite> was written by:</legend>
   <div>
     <input checked="checked" id="shakesp" name="hamlet" type="radio" value="a">
@@ -58,7 +58,7 @@ 
    A multiple choice test
    
          
    A set of checkboxes
    
          
    The User Profile page for a Web site allows users to indicate their interests by selecting multiple checkboxes. Each checkbox (input type="checkbox") has a label. The checkboxes are contained within a fieldset, and the legend element contains the prompt for the entire group of checkboxes.
    
          
-
    <fieldset>
+
    <fieldset>
   <legend>I am interested in the following (check all that apply):</legend>
   <div>
     <input id="photo" name="interests" type="checkbox" value="ph">
@@ -79,7 +79,7 @@ 
    A set of checkboxes
    
          
    Logically related controls
    
          
    In this example, form fields for residential and postal addresses are distinguished by the value of the legend in each fieldset grouping.
    
          
-
    <form action="/adduser" method="post">
+
    <form action="/adduser" method="post">
   <fieldset>
     <legend>Your Residential Address</legend>
     <div>
diff --git a/techniques/html/H76.html b/techniques/html/H76.html
index e937b76862..6bdc88dd8a 100644
--- a/techniques/html/H76.html
+++ b/techniques/html/H76.html
@@ -24,7 +24,7 @@ 
    Description
    
          
    Examples
    
          
    
             
    Instantly redirecting a page
    
-
    <!doctype html>
+
    <!doctype html>
 <html lang="en">    
   <head>
     <meta charset="utf-8">
diff --git a/techniques/html/H77.html b/techniques/html/H77.html
index abcc8dfdb8..13c64e49be 100644
--- a/techniques/html/H77.html
+++ b/techniques/html/H77.html
@@ -31,7 +31,7 @@ 
    Description
    
 		
    
 			
    Examples
    
       
    
-
    <ul>
+
    <ul>
   <li>
     Check out the video report for last year's 
     <a href="festival.html">National Folk Festival</a>.
@@ -47,7 +47,7 @@ 
    Examples
    
       
    
       
    
          
    A list of video games for download
    
-
    <ul>
+
    <ul>
   <li>
     <a href="zelda-tears.html">Legend Of Zelda: Tears Of The Kingdom</a>
     <a href="zelda-tears-images.html">See Images</a>
diff --git a/techniques/html/H78.html b/techniques/html/H78.html
index 10363e7008..df8c0c9e6f 100644
--- a/techniques/html/H78.html
+++ b/techniques/html/H78.html
@@ -27,7 +27,7 @@ 
    Examples
    
             
    
                
    Announcements content on a folk festival Web page
    
          
-
    <h3>The final 15</h3>
+
    <h3>The final 15</h3>
 <p>
   Coming soon to a town near you: the final 15 in the 
   National Folk Festival lineup.
diff --git a/techniques/html/H79.html b/techniques/html/H79.html
index 8100dadecb..c772d229f8 100644
--- a/techniques/html/H79.html
+++ b/techniques/html/H79.html
@@ -23,7 +23,7 @@ 
    Description
    
          
    Examples
    
          
    
             
    A table of rental car choices
    
-
    <table>
+
    <table>
   <caption>Available rental cars with cost per day</caption>
   <tr>
     <th>Type of car</th>
diff --git a/techniques/html/H80.html b/techniques/html/H80.html
index c6fcf1cfac..fcd30fbded 100644
--- a/techniques/html/H80.html
+++ b/techniques/html/H80.html
@@ -32,7 +32,7 @@ 
    Examples
    
 			
    Blocks of information on hotels
    
 			
    The information for each hotel consists of the hotel name, a description and a series of links to a map, photos, directions, guest reviews and a booking form.
    
 
-
    <h2><a href="royal_palm_hotel.html" id="royal-heading">Royal Palm Hotel</a></h2>
+
    <h2><a href="royal_palm_hotel.html" id="royal-heading">Royal Palm Hotel</a></h2>
 <nav aria-labelledby="royal-heading">
   <ul>
     <li><a href="royal-palm-hotel_map.html">Map</a></li>
@@ -56,7 +56,7 @@ 
    Blocks of information on hotels
    
       
    
       
    
 				
    A document provided in three formats
    
-
    <h2>Annual Report 2006-2007</h2>
+
    <h2>Annual Report 2006-2007</h2>
 <p> 
   <a href="annual-report-0607.html">HTML</a>
   <a href="annual-report-0607.pdf">PDF</a>
@@ -65,7 +65,7 @@ 
    A document provided in three formats
    
       
    
       
    
          
    Newspaper Web site
    
-
    <div class="card-link">
+
    <div class="card-link">
    <h2><a href="market-2023-09-27.html">Stock market soars as bullishness prevails</a></h2>
    <p>This week was a stellar week for the stock market as investing in gold rose 2%.</p>
 </div>
    
diff --git a/techniques/html/H81.html b/techniques/html/H81.html
index 33eb56d8c7..8083bfc2ba 100644
--- a/techniques/html/H81.html
+++ b/techniques/html/H81.html
@@ -32,7 +32,7 @@ 
    Description
    
             
    Examples
    
             
    
                
    A document provided in three formats
    
-
    <ul>
+
    <ul>
   <li>Annual Report 2021
     <ul> 
       <li>
@@ -65,7 +65,7 @@ 
    A document provided in three formats
    
          
    Blocks of information about hotels
    
          
    The information for each hotel consists of the hotel name, a description and a series of links to a map, photos, directions, guest reviews and a booking form.
    
          
-
    <nav>
+
    <nav>
   <ul>
     <li><a href="royal-palm-hotel.html">Royal Palm Hotel</a>
       <ul>
diff --git a/techniques/html/H83.html b/techniques/html/H83.html
index 3b0c197c27..2a8ca2c9d9 100644
--- a/techniques/html/H83.html
+++ b/techniques/html/H83.html
@@ -27,7 +27,7 @@ 
    Description
    
          
    Examples
    
          
    
             
    Using the target attribute in a link to indicate it will open in a new window
    
-         
    <a href="help.html" target="_blank">Show Help (opens new window)</a>
    
+         
    <a href="help.html" target="_blank">Show Help (opens new window)</a>
    
          
    
       
    
       
    
diff --git a/techniques/html/H84.html b/techniques/html/H84.html
index 160f8cd389..6179f20673 100644
--- a/techniques/html/H84.html
+++ b/techniques/html/H84.html
@@ -25,7 +25,7 @@ 
    Examples
    
          
    
             
    A calendar
    
             
    A Web page lets the user choose a quarter of any year and display the calendar for those months. After the user has set the quarter and year, they display the calendar by pressing the "Show" button. This example relies on client-side scripting to implement the action.
    
-
    <label for="quarter">Quarter:</label>
+
    <label for="quarter">Quarter:</label>
 <select id="quarter" name="quarter">
   <option value="1">Quarter 1 (January - March)</option>
   <option value="2">Quarter 2 (April - June)</option>
diff --git a/techniques/html/H85.html b/techniques/html/H85.html
index ca7925dbd0..daed5be30d 100644
--- a/techniques/html/H85.html
+++ b/techniques/html/H85.html
@@ -27,7 +27,7 @@ 
    Examples
    
       
    
         
    The following combo box collects data about favorite foods. Grouping by type allows users to select their preference more quickly.
    
          
-
    <form action="/favorite-food/" method="post">
+
    <form action="/favorite-food/" method="post">
   <label for="food">What is your favorite food?</label>
   <select id="food" name="food">
     <optgroup label="Fruits">
@@ -52,7 +52,7 @@ 
    Examples
    
          
   
    The following example shows how a multi-select box can make use of the optgroup element.
    
          
-  
    <form action="/animals/" method="post">
+  
    <form action="/animals/" method="post">
   <label for="animals">Pick your favorite animals:</label>
   <select id="animals" multiple name="animals" size="10">
     <optgroup label="Dinosaurs">
diff --git a/techniques/html/H86.html b/techniques/html/H86.html
index 12e6f56efb..1e17e89298 100644
--- a/techniques/html/H86.html
+++ b/techniques/html/H86.html
@@ -31,7 +31,7 @@ 
    Examples
    
          
    
             
    Marking up emojis in a sentence
    
             
    This shows a technique to mark up emojis with accessible names that differ from their default. Because you can't use an alt attribute on a span element and the ARIA recommendation disallows accessible names on generic elements, to give the emojis accessible names they are defined as images with the ARIA role="img" property which then allows the creation of an accessible name using the aria-label property.
    
-
    <p>I smiled at my friend and gestured 
+
    <p>I smiled at my friend and gestured 
    <span aria-label="you" role="img">👉🏾</span>
    <span aria-label="rock" role="img">🤘🏾</span>!
 </p>
    
@@ -41,7 +41,7 @@ 
    Four options for providing alternatives for an emoticon representing "smile"
          
             
    The following shows four options for providing alternatives for an emoticon representing "smile", which is consists of a colon followed by a closing parenthesis.
    
          
-
    :) (smile)
+
    :) (smile)
 <abbr title="smile">:)</abbr>
 <span aria-label="smile" role="img">:)</span>
 <img alt="smile" src="smile.gif">
    
@@ -65,7 +65,7 @@ 
    Using the aria-label and ASCII art with an explanation of the picture preceding it
    
          
    This example includes a link to skip over the ASCII art. Skip to the Leetspeak example.
    
          
-
    <figure>
+
    <figure>
   <figcaption>
     <p>Figure 1: ASCII art picture of a butterfly.
       <a href="#skipbutterfly">Skip ASCII butterfly image</a>
@@ -124,7 +124,7 @@ 
    ASCII art with an explanation of the picture preceding
          
    Marking up Leetspeak
    
          
    The following is Leetspeak for "Austin Rocks".
    
          
-
    <abbr title="Austin Rocks">Au5t1N r0xx0rz</abbr>
    
+
    <abbr title="Austin Rocks">Au5t1N r0xx0rz</abbr>
    
       
    
    
    
    
    
diff --git a/techniques/html/H89.html b/techniques/html/H89.html
index 39aeca2858..43d0261342 100644
--- a/techniques/html/H89.html
+++ b/techniques/html/H89.html
@@ -27,14 +27,14 @@ 
    Examples
    
       
    
 				
    A mapping application provides a form consisting of a label "Address:", an input component and a submit button with value "Find map". The input component has a title attribute value with an example of the address format the user should enter.
    
          
-
    <label for="search-address">Address:</label>
+
    <label for="search-address">Address:</label>
 <input id="search-address" name="search-address" size="30"
  title="Address example: 101 Collins St, Melbourne, Australia" type="text" value="">
    
       
    
       
    
 				
    A form that allows users to pay their bill online requires the user to enter their account number. The input component associated with the "Account number" label has a title attribute providing information on locating the account number.
    
 
-
    <label for="acc-num1">Account number:</label>
+
    <label for="acc-num1">Account number:</label>
 <input id="acc-num1" size="10"
  title="Your account number can be found in the top right-hand corner of your bill"
  type="text" value="">
    
diff --git a/techniques/html/H90.html b/techniques/html/H90.html
index d3d7a35770..cdd6865fe1 100644
--- a/techniques/html/H90.html
+++ b/techniques/html/H90.html
@@ -24,7 +24,7 @@ 
    Examples
    
 		
    
 			
    Using text to indicate required state
    
 			
    The text field in the example below has the explicit label of "First name (required):". The label element's  for attribute matches the id attribute of the input element and the label text indicates that the control is required.
    
-
    <label for="firstname">First name (required):</label> 
+
    <label for="firstname">First name (required):</label> 
 <input id="firstname" name="firstname" type="text">
    
       
    
 				
    Some authors abbreviate "required" to "req.". There is anecdotal evidence that suggests this abbreviation is confusing.
    
@@ -34,9 +34,9 @@ 
    Using text to indicate required state
    
 			
    Using an asterisk to indicate required state
    
 			
    The text field in the example below has an explicit label that includes an asterisk to indicate the control is required. It is important that the asterisk meaning is defined at the start of the form. In this example, the asterisk is contained within a abbr element to allow for the asterisk character to be styled so that it is larger than the default asterisk character, since the asterisk character can be difficult to see for those with impaired vision.
    
 			
    The CSS
    
-			
    .req {font-size: 150%}
    
+			
    .req {font-size: 150%}
    
 			
    The HTML
    
-			
    <p>Required fields are marked with an asterisk
+			
    <p>Required fields are marked with an asterisk
    (<abbr class="req" title="required">*</abbr>).</p>
 <form action="https://example.com" method="post">
   <label for="firstname">First name <abbr class="req" title="required">*</abbr>:</label> 
@@ -48,7 +48,7 @@ 
    The HTML
    
 			
    Using an image to indicate required state
    
 			
    The text field in the example below has an explicit label that includes an image to indicate the control is required. It is important that the image meaning is defined at the start of the form.
    
          
-
    <p><img alt="required" src="req_img.gif"> indicates that the information is required</p>
+
    <p><img alt="required" src="req_img.gif"> indicates that the information is required</p>
 <form action="https://www.example.com" method="post">
   <label for="firstname">First name <img alt="required" src="req_img.gif">:</label> 
   <input id="firstname" name="firstname" type="text">
@@ -59,7 +59,7 @@ 
    Using an image to indicate required state
    
 			
    Indicating required state for groups of radio buttons or check box controls
    
 			
    Radio buttons and checkboxes are treated differently than other interactive controls since individual radio buttons and checkboxes are not required but indicates that a response for the group is required. The methods used in examples 1-3 apply to radio buttons and checkboxes, but the indication of the required state should be placed in the legend element instead of the label element. 
    
          
-
    <fieldset>
+
    <fieldset>
   <legend>I am interested in the following (Required):</legend>
   <div>
     <input id="photo" name="interests" type="checkbox" value="ph">
diff --git a/techniques/html/H91.html b/techniques/html/H91.html
index f3890b0e38..de44b746cd 100644
--- a/techniques/html/H91.html
+++ b/techniques/html/H91.html
@@ -28,66 +28,66 @@ 
    Links
    
       
    User agents provide mechanisms to navigate to and select links. In each of the following examples, the role is "link" because the  a element has an href attribute. An a element without an href isn't a link. The link's value is the URI in the href attribute.
    
 			
    Link example A
    
 			
    In example A, the name is the text inside the link, in this case "Example Site".
    
-
    <a href="https://example.com">Example Site</a>
    
+
    <a href="https://example.com">Example Site</a>
    
       
    Link example B
    
 			
    In example B of an image inside a link, the alt attribute for the image provides the name.
    
-
    <a href="https://example.com"><img alt="Example" src="example-logo.gif"></a>
    
+
    <a href="https://example.com"><img alt="Example" src="example-logo.gif"></a>
    
       
    Link example C
    
 			
    In example C, some assistive technology will not automatically insert a space character when concatenating the image's alt text and the text of the link. If the text should not be concatenated without a space, it is safest to insert a space between the image and the adjacent word so that words will not run together.
    
-
    <a href="https://example.com"><img alt="Example " src="example_logo.gif">Text</a>
    
+
    <a href="https://example.com"><img alt="Example " src="example_logo.gif">Text</a>
    
 		
    
 		
    
 			
    Buttons
    
 			
    There are several ways to create a button in HTML.
    
 			
    Buttons example A
    
 			
    In example A, the text contained in the button element, in this case "save", gives the button its name. There is no value.
    
-
    <button type="button">Save</button>
    
+
    <button type="button">Save</button>
    
       
    Buttons example B
    
 			
    Example B uses the value attribute, in this case "Save", "Submit", or "Reset" as the name.
    
-
    <input type="button" value="Save"> 
+
    <input type="button" value="Save"> 
 <input type="submit" value="Submit">
 <input type="reset" value="Reset">
    
       
    Buttons example C
    
 			
    Example C uses the alt attribute, in this case "save", as the name.
    
-
    <input alt="save" src="save.gif" type="image">
    
+
    <input alt="save" src="save.gif" type="image">
    
       
 			
    Buttons example D
    
       
    Example D clarifies how the user agent determines the name if the author specifies both the alt and title attributes of the input element. In this case, the user agent uses the alt attribute ("Save") and ignores the title attribute.
    
          
-
    <input alt="save" src="save.gif" title="save the file" type="image">
    
+
    <input alt="save" src="save.gif" title="save the file" type="image">
    
       
    
       
    
          
    Text Input
      
 				 
    Text Input example A
    
 				 
    In example A, the input field has a role of "editable text". The label element is associated to the input element via the for attribute which references the id attribute of the input element. The name comes from the label element, in this case, "Type of fruit". Its value comes from its value attribute, in this case "bananas".
    
          
-
    <label for="text-1">Type of fruit</label>
+
    <label for="text-1">Type of fruit</label>
 <input id="text-1" type="text" value="bananas">
    
          
 					
    Text Input example B
    
 					
    In example B, the input field has the same role as example A, but the value is the empty string and the field gets its name from the aria-label property.
    
          
-
    <input aria-label="Type of fruit" id="text-1" type="text">
    
+
    <input aria-label="Type of fruit" id="text-1" type="text">
    
       
    
       
    
          
    Checkbox
    
          
    This example has a role of checkbox, from the type attribute of the input element. The label element is associated with the input element via the for attribute which refers to the id attribute of the input element. The name comes from the label element, in this case "cheese". Its state can be checked or unchecked and comes from the checked attribute. The state can be changed by the user's interaction with the control.
    
          
-
    <label for="cb-1">Cheese</label> 
+
    <label for="cb-1">Cheese</label> 
 <input checked id="cb-1" type="checkbox">
    
       
    
       
    
          
    Radio Buttons
    
          
    This example has a role of "radio button" from the type attribute on the input element. Its name comes from the label element. Its state can be checked or unchecked and comes from the checked attribute. The state can be changed by the user's interaction with the control.
    
          
-
    <input checked id="r1" name="color" type="radio"><label for="r1">Red</label>
+
    <input checked id="r1" name="color" type="radio"><label for="r1">Red</label>
 <input id="r2" name="color" type="radio"><label for="r2">Blue</label>
 <input id="r3" name="color" type="radio"><label for="r3">Green</label>
    
       
    
 			
    
 				
    Radio Fieldset
    
 				
    The radio fieldset has a role of "grouping". The name comes from the legend element.
    
-
    <fieldset>
+
    <fieldset>
   <legend>Choose a Color:</legend>
   <div>
     <input id="red" name="color" type="radio" value="red">
@@ -107,7 +107,7 @@ 
    Select Element
    
 				
    Select element example A
    
 				
    Example A has a role of "list box" from the select element. Its name is "Numbers" from the label element. Forgetting to give a name to the select is a common error. The value is the option element that has the selected attribute present. In this case, the default value is "Two".
    
          
-
    <label for="s1">Numbers</label>
+
    <label for="s1">Numbers</label>
 <select id="s1">
   <option>One</option>
   <option selected>Two</option>
@@ -117,7 +117,7 @@ 
    Select element example A
    
 					
    Select Element example B
    
           
    Example B has the same name, role, and value as the above, but sets the name with the aria-label property on the select element. This technique can be used when a visible label is not possible.
    
          
-
    <select aria-label="Numbers" id="s1">
+
    <select aria-label="Numbers" id="s1">
   <option>One</option>
   <option selected>Two</option>
   <option>Three</option>
@@ -128,13 +128,13 @@ 
    Textarea
    
 					
    Textarea example A
    
 					
    Example A has a role of "editable text" from the textarea element. The name is "Type your speech here" from the label element. The value is the content inside the textarea element, in this case "Four score and seven years ago".
    
          
-
    <label for="ta-1">Type your speech here</label>
+
    <label for="ta-1">Type your speech here</label>
 <textarea id="ta-1">Four score and seven years ago</textarea>
    
          
 					
    Textarea example B
    
 					
    Example B has the same role, the name is set using the title attribute, and the value is the empty string.
    
          
-
    <textarea title="Type your speech here">Four score and seven years ago</textarea>
    
+
    <textarea title="Type your speech here">Four score and seven years ago</textarea>
    
       	
    
 			
    
 			
    
diff --git a/techniques/html/H93.html b/techniques/html/H93.html
index 6dffb4eaf7..cf8396c49a 100644
--- a/techniques/html/H93.html
+++ b/techniques/html/H93.html
@@ -24,7 +24,7 @@ 
    Examples
    
 		
    
 			
    Duplicate id attributes in form elements
    
 			
    In this example, the first name and last name inputs both have an id attribute with the same value. Due to the way accessible names are computed, this results in the last name input having no accessible name.
    
-
    <label for="fname">First Name</label>
+
    <label for="fname">First Name</label>
 <input autocomplete="given-name" id="fname" type="text">
 <label for="lname">Last Name</label>
 <input autocomplete="family-name" id="fname" type="text">
    
diff --git a/techniques/html/H95.html b/techniques/html/H95.html
index 3043a567c6..d162a2c925 100644
--- a/techniques/html/H95.html
+++ b/techniques/html/H95.html
@@ -29,7 +29,7 @@ 
    Examples
    
       
    
          
    Captions in one language
    
          
    A video element for a video in the English language with an English caption track. The captions are provided in the WebVTT format.
    
-
    <video poster="myvideo.png" controls>
+
    <video poster="myvideo.png" controls>
   <source src="myvideo.mp4" srclang="en" type="video/mp4">
   <track kind="captions" label="English" src="myvideo_en.vtt" srclang="en">
 </video>
    
@@ -39,7 +39,7 @@ 
    Captions in one language
    
          
    Captions in multiple languages
    
          
    A video element for a video in the English language with an English caption track. The captions are provided in the WebVTT format.
    
          
-
    <video poster="myvideo.png" controls>
+
    <video poster="myvideo.png" controls>
   <source src="myvideo.mp4" srclang="en" type="video/mp4">
   <source src="myvideo.webm" srclang="fr" type="video/webm">
   <track kind="captions" label="English" src="myvideo-en.vtt" srclang="en">
diff --git a/techniques/html/H96.html b/techniques/html/H96.html
index b08808fbc9..1661fa4332 100644
--- a/techniques/html/H96.html
+++ b/techniques/html/H96.html
@@ -31,7 +31,7 @@ 
    Examples
    
          
    
             
    Audio description in one language
    
             
    A video element for a video in the English language. The audio descriptions are provided in the WebVTT format.
    
-
    <video poster="myvideo.png" controls>
+
    <video poster="myvideo.png" controls>
   <source src="myvideo.mp4" srclang="en" type="video/mp4">
   <track kind="descriptions" label="English" src="myvideo-en.vtt" srclang="en">
 </video>
    
@@ -39,7 +39,7 @@ 
    Audio description in one language
    
       
    
          
    Audio description in multiple languages
    
          
    A video element for a video with both an English and French language source element, and with an English and a French audio description track using the WebVTT file format.
    
-
    <video poster="myvideo.png" controls>
+
    <video poster="myvideo.png" controls>
   <source src="myvideo.mp4" srclang="en" type="video/mp4">
   <source src="myvideo.webm" srclang="fr" type="video/webm">
   <track kind="descriptions" label="English" src="myvideo-en.vtt" srclang="en">
diff --git a/techniques/html/H97.html b/techniques/html/H97.html
index e79d5d7125..98488a99ab 100644
--- a/techniques/html/H97.html
+++ b/techniques/html/H97.html
@@ -27,7 +27,7 @@ 
    Navigation links enclosed in a nav element
    
          
             
    This example uses a nav element to group navigation links in an accessibility curriculum.
    
          
-
    <nav>
+
    <nav>
   <ul>
     <li><a href="/web-accessibility.html">Web Accessibility</a></li>
     <li><a href="/doc-accessibility.html">Document Accessibility</a></li>
@@ -39,7 +39,7 @@ 
    Navigation links enclosed in a nav element
    
         
    Multiple nav elements and aria-labelledby
    
         
    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 nav element is used multiple times on a page, each instance may have a unique label specified using aria-labelledby:
    
          
-
    <nav aria-labelledby="site-nav-heading">
+
    <nav aria-labelledby="site-nav-heading">
   <h2 id="site-nav-heading">Site</h2>
     <ul>
       <li><a href="...">nav link 1</a></li>  
@@ -61,7 +61,7 @@ 
    Multiple nav elements and <nav aria-label="Site">
+
    <nav aria-label="Site">
   <ul>
     <li>< href="...">nav link 1</a></li>
     <li>< href="...">nav link 2</a></li>
diff --git a/techniques/html/H98.html b/techniques/html/H98.html
index 438ee9f84c..15f00bc3de 100644
--- a/techniques/html/H98.html
+++ b/techniques/html/H98.html
@@ -50,7 +50,7 @@ 
    Examples
    
 			
    
 				
    A user's credit card information
    
 				
    This is a simple form that collects contact and credit card information from the user.
    
-				
    <form method="post" action="step2">
+				
    <form method="post" action="step2">
   <div>
     <label for="fname">First Name</label>
     <input autocomplete="given-name" id="fname" type="text">
diff --git a/techniques/html/H99.html b/techniques/html/H99.html
index d51dfebcde..ae20190c42 100644
--- a/techniques/html/H99.html
+++ b/techniques/html/H99.html
@@ -36,7 +36,7 @@ 
    Examples
    
     
    
 				
    Page list in HTML publications
    
 				
    To add a page list to a web-based document, the role "doc-pagelist" is added to the element (typically a nav element) that encloses the list and its title.
    
-				
    <nav role="doc-pagelist" aria-labelledby="pglist">
+				
    <nav role="doc-pagelist" aria-labelledby="pglist">
  <h2 id="pglist">Page List</h2>
  <ol>
    <li><a href="intro.xhtml#pg1">1</a></li>
@@ -45,12 +45,12 @@ 
    Page list in HTML publication
  </ol>
 </nav>
    
 				
    The destinations of the page list links are usually explicit page break markers like the following:
    
-				
    <span id="pg1" role="doc-pagebreak" aria-label="page 1">
    
+				
    <span id="pg1" role="doc-pagebreak" aria-label="page 1">
    
 				
    
 				
    
 				
    Page list in EPUB 3 publications
    
 				
    EPUB 3 uses the epub:type attribute to identify the page list in the navigation document. The attribute is used on a nav element with the value "page-list" (note the different hyphenation). The ARIA role attribute has no effect unless the navigation document can be directly accessed by users (i.e., the document is in the EPUB spine). Like the previous HTML example, the contents of the nav element is a list of links to the page break locations.
    
-				
    <nav epub:type="page-list" role="doc-pagelist" aria-labelledby="pglist">
+				
    <nav epub:type="page-list" role="doc-pagelist" aria-labelledby="pglist">
   <h2 id="pglist">Page List</h2>
   <ol>
     <li><a href="chapter01.xhtml#page001">1</a></li>
@@ -63,7 +63,7 @@ 
    Page list in EPUB 3 publications
    
    
    
 				
    Page list in EPUB 2 and DAISY publications
    
 				
    The EPUB 2 and DAISY 3 formats both use an XML grammar called the NCX for expressing navigation aids. The page list is defined within the ncx element using the pageList tag. Each pageTarget within this element identifies a page break, providing both a label and a destination.
    
-
    <ncx xmlns="http://www.daisy.org/z3986/2005/ncx/"
+
    <ncx xmlns="http://www.daisy.org/z3986/2005/ncx/"
      version="2005-1"
      xml:lang="en-US">
   ...

From 619150ad56fa5e3cedccaed10f901147b5b83264 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" 
Date: Wed, 29 Nov 2023 02:11:42 +0000
Subject: [PATCH 64/67] =?UTF-8?q?Replace=20closing=20``=20with=20self-closing=20``?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Should be safe, as H100.html already does this and renders fine. Should probably be run over entire repo
---
 techniques/html/H101.html | 2 +-
 techniques/html/H2.html   | 2 +-
 techniques/html/H24.html  | 2 +-
 techniques/html/H25.html  | 2 +-
 techniques/html/H30.html  | 2 +-
 techniques/html/H32.html  | 2 +-
 techniques/html/H33.html  | 2 +-
 techniques/html/H34.html  | 2 +-
 techniques/html/H36.html  | 2 +-
 techniques/html/H37.html  | 2 +-
 techniques/html/H39.html  | 2 +-
 techniques/html/H40.html  | 2 +-
 techniques/html/H42.html  | 2 +-
 techniques/html/H43.html  | 2 +-
 techniques/html/H44.html  | 2 +-
 techniques/html/H48.html  | 2 +-
 techniques/html/H49.html  | 2 +-
 techniques/html/H51.html  | 2 +-
 techniques/html/H53.html  | 2 +-
 techniques/html/H54.html  | 2 +-
 techniques/html/H56.html  | 2 +-
 techniques/html/H57.html  | 2 +-
 techniques/html/H58.html  | 2 +-
 techniques/html/H59.html  | 2 +-
 techniques/html/H62.html  | 2 +-
 techniques/html/H63.html  | 2 +-
 techniques/html/H64.html  | 2 +-
 techniques/html/H65.html  | 2 +-
 techniques/html/H67.html  | 2 +-
 techniques/html/H69.html  | 2 +-
 techniques/html/H70.html  | 2 +-
 techniques/html/H71.html  | 2 +-
 techniques/html/H74.html  | 2 +-
 techniques/html/H75.html  | 2 +-
 techniques/html/H76.html  | 2 +-
 techniques/html/H77.html  | 2 +-
 techniques/html/H78.html  | 2 +-
 techniques/html/H79.html  | 2 +-
 techniques/html/H80.html  | 2 +-
 techniques/html/H81.html  | 2 +-
 techniques/html/H83.html  | 2 +-
 techniques/html/H84.html  | 2 +-
 techniques/html/H85.html  | 2 +-
 techniques/html/H86.html  | 2 +-
 techniques/html/H88.html  | 2 +-
 techniques/html/H89.html  | 2 +-
 techniques/html/H90.html  | 2 +-
 techniques/html/H91.html  | 2 +-
 techniques/html/H93.html  | 2 +-
 techniques/html/H94.html  | 2 +-
 techniques/html/H95.html  | 2 +-
 techniques/html/H96.html  | 2 +-
 techniques/html/H97.html  | 2 +-
 techniques/html/H98.html  | 2 +-
 54 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/techniques/html/H101.html b/techniques/html/H101.html
index e80786c60f..11c5b1bcba 100644
--- a/techniques/html/H101.html
+++ b/techniques/html/H101.html
@@ -2,7 +2,7 @@
 
   
     Using semantic HTML elements to identify regions of a page
-    
+    
   
   
     
    Using semantic HTML elements to identify regions of a page
    
diff --git a/techniques/html/H2.html b/techniques/html/H2.html
index d3235b41a0..aaae0f2cb5 100644
--- a/techniques/html/H2.html
+++ b/techniques/html/H2.html
@@ -2,7 +2,7 @@
 
    
       Combining adjacent image and text links for the same resource
-      
+      
    
    
       
    Combining adjacent image and text links for the same resource
    
diff --git a/techniques/html/H24.html b/techniques/html/H24.html
index d9dc9e23d4..9d41e11e7b 100644
--- a/techniques/html/H24.html
+++ b/techniques/html/H24.html
@@ -2,7 +2,7 @@
 
    
        Providing text alternatives for the area elements of image maps
-      
+      
    
    
       
    Providing text alternatives for the area elements of image maps
    
diff --git a/techniques/html/H25.html b/techniques/html/H25.html
index 27211d7778..0e0bf3e4f8 100644
--- a/techniques/html/H25.html
+++ b/techniques/html/H25.html
@@ -2,7 +2,7 @@
 
    
       Providing a title using the title element
-      
+      
    
    
       
    Providing a title using the title element
    
diff --git a/techniques/html/H30.html b/techniques/html/H30.html
index 92be5a1bd7..b3ff6e430d 100644
--- a/techniques/html/H30.html
+++ b/techniques/html/H30.html
@@ -2,7 +2,7 @@
 
 	
 		Providing link text that describes the purpose of a link for anchor elements
-		
+		
 	
 	
 		
    Providing link text that describes the purpose of a link for anchor elements
    
diff --git a/techniques/html/H32.html b/techniques/html/H32.html
index 558db8d978..0e69b18a86 100644
--- a/techniques/html/H32.html
+++ b/techniques/html/H32.html
@@ -2,7 +2,7 @@
 
    
       Providing submit buttons
-      
+      
    
    
       
    Providing submit buttons
    
diff --git a/techniques/html/H33.html b/techniques/html/H33.html
index bb6f12266b..9295080e8b 100644
--- a/techniques/html/H33.html
+++ b/techniques/html/H33.html
@@ -2,7 +2,7 @@
 
 	
 		Supplementing link text with the title attribute
-		
+		
 	
 	
 		
    Supplementing link text with the title attribute
    
diff --git a/techniques/html/H34.html b/techniques/html/H34.html
index e427b2f148..e1dbf699ff 100644
--- a/techniques/html/H34.html
+++ b/techniques/html/H34.html
@@ -2,7 +2,7 @@
 
    
       Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline
-      
+      
    
    
       
    Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline
    
diff --git a/techniques/html/H36.html b/techniques/html/H36.html
index 12b529fd96..333587c7d4 100644
--- a/techniques/html/H36.html
+++ b/techniques/html/H36.html
@@ -2,7 +2,7 @@
 
    
       Using alt attributes on images used as submit buttons
-      
+      
    
    
       
    Using alt attributes on images used as submit buttons
    
diff --git a/techniques/html/H37.html b/techniques/html/H37.html
index f900de49df..c974c79df0 100644
--- a/techniques/html/H37.html
+++ b/techniques/html/H37.html
@@ -2,7 +2,7 @@
 
 
 	Using alt attributes on img elements
-	
+	
 
 
 	
    Using alt attributes on img elements
    
diff --git a/techniques/html/H39.html b/techniques/html/H39.html
index 17801d66fc..14169e3705 100644
--- a/techniques/html/H39.html
+++ b/techniques/html/H39.html
@@ -2,7 +2,7 @@
 
 
 	Using caption elements to associate data table captions with data tables
-	
+	
 
 
 	
    Using caption elements to associate data table captions with data tables
    
diff --git a/techniques/html/H40.html b/techniques/html/H40.html
index d5d955953a..81eadb206b 100644
--- a/techniques/html/H40.html
+++ b/techniques/html/H40.html
@@ -2,7 +2,7 @@
 
    
       Using description lists
-      
+      
    
    
       
    Using description lists
    
diff --git a/techniques/html/H42.html b/techniques/html/H42.html
index f162bbb80b..49efb1ed13 100644
--- a/techniques/html/H42.html
+++ b/techniques/html/H42.html
@@ -2,7 +2,7 @@
 
    
       Using h1-h6 to identify headings
-      
+      
    
    
       
    Using h1-h6 to identify headings
    
diff --git a/techniques/html/H43.html b/techniques/html/H43.html
index c574426810..eb0a097c01 100644
--- a/techniques/html/H43.html
+++ b/techniques/html/H43.html
@@ -2,7 +2,7 @@
 
    
       Using id and headers attributes to associate data cells with header cells in data tables
-      
+      
    
    
       
    Using id and headers attributes to associate data cells with header cells in data tables
    
diff --git a/techniques/html/H44.html b/techniques/html/H44.html
index 808f4b4f72..5c1dd594db 100644
--- a/techniques/html/H44.html
+++ b/techniques/html/H44.html
@@ -2,7 +2,7 @@
 
    
       Using label elements to associate text labels with form controls
-      
+      
    
    
       
    Using label elements to associate text labels with form controls
    
diff --git a/techniques/html/H48.html b/techniques/html/H48.html
index 6fdc13feaa..8c52232923 100644
--- a/techniques/html/H48.html
+++ b/techniques/html/H48.html
@@ -2,7 +2,7 @@
 
    
       Using ol, ul and dl for lists or groups of links
-      
+      
    
    
       
    Using ol, ul and dl for lists or groups of links
    
diff --git a/techniques/html/H49.html b/techniques/html/H49.html
index d288eb9ca5..124686b7c0 100644
--- a/techniques/html/H49.html
+++ b/techniques/html/H49.html
@@ -2,7 +2,7 @@
 
    
       Using semantic markup to mark emphasized or special text
-      
+      
    
    
       
    Using semantic markup to mark emphasized or special text
    
diff --git a/techniques/html/H51.html b/techniques/html/H51.html
index 1ee7453235..df25489fbc 100644
--- a/techniques/html/H51.html
+++ b/techniques/html/H51.html
@@ -2,7 +2,7 @@
 
    
       Using table markup to present tabular information
-      
+      
    
    
       
    Using table markup to present tabular information
    
diff --git a/techniques/html/H53.html b/techniques/html/H53.html
index e4e84ce5b2..86a7fd4164 100644
--- a/techniques/html/H53.html
+++ b/techniques/html/H53.html
@@ -2,7 +2,7 @@
 
    
       Using the body of the object element
-      
+      
    
    
 		
    Using the body of the object element
    
diff --git a/techniques/html/H54.html b/techniques/html/H54.html
index 5721d158ce..4962d0fa4f 100644
--- a/techniques/html/H54.html
+++ b/techniques/html/H54.html
@@ -1,7 +1,7 @@
 
 
    
-      Using the dfn element to identify the defining instance of a word
+      Using the dfn element to identify the defining instance of a word
    
    
       
    Using the dfn element to identify the defining instance of a word
    
diff --git a/techniques/html/H56.html b/techniques/html/H56.html
index 7c7903af2a..838ff4d3d9 100644
--- a/techniques/html/H56.html
+++ b/techniques/html/H56.html
@@ -2,7 +2,7 @@
 
    
       Using the dir attribute on an inline element to resolve problems with nested directional runs
-      
+      
    
    
       
    Using the dir attribute on an inline element to resolve problems
diff --git a/techniques/html/H57.html b/techniques/html/H57.html
index b7d1ff4274..c0b486ddfd 100644
--- a/techniques/html/H57.html
+++ b/techniques/html/H57.html
@@ -2,7 +2,7 @@
 
 
    Using the language attribute on the HTML element
-   
+   
 
 
    
    Using the language attribute on the HTML element
    
diff --git a/techniques/html/H58.html b/techniques/html/H58.html
index fd19e8e35e..a686c20bf8 100644
--- a/techniques/html/H58.html
+++ b/techniques/html/H58.html
@@ -2,7 +2,7 @@
 
 
    Using language attributes to identify changes in the human language
-   
+   
 
 
    
    Using language attributes to identify changes in the human language
    
diff --git a/techniques/html/H59.html b/techniques/html/H59.html
index 2339eba34a..c763e0891a 100644
--- a/techniques/html/H59.html
+++ b/techniques/html/H59.html
@@ -2,7 +2,7 @@
 
    
       Using the link element and navigation tools
-      
+      
    
    
       
    Using the link element and navigation tools
    
diff --git a/techniques/html/H62.html b/techniques/html/H62.html
index 086ac636db..2062266dd5 100644
--- a/techniques/html/H62.html
+++ b/techniques/html/H62.html
@@ -2,7 +2,7 @@
 
 	
 		Using the ruby element
-		
+		
 	
 	
 		
    Using the ruby element
    
diff --git a/techniques/html/H63.html b/techniques/html/H63.html
index d71f20d176..625a4b501e 100644
--- a/techniques/html/H63.html
+++ b/techniques/html/H63.html
@@ -2,7 +2,7 @@
 
 	
 		Using the scope attribute to associate header cells and data cells in data tables
-		
+		
 	
 	
 		
    Using the scope attribute to associate header cells and data cells in data tables
    
diff --git a/techniques/html/H64.html b/techniques/html/H64.html
index c6f37d01e0..b511dc4c1d 100644
--- a/techniques/html/H64.html
+++ b/techniques/html/H64.html
@@ -2,7 +2,7 @@
 
    
       Using the title attribute of the iframe element
-      
+      
    
    
       
    Using the title attribute of the iframe element
    
diff --git a/techniques/html/H65.html b/techniques/html/H65.html
index ae22ef8b53..3c7f98fd0e 100644
--- a/techniques/html/H65.html
+++ b/techniques/html/H65.html
@@ -2,7 +2,7 @@
 
 	
 		Using the title attribute to identify form controls when the label element cannot be used
-    
+    
 	
 	
 		
    Using the title attribute to identify form controls when the label element cannot be used
    
diff --git a/techniques/html/H67.html b/techniques/html/H67.html
index 3b2281ec83..920373f05d 100644
--- a/techniques/html/H67.html
+++ b/techniques/html/H67.html
@@ -2,7 +2,7 @@
 
    
       Using null alt text and no title attribute on img elements for images that assistive technology should ignore
-      
+      
    
    
       
    Using null alt text and no title attribute on img elements for images that assistive technology should ignore
    
diff --git a/techniques/html/H69.html b/techniques/html/H69.html
index f6931c203d..c19a57e01e 100644
--- a/techniques/html/H69.html
+++ b/techniques/html/H69.html
@@ -2,7 +2,7 @@
 
    
       Providing heading elements at the beginning of each section of content
-      
+      
    
    
       
    Providing heading elements at the beginning of each section of content
    
diff --git a/techniques/html/H70.html b/techniques/html/H70.html
index d5cfdba216..431a2aaa34 100644
--- a/techniques/html/H70.html
+++ b/techniques/html/H70.html
@@ -2,7 +2,7 @@
 
 	
 		Using frame elements to group blocks of repeated material
-    
+    
   
 	
 		
    Using frame elements to group blocks of repeated material
    
diff --git a/techniques/html/H71.html b/techniques/html/H71.html
index 791948b686..e6f2cc62e4 100644
--- a/techniques/html/H71.html
+++ b/techniques/html/H71.html
@@ -2,7 +2,7 @@
 
    
       Providing a description for groups of form controls using fieldset and legend elements
-      
+      
    
    
       
    Providing a description for groups of form controls using fieldset and legend elements
    
diff --git a/techniques/html/H74.html b/techniques/html/H74.html
index 1031558c48..a7c8df1304 100644
--- a/techniques/html/H74.html
+++ b/techniques/html/H74.html
@@ -2,7 +2,7 @@
 
    
       Ensuring that opening and closing tags are used according to specification
-      
+      
    
    
       
    Ensuring that opening and closing tags are used according to specification
    
diff --git a/techniques/html/H75.html b/techniques/html/H75.html
index 332e85120f..b428c44a42 100644
--- a/techniques/html/H75.html
+++ b/techniques/html/H75.html
@@ -2,7 +2,7 @@
 
 	
 		Ensuring that Web pages are well-formed
-		
+		
 	
 	
 		
    Ensuring that Web pages are well-formed
    
diff --git a/techniques/html/H76.html b/techniques/html/H76.html
index 6bdc88dd8a..6799396145 100644
--- a/techniques/html/H76.html
+++ b/techniques/html/H76.html
@@ -2,7 +2,7 @@
 
    
       Using meta refresh to create an instant client-side redirect
-      
+      
    
    
       
    Using meta refresh to create an instant client-side redirect
    
diff --git a/techniques/html/H77.html b/techniques/html/H77.html
index 13c64e49be..1962c6c0e1 100644
--- a/techniques/html/H77.html
+++ b/techniques/html/H77.html
@@ -2,7 +2,7 @@
 
 	
 		Identifying the purpose of a link using link text combined with its enclosing list item
-		
+		
 	
 	
 		
    Identifying the purpose of a link using link text combined with its enclosing list item
    
diff --git a/techniques/html/H78.html b/techniques/html/H78.html
index df8c0c9e6f..4598c779c4 100644
--- a/techniques/html/H78.html
+++ b/techniques/html/H78.html
@@ -2,7 +2,7 @@
 
    
       Identifying the purpose of a link using link text combined with its enclosing paragraph
-      
+      
    
    
       
    Identifying the purpose of a link using link text combined with its enclosing paragraph
    
diff --git a/techniques/html/H79.html b/techniques/html/H79.html
index c772d229f8..d8483d52bd 100644
--- a/techniques/html/H79.html
+++ b/techniques/html/H79.html
@@ -2,7 +2,7 @@
 
    
       Identifying the purpose of a link in a data table using the link text combined with its enclosing table cell and associated table header cells
-      
+      
    
    
       
    Identifying the purpose of a link in a data table using the link text combined with its enclosing table cell and associated table header cells
    
diff --git a/techniques/html/H80.html b/techniques/html/H80.html
index fcd30fbded..1012851182 100644
--- a/techniques/html/H80.html
+++ b/techniques/html/H80.html
@@ -2,7 +2,7 @@
 
 	
 		Identifying the purpose of a link using link text combined with the preceding heading element
-		
+		
 	
 	
 		
    Identifying the purpose of a link using link text combined with the preceding heading element
    
diff --git a/techniques/html/H81.html b/techniques/html/H81.html
index 8083bfc2ba..fa56188df9 100644
--- a/techniques/html/H81.html
+++ b/techniques/html/H81.html
@@ -2,7 +2,7 @@
 
    
       Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested
-      
+      
    
    
       
    Identifying the purpose of a link in a nested list using link text combined with
diff --git a/techniques/html/H83.html b/techniques/html/H83.html
index 2a8ca2c9d9..d0380b10e4 100644
--- a/techniques/html/H83.html
+++ b/techniques/html/H83.html
@@ -2,7 +2,7 @@
 
    
       Using the target attribute to open a new window on user request and indicating this in link text
-      
+      
    
    
       
    Using the target attribute to open a new window on user request and indicating this in link text
    
diff --git a/techniques/html/H84.html b/techniques/html/H84.html
index 6179f20673..56ce6c201d 100644
--- a/techniques/html/H84.html
+++ b/techniques/html/H84.html
@@ -2,7 +2,7 @@
 
    
       Using a button with a select element to perform an action
-      
+      
    
    
       
    Using a button with a select element to perform an action
    
diff --git a/techniques/html/H85.html b/techniques/html/H85.html
index daed5be30d..4f5a290e36 100644
--- a/techniques/html/H85.html
+++ b/techniques/html/H85.html
@@ -2,7 +2,7 @@
 
   
     Using optgroup to group option elements inside a select
-    
+    
   
   
     
    Using optgroup to group option elements inside a select
    
diff --git a/techniques/html/H86.html b/techniques/html/H86.html
index 1e17e89298..c032481fdf 100644
--- a/techniques/html/H86.html
+++ b/techniques/html/H86.html
@@ -2,7 +2,7 @@
 
    
       Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak
-      
+      
    
    
       
    Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak
    
diff --git a/techniques/html/H88.html b/techniques/html/H88.html
index debc899675..0947c7c5e6 100644
--- a/techniques/html/H88.html
+++ b/techniques/html/H88.html
@@ -2,7 +2,7 @@
 
 	
 		Using HTML according to spec
-		
+		
 	
 	
 		
    Using HTML according to spec
    
diff --git a/techniques/html/H89.html b/techniques/html/H89.html
index 43d0261342..066baeeead 100644
--- a/techniques/html/H89.html
+++ b/techniques/html/H89.html
@@ -2,7 +2,7 @@
 
 	
 		Using the title attribute to provide context-sensitive help
-		
+		
    
 	 
 		
    Using the title attribute to provide context-sensitive help
    
diff --git a/techniques/html/H90.html b/techniques/html/H90.html
index cdd6865fe1..88fc51210d 100644
--- a/techniques/html/H90.html
+++ b/techniques/html/H90.html
@@ -2,7 +2,7 @@
 
 	
 		Indicating required form controls using label or legend
-		
+		
 	
 	
 		
    Indicating required form controls using label or legend
    
diff --git a/techniques/html/H91.html b/techniques/html/H91.html
index de44b746cd..d1cd526e3c 100644
--- a/techniques/html/H91.html
+++ b/techniques/html/H91.html
@@ -2,7 +2,7 @@
 
    
 		Using HTML form controls and links
-		
+		
    
 	 
 		
    Using HTML form controls and links
    
diff --git a/techniques/html/H93.html b/techniques/html/H93.html
index cf8396c49a..f3857d6f50 100644
--- a/techniques/html/H93.html
+++ b/techniques/html/H93.html
@@ -2,7 +2,7 @@
 
 	
 		Ensuring that id attributes are unique on a Web page
-		
+		
 	
 	
 		
    Ensuring that id attributes are unique on a Web page
    
diff --git a/techniques/html/H94.html b/techniques/html/H94.html
index b77f98a454..9726f8e771 100644
--- a/techniques/html/H94.html
+++ b/techniques/html/H94.html
@@ -2,7 +2,7 @@
 
 	
 		Ensuring that elements do not contain duplicate attributes
-		
+		
 	
 	
 		
    Ensuring that elements do not contain duplicate attributes
    
diff --git a/techniques/html/H95.html b/techniques/html/H95.html
index d162a2c925..3adf4f4c5d 100644
--- a/techniques/html/H95.html
+++ b/techniques/html/H95.html
@@ -2,7 +2,7 @@
 
    
       Using the track element to provide captions
-      
+      
    
    
       
    Using the track element to provide captions
    
diff --git a/techniques/html/H96.html b/techniques/html/H96.html
index 1661fa4332..e7d002fdd0 100644
--- a/techniques/html/H96.html
+++ b/techniques/html/H96.html
@@ -2,7 +2,7 @@
 
    
       Using the track element to provide audio descriptions
-      
+      
    
    
       
    Using the track element to provide audio descriptions
    
diff --git a/techniques/html/H97.html b/techniques/html/H97.html
index 98488a99ab..c75098739f 100644
--- a/techniques/html/H97.html
+++ b/techniques/html/H97.html
@@ -2,7 +2,7 @@
 
    
       Grouping related links using the nav element
-      
+      
    
    
       
    Grouping related links using the nav element
    
diff --git a/techniques/html/H98.html b/techniques/html/H98.html
index 15f00bc3de..619254cd18 100644
--- a/techniques/html/H98.html
+++ b/techniques/html/H98.html
@@ -2,7 +2,7 @@
 
 	
 		Using HTML 5.2 autocomplete attributes
-		
+		
 	
 	
 		
    Using HTML 5.2 autocomplete attributes
    

From 6687d75c4b26feaf9173f4cae5b81f55362da530 Mon Sep 17 00:00:00 2001
From: Francis Storr 
Date: Fri, 23 Feb 2024 16:43:26 -0800
Subject: [PATCH 65/67] Errent attribute

---
 techniques/html/H90.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/techniques/html/H90.html b/techniques/html/H90.html
index 88fc51210d..2bf3c7da26 100644
--- a/techniques/html/H90.html
+++ b/techniques/html/H90.html
@@ -36,7 +36,7 @@ 
    Using an asterisk to indicate required state
    
 			
    The CSS
    
 			
    .req {font-size: 150%}
    
 			
    The HTML
    
-			
    <p>Required fields are marked with an asterisk
+
    <p>Required fields are marked with an asterisk
    (<abbr class="req" title="required">*</abbr>).</p>
 <form action="https://example.com" method="post">
   <label for="firstname">First name <abbr class="req" title="required">*</abbr>:</label> 

From 1eac1349f8b377b3d8df682b5ddd660b75e62b27 Mon Sep 17 00:00:00 2001
From: Francis Storr 
Date: Fri, 23 Feb 2024 16:43:26 -0800
Subject: [PATCH 66/67] Errent attribute

---
 techniques/html/H90.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/techniques/html/H90.html b/techniques/html/H90.html
index 2bf3c7da26..aaa8977187 100644
--- a/techniques/html/H90.html
+++ b/techniques/html/H90.html
@@ -23,7 +23,7 @@ 
    Description
    
 		
    Examples
    
 		
    
 			
    Using text to indicate required state
    
-			
    The text field in the example below has the explicit label of "First name (required):". The label element's  for attribute matches the id attribute of the input element and the label text indicates that the control is required.
    
+			
    The text field in the example below has the explicit label of "First name (required):". The label element's  for attribute matches the id attribute of the input element and the label text indicates that the control is required.
    
 
    <label for="firstname">First name (required):</label> 
 <input id="firstname" name="firstname" type="text">
    
       
    

From dbe47239ae7378552854fc1b37391b15ab79818f Mon Sep 17 00:00:00 2001
From: Alastair Campbell 
Date: Mon, 26 Feb 2024 11:16:59 +0000
Subject: [PATCH 67/67] Fixing sectioning

---
 techniques/html/H90.html | 10 +++--
 techniques/html/H91.html | 90 +++++++++++++++++++++++++---------------
 2 files changed, 64 insertions(+), 36 deletions(-)

diff --git a/techniques/html/H90.html b/techniques/html/H90.html
index aaa8977187..aaa2c6b732 100644
--- a/techniques/html/H90.html
+++ b/techniques/html/H90.html
@@ -33,9 +33,12 @@ 
    Using text to indicate required state
    
     
    
 			
    Using an asterisk to indicate required state
    
 			
    The text field in the example below has an explicit label that includes an asterisk to indicate the control is required. It is important that the asterisk meaning is defined at the start of the form. In this example, the asterisk is contained within a abbr element to allow for the asterisk character to be styled so that it is larger than the default asterisk character, since the asterisk character can be difficult to see for those with impaired vision.
    
-			
    The CSS
    
-			
    .req {font-size: 150%}
    
-			
    The HTML
    
+			
    
+				
    The CSS
    
+				
    .req {font-size: 150%}
    
+			
    
+		    
    
+				
    The HTML
    
 
    <p>Required fields are marked with an asterisk
    (<abbr class="req" title="required">*</abbr>).</p>
 <form action="https://example.com" method="post">
@@ -43,6 +46,7 @@ 
    The HTML
    
   <input id="firstname" name="firstname" type="text">
   ...
 </form>
    
+			
    
     
    
     
    
 			
    Using an image to indicate required state
    
diff --git a/techniques/html/H91.html b/techniques/html/H91.html
index d1cd526e3c..1fc2a513ba 100644
--- a/techniques/html/H91.html
+++ b/techniques/html/H91.html
@@ -26,50 +26,66 @@ 
    Examples
    
 		
    
 			
    Links
    
       
    User agents provide mechanisms to navigate to and select links. In each of the following examples, the role is "link" because the  a element has an href attribute. An a element without an href isn't a link. The link's value is the URI in the href attribute.
    
-			
    Link example A
    
-			
    In example A, the name is the text inside the link, in this case "Example Site".
    
+			
    
+				
    Link example A
    
+				
    In example A, the name is the text inside the link, in this case "Example Site".
    
 
    <a href="https://example.com">Example Site</a>
    
-      
    Link example B
    
-			
    In example B of an image inside a link, the alt attribute for the image provides the name.
    
+			
    
+			
    
+				
    Link example B
    
+				
    In example B of an image inside a link, the alt attribute for the image provides the name.
    
 
    <a href="https://example.com"><img alt="Example" src="example-logo.gif"></a>
    
-      
    Link example C
    
-			
    In example C, some assistive technology will not automatically insert a space character when concatenating the image's alt text and the text of the link. If the text should not be concatenated without a space, it is safest to insert a space between the image and the adjacent word so that words will not run together.
    
+			
    
+			
    
+				
    Link example C
    
+				
    In example C, some assistive technology will not automatically insert a space character when concatenating the image's alt text and the text of the link. If the text should not be concatenated without a space, it is safest to insert a space between the image and the adjacent word so that words will not run together.
    
 
    <a href="https://example.com"><img alt="Example " src="example_logo.gif">Text</a>
    
+			
    
 		
    
 		
    
 			
    Buttons
    
 			
    There are several ways to create a button in HTML.
    
-			
    Buttons example A
    
-			
    In example A, the text contained in the button element, in this case "save", gives the button its name. There is no value.
    
+			
    
+				
    Buttons example A
    
+				
    In example A, the text contained in the button element, in this case "save", gives the button its name. There is no value.
    
 
    <button type="button">Save</button>
    
-      
    Buttons example B
    
-			
    Example B uses the value attribute, in this case "Save", "Submit", or "Reset" as the name.
    
+			
    
+			
    
+				
    Buttons example B
    
+				
    Example B uses the value attribute, in this case "Save", "Submit", or "Reset" as the name.
    
 
    <input type="button" value="Save"> 
 <input type="submit" value="Submit">
 <input type="reset" value="Reset">
    
-      
    Buttons example C
    
-			
    Example C uses the alt attribute, in this case "save", as the name.
    
+			
    
+			
    
+				
    Buttons example C
    
+				
    Example C uses the alt attribute, in this case "save", as the name.
    
 
    <input alt="save" src="save.gif" type="image">
    
-      
-			
    Buttons example D
    
-      
    Example D clarifies how the user agent determines the name if the author specifies both the alt and title attributes of the input element. In this case, the user agent uses the alt attribute ("Save") and ignores the title attribute.
    
+			
    
+			
          
+				
    Buttons example D
    
+				
    Example D clarifies how the user agent determines the name if the author specifies both the alt and title attributes of the input element. In this case, the user agent uses the alt attribute ("Save") and ignores the title attribute.
    
          
 
    <input alt="save" src="save.gif" title="save the file" type="image">
    
-      
    
+			
    
+		
    
       
    
          
    Text Input
      
-				 
    Text Input example A
    
-				 
    In example A, the input field has a role of "editable text". The label element is associated to the input element via the for attribute which references the id attribute of the input element. The name comes from the label element, in this case, "Type of fruit". Its value comes from its value attribute, in this case "bananas".
    
+			
    
+				
    Text Input example A
    
+				
    In example A, the input field has a role of "editable text". The label element is associated to the input element via the for attribute which references the id attribute of the input element. The name comes from the label element, in this case, "Type of fruit". Its value comes from its value attribute, in this case "bananas".
    
          
 
    <label for="text-1">Type of fruit</label>
 <input id="text-1" type="text" value="bananas">
    
-         
-					
    Text Input example B
    
-					
    In example B, the input field has the same role as example A, but the value is the empty string and the field gets its name from the aria-label property.
    
+			
    
+			
    
+				
    Text Input example B
    
+				
    In example B, the input field has the same role as example A, but the value is the empty string and the field gets its name from the aria-label property.
    
          
 
    <input aria-label="Type of fruit" id="text-1" type="text">
    
-      
    
-      
    
+			
    
+		
    
+		
    
          
    Checkbox
    
          
    This example has a role of checkbox, from the type attribute of the input element. The label element is associated with the input element via the for attribute which refers to the id attribute of the input element. The name comes from the label element, in this case "cheese". Its state can be checked or unchecked and comes from the checked attribute. The state can be changed by the user's interaction with the control.
    
          
@@ -104,8 +120,9 @@ 
    Radio Fieldset
    
       
    			
       
    
 				
    Select Element
    
-				
    Select element example A
    
-				
    Example A has a role of "list box" from the select element. Its name is "Numbers" from the label element. Forgetting to give a name to the select is a common error. The value is the option element that has the selected attribute present. In this case, the default value is "Two".
    
+				
    
+					
    Select element example A
    
+					
    Example A has a role of "list box" from the select element. Its name is "Numbers" from the label element. Forgetting to give a name to the select is a common error. The value is the option element that has the selected attribute present. In this case, the default value is "Two".
    
          
 
    <label for="s1">Numbers</label>
 <select id="s1">
@@ -113,29 +130,36 @@ 
    Select element example A
    
   <option selected>Two</option>
   <option>Three</option>
 </select>
    
-         
+				
    
+			
    
+				
    
 					
    Select Element example B
    
-          
    Example B has the same name, role, and value as the above, but sets the name with the aria-label property on the select element. This technique can be used when a visible label is not possible.
    
+					
    Example B has the same name, role, and value as the above, but sets the name with the aria-label property on the select element. This technique can be used when a visible label is not possible.
    
          
 
    <select aria-label="Numbers" id="s1">
   <option>One</option>
   <option selected>Two</option>
   <option>Three</option>
 </select>
    
+				
    
+			
    
       	
    
 				
    
 					
    Textarea
    
-					
    Textarea example A
    
-					
    Example A has a role of "editable text" from the textarea element. The name is "Type your speech here" from the label element. The value is the content inside the textarea element, in this case "Four score and seven years ago".
    
+					
    
+						
    Textarea example A
    
+						
    Example A has a role of "editable text" from the textarea element. The name is "Type your speech here" from the label element. The value is the content inside the textarea element, in this case "Four score and seven years ago".
    
          
 
    <label for="ta-1">Type your speech here</label>
 <textarea id="ta-1">Four score and seven years ago</textarea>
    
-         
-					
    Textarea example B
    
-					
    Example B has the same role, the name is set using the title attribute, and the value is the empty string.
    
+					
    
+					
    
+						
    Textarea example B
    
+						
    Example B has the same role, the name is set using the title attribute, and the value is the empty string.
    
          
 
    <textarea title="Type your speech here">Four score and seven years ago</textarea>
    
-      	
    
+					
    
+				
    
 			
    
 			
    
 				
    Tests