diff --git a/techniques/aria/ARIA1.html b/techniques/aria/ARIA1.html index 9617000eae..8d402e2866 100644 --- a/techniques/aria/ARIA1.html +++ b/techniques/aria/ARIA1.html @@ -4,7 +4,7 @@ -

Using the aria-describedby property to provide a descriptive label for user interface controls

+

Using the aria-describedby property to provide a descriptive label for user interface controls

ID: ARIA1

Technology: aria

@@ -16,19 +16,19 @@

When to Use

Description

-

The purpose of this technique is to demonstrate how to use the WAI-ARIA aria-describedby property to provide programmatically determined, descriptive information about a user interface element. The aria-describedby property may be used to attach descriptive information to one or more elements through the use of an id reference list. The id reference list contains one or more unique element ids.

+

The purpose of this technique is to demonstrate how to use the WAI-ARIA aria-describedby property to provide programmatically determined, descriptive information about a user interface element. The aria-describedby property may be used to attach descriptive information to one or more elements through the use of an id reference list. The id reference list contains one or more unique element ids.

Refer to ARIA in HTML for information on how to provide WAI-ARIA States and Properties with HTML. WAI-ARIA States and Properties are compatible with other languages as well; refer to documentation in those languages.

-

The aria-describedby property is not designed to reference descriptions on an external resource - since it is an id, it must reference an element in the same DOM document.

+

The aria-describedby property is not designed to reference descriptions on an external resource - since it is an id, it must reference an element in the same DOM document.

Examples

-

Using aria-describedby to associate instructions with form fields

+

Using aria-describedby to associate instructions with form fields

-

Sample form field using aria-describedby to associate instructions with form fields while there is a form label.

-
<form>
+            
Sample form field using aria-describedby to associate instructions with form fields while there is a form label.

+
<form>
   <label for="fname">First name</label>
   <input aria-describedby="int2" autocomplete="given-name" id="fname" type="text">
   <p id="int2">Your first name is sometimes called your "given name".</p>
@@ -36,9 +36,9 @@ 
Using aria-describedby to associate instr
-

Using aria-describedby property to provide more detailed information about the button

+

Using aria-describedby property to provide more detailed information about the button

-
<div>
+
<div>
   <span id="fontDesc">Select the font faces and sizes to be used on this page</span>
   <button aria-describedby="fontDesc" id="fontB" type="button">Fonts</button>
 </div>
@@ -59,7 +59,7 @@ 
Tests

       

          
Procedure

          
    
-            
  1. Check that there is a user interface control having an aria-describedby attribute that references one or more elements via unique id.
    2. 
+            
  2. Check that there is a user interface control having an aria-describedby attribute that references one or more elements via unique id.
    3. 
             
  3. Check that the referenced element or elements provide additional information about the user interface control.
    4. 
          

       

@@ -93,7 +93,7 @@ 
Resources

               Accessible Name and Description Computation.
             
             
  • 
-              aria-describedby attribute (MDN).
+              aria-describedby attribute (MDN).
             
    • 
             
  • 
               Using WAI-ARIA in HTML.
diff --git a/techniques/aria/ARIA10.html b/techniques/aria/ARIA10.html
index c051e96e0f..3f6d006aa2 100644
--- a/techniques/aria/ARIA10.html
+++ b/techniques/aria/ARIA10.html
@@ -1,13 +1,13 @@
 Using aria-labelledby to provide a text alternative for non-text content
    Using aria-labelledby to provide a text alternative for non-text content
    ID: ARIA10
    Technology: aria
    Type: Technique
    When to Use
    
       
    This technique applies to HTML with Accessible Rich Internet Applications (WAI-ARIA).
    
    
    Description
    
-      
    The purpose of this technique is to provide a short description for an element that can be read by assistive technologies by using the aria-labelledby attribute. The aria-labelledby attribute associates an element with text that is visible elsewhere on the page by using an id reference value that matches the id attribute of the labeling element. Assistive technology such as screen readers use the text of the element identified by the value of the aria-labelledby attribute as the text alternative for the element with the attribute.
    
+      
    The purpose of this technique is to provide a short description for an element that can be read by assistive technologies by using the aria-labelledby attribute. The aria-labelledby attribute associates an element with text that is visible elsewhere on the page by using an id reference value that matches the id attribute of the labeling element. Assistive technology such as screen readers use the text of the element identified by the value of the aria-labelledby attribute as the text alternative for the element with the attribute.
    
    
    Examples
    
       
    
          
    Providing a short description for a complex graphic
    
          
-            
    This example shows how to use the aria-labelledby attribute to provide a short text description for a read-only complex graphic of an star rating pattern; the graphic is composed of several image elements. The text alternative for the graphic is the label, visible on the page beneath the star pattern.
    
-
    <div role="img" aria-labelledby="star-id">
+            
    This example shows how to use the aria-labelledby attribute to provide a short text description for a read-only complex graphic of an star rating pattern; the graphic is composed of several image elements. The text alternative for the graphic is the label, visible on the page beneath the star pattern.
    
+
    <div role="img" aria-labelledby="star-id">
   <img src="fullstar.png" alt="">
   <img src="fullstar.png" alt="">
   <img src="fullstar.png" alt="">
@@ -22,9 +22,9 @@ 
    Providing a short description for a complex graphic
    
    
    Tests
    
       
    Procedure
    
          
      
-            
    1. Examine each element where the aria-labelledby attribute is present and the element does not support the alt attribute.
      2. 
-            
    2. Check whether the value of the aria-labelledby attribute is the id of an element on the web page.
      3. 
-            
    3. Determine that the text of the element identified by the aria-labelledby attribute accurately labels the element, provides a description of its purpose, or provides equivalent information.
      4. 
+            
    4. Examine each element where the aria-labelledby attribute is present and the element does not support the alt attribute.
      5. 
+            
    5. Check whether the value of the aria-labelledby attribute is the id of an element on the web page.
      6. 
+            
    6. Determine that the text of the element identified by the aria-labelledby attribute accurately labels the element, provides a description of its purpose, or provides equivalent information.
      7. 
          
    
       
    
       
    Expected Results
    
diff --git a/techniques/aria/ARIA11.html b/techniques/aria/ARIA11.html
index aa05f0544e..40440bc068 100644
--- a/techniques/aria/ARIA11.html
+++ b/techniques/aria/ARIA11.html
@@ -22,14 +22,14 @@ 
    Using ARIA landmarks to identify regions of a page
    
 
    
       
    Landmarks are inserted into the page using the role attribute on an element that marks the section. The value of the attribute designates the type of landmark. These role values are listed below. For HTML mappings of landmark roles, refer to the Rules of ARIA attribute usage by HTML element table in the ARIA In HTML recommendation.
    
       
      
-         
    • banner: A region that contains mostly site-oriented content, such as the logo or a site-specific search tool.
      • 
-         
    • navigation: A region that contains navigation links to other pages or different parts of the same page.
      • 
-         
    • main: A region that contains a page's main content.
      • 
-         
    • region: A region that contains a perceivable section of the page containing content that is sufficiently important for users to be able to navigate to the section. A region landmark isn't exposed as a landmark region unless it has an accessible name, often provided using aria-label or aria-labelledby.
      • 
-         
    • form: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing. A form landmark isn't exposed as a landmark region unless it has an accessible name.
      • 
-         
    • search: A region of the page containing search functionality.
      • 
-         
    • complementary: Any section of the document that supports the main content, yet is separate and meaningful on its own.
      • 
-         
    • contentinfo: A region that contains information about the parent document such as copyrights and links to privacy statements.
      • 
+         
    • banner: A region that contains mostly site-oriented content, such as the logo or a site-specific search tool.
      • 
+         
    • navigation: A region that contains navigation links to other pages or different parts of the same page.
      • 
+         
    • main: A region that contains a page's main content.
      • 
+         
    • region: A region that contains a perceivable section of the page containing content that is sufficiently important for users to be able to navigate to the section. A region landmark isn't exposed as a landmark region unless it has an accessible name, often provided using aria-label or aria-labelledby.
      • 
+         
    • form: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing. A form landmark isn't exposed as a landmark region unless it has an accessible name.
      • 
+         
    • search: A region of the page containing search functionality.
      • 
+         
    • complementary: Any section of the document that supports the main content, yet is separate and meaningful on its own.
      • 
+         
    • contentinfo: A region that contains information about the parent document such as copyrights and links to privacy statements.
      • 
       
    
 
       
    There are cases when a particular landmark role could be used more than once on a page, such as on primary and secondary blocks of navigation. In these cases, identical roles should be named using a valid technique for labeling regions.
    
@@ -43,7 +43,7 @@ 
    Using ARIA landmarks to identify regions of a page
    
       
    Simple landmarks
    
          
       
    The following example shows how landmarks might be added to an HTML document:
    
-            
    <div role="banner">site logo and name, etc. here</div>
+            
    <div role="banner">site logo and name, etc. here</div>
 <div role="search">search functionality here</div>
 <div role="navigation">a list of navigation links here</div>
 <div role="form">a sign-up form here</div>
@@ -56,9 +56,9 @@ 
    Simple landmarks
    
 
    
    
    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 navigation role is used multiple times on a page, each instance may have a unique label specified using 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 navigation role is used multiple times on a page, each instance may have a unique label specified using aria-labelledby:
    
 
-
    <div aria-labelledby="site-nav-heading" role="navigation">
+
    <div aria-labelledby="site-nav-heading" role="navigation">
   <h2 id="site-nav-heading">Site</h2>
     <ul>
       <li><a href="...">nav link 1</a></li>  
@@ -80,7 +80,7 @@ 
    Multiple landmarks of the same type and aria-labelledby
    
       
    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:
    
-
    <div aria-label="Site" role="navigation">
+
    <div aria-label="Site" role="navigation">
    <ul>
       <li><a href="...">nav link 1</a></li>
       <li><a href="...">nav link 2</a></li>
@@ -97,8 +97,8 @@ 
    Multiple landmarks of the same type and aria-label
    
    
    
    
    
       
    Search form
    
-      
    The following example shows a search form with a "search" landmark. The search role typically goes on the form element or a div surrounding the form:
    
-
    <form role="search">
+      
    The following example shows a search form with a "search" landmark. The search role typically goes on the form element or a div surrounding the form:
    
+
    <form role="search">
    <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>
@@ -110,7 +110,7 @@ 
    Search form
    
          
    Procedure
    
          
      
             
    1. Examine each element with a landmark role.
      2. 
-            
    2. Examine whether the correct element has been used to mark up content. For example: a navigation role has been used to mark up a section with navigation links, or the main role is used to contain the page's main content.
      3. 
+            
    3. Examine whether the correct element has been used to mark up content. For example: a navigation role has been used to mark up a section with navigation links, or the main role is used to contain the page's main content.
      4. 
             
    4. If a landmark region needs to have an accessible name to be exposed as a landmark, check to see that there is an accessible name.
      5. 
             
    5. If the same type of landmark appears multiple times on the page, check that each one is given a unique and meaningful accessible name.
      6. 
          
    
diff --git a/techniques/aria/ARIA12.html b/techniques/aria/ARIA12.html
index 62ec57a5d3..68f60d5933 100644
--- a/techniques/aria/ARIA12.html
+++ b/techniques/aria/ARIA12.html
@@ -5,7 +5,7 @@
 		
    
 	 
-		
    Using role=heading to identify headings
    
+		
    Using role=heading to identify headings
    
 		
    
 			
    ID: ARIA12
    
 			
    Technology: aria
    
@@ -18,16 +18,16 @@ 
    When to Use
    
 	 
    
 		
    Description
    
       
    The purpose of this technique is to provide a way for Assistive Technologies (AT) to identify 
-a piece of content as a heading. Applying role="heading" to an element causes an AT (like a screen reader) to treat it as though it were a heading. The role="heading" property must be paired with the aria-level property to define the heading level.
    
-      
    When possible, use native heading markup. For example, it is preferable to use an h1 element, rather than using <div role="heading" aria-level="1">. Native HTML elements have implicit styling and features that won't necessarily be replicated with ARIA equivalents. For instance, heading elements will have specific styling adjustments made when viewing a page in a browser's Reader Mode. Whereas a <div role="heading" aria-level="1"> will not be styled as a heading, because the underlying element is a div. ARIA only modifies the way an element is exposed to assistive technology, it does nothing to change the implicit style or functionality of the element it is applied to.
    
+a piece of content as a heading. Applying role="heading" to an element causes an AT (like a screen reader) to treat it as though it were a heading. The role="heading" property must be paired with the aria-level property to define the heading level.
    
+      
    When possible, use native heading markup. For example, it is preferable to use an h1 element, rather than using <div role="heading" aria-level="1">. Native HTML elements have implicit styling and features that won't necessarily be replicated with ARIA equivalents. For instance, heading elements will have specific styling adjustments made when viewing a page in a browser's Reader Mode. Whereas a <div role="heading" aria-level="1"> will not be styled as a heading, because the underlying element is a div. ARIA only modifies the way an element is exposed to assistive technology, it does nothing to change the implicit style or functionality of the element it is applied to.
    
 
    
    
 	 
    
 		
    Examples
    
 		
    
 			
    Simple headings
    
-			
    This example demonstrates how to implement headings using role="heading" and aria-level.
    
-
    <div role="heading" aria-level="2">Global News Items</div>
+			
    This example demonstrates how to implement headings using role="heading" and aria-level.
    
+
    <div role="heading" aria-level="2">Global News Items</div>
 ... a list of global news with editorial comment....
    
 <div role="heading" aria-level="3">Politics</div>
@@ -36,15 +36,15 @@ 
    Simple headings
    
       
    
          
    Additional heading levels
    
          
-            
    This example demonstrates how to implement a level 7 heading using role="heading" and the aria-level attribute. Since HTML only supports headings up to level 6, there is no native element to provide these semantics.
    
-
    <h5>Fruit Trees</h5>
+            
    This example demonstrates how to implement a level 7 heading using role="heading" and the aria-level attribute. Since HTML only supports headings up to level 6, there is no native element to provide these semantics.
    
+
    <h5>Fruit Trees</h5>
 <h6>Apples</h6>
 <p>Apples grow on trees in areas known as orchards...</p>
    ...
 <div role="heading" aria-level="7">Jonagold</div>
 <p>Jonagold is a cross between the Golden Delicious and Jonathan varieties...</p>
    
 	
       
    
    
    
@@ -53,9 +53,9 @@ 
    Tests
    
 		
    
 			
    Procedure
    
 			
      
-				
    1. Examine each element with the attribute role="heading".
      2. 
+				
    2. Examine each element with the attribute role="heading".
      3. 
 				
    3. Determine whether the content of the element is appropriate as a heading.
      4. 
-				
    4. Determine whether the aria-level value is the appropriate hierarchical level.
      5. 
+				
    5. Determine whether the aria-level value is the appropriate hierarchical level.
      6. 
       
    
     
    
     
    
@@ -78,16 +78,16 @@ 
    Related Techniques
    
 		
    Resources
      
 		
    
    
diff --git a/techniques/aria/ARIA13.html b/techniques/aria/ARIA13.html
index d673287611..fa10801273 100644
--- a/techniques/aria/ARIA13.html
+++ b/techniques/aria/ARIA13.html
@@ -1,19 +1,19 @@
 Using aria-labelledby to name regions and landmarks
    Using aria-labelledby to name regions and landmarks
    ID: ARIA13
    Technology: aria
    Type: Technique
    When to Use
    
       
    Technologies that support Accessible Rich Internet Applications (WAI-ARIA). 
    
    
    Description
    
-      
    The purpose of this technique is to provide names for regions of a page that can be read by assistive technology.  The aria-labelledby attribute provides a way to associate a section of the page marked up as a region or landmarks with text that is on the page that labels it.
+      
    The purpose of this technique is to provide names for regions of a page that can be read by assistive technology.  The aria-labelledby attribute provides a way to associate a section of the page marked up as a region or landmarks with text that is on the page that labels it.
 
    
       
    Landmark roles (or "landmarks") programmatically identify sections of a page. Landmarks help assistive technology (AT) users orient themselves to a page and help them navigate easily to various sections of a page.
 
    
-      
    Like aria-describedby, aria-labelledby can accept multiple ids to point to other regions of the page using a space separated list. It is also limited to ids for defining these sets.
+      
    Like aria-describedby, aria-labelledby can accept multiple ids to point to other regions of the page using a space separated list. It is also limited to ids for defining these sets.
 
    
    
    
    
    Examples
    
       
    
          
    Identify a landmark with on-page text
    
          
-            
    Below is an example of aria-labelledby used on a complementary Landmark. The region of the document to which the heading pertains could be marked with the aria-labelledby property containing the value of the id for the header.
    
-
    <div role="complementary" aria-labelledby="hdr1">
+            
    Below is an example of aria-labelledby used on a complementary Landmark. The region of the document to which the heading pertains could be marked with the aria-labelledby property containing the value of the id for the header.
    
+
    <div role="complementary" aria-labelledby="hdr1">
   <h1 id="hdr1">Top News Stories</h1>
   ...
 </div>
    
@@ -23,7 +23,7 @@ 
    Identify a landmark with on-page text
    
          
    Identification for Application landmarks
    
          
             
    The following code snippet for application landmarks with static prose. If you have a regional landmark of type application and static descriptive text is available, then on the application landmark, include an aria-describedby reference to associate the application and the static text as shown here:
    
-
    <div role="application" aria-labelledby="p123" aria-describedby="info">
+
    <div role="application" aria-labelledby="p123" aria-describedby="info">
    <h1 id="p123">Calendar<h1>
    <p id="info">This calendar shows the game schedule for the Boston Red Sox.</p>
    <div role="grid">
diff --git a/techniques/aria/ARIA14.html b/techniques/aria/ARIA14.html
index 4bc4484186..24c289f5ef 100644
--- a/techniques/aria/ARIA14.html
+++ b/techniques/aria/ARIA14.html
@@ -1,18 +1,18 @@
 Using aria-label to provide an invisible label where a visible label cannot be used
    Using aria-label to provide an invisible label where a visible label cannot be used
    ID: ARIA14
    Technology: aria
    Type: Technique
    When to Use
    
       
    Technologies that support Accessible Rich Internet Applications (WAI-ARIA). 
    
    
    Description
    
-      
    For sighted users, the context and visual appearance of an element can provide sufficient cues to determine the purpose. An example is the 'X' often used in the top right corner of pop-up divs (light boxes) to indicate the control for closing the div.  
+      
    For sighted users, the context and visual appearance of an element can provide sufficient cues to determine the purpose. An example is the 'X' often used in the top right corner of pop-up divs (light boxes) to indicate the control for closing the div.  
 
    
-      
    In some situations, elements can be given the attribute aria-label to provide an accessible name for situations when there is no visible label due to a chosen design approach or layout but the context and visual appearance of the control make its purpose clear.
    
+      
    In some situations, elements can be given the attribute aria-label to provide an accessible name for situations when there is no visible label due to a chosen design approach or layout but the context and visual appearance of the control make its purpose clear.
    
 
-      
    In other situations, elements can be given the attribute aria-label to provide an accessible name when the native HTML labeling element is not supported by the control - for example, when a div set to contentEditable is used instead of native form elements such as input type="text" or textarea in order to provide a richer text editing experience.
    
+      
    In other situations, elements can be given the attribute aria-label to provide an accessible name when the native HTML labeling element is not supported by the control - for example, when a div set to contentEditable is used instead of native form elements such as input type="text" or textarea in order to provide a richer text editing experience.
    
 
    
    Examples
    
       
    
          
    A close button in a pop-up box
    
          
-            
    On a page, a link displays a pop-up box (a div) with additional information. The 'close' element is implemented as a button containing merely the letter 'X'. The property aria-label="close" is used to provide an accessible name to the button.
    
-
    <div id="box">
+            
    On a page, a link displays a pop-up box (a div) with additional information. The 'close' element is implemented as a button containing merely the letter 'X'. The property aria-label="close" is used to provide an accessible name to the button.
    
+
    <div id="box">
    This is a pop-up box.
    <button aria-label="Close">X</button>				
 </div>
    
@@ -23,7 +23,7 @@ 
    A close button in a pop-up box
    
       
    
          
    A phone number with multiple fields
    
          
-
    <div role="group" aria-labelledby="groupLabel">
+
    <div role="group" aria-labelledby="groupLabel">
   <span id="groupLabel">Work Phone</span>
   +<input autocomplete="tel-country-code" type="number" aria-label="country code">
   <input autocomplete="tel-area-code" type="number" aria-label="area code">
@@ -33,10 +33,10 @@ 
    A phone number with multiple fields
    
       
    
    
    Tests
    
       
    Procedure
    
-         
    For elements that use aria-label:
+         
    For elements that use aria-label:
 
    
          
      
-            
    1. Check that the value of the aria-label attribute properly describes the purpose of an element where user input is required
+            
    2. Check that the value of the aria-label attribute properly describes the purpose of an element where user input is required
 
      3. 
          
    
       
    
diff --git a/techniques/aria/ARIA15.html b/techniques/aria/ARIA15.html
index 5c24de661a..e66e2fe5b7 100644
--- a/techniques/aria/ARIA15.html
+++ b/techniques/aria/ARIA15.html
@@ -3,17 +3,17 @@
    
    Description
    
       
    The objective of this technique is to provide descriptions of images when a short text alternative does not adequately convey the function or information provided in the object. 
 
    
-      
    A feature of WAI-ARIA is the ability to associate descriptive text with a section, drawing, form element, picture, and so on using the aria-describedby property. Descriptive text provided using aria-describedby is separate from the short name provided using the alt attribute in HTML. An advantage of providing long descriptions using content from the same page as the image is that the alternative is available to all, including sighted people who do not have assistive technology.
    
+      
    A feature of WAI-ARIA is the ability to associate descriptive text with a section, drawing, form element, picture, and so on using the aria-describedby property. Descriptive text provided using aria-describedby is separate from the short name provided using the alt attribute in HTML. An advantage of providing long descriptions using content from the same page as the image is that the alternative is available to all, including sighted people who do not have assistive technology.
    
 
-      
    Like aria-labelledby, aria-describedby can accept multiple ids to point to other regions of the page using a space separated list. It is also limited to ids for defining these sets.
    
+      
    Like aria-labelledby, aria-describedby can accept multiple ids to point to other regions of the page using a space separated list. It is also limited to ids for defining these sets.
    
 
    
    Examples
    
       
    
          
    Describing an image
    
          
-            
    The following example shows how aria-describedby can be applied to an image to provide a long description, where that text description is on the same page as the image.
    
+            
    The following example shows how aria-describedby can be applied to an image to provide a long description, where that text description is on the same page as the image.
    
 
-
    <img src="ladymacbeth.jpg" alt="Lady MacBeth" aria-describedby="p1">
+
    <img src="ladymacbeth.jpg" alt="Lady MacBeth" aria-describedby="p1">
 <p id="p1">This painting dates back to 1889 and is oil on canvas. It was created by 
  John Singer Sargent, and represents ...</p>
    
          
@@ -21,9 +21,9 @@ 
    Describing an image
    
    
    Tests
    
       
    Procedure
    
          
      
-            
    1. Examine each image element where a aria-describedby attribute is present.
+            
    2. Examine each image element where a aria-describedby attribute is present.
 
      3. 
-            
    3. Examine whether the aria-describedby attribute  programmatically associates an element with its text description, via the id attribute on the element where the text to be used as the description is found. 
+            
    4. Examine whether the aria-describedby attribute  programmatically associates an element with its text description, via the id attribute on the element where the text to be used as the description is found. 
 
      5. 
             
    5. Examine whether the combined text equivalent and associated text description accurately describe or provide the equivalent purpose to the object.
 
      6. 
diff --git a/techniques/aria/ARIA16.html b/techniques/aria/ARIA16.html
index d7cbc599e6..a7b70cb59f 100644
--- a/techniques/aria/ARIA16.html
+++ b/techniques/aria/ARIA16.html
@@ -1,18 +1,18 @@
 Using aria-labelledby to provide a name for user interface controls
      Using aria-labelledby to provide a name for user interface controls
      ID: ARIA16
      Technology: aria
      Type: Technique
      When to Use
      
       
      Technologies that support Accessible Rich Internet Applications (WAI-ARIA). 
      
    
      Description
      
-      
      The purpose of this technique is to provide names for user interface controls that can be read by assistive technology.  WAI-ARIA provides a way to associate text with a section, drawing, form element, picture, and so on, using the aria-labelledby property. This techniques uses the aria-labelledby attribute to associate a user interface control, such as a form field, with text on the page that labels it.
+      
      The purpose of this technique is to provide names for user interface controls that can be read by assistive technology.  WAI-ARIA provides a way to associate text with a section, drawing, form element, picture, and so on, using the aria-labelledby property. This techniques uses the aria-labelledby attribute to associate a user interface control, such as a form field, with text on the page that labels it.
 
      
-      
      Like aria-describedby, aria-labelledby can accept multiple ids to point to other elements of the page using a space separated list. This capability makes aria-labelledby especially useful in situations where sighted users use information from the surrounding context to identify a control. Using aria-labelledby to concatenate a label from several text nodes contains more examples of situations where names are created from several other text elements on the page.
+      
      Like aria-describedby, aria-labelledby can accept multiple ids to point to other elements of the page using a space separated list. This capability makes aria-labelledby especially useful in situations where sighted users use information from the surrounding context to identify a control. Using aria-labelledby to concatenate a label from several text nodes contains more examples of situations where names are created from several other text elements on the page.
 
      
       
      While the function of aria-labelledby appears similar to the native HTML label element, there are some differences:
 
      
       
        
          
      •  
-               aria-labelledby can reference more than one text element; label can only reference one.
        • 
+               aria-labelledby can reference more than one text element; label can only reference one.
          
      •  
-               aria-labelledby can be used for a variety of elements while the label element can only be used on form elements.
        • 
-         
      •  Clicking on a label focuses the associated form field. This does not occur with aria-labelledby. If this behaviour is required then use label or implement this functionality using scripting.
+               aria-labelledby can be used for a variety of elements while the label element can only be used on form elements.
        • 
+         
      •  Clicking on a label focuses the associated form field. This does not occur with aria-labelledby. If this behaviour is required then use label or implement this functionality using scripting.
 
        • 
       
      
 
@@ -20,41 +20,41 @@
       
      
          
      Labelling a simple text field
      
          
-            
      The following is an example of aria-labelledby used on a simple text field to provide a label in a situation where there is no text available for a dedicated label but there is other text on the page that can be used to accurately label the control.
      
+            
      The following is an example of aria-labelledby used on a simple text field to provide a label in a situation where there is no text available for a dedicated label but there is other text on the page that can be used to accurately label the control.
      
 
-
      <input name="searchtxt" type="text" aria-labelledby="searchbtn">
+
      <input name="searchtxt" type="text" aria-labelledby="searchbtn">
 <input name="searchbtn" id="searchbtn" type="submit" value="Search">
      
          
       
      
       
      
          
      Labelling a slider
      
          
-            
      Below is an example of aria-labelledby used to provide a label for a slider control. In this case the label text is selected from within a longer adjacent text string. Please note that this example is simplified to show only the labeling relationship; authors implementing custom controls also need to ensure that controls meet other success criteria.
      
-
      <p>Please select the <span id="mysldr-lbl">number of days for your trip</span></p>
+            
      Below is an example of aria-labelledby used to provide a label for a slider control. In this case the label text is selected from within a longer adjacent text string. Please note that this example is simplified to show only the labeling relationship; authors implementing custom controls also need to ensure that controls meet other success criteria.
      
+
      <p>Please select the <span id="mysldr-lbl">number of days for your trip</span></p>
 <div id="mysldr" role="slider" aria-labelledby="mysldr-lbl"></div>
      
          
       
      
       
      
          
      A label from multiple sources
      
          
-            
      The following example of aria-labelledby with multiple references uses the label element. For additional detail on concatenating multiple sources of information into a label with aria-labelledby, please view the technique Using ARIA labelledby to concatenate a label from several text nodes.
+            
      The following example of aria-labelledby with multiple references uses the label element. For additional detail on concatenating multiple sources of information into a label with aria-labelledby, please view the technique Using ARIA labelledby to concatenate a label from several text nodes.
 
      
-
      <label id="l1" for="f3">Notify me</label>
+
      <label id="l1" for="f3">Notify me</label>
 <select name="amt" id="f3" aria-labelledby="l1 f3 l2">
   <option value="1">1</option>
   <option value="2">2</option>
 </select>
 <span id="l2">days in advance</span>
      
-            
      Note: The use of the label element is included for a number of reasons. If the user clicks on the text of the label element, the corresponding form field will receive focus, which makes the clicking target larger for people with dexterity problems. Also the label element will always be exposed via the accessibility API. A span could have been used. However, a span would lose the advantage of the larger clickable region.
+            
      Note: The use of the label element is included for a number of reasons. If the user clicks on the text of the label element, the corresponding form field will receive focus, which makes the clicking target larger for people with dexterity problems. Also the label element will always be exposed via the accessibility API. A span could have been used. However, a span would lose the advantage of the larger clickable region.
 
      
          
       
      
    
      Tests
      
       
      Procedure
      
-         
      For each user interface control element where an aria-labelledby attribute is present:
+         
      For each user interface control element where an aria-labelledby attribute is present:
 
      
          
        
-            
      1. Check that the value of the aria-labelledby attribute is the id of an element or a space separated list of ids on the web page. 
+            
      2. Check that the value of the aria-labelledby attribute is the id of an element or a space separated list of ids on the web page. 
 
        3. 
             
      3. Check that the text of the referenced element or elements accurately labels the user interface control.
 
        4. 
diff --git a/techniques/aria/ARIA17.html b/techniques/aria/ARIA17.html
index 5930d0828b..a015af2d9f 100644
--- a/techniques/aria/ARIA17.html
+++ b/techniques/aria/ARIA17.html
@@ -8,17 +8,17 @@ 
        Using grouping roles to identify related form controls
        
       
        ID: ARIA17
        Technology: aria
        Type: Technique
        When to Use
        
       
        Technologies that support Accessible Rich Internet Applications (WAI-ARIA). 
        
    
        Description
        
-      
        The objective of this technique is to mark up a set of related controls within a form  as a group. Any label associated with the group also serves as a common label or qualifier for individual controls in the group. Assistive technologies can indicate the start and end of the group and the group's label as one navigates into and out of the group. This is a viable alternative for grouping form controls programmatically when the user interface's design makes it difficult to employ the fieldset / legend technique (H71).
        
-      
        For a group of radio buttons, one should use role="radiogroup" instead of role="group".
        
-      
        The group can be labeled using aria-labelledby.
        
-      
        This technique is not meant for wrapping  all controls on a form within a single container with role="group".
        
+      
        The objective of this technique is to mark up a set of related controls within a form  as a group. Any label associated with the group also serves as a common label or qualifier for individual controls in the group. Assistive technologies can indicate the start and end of the group and the group's label as one navigates into and out of the group. This is a viable alternative for grouping form controls programmatically when the user interface's design makes it difficult to employ the fieldset / legend technique (H71).
        
+      
        For a group of radio buttons, one should use role="radiogroup" instead of role="group".
        
+      
        The group can be labeled using aria-labelledby.
        
+      
        This technique is not meant for wrapping  all controls on a form within a single container with role="group".
        
    
        
    
        
       
        Examples
        
       
        
          
        Social Security Number
        
-         
        Social security number fields which are nine digits long and broken up into three segments can be grouped using role="group".
        
-
        <div role="group" aria-labelledby="ssn1">
+         
        Social security number fields which are nine digits long and broken up into three segments can be grouped using role="group".
        
+
        <div role="group" aria-labelledby="ssn1">
   <span id="ssn1">Social Security Number</span> 
   <span style="color: #D90D0D;"> (required)</span>
   <input size="3" type="text" aria-required="true" title="First 3 digits">-
@@ -31,8 +31,8 @@ 
        Social Security Number
        
       
        
          
        Identifying radio groups
        
          
-            
        This example demonstrates use role=radiogroup. Note also that the radio buttons are custom controls with role=radio. One may optionally employ CSS to place a border around groups of such fields to visually reinforce the group relationship. The CSS properties are available below the form.
        
-
        <h3>Set Alerts for your Account</h3>
+            
        This example demonstrates use role=radiogroup. Note also that the radio buttons are custom controls with role=radio. One may optionally employ CSS to place a border around groups of such fields to visually reinforce the group relationship. The CSS properties are available below the form.
        
+
        <h3>Set Alerts for your Account</h3>
 <div role="radiogroup" aria-labelledby="alert1">
   <p id="alert1">Send an alert when balance exceeds $3,000</p>
   <div>
@@ -58,13 +58,13 @@ 
        Identifying radio groups
        
 <input type="submit" value="Continue" name="continue_btn">
        
 
 
        Related CSS Style Definition to place a border around the group of fields:
        
-
        div[role=radiogroup] {
+
        div[role=radiogroup] {
   border: black thin solid;
 }
        
             
        Working example: using grouping roles to identify related form controls.
        
 
             
        
-               The script to make the span actually work like radio buttons is not included in this example. For a similar, but coded slightly differently, working example, see the the ARIA Authoring Practices' Radio Group Example Using aria-activedescendant example.
+               The script to make the span actually work like radio buttons is not included in this example. For a similar, but coded slightly differently, working example, see the the ARIA Authoring Practices' Radio Group Example Using aria-activedescendant example.
             
        
          
       
        
@@ -75,8 +75,8 @@ 
        Tests
        
          
        Procedure
        
          
        For groups of related controls where the individual labels for each control do not provide a sufficient description, and an additional group level description is needed:
        
          
          
-            
        1.  Check that the group of logically related input or select elements are contained within an element with role=group, or role=radiogroup depending on the type of elements the group contains.
          2. 
-            
        2.  Check that this group has an accessible name defined using aria-label or aria-labelledby.
          3. 
+            
        3.  Check that the group of logically related input or select elements are contained within an element with role=group, or role=radiogroup depending on the type of elements the group contains.
          4. 
+            
        4.  Check that this group has an accessible name defined using aria-label or aria-labelledby.
          5. 
          
        
       
        
       
        
@@ -96,10 +96,10 @@ 
        Related Techniques
        
       
        Resources
        
       
       
        
diff --git a/techniques/aria/ARIA18.html b/techniques/aria/ARIA18.html
index 156a28f2a2..7e54cc832c 100644
--- a/techniques/aria/ARIA18.html
+++ b/techniques/aria/ARIA18.html
@@ -1,23 +1,23 @@
 Using aria-alertdialog to Identify Errors
        Using aria-alertdialog to Identify Errors
        ID: ARIA18
        Technology: aria
        Type: Technique
        When to Use
        
       
        Technologies that support Accessible Rich Internet Applications (WAI-ARIA). 
        
    
        Description
        
-      
        The purpose of this technique is to alert people that an input error has occurred. Using role="alertdialog" creates a notification. This notification should be modal with the following characteristics:
+      
        The purpose of this technique is to alert people that an input error has occurred. Using role="alertdialog" creates a notification. This notification should be modal with the following characteristics:
 
        
       
          
-         
        • aria-label or aria-labelledby attribute gives the alertdialog an accessible name.
          • 
-         
        • The alertdialog contains at least one focusable element, and the focus should move to that element when the alertdialog opens.
          • 
-         
        • The tab order is constrained within the alertdialog whilst it is open.
          • 
-         
        • When the alertdialog is dismissed, the focus moves back to the position it had before the alertdialog opened, if possible.
          • 
+         
        • aria-label or aria-labelledby attribute gives the alertdialog an accessible name.
          • 
+         
        • The alertdialog contains at least one focusable element, and the focus should move to that element when the alertdialog opens.
          • 
+         
        • The tab order is constrained within the alertdialog whilst it is open.
          • 
+         
        • When the alertdialog is dismissed, the focus moves back to the position it had before the alertdialog opened, if possible.
          • 
       
        
 
-      
        Note that the alertdialog should not be present in a way that it will be accessed by assistive technology until it is needed. One way to do this is not to include it in the static HTML and instead to insert it into the DOM via script when the error condition is triggered. The insertion would correspond to the following HTML sample.
+      
        Note that the alertdialog should not be present in a way that it will be accessed by assistive technology until it is needed. One way to do this is not to include it in the static HTML and instead to insert it into the DOM via script when the error condition is triggered. The insertion would correspond to the following HTML sample.
 
        
    
        Examples
        
       
        
          
        Alert dialog
        
          
-            
        This example shows how a notification using role="alertdialog" can be used to notify someone they have entered invalid information.
        
-
        <div role="alertdialog" aria-labelledby="alertHeading">
+            
        This example shows how a notification using role="alertdialog" can be used to notify someone they have entered invalid information.
        
+
        <div role="alertdialog" aria-labelledby="alertHeading">
   <h1 id="alertHeading">Error</h1>
   <p>Employee's Birth Date is after their hire date.
    Please verify the birth date and hire date.</p>
@@ -30,13 +30,13 @@ 
        Alert dialog
        
    
        Tests
        
       
        Procedure
        
          
          
-            
        1. Trigger the error that causes the alertdialog to appear.
          2. 
-            
        2. Determine that the alertdialog contains at least one focusable element, and the focus moves to that element when the alertdialog opens.
          3. 
-            
        3. Determine that the tab order is constrained within the alertdialog while it is open, and when the alertdialog is dismissed, the focus moves back to the position it had before the alertdialog opened, if possible.
          4. 
-            
        4. Examine the element with alertdialog applied.
          5. 
-            
        5. Determine that either the aria-label or aria-labelledby attribute has been correctly used to give the alertdialog an accessible name.
          6. 
-            
        6. Determine that the contents of the alertdialog identifies the input error.
          7. 
-            
        7. Determine whether contents of the alertdialog suggests how to fix the error.
          8. 
+            
        8. Trigger the error that causes the alertdialog to appear.
          9. 
+            
        9. Determine that the alertdialog contains at least one focusable element, and the focus moves to that element when the alertdialog opens.
          10. 
+            
        10. Determine that the tab order is constrained within the alertdialog while it is open, and when the alertdialog is dismissed, the focus moves back to the position it had before the alertdialog opened, if possible.
          11. 
+            
        11. Examine the element with alertdialog applied.
          12. 
+            
        12. Determine that either the aria-label or aria-labelledby attribute has been correctly used to give the alertdialog an accessible name.
          13. 
+            
        13. Determine that the contents of the alertdialog identifies the input error.
          14. 
+            
        14. Determine whether contents of the alertdialog suggests how to fix the error.
          15. 
          
        
       
        
       
        Expected Results
        
diff --git a/techniques/aria/ARIA19.html b/techniques/aria/ARIA19.html
index 9fcd8f18c4..9c91cabdb9 100644
--- a/techniques/aria/ARIA19.html
+++ b/techniques/aria/ARIA19.html
@@ -1,7 +1,7 @@
 Using ARIA role=alert or Live Regions to Identify Errors
        Using ARIA role=alert or Live Regions to Identify Errors
        ID: ARIA19
        Technology: aria
        Type: Technique
        When to Use
        
       
        Technologies that support Accessible Rich Internet Applications (WAI-ARIA). 
        
    
        Description
        
-      
        The purpose of this technique is to notify Assistive Technologies (AT) when an input error occurs. The aria-live attribute makes it possible for an AT (such as a screen reader) to be notified when error messages are injected into a Live Region container. The content within the aria-live region is automatically read by the AT, without the AT having to focus on the place where the text is displayed.
+      
        The purpose of this technique is to notify Assistive Technologies (AT) when an input error occurs. The aria-live attribute makes it possible for an AT (such as a screen reader) to be notified when error messages are injected into a Live Region container. The content within the aria-live region is automatically read by the AT, without the AT having to focus on the place where the text is displayed.
 
        
       
        There are also a number of special case live region roles which can be used instead of applying live region properties directly.
        
    
        Examples
        
@@ -14,7 +14,7 @@ 
        Injecting error messages into a container with role=alert already present in
 
        
             
        jQuery is used to test if the inputs are empty on submit and inject error messages into the live region containers if so. Each time a new submit is attempted the previous error messages are removed from the container and new error messages injected.
 
        
-
        $(document).ready(function(e) {
+
        $(document).ready(function(e) {
   $('#signup').submit(function() {
     $('#errors').html('');
     if ($('#first').val() === '') {
@@ -29,7 +29,7 @@ 
        Injecting error messages into a container with role=alert already present in
     return false;
   });
 });
-<form name="signup" id="signup">
+<form name="signup" id="signup">
   <p id="errors" role="alert" aria-atomic="true"></p>
   <div>
     <label for="first">First Name (required)</label><br>
@@ -52,7 +52,7 @@ 
        Injecting error messages into a container with role=alert already present in
    
        Tests
        
       
        Procedure
        
          
          
-            
        1. Determine that an empty error container role=alert or aria-live=assertive attribute is present in the DOM at page load.
          2. 
+            
        2. Determine that an empty error container role=alert or aria-live=assertive attribute is present in the DOM at page load.
          3. 
             
        3.  Trigger the error that causes the content in the live region to appear or update.
          4. 
             
        4.  Determine that the error message was injected into the already present error container.
          5. 
          
        
diff --git a/techniques/aria/ARIA2.html b/techniques/aria/ARIA2.html
index 0f58cd92b1..5b6e30e421 100644
--- a/techniques/aria/ARIA2.html
+++ b/techniques/aria/ARIA2.html
@@ -19,18 +19,18 @@ 
        When to Use
        
      
        Description
        
       
        The objective of this technique is to provide programmatic indication that a form field (which shown through presentation to be required) is mandatory for successful submission of a form.
        
       
        The fact that the element is required is often visually presented (via a text or non-text symbol, or text indicating input is required or color / styling) but this is not programmatically determinable as part of the field's name.
        
-      
        The WAI-ARIA aria-required property indicates that user input is required before submission. The aria-required property can have values of true or false. For example, if a user must fill in an address field, then aria-required is set to true.
        
+      
        The WAI-ARIA aria-required property indicates that user input is required before submission. The aria-required property can have values of true or false. For example, if a user must fill in an address field, then aria-required is set to true.
        
       
        
-         
        Use of aria-required="true" might be beneficial even when an asterisk or other text symbol is programmatically associated with the field as it may reinforce its required property for some assistive technology users.
        
-         
        The fact that the element is required is often visually presented (such as a sign or symbol after the control). Using the aria-required property in addition to the visual presentation makes it much easier for user agents to pass on this important information to the user in a user agent-specific manner. Refer to ARIA in HTML for information on how to provide WAI-ARIA States and Properties with HTML. WAI-ARIA States and Properties are compatible with other languages as well; refer to documentation in those languages. 
        
+         
        Use of aria-required="true" might be beneficial even when an asterisk or other text symbol is programmatically associated with the field as it may reinforce its required property for some assistive technology users.
        
+         
        The fact that the element is required is often visually presented (such as a sign or symbol after the control). Using the aria-required property in addition to the visual presentation makes it much easier for user agents to pass on this important information to the user in a user agent-specific manner. Refer to ARIA in HTML for information on how to provide WAI-ARIA States and Properties with HTML. WAI-ARIA States and Properties are compatible with other languages as well; refer to documentation in those languages. 
        
       
        
    
        
    
        
      
        Examples
        
       
        
-         
        The required property is indicated by an asterisk placed in the label element
        
+         
        The required property is indicated by an asterisk placed in the label element
        
          
-
        <form>
+
        <form>
   <p>Note: * denotes a required field</p>
   <div>
     <label for="usrname">Login name *:</label>
@@ -48,9 +48,9 @@ 
        The required property is indicated by an
          
     
        
     
        
-      
        The required property is indicated by the word "required" placed next to the label element
        
+      
        The required property is indicated by the word "required" placed next to the label element
        
          
-
        <form>
+
        <form>
   <div>
     <label for="fname">First name:</label> <span>(required)</span>
     <input aria-required="true" autocomplete="given-name" id="fname" type="text">
@@ -78,10 +78,10 @@ 
        The required property is indicated by the
          
       
        
       
        
-         
        Required fields are indicated by a red border around the fields and a star icon rendered via CSS using ::after
        
+         
        Required fields are indicated by a red border around the fields and a star icon rendered via CSS using ::after
        
          
-        
        This example uses custom radio buttons with role=radio. The CSS properties are available below the form.
        
-
        <form>
+        
        This example uses custom radio buttons with role=radio. The CSS properties are available below the form.
        
+
        <form>
   <label data-required="true" for="acctnum">Account Number</label>
   <input aria-required="true" id="acctnum" type="text">
 
@@ -95,7 +95,7 @@ 
        Required fields are indicated by a red border around the fields and a star i
   </ul>
 </form>
        
  
        Related CSS style definition for this example:
        
-
        [aria-required=true] {
+
        [aria-required=true] {
   border: red thin solid;
 }
 [data-required=true]::after {
@@ -109,8 +109,8 @@ 
        Tests
        
         
        Procedure
        
          
        For each control which is shown via presentation to be required.
        
          
          
-			    
        1. Check whether the aria-required attribute is present:
          2. 
-          
        2. Check whether the value of the aria-required attribute is the correct required state of the user interface component.
          3. 
+			    
        3. Check whether the aria-required attribute is present:
          4. 
+          
        4. Check whether the value of the aria-required attribute is the correct required state of the user interface component.
          5. 
          
        
       
        
       
        
diff --git a/techniques/aria/ARIA20.html b/techniques/aria/ARIA20.html
index 64e94d45f9..43f89f7738 100644
--- a/techniques/aria/ARIA20.html
+++ b/techniques/aria/ARIA20.html
@@ -1,14 +1,14 @@
 Using the region role to identify a region of the page
        Using the region role to identify a region of the page
        ID: ARIA20
        Technology: aria
        Type: Technique
        When to Use
        
       
        Technologies that support Accessible Rich Internet Applications.
        
    
        Description
        
-
        This technique demonstrates how to assign a generic region role to a section of a page so that user agents and assistive technologies may be able to programmatically identify it. The region role demarcates a segment of the page that contains content of significance so that it is more readily discoverable and navigable. The generic region should be used when the section cannot be marked up using a standard document landmark role (see ARIA11).
        
-
        It is important to name regions, because they are generic grouping elements and users will need some way to tell which region they are in. Regions can be named using aria-labelledby, aria-label, or another technique. Doing so helps to better expose content and information relationships on the page. The role of region should be used prudently, because if overused they can make the page overly verbose for screen reader users.
        
+
        This technique demonstrates how to assign a generic region role to a section of a page so that user agents and assistive technologies may be able to programmatically identify it. The region role demarcates a segment of the page that contains content of significance so that it is more readily discoverable and navigable. The generic region should be used when the section cannot be marked up using a standard document landmark role (see ARIA11).
        
+
        It is important to name regions, because they are generic grouping elements and users will need some way to tell which region they are in. Regions can be named using aria-labelledby, aria-label, or another technique. Doing so helps to better expose content and information relationships on the page. The role of region should be used prudently, because if overused they can make the page overly verbose for screen reader users.
        
    
        Examples
        
       
        
          
        Region on a news website
        
          
-            
        A section on the home page of a news website that contains a poll that changes every week is marked up with role="region". The h3 above the form is referenced as the region's name using aria-labelledby.
        
-
        <div role="region" aria-labelledby="pollhead">
+            
        A section on the home page of a news website that contains a poll that changes every week is marked up with role="region". The h3 above the form is referenced as the region's name using aria-labelledby.
        
+
        <div role="region" aria-labelledby="pollhead">
   <h3 id="pollhead">This week's Poll</h3>
   <form>
     <fieldset>
@@ -31,8 +31,8 @@ 
        Region on a news website
        
       
        
          
        Identifying a region on a banking site
        
          
-            
        A user can expand links on a bank website after logging in to see details of term deposit accounts. The details are within a span marked up with region role. The heading for the region has role=heading and is included in the aria-labelledby that names the region.
        
-
        <ol>
+            
        A user can expand links on a bank website after logging in to see details of term deposit accounts. The details are within a span marked up with region role. The heading for the region has role=heading and is included in the aria-labelledby that names the region.
        
+
        <ol>
   <li>
     <button aria-controls="block1" aria-expanded="false" id="l1" title="show details"
       type="button">John Henry's Account <img alt="" src="images/panel_expand.gif">
@@ -71,16 +71,16 @@ 
        Identifying a region on a banking site
        
       
        
          
        Identifying a portlet with a generic region
        
          
-            
        This example shows how a generic region landmark might be added to a weather portlet. There is no existing text on the page that can be referenced as the label, so it is labelled with aria-label.
+            
        This example shows how a generic region landmark might be added to a weather portlet. There is no existing text on the page that can be referenced as the label, so it is labelled with aria-label.
 
        
          
-
        <div role="region" aria-label="weather portlet"> 
+
        <div role="region" aria-label="weather portlet"> 
   ...
 </div>
        
       
        
    
        Tests
        
       
        Procedure
        
-         
        For each section marked up with role="region":
        
+         
        For each section marked up with role="region":
        
          
          
             
        1. Examine the content and ensure that it is important enough to have an independent landmark
          2. 
             
        2. Ensure that a standard landmark role is not appropriate for this content
          3. 
diff --git a/techniques/aria/ARIA21.html b/techniques/aria/ARIA21.html
index 52d0cc5bb2..310644d09c 100644
--- a/techniques/aria/ARIA21.html
+++ b/techniques/aria/ARIA21.html
@@ -1,22 +1,22 @@
-Using aria-invalid to Indicate An Error Field
          Using aria-invalid to Indicate An Error Field
          ID: ARIA21
          Technology: aria
          Type: Technique
          When to Use
          
+Using aria-invalid to Indicate An Error Field
          Using aria-invalid to Indicate An Error Field
          ID: ARIA21
          Technology: aria
          Type: Technique
          When to Use
          
       
          HTML with Accessible Rich Internet Applications.
          
    
          Description
          
-
          This technique demonstrates how aria-invalid may be employed to specifically identify fields that have failed validation. Its use is most suitable when:
             
+
          This technique demonstrates how aria-invalid may be employed to specifically identify fields that have failed validation. Its use is most suitable when:
             
  
            
  
          • The error description does not programmatically identify the failed fields
            • 
  
          • The failed fields are identified in a manner that is not available to some users - for example by using an error-icon rendered visually by some technique that does not rely on color such as a visual cue like a border.
            • 
  
          
-
          One of the above two situations may be true for a field which has programmatically associated label and / or instructions that conveys data format, a data range, or the required property.
             
-
          While it is always preferable to programmatically associate specific error description with the failed field, the page's design or the framework employed may sometimes constrain the author's ability to do so. In these cases, authors may programmatically set aria-invalid to "true" on the fields that have failed validation. This is interpretable mainly by assistive technologies (like screen readers / screen magnifiers) employed by users who are vision impaired. When a field has aria-invalid set to “true”, VoiceOver in Safari announces invalid data when the field gets focus; JAWS and NVDA notify the error as an invalid entry.
          
-
          This ARIA attribute has to be set / turned on programmatically. It should not be set to “true” before input validation is performed or the form is submitted. Setting aria-invalid to “false” is the same as not placing the attribute for the form control at all. Quite understandably, nothing is conveyed by assistive technology to users in this case.
          
-
          When visible text is used to programmatically identify a failed field and / or convey how the error can be corrected, setting aria-invalid to "true" is not required from a strict compliance standpoint but may still provide helpful information for users.
          
+
          One of the above two situations may be true for a field which has programmatically associated label and / or instructions that conveys data format, a data range, or the required property.
             
+
          While it is always preferable to programmatically associate specific error description with the failed field, the page's design or the framework employed may sometimes constrain the author's ability to do so. In these cases, authors may programmatically set aria-invalid to "true" on the fields that have failed validation. This is interpretable mainly by assistive technologies (like screen readers / screen magnifiers) employed by users who are vision impaired. When a field has aria-invalid set to “true”, VoiceOver in Safari announces invalid data when the field gets focus; JAWS and NVDA notify the error as an invalid entry.
          
+
          This ARIA attribute has to be set / turned on programmatically. It should not be set to “true” before input validation is performed or the form is submitted. Setting aria-invalid to "false" is the same as not placing the attribute for the form control at all. Quite understandably, nothing is conveyed by assistive technology to users in this case.
          
+
          When visible text is used to programmatically identify a failed field and / or convey how the error can be corrected, setting aria-invalid to "true" is not required from a strict compliance standpoint but may still provide helpful information for users.
          
       
          Examples
          
       
          
          
          Using aria-invalid on required fields
          
          
-            
          The aria-invalid attribute is used on required fields that have no input. A message above the form conveys that form submission has failed due to this.
          
+            
          The aria-invalid attribute is used on required fields that have no input. A message above the form conveys that form submission has failed due to this.
          
 			
          A portion of the jQuery code and the HTML form markup follow:
          
-
          <script>
+
          <script>
 ...
 ...
    if ($('#first').val() === '') {
@@ -64,9 +64,9 @@ 
          Using aria-invalid on required fields
          
       
          
          
          Identifying errors in data format
          
          
-            
          Aria-invalid and aria-describedby are used together to indicate an error when the personal identification number (PIN), email address, or start date are not in the expected format. The error message is associated with the field using aria-describedby, and aria-invalid makes it easier to programmatically find fields with errors.
          
+            
          aria-invalid and aria-describedby are used together to indicate an error when the personal identification number (PIN), email address, or start date are not in the expected format. The error message is associated with the field using aria-describedby, and aria-invalid makes it easier to programmatically find fields with errors.
          
             
          Below is the rendered HTML code for the email address field in Example 1: When an invalid email address is entered by the user such as "samexample.com" (instead of sam@example.com), the HTML code is:
          
-
          <div class="control">
+
          <div class="control">
   <div>
     <label for="email">Email address: [*]</label> 
     <input type="text" name="email" id="email" class="error"
@@ -76,7 +76,7 @@ 
          Identifying errors in data format
          
 </div>
          
 
          And when no data is entered in the email field, the HTML code is:
          
 
-
          <div class="control">
+
          <div class="control">
   <div><label for="email">Email address: [*]</label> 
     <input type="text" name="email" id="email" class="error"
      aria-invalid="true" aria-describedBy="err_2">
@@ -85,12 +85,12 @@ 
          Identifying errors in data format
          
 </div>
          
 
          jQuery code: jQuery is used to add aria-invalid or aria-describedby attributes as well as the class attribute and append the error text. This is the code that inserts aria-invalid and class="error" but does not associate the error text "incorrect data" with the control programmatically:
          
 
-
          $(errFld).attr("aria-invalid", "true").attr("class", "error");
+
          $(errFld).attr("aria-invalid", "true").attr("class", "error");
 // Suffix error text: 
 $(errFld).parent().append('<span class="errtext">Error: Incorrect data</span>');
          
 
 
          CSS Code:
          
-
          input.error {
+
          input.error {
   border: red thin solid;
 }
 
@@ -108,10 +108,10 @@ 
          Identifying errors in data format
          
       
          
    
          Tests
          
       
          Procedure
          
-         
          For each form control that relies on aria-invalid to convey a validation failure:
          
+         
          For each form control that relies on aria-invalid to convey a validation failure:
          
          
            
-            
          1. Check that aria-invalid is not set to true when a validation failure does not exist.
            2. 
-            
          2. Check that aria-invalid is set to true when a validation failure does exist.
            3. 
+            
          3. Check that aria-invalid is not set to true when a validation failure does not exist.
            4. 
+            
          4. Check that aria-invalid is set to true when a validation failure does exist.
            5. 
             
          5. Check that the programmatically associated labels / programmatically associated instructional text for the field provide enough information to understand the error.
            6. 
          
          
       
          
diff --git a/techniques/aria/ARIA22.html b/techniques/aria/ARIA22.html
index 809375e10c..3896929552 100644
--- a/techniques/aria/ARIA22.html
+++ b/techniques/aria/ARIA22.html
@@ -5,7 +5,7 @@
 		
 	
 	
-		
          Using role=status to present status messages
          
+		
          Using role=status to present status messages
          
 		
          
 			
          Metadata
          
 			
          ID: W##
          
@@ -26,13 +26,13 @@ 
          Examples
          
 			
          
 				
          Including a search results message
          
 				
          After a user presses a Search button, the page content is updated to include the results of the search, which are displayed in a section below the Search button. The change to content also includes the message "5 results returned" near the top of this new content. This text is given an appropriate role for a status message. A screen reader will announce "5 results returned".
          
-
          <div role="status" aria-atomic="true">5 results returned.</div>
          
+
          <div role="status" aria-atomic="true">5 results returned.</div>
          
 				
          Working example: role=status on search results
          
 			
          
 			
          
 				
          Updating the shopping cart status
          
-				
          After a user presses an Add to Shopping Cart button, content near the Shopping Cart icon updates to read "1 items". The container for this text (in this case a <p>) is marked with the role of status. Because it adds visual context, the shopping cart image — with succinct and accurate alt text — is also placed in the container. Due to the aria-atomic value, a screen reader will announce "Shopping cart, six items".
          
-
          <p role="status" aria-atomic="true">
+				
          After a user presses an Add to Shopping Cart button, content near the Shopping Cart icon updates to read "1 items". The container for this text (in this case a <p>) is marked with role="status". Because it adds visual context, the shopping cart image — with succinct and accurate alt text — is also placed in the container. Due to the aria-atomic value, a screen reader will announce "Shopping cart, six items".
          
+
          <p role="status" aria-atomic="true">
   <img src="shopping-cart.png" alt="Shopping Cart">
   <span id="cart">0</span> items
 </p>
@@ -47,9 +47,9 @@ 
          Tests
          
 				
          Procedure
          
 				
          For each status message:
          
 				
            
-					
          1. Check that the container destined to hold the status message has a role attribute with a value of status before the status message occurs.
            2. 
+					
          2. Check that the container destined to hold the status message has a role attribute with a value of status before the status message occurs.
            3. 
 					
          3. Check that when the status message is triggered, it is inside the container.
            4. 
-					
          4. Check that elements or attributes that provide information equivalent to the visual experience for the status message (such as a shopping cart image with proper alt text) also reside in the container.
            5. 
+					
          5. Check that elements or attributes that provide information equivalent to the visual experience for the status message (such as a shopping cart image with proper alt text) also reside in the container.
            6. 
 				
          
 			
          
 			
          
diff --git a/techniques/aria/ARIA23.html b/techniques/aria/ARIA23.html
index 3b1f336848..ae10e17834 100644
--- a/techniques/aria/ARIA23.html
+++ b/techniques/aria/ARIA23.html
@@ -5,7 +5,7 @@
 		
 	
 	
-		
          Using role=log to identify sequential information updates
          
+		
          Using role=log to identify sequential information updates
          
 		
          
 			
          Metadata
          
 			
          ID: W##
          
@@ -28,26 +28,26 @@ 
          Examples
          
 			
          
 				
          Updating the contents of a chat conversation
          
 				
          
-					
          Comments that users type into a chat input field are appended to the end of the chat history region. The region is marked with role of log so that new additions are announced by ATs. When each new chat message appears, a screen reader should announce its content (depending on AT/browser compatibility).
          
+					
          Comments that users type into a chat input field are appended to the end of the chat history region. The region is marked with role="log" so that new additions are announced by ATs. When each new chat message appears, a screen reader should announce its content (depending on AT/browser compatibility).
          
 				
          
-
          <div id="chatRegion" role="log" aria-labelledby="chatHeading">
+
          <div id="chatRegion" role="log" aria-labelledby="chatHeading">
   <h4 id="chatHeading">Chat History</h4>
   <ul id="conversation">
     <li>The latest chat message</li>
   </ul>
 </div>
          
-				
          Working example: using role="log" with chat conversation
          
+				
          Working example: using role="log" with chat conversation
          
 			
          
 			
          
 				
          Updating the log of a server
          
-				
          An application log records time-stamped activities. The log is exposed in the app as a view, with the region marked with the role of log so that the new additions are announced by the ATs. (The default value for the aria-relevant attribute is "additions", so the removal of the old top entries due to log size limitations will not be announced.)  When each new log entry is added, a screen reader announces it.
          
-
          <div id="activityLog" role="log">
+				
          An application log records time-stamped activities. The log is exposed in the app as a view, with the region marked with role="log" so that the new additions are announced by the ATs. (The default value for the aria-relevant attribute is "additions", so the removal of the old top entries due to log size limitations will not be announced.)  When each new log entry is added, a screen reader announces it.
          
+
          <div id="activityLog" role="log">
   <h4 id="logHeading">Recent activity</h4>
   <ul id="logentries"">
     <li>08:03 UserX logged off</li>
   </ul>
 </div>
          
-				
          Working example: using role="log" with server log
          
+				
          Working example: using role="log" with server log
          
 			
          
 		
          
 		
          
diff --git a/techniques/aria/ARIA24.html b/techniques/aria/ARIA24.html
index 8adc882dc5..87a8653088 100644
--- a/techniques/aria/ARIA24.html
+++ b/techniques/aria/ARIA24.html
@@ -6,7 +6,7 @@
    
    
 
-      
          Semantically identifying a font icon with role="img"
          
+      
          Semantically identifying a font icon with role="img"
          
 
       
          
          
          Metadata
          
@@ -22,13 +22,13 @@ 
          Description
          
 
          
          Some low vision users need user stylesheets, scripts, or extensions to override the fonts on a page to perceive text content. However, they need to be able to perceive icon fonts that are meaningful, such as a star signifying a favorite, or an email icon in a link.
          
 
-         
          The key is for the author to semantically markup icon fonts with role="img". Then the user's font replacement selector can hook into that semantic and exclude role="img". This results in those icon fonts being shown.
          
+         
          The key is for the author to semantically markup icon fonts with role="img". Then the user's font replacement selector can hook into that semantic and exclude role="img". This results in those icon fonts being shown.
          
 
          
          Basic principle of the technique
          
 
          
          1. Author adds a font-face to the CSS
          
          
          The first step is used for adding a font face with icons via the CSS file.
          
-         
          /* specify font-family name for icons */
+         
          /* specify font-family name for icons */
 @font-face { font-family: 'IconFontRoleImg'; }
 
 /* default class for fonts-face with icons */
@@ -41,14 +41,14 @@ 
          1. Author adds a font-face to the CSS
          
 
          
          2. Author adds the font classes to the HTML
          
          
          The second step adds classes, the role="img" attribute for semantics and an accessible name.
          
-         
          <!-- icon via class names, role="img" and a text alternative -->
+         
          <!-- icon via class names, role="img" and a text alternative -->
 <p>
   <span class="icon icon-star-bg" role="img" aria-label="Favorite"></span>
 </p>
          
 
          
          3. User CSS file replaces the font-family except the icon file
          
          
          The third step uses the ":not selector" in combination with the "[attribute] selector" to only replace font faces for regular text.
          
-         
          /* replaces font faces but excludes all elements with attribute role="img" */
+         
          /* replaces font faces but excludes all elements with attribute role="img" */
 *:not([role="img"]) { font-family: Verdana, sans-serif !important; }
          
 
       
          
@@ -63,7 +63,7 @@ 
          Star Icon Font used as an indicator (not interactive)
          
 
 			
          
             
          Author CSS
          
-            
          /* default class for fonts-face with icons */
+            
          /* default class for fonts-face with icons */
 .icon { font-family: 'IconFontRoleImg' !important; }
 
 /* specific class for icon */
@@ -73,20 +73,20 @@ 
          Author CSS
          
             
          HTML
          
 			
          
             
          - Instead of... -
          
-            
          <p>
+            
          <p>
   <span class="icon icon-star-bg"></span>
 </p>
          
 			
          
          	
          
             
          - Do... -
          
-            
          <p>
+            
          <p>
   <span class="icon icon-star-bg" role="img" aria-label="Favorite"></span>
 </p>
          
          	
          
          
          
          
          
             
          User CSS
          
-            
          *:not([role="img"]) { font-family: Verdana, sans-serif !important; }
          
+            
          *:not([role="img"]) { font-family: Verdana, sans-serif !important; }
          
          	
          
          	
          
             
          Working example:
          
@@ -102,7 +102,7 @@ 
          Two colored / stacked star Icon Font used as an indicator
          
             
          In this example a two colored star icon is created by stacking two fonts with different colors on top of each other. This way it's possible to mimic only half the star is filled. It is not interactive and does not disappear if the user overrides the font family via CSS.
          
 			
          
             
          Author CSS
          
-            
          /* default class for fonts-face with icons */
+            
          /* default class for fonts-face with icons */
 .icon { font-family: 'IconFontRoleImg' !important; }
 
 /* specific classes for icons */
@@ -113,14 +113,14 @@ 
          Author CSS
          
             
          HTML
          
 			
          
             
          - Instead of... -
          
-            
          <span class="icon-stacked">
+            
          <span class="icon-stacked">
   <span class="icon icon-star-bg grey"></span>
   <span class="icon icon-star-half yellow"></span>
 </span>
          
 			
          
          	
          
             
          - Do... -
          
-            
          <span class="icon-stacked" role="img" aria-label="Favorite star half filled">
+            
          <span class="icon-stacked" role="img" aria-label="Favorite star half filled">
   <span class="icon icon-star-bg grey" role="img" aria-hidden="true"></span>
   <span class="icon icon-star-half yellow" role="img" aria-hidden="true"></span>
 </span>
          
@@ -128,7 +128,7 @@ 
          - Do... -
          
          	
          
          	
          
             
          User CSS
          
-            
          *:not([role="img"]) { font-family: Verdana, sans-serif !important; }
          
+            
          *:not([role="img"]) { font-family: Verdana, sans-serif !important; }
          
          	
          
          	
          
             
          Working example:
          
@@ -144,7 +144,7 @@ 
          Email Icon Font in a link WITHOUT visible text
          
             
          In this example an email icon is in a link with no visible text. It does not disappear if a user overrides font family. The icon font is identified by assistive technology as a "link image" and the name "Email" (keyboard or mouse).
          
 			
          
             
          Author CSS
          
-            
          /* default class for fonts-face with icons */
+            
          /* default class for fonts-face with icons */
 .icon { font-family: 'IconFontRoleImg' !important; }
 
 /* specific class for icon */
@@ -154,20 +154,20 @@ 
          Author CSS
          
             
          HTML
          
 			
          
             
          - Instead of... -
          
-            
          <a href="email.html">
+            
          <a href="email.html">
   <span class="icon icon-email"></span>
 </a>
          
 			
          
          	
          
             
          - Do... -
          
-            
          <a href="email.html">
+            
          <a href="email.html">
   <span class="icon icon-email" role="img" aria-label="Email"></span>
 </a>
          
          	
          
          	
          
          	
          
             
          User CSS
          
-            
          *:not([role="img"]) { font-family: Verdana, sans-serif !important; }
          
+            
          *:not([role="img"]) { font-family: Verdana, sans-serif !important; }
          
          	
          
          	
          
             
          Working example:
          
@@ -181,10 +181,10 @@ 
          Working example:
          
 
             
          Multiple Icon Fonts as part of another sematic element WITH visible text
          
 
-            
          This example already has a visible text label in the link to be used as an accessible name, the mail and chevron font icons must stay visible when the font family is changed. This can be done by ensuring the icons are contained in their own element and the attribute aria-hidden="true" is used so the font icons will be ignored by assistive technologies.
          
+            
          This example already has a visible text label in the link to be used as an accessible name, the mail and chevron font icons must stay visible when the font family is changed. This can be done by ensuring the icons are contained in their own element and the attribute aria-hidden="true" is used so the font icons will be ignored by assistive technologies.
          
 			
          
             
          Author CSS
          
-            
          /* default class for fonts-face with icons */
+            
          /* default class for fonts-face with icons */
 .icon { font-family: 'IconFontRoleImg' !important; }
 
 /* specific class for icon */
@@ -194,7 +194,7 @@ 
          Author CSS
          
             
          HTML
          
 			
          
             
          - Instead of... -
          
-            
          <style>
+            
          <style>
 .icon-double-link:before   { content: "\e93e"; }
 .icon-double-link:after    { content: "\e993"; }
 </style>
@@ -203,7 +203,7 @@ 
          - Instead of... -
          
 			
          
          	
          
             
          - Do... -
          
-            
          <style>
+            
          <style>
   .icon-email:before   { content: "\e93e"; }
   .icon-chevron:before { content: "\e993"; }
   .icon-double-link .icon-chevron  { float: right; margin-left: 1.5rem; }
@@ -218,7 +218,7 @@ 
          - Do... -
          
          	
          
          	
          
             
          User CSS
          
-            
          *:not([role="img"]) { font-family: Verdana, sans-serif !important; }
          
+            
          *:not([role="img"]) { font-family: Verdana, sans-serif !important; }
          
          	
          
          	
          
             
          Working example:
          
diff --git a/techniques/aria/ARIA4.html b/techniques/aria/ARIA4.html
index dbce07bd40..2a68a7bc08 100644
--- a/techniques/aria/ARIA4.html
+++ b/techniques/aria/ARIA4.html
@@ -1,13 +1,13 @@
 Using a WAI-ARIA role to expose the role of a user interface component
          Using a WAI-ARIA role to expose the role of a user interface component
          ID: ARIA4
          Technology: aria
          Type: Technique
          When to Use
          
       
          Technologies that support Accessible Rich Internet Applications (WAI-ARIA).
          
    
          Description
          
-      
          The objective of this technique is to define the role of an element using the role attribute with one of the non-abstract values defined in the WAI-ARIA Definition of Roles. The WAI-ARIA specification provides an informative description of each role, how it relates to other roles, and the states and properties for each role. When rich internet applications define new user interface widgets, exposing the roles enables users to understand the widget and how to interact with it.
          
+      
          The objective of this technique is to define the role of an element using the role attribute with one of the non-abstract values defined in the WAI-ARIA Definition of Roles. The WAI-ARIA specification provides an informative description of each role, how it relates to other roles, and the states and properties for each role. When rich internet applications define new user interface widgets, exposing the roles enables users to understand the widget and how to interact with it.
          
    
          Examples
          
       
          
          
          A simple toolbar
          
          
-            
          A toolbar containing three buttons. The div element has a role of "toolbar", and the img elements have "button" roles:
          
-
          <div role="toolbar"
+            
          A toolbar containing three buttons. The div element has a role of "toolbar", and the img elements have "button" roles:
          
+
          <div role="toolbar"
    tabindex="0" 
    id="customToolbar" 
    onkeydown="return optionKeyEvent(event);"
@@ -43,7 +43,7 @@ 
          A simple toolbar
          
          
          A Tree Widget
          
          
             
          A basic tree widget. Note the use of the roles "tree", "treeitem", and "group" to identify the tree and its structure. Here is a simplified excerpt from the code:
          
-
          <ul role="tree" tabindex="0">
+
          <ul role="tree" tabindex="0">
    <li role="treeitem">Birds</li>
    <li role="treeitem">Cats
      <ul role="group">
@@ -82,7 +82,7 @@ 
          A Tree Widget
          
       
          
    
          Tests
          
       
          Procedure
          
-         
          For a user interface component using the role attribute:
          
+         
          For a user interface component using the role attribute:
          
          
            
             
          1. Check that the value of the role attribute is one of the non-abstract roles from the values defined in the WAI-ARIA specification.
            2. 
             
          2. Check that the characteristics of the user interface component are described by the role.
            3. 
diff --git a/techniques/aria/ARIA5.html b/techniques/aria/ARIA5.html
index 0286631f6c..a2109d6acd 100644
--- a/techniques/aria/ARIA5.html
+++ b/techniques/aria/ARIA5.html
@@ -7,17 +7,17 @@
    
            Examples
            
    
            
       
            A toggle button
            
-         
            A widget with role button acts as a toggle button when it implements the attribute aria-pressed. When aria-pressed is true, the button is in a "pressed" state. When aria-pressed is false, it is not pressed. If the attribute is not present, the button is a simple command button.
            
+         
            A widget with role button acts as a toggle button when it implements the attribute aria-pressed. When aria-pressed is true, the button is in a "pressed" state. When aria-pressed is false, it is not pressed. If the attribute is not present, the button is a simple command button.
            
          
            The following snippet from the ARIA Authoring Practices Guide (APG) examples for button shows WAI-ARIA mark-up for a toggle button to mute/unmute audio:
            
-
            <a tabindex="0"
+
            <a tabindex="0"
   role="button"
   id="toggle"
   aria-pressed="false">
   Mute
   ...
 </a>
            
-         
            The a element has a role="button" and an aria-pressed attribute. The following excerpt from the Javascript for this example updates the value of the aria-pressed attribute:
            
-
            /**
+         
            The a element has a role="button" and an aria-pressed attribute. The following excerpt from the Javascript for this example updates the value of the aria-pressed attribute:
            
+
            /**
 * Toggles the toggle button's state between *pressed* and *not pressed*.
 *
 * @param {HTMLElement} button
@@ -33,9 +33,9 @@ 
            A toggle button
            
    
            
       
            A slider
            
       
-         
            A widget with role slider lets a user select a value from within a given range. The slider represents the current value and the range of possible values via the size of the slider and the position of the handle. These properties of the slider are represented by the attributes aria-valuemin, aria-valuemax, and aria-valuenow.
            
+         
            A widget with role slider lets a user select a value from within a given range. The slider represents the current value and the range of possible values via the size of the slider and the position of the handle. These properties of the slider are represented by the attributes aria-valuemin, aria-valuemax, and aria-valuenow.
            
          
            The following snippet from the ARIA Authoring Practices Guide (APG) color viewer slider example shows WAI-ARIA mark-up for one of the sliders:
            
-
            <div id="id-red" class="color-slider-label">Red</div>
+
            <div id="id-red" class="color-slider-label">Red</div>
 <div class="color-slider red"
   role="slider"
   tabindex="0"
@@ -46,7 +46,7 @@ 
            A slider
            
    ...
 </div>
            
          
            The following excerpt from the Javascript for this example updates the value of the aria-valuenow attribute when the value of the slider handle is changed:
            
-
            moveSliderTo(slider, value) {
+
            moveSliderTo(slider, value) {
   ...
   slider.sliderNode.setAttribute('aria-valuenow', value);
   ...
diff --git a/techniques/aria/ARIA6.html b/techniques/aria/ARIA6.html
index 5d5204c12f..03b3c0e6b8 100644
--- a/techniques/aria/ARIA6.html
+++ b/techniques/aria/ARIA6.html
@@ -1,14 +1,14 @@
 Using aria-label to provide labels for objects
            Using aria-label to provide labels for objects
            ID: ARIA6
            Technology: aria
            Type: Technique
            When to Use
            
       
            Technologies that support Accessible Rich Internet Applications (WAI-ARIA). 
            
    
            Description
            
-      
            The purpose of this technique is to provide a label for objects that can be read by assistive technology. The aria-label attribute provides the text label for an object, such as a button. When a screen reader encounters the object, the aria-label text is read so that the user will know what it is.
            
-      
            Authors should be aware that aria-label may be disregarded by assistive technologies in situations where aria-labelledby is used for the same object. For more information on the naming hierarchy please consult the accessible name and description computation section of the Accessible Name And Description Computation recommendation. Authors should be aware that use of aria-label will override any native naming such as alt on images or label associated with a form field using the for attribute.
            
+      
            The purpose of this technique is to provide a label for objects that can be read by assistive technology. The aria-label attribute provides the text label for an object, such as a button. When a screen reader encounters the object, the aria-label text is read so that the user will know what it is.
            
+      
            Authors should be aware that aria-label may be disregarded by assistive technologies in situations where aria-labelledby is used for the same object. For more information on the naming hierarchy please consult the accessible name and description computation section of the Accessible Name And Description Computation recommendation. Authors should be aware that use of aria-label will override any native naming such as alt on images or label associated with a form field using the for attribute.
            
    
            Examples
            
       
            
          
            Distinguishing navigation landmarks
            
          
-            
            The following example shows how aria-label could be used to distinguish two navigation landmarks in an HTML document, where there are more than two 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.
            
-
            <div role="navigation" aria-label="Primary">
+            
            The following example shows how aria-label could be used to distinguish two navigation landmarks in an HTML document, where there are more than two 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.
            
+
            <div role="navigation" aria-label="Primary">
   <ul>
     <li>...a list of links here ...</li>
   </ul>
@@ -23,8 +23,8 @@ 
            Distinguishing navigation landmarks
            
       
            
          
            Identifying region landmarks
            
          
-            
            The following example shows how a generic "region" landmark might be added to a weather portlet. There is no existing text on the page that can be referenced as the label, so it is labelled with aria-label.
            
-
            <div role="region" aria-label="weather portlet"> 
+            
            The following example shows how a generic "region" landmark might be added to a weather portlet. There is no existing text on the page that can be referenced as the label, so it is labelled with aria-label.
            
+
            <div role="region" aria-label="weather portlet"> 
   ...
 </div>
            
          
@@ -33,7 +33,7 @@ 
            Identifying region landmarks
            
          
            Providing a label for Math
            
          
             
            Below is an example of a MathML function, using the math role, appropriate label, and MathML rendering:
            
-
            <div role="math" aria-label="6 divided by 4 equals 1.5">
+
            <div role="math" aria-label="6 divided by 4 equals 1.5">
   <math xmlns="https://www.w3.org/1998/Math/MathML">
     <mfrac>
       <mn>6</mn>
@@ -47,7 +47,7 @@ 
            Providing a label for Math
            
       
            
    
            Tests
            
       
            Procedure
            
-         
            For each element where a aria-label attribute is present.
            
+         
            For each element where a aria-label attribute is present.
            
          
              
             
            1. Examine whether the text description accurately labels the object or provides a description of its purpose or provides equivalent information.
              2. 
          
            
diff --git a/techniques/aria/ARIA7.html b/techniques/aria/ARIA7.html
index b850510175..c5886da6e8 100644
--- a/techniques/aria/ARIA7.html
+++ b/techniques/aria/ARIA7.html
@@ -1,11 +1,11 @@
 Using aria-labelledby for link purpose
            Using aria-labelledby for link purpose
            ID: ARIA7
            Technology: aria
            Type: Technique
            When to Use
            
       
            Technologies that support Accessible Rich Internet Applications (WAI-ARIA). 
            
    
            Description
            
-      
            With the aria-labelledby attribute, authors can use a visible text element on the page as a label for a focusable element (a form control or a link). For example, a "read more..." link could be associated with the text of the heading of the preceding section to make the purpose of the link unambiguous (see example 1).
            
-      
            When associating text to a focusable element with the help of aria-labelledby, the target text element is given an id which is referenced in the value of the aria-labelledby attribute of the focusable element.
            
-      
            It is also possible to use several text elements on the page as a label for a focusable element. Each of the text elements used must be given a unique ID which is referenced as a string of ids (IDREF) in the value of the aria-labelledby attribute. The label text should then be concatenated following the order of ids in the value of the aria-labelledby attribute.
            
-      
            When applied on links, aria-labelledby can be used to identify the purpose of a link that may be readily apparent for sighted users, but less obvious for screen reader users.
            
-      
            The specified behavior of aria-labelledby is that the associated label text is announced instead of the link text (not in addition to the link text). When the link text itself should be included in the label text, the ID of the link should be referenced as well in the string of IDs forming the value of the aria-labelledby attribute.
            
+      
            With the aria-labelledby attribute, authors can use a visible text element on the page as a label for a focusable element (a form control or a link). For example, a "read more..." link could be associated with the text of the heading of the preceding section to make the purpose of the link unambiguous (see example 1).
            
+      
            When associating text to a focusable element with the help of aria-labelledby, the target text element is given an id which is referenced in the value of the aria-labelledby attribute of the focusable element.
            
+      
            It is also possible to use several text elements on the page as a label for a focusable element. Each of the text elements used must be given a unique ID which is referenced as a string of ids (IDREF) in the value of the aria-labelledby attribute. The label text should then be concatenated following the order of ids in the value of the aria-labelledby attribute.
            
+      
            When applied on links, aria-labelledby can be used to identify the purpose of a link that may be readily apparent for sighted users, but less obvious for screen reader users.
            
+      
            The specified behavior of aria-labelledby is that the associated label text is announced instead of the link text (not in addition to the link text). When the link text itself should be included in the label text, the ID of the link should be referenced as well in the string of IDs forming the value of the aria-labelledby attribute.
            
       
            For more information on the naming hierarchy please consult the Accessible Name and Description Computation.
            
    
            Examples
            
       
            
@@ -13,7 +13,7 @@ 
            Providing additional information for links
            
          
             
            This example will mean that the link text as shown on screen is then used as the start of the accessible name for the link. Screen readers will announce this as:
 "Read more ...Storms hit east coast" and will display that same text in the links list which is very useful for screen reader users who may browse by links.
            
-
            <h2 id="headline">Storms hit east coast</h2>
+
            <h2 id="headline">Storms hit east coast</h2>
 <p>Torrential rain and gale force winds have struck the east coast, 
    causing flooding in many coastal towns.
   <a id="p123" href="news.html" aria-labelledby="p123 headline">Read more...</a>
@@ -24,7 +24,7 @@ 
            Providing additional information for links
            
          
            Concatenating link text from multiple sources
            
          
             
            There may be cases where an author will place a tag around a section of code that will be referenced.
            
-
            <p>Download <span id="report-title">2012 Sales Report</span>:
+
            <p>Download <span id="report-title">2012 Sales Report</span>:
    <a aria-labelledby="report-title pdf" href="#" id="pdf">PDF</a> |
    <a aria-labelledby="report-title doc" href="#" id="doc">Word</a> |
    <a aria-labelledby="report-title ppt" href="#" id="ppt">PowerPoint</a>
@@ -33,10 +33,10 @@ 
            Concatenating link text from multiple sources
            
       
            
    
            Tests
            
       
            Procedure
            
-         
            For each link that has an aria-labelledby attribute:
            
+         
            For each link that has an aria-labelledby attribute:
            
          
              
-            
            1. Check that each id in the value of the aria-labelledby attribute matches an id of a text element used as part of the link purpose.
              2. 
-            
            2. Check that the combined value of the text referenced by the one or more ids in the aria-labelledby attribute properly describes the purpose of the link element.
              3. 
+            
            3. Check that each id in the value of the aria-labelledby attribute matches an id of a text element used as part of the link purpose.
              4. 
+            
            4. Check that the combined value of the text referenced by the one or more ids in the aria-labelledby attribute properly describes the purpose of the link element.
              5. 
          
            
       
            
       
            Expected Results
            
diff --git a/techniques/aria/ARIA8.html b/techniques/aria/ARIA8.html
index 4a5a03c96a..b4eca58cef 100644
--- a/techniques/aria/ARIA8.html
+++ b/techniques/aria/ARIA8.html
@@ -1,14 +1,14 @@
 Using aria-label for link purpose
            Using aria-label for link purpose
            ID: ARIA8
            Technology: aria
            Type: Technique
            When to Use
            
       
            Technologies that support Accessible Rich Internet Applications (WAI-ARIA). 
            
    
            Description
            
-      
            The objective of this technique is to describe the purpose of a link using the aria-label attribute. The aria-label attribute provides a way to place a descriptive text label on an object, such as a link, when there are no elements visible on the page that describe the object. If descriptive elements are visible on the page, the aria-labelledby attribute should be used instead of aria-label. Providing a descriptive text label lets a user distinguish the link from links in the web page that lead to other destinations and helps the user determine whether to follow the link. In some assistive technologies the aria-label value will show in the list of links instead of the actual link text.
            
-      
            Per the Accessible Name and Description Computation and the Accessible Name and Description Computation in the HTML Accessibility API Mappings 1.0, the aria-label text will override the text supplied within the link. As such the text supplied will be used instead of the link text by assistive technology. Due to this it is recommended to start the text used in aria-label with the text used within the link. This will allow consistent communication between users.
            
+      
            The objective of this technique is to describe the purpose of a link using the aria-label attribute. The aria-label attribute provides a way to place a descriptive text label on an object, such as a link, when there are no elements visible on the page that describe the object. If descriptive elements are visible on the page, the aria-labelledby attribute should be used instead of aria-label. Providing a descriptive text label lets a user distinguish the link from links in the web page that lead to other destinations and helps the user determine whether to follow the link. In some assistive technologies the aria-label value will show in the list of links instead of the actual link text.
            
+      
            Per the Accessible Name and Description Computation and the Accessible Name and Description Computation in the HTML Accessibility API Mappings 1.0, the aria-label text will override the text supplied within the link. As such the text supplied will be used instead of the link text by assistive technology. Due to this it is recommended to start the text used in aria-label with the text used within the link. This will allow consistent communication between users.
            
    
            Examples
            
       
            
          
            Describing the purpose of a link in HTML using aria-label.
            
          
             
            In some situations, designers may choose to lessen the visual appearance of links on a page by using shorter, repeated link text such as "read more". These situations provide a good use case for aria-label in that the simpler, non-descriptive "read more" text on the page can be replaced with a more descriptive label of the link. The words 'read more' are repeated in the aria-label (which replaces the original anchor text of "[Read more...]") to allow consistent communication between users.
            
-
            <h4>Neighborhood News</h4>
+
            <h4>Neighborhood News</h4>
 <p>Seminole tax hike: Seminole city managers are proposing a 75% increase in 
   property taxes for the coming fiscal year.
   <a href="taxhike.html" aria-label="Read more about Seminole tax hike">
@@ -24,9 +24,9 @@ 
            Describing the purpose of a link in HTML using aria-label.
            
       
            
    
            Tests
            
       
            Procedure
            
-         
            For link elements that use aria-label:
            
+         
            For link elements that use aria-label:
            
          
              
-            
            1. Check that the value of the aria-label attribute properly describes the purpose of the link element.
              2. 
+            
            2. Check that the value of the aria-label attribute properly describes the purpose of the link element.
              3. 
          
            
       
            
       
            Expected Results
            
diff --git a/techniques/aria/ARIA9.html b/techniques/aria/ARIA9.html
index f24463597b..ee9290dbe3 100644
--- a/techniques/aria/ARIA9.html
+++ b/techniques/aria/ARIA9.html
@@ -1,22 +1,22 @@
 Using aria-labelledby to concatenate a name from several text nodes
            Using aria-labelledby to concatenate a label from several text nodes
            ID: ARIA9
            Technology: aria
            Type: Technique
            When to Use
            
       
            Technologies that support Accessible Rich Internet Applications (WAI-ARIA). 
            
    
            Description
            
-      
            The aria-labelledby property can be used to provide a name for all visual objects. Applied to inputs, the aria-labelledby property can be used to provide a name to native inputs as well as non-native elements, such as custom text inputs constructed with div contenteditable="true".
            
-      
            One particular use of aria-labelledby is for text inputs in situations where a meaningful name should consist of more than one text string.
            
-      
            Authors assign unique ids to the label strings to be concatenated as the name for the input element. The value of the aria-labelledby attribute is then a space-separated list of all ids in the order in which the label strings referenced should be read by screen readers. Supporting user agents will concatenate the label strings referenced and read them as one continuous name for the input.
            
-      
            The concatenation of strings can be useful for different reasons. In example 1, an input is nested within the context of a full sentence. The desired screen reader output is "Extend time-out to [ 20 ] minutes - edit with autocomplete, selected 20". Since the id of the text input is included in the string of ids referenced by aria-labelledby, the value of the input is included in the concatenated name at the right position.
            
-      
            Another application of aria-labelledby is when there is no space to provide a visible label next to the input, or when using native labels would create unnecessary redundancy. Here, the use aria-labelledby makes it possible to associate visible elements on the page as name for such inputs. This is demonstrated in example 2 where table column and row headings are concatenated into names for the text input elements inside the table.
            
+      
            The aria-labelledby property can be used to provide a name for all visual objects. Applied to inputs, the aria-labelledby property can be used to provide a name to native inputs as well as non-native elements, such as custom text inputs constructed with div contenteditable="true".
            
+      
            One particular use of aria-labelledby is for text inputs in situations where a meaningful name should consist of more than one text string.
            
+      
            Authors assign unique ids to the label strings to be concatenated as the name for the input element. The value of the aria-labelledby attribute is then a space-separated list of all ids in the order in which the label strings referenced should be read by screen readers. Supporting user agents will concatenate the label strings referenced and read them as one continuous name for the input.
            
+      
            The concatenation of strings can be useful for different reasons. In example 1, an input is nested within the context of a full sentence. The desired screen reader output is "Extend time-out to [ 20 ] minutes - edit with autocomplete, selected 20". Since the id of the text input is included in the string of ids referenced by aria-labelledby, the value of the input is included in the concatenated name at the right position.
            
+      
            Another application of aria-labelledby is when there is no space to provide a visible label next to the input, or when using native labels would create unnecessary redundancy. Here, the use aria-labelledby makes it possible to associate visible elements on the page as name for such inputs. This is demonstrated in example 2 where table column and row headings are concatenated into names for the text input elements inside the table.
            
       
            
-         
            The Accessible Name and Description Computation specifies that the string specified in aria-labelledby should replace rather than add to the content of the element that carries the property. So adding the aria-labelledby property to a native label should replace the text content inside that label unless the label itself is referenced as part of the sequence of ids in aria-labelledby.
            
+         
            The Accessible Name and Description Computation specifies that the string specified in aria-labelledby should replace rather than add to the content of the element that carries the property. So adding the aria-labelledby property to a native label should replace the text content inside that label unless the label itself is referenced as part of the sequence of ids in aria-labelledby.
            
       
            
    
            Examples
            
       
            
          
            A time-out input field with concatenated name
            
          
             
            A text input allows users to extend the default time before a time-out occurs.
            
-            
            The string "Extend time-out to" is contained in a native label element and is associated with the input with the input by id="timeout-duration" . This label is associated with this input using the for/id association only on user agents that don't support ARIA. On user agents that support ARIA, the for/id association is ignored and the name for the input is provided only by aria-labelledby, per the Accessible Name and Description Computation in the HTML Accessibility API Mappings 1.0.
            
-            
            The aria-labelledby attribute on the text input references three elements: (1) the span containing the native label, (2) the text input containing the default text '20' (recall that this input is not labelled with the for/id associated label text), and (3) the string 'minutes' contained in a span. These elements should be concatenated to provide the full name for the text input
            
-
            <div>
+            
            The string "Extend time-out to" is contained in a native label element and is associated with the input with the input by id="timeout-duration" . This label is associated with this input using the for/id association only on user agents that don't support ARIA. On user agents that support ARIA, the for/id association is ignored and the name for the input is provided only by aria-labelledby, per the Accessible Name and Description Computation in the HTML Accessibility API Mappings 1.0.
            
+            
            The aria-labelledby attribute on the text input references three elements: (1) the span containing the native label, (2) the text input containing the default text '20' (recall that this input is not labelled with the for/id associated label text), and (3) the string 'minutes' contained in a span. These elements should be concatenated to provide the full name for the text input
            
+
            <div>
   <span id="timeout-label">
     <label for="timeout-duration">Extend time-out to</label>
   </span>
@@ -30,8 +30,8 @@ 
            A time-out input field with concatenated name
            
       
            
          
            A simple data table with text inputs
            
          
-            
            A simple data table containing text inputs. The input labels are concatenated through aria-labelledby referencing the respective column and row headers.
            
-
            <table>
+            
            A simple data table containing text inputs. The input labels are concatenated through aria-labelledby referencing the respective column and row headers.
            
+
            <table>
   <tr>
     <td></td>
     <th id="tpayer">Taxpayer</th>
@@ -54,8 +54,8 @@ 
            A simple data table with text inputs
            
       
            
          
            A conference workshop booking table
            
          
-            
            A conference workshop booking table with two parallel tracks allows users to select the workshop they want to attend. When tabbing through the checkbox inputs in the table, the track (1 or 2), the title, and the speaker of the workshop followed by the adjacent checkbox label "Attend" are provided as concatenated name for the checkboxes via aria-labelledby.
            
-
            <h1>Dinosaur Conference workshops timetable Thursday, 14 & Friday, 15 March 2013</h1>
+            
            A conference workshop booking table with two parallel tracks allows users to select the workshop they want to attend. When tabbing through the checkbox inputs in the table, the track (1 or 2), the title, and the speaker of the workshop followed by the adjacent checkbox label "Attend" are provided as concatenated name for the checkboxes via aria-labelledby.
            
+
            <h1>Dinosaur Conference workshops timetable Thursday, 14 & Friday, 15 March 2013</h1>
 <table>
   <caption>Dinosaur Conference workshop booking table</caption>
   <tr>
@@ -129,10 +129,10 @@ 
            A conference workshop booking table
            
       
            
    
            Tests
            
       
            Procedure
            
-         
            For inputs that use aria-labelledby:
            
+         
            For inputs that use aria-labelledby:
            
          
              
-            
            1. Check that ids referenced in aria-labelledby are unique and match the ids of the text nodes that together provide the label
              2. 
-            
            2. Check that the concatenated content of elements referenced by aria-labelledby is descriptive for the purpose or function of the element labeled
              3. 
+            
            3. Check that ids referenced in aria-labelledby are unique and match the ids of the text nodes that together provide the label
              4. 
+            
            4. Check that the concatenated content of elements referenced by aria-labelledby is descriptive for the purpose or function of the element labeled
              5. 
          
            
       
            
       
            Expected Results
            
diff --git a/techniques/client-side-script/SCR14.html b/techniques/client-side-script/SCR14.html
index 75a98cc87d..5b1d835dfb 100644
--- a/techniques/client-side-script/SCR14.html
+++ b/techniques/client-side-script/SCR14.html
@@ -18,7 +18,7 @@ 
            When to Use
            
 		
            
 			
            Description
            
       
            The objective of this technique is to toggle announcements to screen readers of changes in a stock-price alert component. By default, when the stock price changes, the change is announced by screen readers. This could be annoying to some users, so there are buttons to allow users to toggle the announcements on or off.
            
-      
            This technique uses the aria-live property to turn the stock component into a live region and the aria-atomic property to tell screen readers to announce all of the component's content rather than just what was updated when the stock is updated. For the sake of this demo, the stock updates every 10 seconds. If announcements are turned on, the aria-live property is set to assertive; if announcements are turned off, the aria-live property is set to off. The two buttons used to control the announcements use the aria-pressed property, updated to either true or false, to inform screen reader users which button is pressed and therefore whether their screen reader will announce the stock updates or not. In a real-life situation, an author should consider setting a cookie (or equivalent) to store the user's preference so that it's set over multiple visits to the page.
            
+      
            This technique uses the aria-live property to turn the stock component into a live region and the aria-atomic property to tell screen readers to announce all of the component's content rather than just what was updated when the stock is updated. For the sake of this demo, the stock updates every 10 seconds. If announcements are turned on, the aria-live property is set to assertive; if announcements are turned off, the aria-live property is set to off. The two buttons used to control the announcements use the aria-pressed property, updated to either true or false, to inform screen reader users which button is pressed and therefore whether their screen reader will announce the stock updates or not. In a real-life situation, an author should consider setting a cookie (or equivalent) to store the user's preference so that it's set over multiple visits to the page.
            
 		
            
 		
            
 			
            Examples
            
@@ -28,7 +28,7 @@ 
            Updating screen reader settings for stock price update alerts
            
         
            
 				
            The JavaScript
            
          
-
            <script>
+
            <script>
 document.addEventListener("DOMContentLoaded", function (e) {
   const stockBox = document.querySelector("#stock-box");
   const stockMovement = document.querySelector("#stock-movement");
@@ -68,7 +68,7 @@ 
            The JavaScript
            
         
            
 
            The HTML
            
          
-
            <body>
+
            <body>
   <h1>Turbo Encabulator Stock Information</h1>	
   <div id="stock-box" aria-atomic="true" aria-live="assertive">
     <span>Turbo Encabulator Stock Price: </span>
diff --git a/techniques/client-side-script/SCR16.html b/techniques/client-side-script/SCR16.html
index d91ba19fe5..7410fabda9 100644
--- a/techniques/client-side-script/SCR16.html
+++ b/techniques/client-side-script/SCR16.html
@@ -17,7 +17,7 @@ 
            When to Use
            
    
            
       
            Description
            
       
            The objective of this technique is to notify users that they are almost out of time to complete an interaction. When scripts provide functionality that has time limits, the script can include functionality to warn the user of imminent time limits and provide a mechanism to request more time. 20 seconds or more before the time limit occurs, the script provides a confirm dialog that states that a time limit is imminent and asks if the user needs more time. If the user answers "yes" then the time limit is reset. If the user answers "no" or does not respond, the time limit is allowed to expire.
            
-      
            This technique involves time limits set with the window.setTimeout() method. If, for example, the time limit is set to expire in 60 seconds, you can set the time limit for 40 seconds and provide the confirm dialog. When the confirm dialog appears, a new time limit is set for the remaining 20 seconds. Upon expiry of the "grace period time limit" the action that would have been taken at the expiry of the 60 second time limit in the original design is taken.
            
+      
            This technique involves time limits set with the window.setTimeout() method. If, for example, the time limit is set to expire in 60 seconds, you can set the time limit for 40 seconds and provide the confirm dialog. When the confirm dialog appears, a new time limit is set for the remaining 20 seconds. Upon expiry of the "grace period time limit" the action that would have been taken at the expiry of the 60 second time limit in the original design is taken.
            
    
            
    
            
       
            Examples
            
@@ -25,7 +25,7 @@ 
            Examples
            
          
          
            A page of stock market quotes uses script to refresh the page every five minutes in order to ensure the latest statistics remain available. 20 seconds before the five minute period expires, a confirm dialog appears asking if the user needs more time before the page refreshes. This allows the user to be aware of the impending refresh and to avoid it if desired.
            
          
-
            <!doctype html>
+
            <!doctype html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
diff --git a/techniques/client-side-script/SCR18.html b/techniques/client-side-script/SCR18.html
index f2a75173d2..88485d0e1f 100644
--- a/techniques/client-side-script/SCR18.html
+++ b/techniques/client-side-script/SCR18.html
@@ -8,7 +8,7 @@ 
            Checking a single control with an event handler
            
          
             
            The following script will check that a valid date has been entered in the form control.
            
          
-
            <label for="date">Date:</label>
+
            <label for="date">Date:</label>
 <input type="text" name="date" id="date" 
   onchange="if(isNaN(Date.parse(this.value))) 
   alert('This control is not a valid date. 
@@ -17,13 +17,13 @@ 
            Checking a single control with an event handler
            
    	
            
    		
            Checking multiple controls when the user submits the form
            
    		
-   			
            The following sample shows multiple controls in a form. The form element uses the onsubmit attribute which creates an event handler to execute the validation script when the user attempts to submit the form. If the validation is successful, the event returns true and the form submission proceeds; if the validation finds errors, it displays an error message and returns false to cancel the submit attempt so the user can fix the problems.
            
+   			
            The following sample shows multiple controls in a form. The form element uses the onsubmit attribute which creates an event handler to execute the validation script when the user attempts to submit the form. If the validation is successful, the event returns true and the form submission proceeds; if the validation finds errors, it displays an error message and returns false to cancel the submit attempt so the user can fix the problems.
            
    			
            
    				
            This example demonstrates an alert for simplicity. A more helpful notification to the user would be to highlight the controls with problems and add information to the page about the nature of the errors and how to navigate to the controls that require data fixes.
            
-   				
            Although this example uses an onsubmit attribute on the form element for brevity, normal practice is to create a submit event listener when the page is loaded.
            
+   				
            Although this example uses an onsubmit attribute on the form element for brevity, normal practice is to create a submit event listener when the page is loaded.
            
    			
            
    			
            Script code:
            
-
            function validate() {
+
            function validate() {
   // initialize error message
   var msg = "";
 	
@@ -51,7 +51,7 @@ 
            Checking multiple controls when the user submits the form
            
   return true;
   }
            
    			
            Form code:
            
-
            <form action="multiple-controls.html" onsubmit="return validate()">
+
            <form action="multiple-controls.html" onsubmit="return validate()">
   <div>
     <label for="name">Name:</label>
     <input autocomplete="name" id="name" name="name" type="text">
diff --git a/techniques/client-side-script/SCR19.html b/techniques/client-side-script/SCR19.html
index 29908885ec..355851983f 100644
--- a/techniques/client-side-script/SCR19.html
+++ b/techniques/client-side-script/SCR19.html
@@ -1,5 +1,5 @@
 Using an onchange event on a select element without causing a change of
-                    context
            Using an onchange event on a select element without causing a change of
+                    context
            Using an onchange event on a select element without causing a change of
                     context
            ID: SCR19
            Technology: client-side-script
            Type: Technique
            When to Use
            
       
            HTML with support for scripting.
            
    
            Description
            
@@ -10,12 +10,12 @@
          
            This example contains two select elements. When an item is selected in the first select, the choices in the other select are updated appropriately. The first select element contains a list of continents. The second select element will contain a partial list of countries located in the selected continent. There is an onchange event associated with the continent select. When the continent selection changes, the items in the country select are modified using JavaScript via the Document Object Model (DOM). All of the data required, the list of countries and continents, is included within the web page.
            
             
            Overview of the code below
            
             
              
-               
            • countryLists array variable which contains the list of countries for each continent in the trigger select element.
              • 
-               
            • countryChange() function which is called by the onchange event of the continent select element.
              • 
+               
            • countryLists array variable which contains the list of countries for each continent in the trigger select element.
              • 
+               
            • countryChange() function which is called by the onchange event of the continent select element.
              • 
                
            • The HTML code to create the select elements in the body of the web page.
              • 
             
            
          
-
            <!doctype html> 
+
            <!doctype html> 
 <html lang="en"> 
   <head> 
     <meta charset=utf-8"> 
diff --git a/techniques/client-side-script/SCR2.html b/techniques/client-side-script/SCR2.html
index 9981e509a0..68793f57b5 100644
--- a/techniques/client-side-script/SCR2.html
+++ b/techniques/client-side-script/SCR2.html
@@ -17,9 +17,9 @@ 
            When to Use
            
       
            
       
            
          
            Description
            
-         
            The objective of this technique is to demonstrate using device independent events to change a decorative image in response to a mouse or focus event. Use the onmouseover and onmouseout events to change a decorative image when the mouse moves on top of or away from an element on the page. Also, use the onfocus and onblur events to change the image when the element receives and loses focus.
            
-         
            The example below has a decorative image in front of an anchor element. When the user mouses over the anchor tag, the decorative image in front of the anchor is changed. When the mouse moves off of the anchor, the image is changed back to its original version. The same image change effect occurs when the user gives keyboard focus to the anchor element. When focus is received the image changes, when focus is lost the image is changed back. This is accomplished by attaching onmouseover, onmouseout, onfocus and onblur event handlers to the anchor element. The event handler is a JavaScript function called updateImage(), which changes the src attribute of the image. The updateImage() is called in response to the onmouseover, onmouseout, onfocus, and onblur events.
            
-         
            Each image is given a unique id. This unique id is passed to updateImage() along with a boolean value indicating which image is to be used: updateImage(imgId, isOver);. The boolean value of true is passed when the mouse is over the anchor element or it has focus. A false value is passed when the mouse moves off of the anchor element or it loses focus. The updateImage() function uses the image id to load the image and then changes the src attribute based on the boolean value. Note that since the image is for decorative purposes, it has a null alt attribute.
            
+         
            The objective of this technique is to demonstrate using device independent events to change a decorative image in response to a mouse or focus event. Use the onmouseover and onmouseout events to change a decorative image when the mouse moves on top of or away from an element on the page. Also, use the onfocus and onblur events to change the image when the element receives and loses focus.
            
+         
            The example below has a decorative image in front of an anchor element. When the user mouses over the anchor tag, the decorative image in front of the anchor is changed. When the mouse moves off of the anchor, the image is changed back to its original version. The same image change effect occurs when the user gives keyboard focus to the anchor element. When focus is received the image changes, when focus is lost the image is changed back. This is accomplished by attaching onmouseover, onmouseout, onfocus and onblur event handlers to the anchor element. The event handler is a JavaScript function called updateImage(), which changes the src attribute of the image. The updateImage() is called in response to the onmouseover, onmouseout, onfocus, and onblur events.
            
+         
            Each image is given a unique id. This unique id is passed to updateImage() along with a boolean value indicating which image is to be used: updateImage(imgId, isOver);. The boolean value of true is passed when the mouse is over the anchor element or it has focus. A false value is passed when the mouse moves off of the anchor element or it loses focus. The updateImage() function uses the image id to load the image and then changes the src attribute based on the boolean value. Note that since the image is for decorative purposes, it has a null alt attribute.
            
       
            
          
            It is best to use images that are similar in size and to specify the height and width attributes on the image element. This will prevent any changes to the layout of the page when the image is updated. This example uses images which are identical in size.
            
       
            
@@ -27,7 +27,7 @@ 
            Description
            
    
            
       
            Examples
            
       
            
-
            <!doctype html>
+
            <!doctype html>
   <html lang="en">
   <head>
     <meta charset="utf-8">
diff --git a/techniques/client-side-script/SCR20.html b/techniques/client-side-script/SCR20.html
index 3bfe6e89b3..1b1249fb12 100644
--- a/techniques/client-side-script/SCR20.html
+++ b/techniques/client-side-script/SCR20.html
@@ -19,7 +19,7 @@ 
            When to Use
            
       
            Description
            
       
            The objective of this technique is to illustrate the use of both keyboard-specific and mouse-specific events with code that has a scripting function associated with an event. Using both keyboard-specific and mouse-specific events together ensures that content can be operated by a wide range of devices. For example, a script may perform the same action when a keypress is detected that is performed when a mouse button is clicked. This technique goes beyond the success criterion requirement for keyboard access by including not only keyboard access but access using other devices as well.
            
 
-      
            In JavaScript, commonly used event handlers include, onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload. Some mouse-specific functions have a logical corresponding keyboard-specific function (such as 'onmouseover' and 'onfocus'). A keyboard event handler should be provided that executes the same function as the mouse event handler.
            
+      
            In JavaScript, commonly used event handlers include, onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload. Some mouse-specific functions have a logical corresponding keyboard-specific function (such as 'onmouseover' and 'onfocus'). A keyboard event handler should be provided that executes the same function as the mouse event handler.
            
       
       
            The following table suggests keyboard event handlers to pair mouse event handlers.
            
       
@@ -31,24 +31,24 @@ 
            Description
            
    				...with
             
             
-               mousedown
-               keydown
+               mousedown
+               keydown
             
             
-               mouseup
-               keyup
+               mouseup
+               keyup
             
             
-               click [1]
-               keypress [2]
+               click [1]
+               keypress [2]
             
             
-               mouseover
-               focus
+               mouseover
+               focus
             
             
-               mouseout
-               blur
+               mouseout
+               blur
             
          
       
@@ -62,7 +62,7 @@ 
            Examples
            
       
            
          
            In this example of an image link, the image is changed when the user positions the pointer over the image. To provide keyboard users with a similar experience, the image is also changed when the user tabs to it.
            
          
-
            <a href="menu.php" onmouseover="swapImageOn('menu')" onfocus="swapImageOn('menu')" 
+
            <a href="menu.php" onmouseover="swapImageOn('menu')" onfocus="swapImageOn('menu')" 
    onmouseout="swapImageOff('menu')" onblur="swapImageOff('menu')"> 
    <img id="menu" src="menu_off.gif" alt="Menu"> 
 </a>
            
@@ -70,7 +70,7 @@ 
            Examples
            
       
            
          
            This example shows a custom link control where both the mouse and the keyboard can be used to activate the function. The mouse onclick event is duplicated by an appropriate keyboard onkeypress event. The tabindex attribute ensures that the keyboard will have a tab stop on the span element. Note that in this example, the nextPage() function should check that the key pressed was Enter, otherwise it will respond to all keyboard actions while the span has focus, which is not the desired behavior.
            
          
-
            <span onclick="nextPage();" onkeypress="nextPage();" role="link" tabindex="0">
+
            <span onclick="nextPage();" onkeypress="nextPage();" role="link" tabindex="0">
   <img alt="Go to next page" src="arrow.gif">
 </span>
            
    
            
diff --git a/techniques/client-side-script/SCR21.html b/techniques/client-side-script/SCR21.html
index 6015611716..02e6f5e209 100644
--- a/techniques/client-side-script/SCR21.html
+++ b/techniques/client-side-script/SCR21.html
@@ -6,27 +6,27 @@
 Using functions of the Document Object Model (DOM) to add content to a page
            Using functions of the Document Object Model (DOM) to add content to a page
            ID: SCR21
            Technology: client-side-script
            Type: Technique
            When to Use
            
       
            ECMAScript used inside HTML
            
    
            Description
            
-      
            The objective of this technique is to demonstrate how to use functions of the Document Object Model (DOM) to add content to a page. If the DOM functions are used to add the content, user agents can access the DOM to retrieve the content. The createElement() function can be used to create elements within the DOM. The createTextNode() is used to create text associated with elements. The appendChild(), removeChild(), insertBefore(), and replaceChild() functions are used to add and remove elements and nodes. Other DOM functions are used to assign attributes to the created elements.
            
+      
            The objective of this technique is to demonstrate how to use functions of the Document Object Model (DOM) to add content to a page. If the DOM functions are used to add the content, user agents can access the DOM to retrieve the content. The createElement() function can be used to create elements within the DOM. The createTextNode() is used to create text associated with elements. The appendChild(), removeChild(), insertBefore(), and replaceChild() functions are used to add and remove elements and nodes. Other DOM functions are used to assign attributes to the created elements.
            
       
            
-         
            When adding focusable elements into the document, do not add tabindex attributes to explicitly set the tab order as this can cause problems when adding focusable elements into the middle of a document. Let the default tab order be assigned to the new element by not explicitly setting a tabindex attribute.
            
+         
            When adding focusable elements into the document, do not add tabindex attributes to explicitly set the tab order as this can cause problems when adding focusable elements into the middle of a document. Let the default tab order be assigned to the new element by not explicitly setting a tabindex attribute.
            
       
            
    
            Examples
            
       
            
          
             
            This example demonstrates use of client-side scripting to validate a form. If errors are found appropriate error messages are displayed. The example uses the DOM functions to add error notification consisting of a title, a short paragraph explaining that an error has occurred, and a list of errors in an ordered list. The content of the title is written as a link so that it can be used to draw the user's attention to the error using the focus method. Each item in the list is also written as a link that places the focus onto the form field in error when the link is followed.
            
             
            For simplicity, the example just validates two text fields, but can easily be extended to become a generic form handler. Client-side validation should not be the sole means of validation, and should be backed up with server-side validation. The benefit of client-side validation is that you can provide immediate feedback to the user to save them waiting for the errors to come back from the server, and it helps reduce unnecessary traffic to the server.
            
-            
            Here is the script that adds the event handlers to the form. If scripting is enabled, the validateNumbers() function will be called to perform client-side validation before the form is submitted to the server. If scripting is not enabled, the form will be immediately submitted to the server, so validation should also be implemented on the server.
            
+            
            Here is the script that adds the event handlers to the form. If scripting is enabled, the validateNumbers() function will be called to perform client-side validation before the form is submitted to the server. If scripting is not enabled, the form will be immediately submitted to the server, so validation should also be implemented on the server.
            
          
-
            window.onload = initialise;
+
            window.onload = initialise;
 function initialise() {
   // Add an event handler for the number form
   var objForm = document.getElementById('numberform');
   objForm.onsubmit= function(){return validateNumbers(this);};
 }
            
          
-            
            Here is the validation function.  Note the use of the createElement(), createTextNode(), and appendChild() DOM functions to create the error message elements.
            
+            
            Here is the validation function.  Note the use of the createElement(), createTextNode(), and appendChild() DOM functions to create the error message elements.
            
          
-
            function validateNumbers(objForm) {
+
            function validateNumbers(objForm) {
   // Test whether fields are valid
   var bFirst = isNumber(document.getElementById('num1').value);
   var bSecond = isNumber(document.getElementById('num2').value);
@@ -94,7 +94,7 @@
          
             
            Below are the helper functions to create the error message and to set focus to the associated form field.
            
          
-
            // Function to create a list item containing a link describing the error
+
            // Function to create a list item containing a link describing the error
 // that points to the appropriate form field
 function addError(strError, strFragment, objForm, strID) {
   var objAnchor = document.createElement('a');
@@ -130,7 +130,7 @@
          
   
            Here is the HTML for the example form.
            
          
-
            <!doctype html>
+
            <!doctype html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
diff --git a/techniques/client-side-script/SCR22.html b/techniques/client-side-script/SCR22.html
index ce311aacd7..c8b7b2ef59 100644
--- a/techniques/client-side-script/SCR22.html
+++ b/techniques/client-side-script/SCR22.html
@@ -7,7 +7,7 @@
          
             
            This example uses JavaScript to control blinking of some HTML and XHTML content. JavaScript creates the blinking effect by changing the visibility status of the content. It controls the start of the effect and stops it within five seconds.
            
          
-
            ...
+
            ...
 <div id="blink1" class="highlight">New item!</div>
 <script>
   // blink "on" state
diff --git a/techniques/client-side-script/SCR24.html b/techniques/client-side-script/SCR24.html
index 84d9e2a7e3..fb4ddba42e 100644
--- a/techniques/client-side-script/SCR24.html
+++ b/techniques/client-side-script/SCR24.html
@@ -17,7 +17,7 @@ 
            When to Use
            
 		
            
 		
            
 			
            Description
            
-      
            The objective of this technique is to avoid confusion that may be caused by the appearance of new windows that were not requested by the user. Suddenly opening new windows can disorient or be missed completely by some users. New windows / tabs can be opened with the HTML target attribute or JavaScript. The example below demonstrates how to open new windows with script: it adds an event handler to a link and warns the user that the content will open in a new window.
            
+      
            The objective of this technique is to avoid confusion that may be caused by the appearance of new windows that were not requested by the user. Suddenly opening new windows can disorient or be missed completely by some users. New windows / tabs can be opened with the HTML target attribute or JavaScript. The example below demonstrates how to open new windows with script: it adds an event handler to a link and warns the user that the content will open in a new window.
            
 		
            
 		
            
 			
            Examples
            
@@ -25,15 +25,15 @@ 
            Examples
            
 				
            Using JavaScript to open a new tab / window
            
 				
            
 				
            Markup:
            
-				
            The script is included in the head of the document, and the link has an id that can be used as a hook by the script.
            
+				
            The script is included in the head of the document, and the link has an id that can be used as a hook by the script.
            
          
-
            <script src="popup.js"></script>
+
            <script src="popup.js"></script>
 ...
 <a href="help.html" id="newwin">Show Help</a>
            
          
             
            Script:
            
          
-
            window.onload = addHandlers;
+
            window.onload = addHandlers;
 
 function addHandlers(){
   var objAnchor = document.getElementById('newwin');
diff --git a/techniques/client-side-script/SCR26.html b/techniques/client-side-script/SCR26.html
index 8eb593e3c1..9c42efa131 100644
--- a/techniques/client-side-script/SCR26.html
+++ b/techniques/client-side-script/SCR26.html
@@ -2,20 +2,20 @@
       
            HTML and script
            
    
            Description
            
       
            The objective of this technique is to place inserted user interface elements into the Document Object Model (DOM) in such a way that the tab order and screen-reader reading order are set correctly by the default behavior of the user agent. This technique can be used for any user interface element that is hidden and shown, such as menus and dialogs.
            
-      
            The reading order in a screen-reader is based on the order of the HTML elements in the Document Object Model, as is the default tab order. This technique inserts new content into the DOM immediately following the element that was activated to trigger the script. The triggering element must be a link or a button, and the script must be called from its onclick event. These elements are natively focusable, and their onclick event is device independent. Focus remains on the activated element and the new content, inserted after it, becomes the next thing in both the tab order and screen-reader reading order.
            
+      
            The reading order in a screen-reader is based on the order of the HTML elements in the Document Object Model, as is the default tab order. This technique inserts new content into the DOM immediately following the element that was activated to trigger the script. The triggering element must be a link or a button, and the script must be called from its onclick event. These elements are natively focusable, and their onclick event is device independent. Focus remains on the activated element and the new content, inserted after it, becomes the next thing in both the tab order and screen-reader reading order.
            
       
            Note that this technique works for synchronous updates. For asynchronous updates (sometimes called AJAX), an additional technique is needed to inform the assistive technology that the asynchronous content has been inserted. 
            
    
            Examples
            
       
            
          
-            
            This example creates a menu when a link is clicked and inserts it after the link. The onclick event of the link is used to call the ShowHide script, passing in an id for the new menu as a parameter.
            
+            
            This example creates a menu when a link is clicked and inserts it after the link. The onclick event of the link is used to call the ShowHide script, passing in an id for the new menu as a parameter.
            
          
-
            <button aria-expanded="false" type="button" onclick="ShowHide('foo',this)">
+
            <button aria-expanded="false" type="button" onclick="ShowHide('foo',this)">
   Toggle
 </button>
            
          
-            
            The ShowHide script creates a div containing the new menu, and inserts a link into it. The last line is the core of the script. It finds the parent of the element that triggered the script, and appends the div it created as a new child to it. This causes the new div to be in the DOM after the menu. When the user hits tab, the focus will go to the first focusable item in the menu, the link we created.
            
+            
            The ShowHide script creates a div containing the new menu, and inserts a link into it. The last line is the core of the script. It finds the parent of the element that triggered the script, and appends the div it created as a new child to it. This causes the new div to be in the DOM after the menu. When the user hits tab, the focus will go to the first focusable item in the menu, the link we created.
            
          
-
            function ShowHide(id,src){
+
            function ShowHide(id,src){
   var el = document.getElementById(id);
   if (!el){
     el = document.createElement("div");
@@ -38,7 +38,7 @@
    }   
 }
            
          
-   
            CSS is used to make the div and link look like a menu.
            
+   
            CSS is used to make the div and link look like a menu.
            
          
       
            
    
            Tests
            
diff --git a/techniques/client-side-script/SCR27.html b/techniques/client-side-script/SCR27.html
index 30f3e01dc8..87e4092dec 100644
--- a/techniques/client-side-script/SCR27.html
+++ b/techniques/client-side-script/SCR27.html
@@ -24,9 +24,9 @@ 
            Description
            
          
             
            This example does up and down reordering. This approach can also be used for two-dimensional reordering by adding left and right options.
            
             
            The components in this example are list items in an unordered list. Unordered lists are a very good semantic model for sets of similar items, like these components. The menu approach can also be used for other types of groupings.
            
-            
            The modules are list items, and each module, in addition to content in div elements, contains a menu represented as a nested list.
            
+            
            The modules are list items, and each module, in addition to content in div elements, contains a menu represented as a nested list.
            
          
-
            <ul id="swapper">
+
            <ul id="swapper">
     <li id="black">
       <div class="module">
         <div class="module_header">
@@ -48,9 +48,9 @@ 
            Description
            
   ...
 </ul>
            
          
-            
            Since we've covered the showing and hiding of menus in the simple tree samples, we'll focus here just on the code that swaps the modules. Once we harmonize the events and cancel the default link action, we go to work. First, we set a bunch of local variables for the elements with which we'll be working: the menu, the module to be reordered, the menuLink. Then, after checking the reorder direction, we try to grab the node to swap. If we find one, we then call swapNode() to swap our two modules, and PositionElement() to move the absolutely-positioned menu along with the module, and then set focus back on the menu item which launched the whole thing.
            
+            
            Since we've covered the showing and hiding of menus in the simple tree samples, we'll focus here just on the code that swaps the modules. Once we harmonize the events and cancel the default link action, we go to work. First, we set a bunch of local variables for the elements with which we'll be working: the menu, the module to be reordered, the menuLink. Then, after checking the reorder direction, we try to grab the node to swap. If we find one, we then call swapNode() to swap our two modules, and PositionElement() to move the absolutely-positioned menu along with the module, and then set focus back on the menu item which launched the whole thing.
            
          
-
            function MoveNode(evt,dir){
+
            function MoveNode(evt,dir){
   
   HarmonizeEvent(evt);
   evt.preventDefault();
@@ -86,7 +86,7 @@ 
            Description
            
          
             
            The CSS for the node swap is not much different than that of our previous tree samples, with some size and color adjustment for the modules and the small menu.
            
          
-
            ul#swapper {
+
            ul#swapper {
   list-item-style:none;
   margin:0px;
   padding:0px;
diff --git a/techniques/client-side-script/SCR28.html b/techniques/client-side-script/SCR28.html
index 2df96eadf6..faeb9de699 100644
--- a/techniques/client-side-script/SCR28.html
+++ b/techniques/client-side-script/SCR28.html
@@ -11,7 +11,7 @@ 
            Toggling a table of contents
            
          
          
            The table of contents for a set of web pages is repeated near the beginning of each web page. A button at the beginning of the table of contents lets the user remove or restore it on the page.
            
          
-
            ...
+
            ...
 <script>
 let tocToggle = document.querySelector(".toc-toggle");
 let toc = document.querySelector("#toc");
diff --git a/techniques/client-side-script/SCR29.html b/techniques/client-side-script/SCR29.html
index a0f09d8266..5c76f6f034 100644
--- a/techniques/client-side-script/SCR29.html
+++ b/techniques/client-side-script/SCR29.html
@@ -17,20 +17,20 @@ 
            When to Use
            
 		
            
 		
            
 			
            Description
            
-      
            The objective of this technique is to demonstrate how to provide keyboard access to a user interface control that is implemented by actions to static HTML elements such as div or span. This technique ensures that the element is focusable by setting the tabindex attribute, and it ensures that the action can be triggered from the keyboard by providing an onkeyup or onkeypress handler in addition to an onclick handler.
            
-      
            When the tabindex attribute has the value 0, the element can be focused via the keyboard and is included in the tab order of the document. When the tabindex attribute has the value -1, the element cannot be tabbed to, but focus can be set programmatically, using element.focus().
            
+      
            The objective of this technique is to demonstrate how to provide keyboard access to a user interface control that is implemented by actions to static HTML elements such as div or span. This technique ensures that the element is focusable by setting the tabindex attribute, and it ensures that the action can be triggered from the keyboard by providing an onkeyup or onkeypress handler in addition to an onclick handler.
            
+      
            When the tabindex attribute has the value 0, the element can be focused via the keyboard and is included in the tab order of the document. When the tabindex attribute has the value -1, the element cannot be tabbed to, but focus can be set programmatically, using element.focus().
            
       
            Because static HTML elements do not have actions associated with them, it is not possible to provide a backup implementation or explanation in environments in which scripting is not available. This technique should only be used in environments in which client-side scripting can be relied upon.
            
       
            
-				
            Such user interface controls must still satisfy Success Criterion 4.1.2. Applying this technique without also providing role, name, and state information about the user interface control will results in Failure F59, Failure of Success Criterion 4.1.2 due to using script to make div or span a user interface control in HTML.
            
+				
            Such user interface controls must still satisfy Success Criterion 4.1.2. Applying this technique without also providing role, name, and state information about the user interface control will results in Failure F59, Failure of Success Criterion 4.1.2 due to using script to make div or span a user interface control in HTML.
            
       
            
 		
            
 		
            
 			
            Examples
            
 			
            
-				
            Adding a JavaScript action to a div element
            
-				
            The div element on the page is given a unique id attribute and a tabindex attribute with value 0. A script uses the Document Object Model (DOM) to find the div element by its id and add the onclick handler and the onkeyup handler. The onkeyup handler will invoke the action when the Enter key is pressed. Note that the div element must be loaded into the DOM before it can be found and modified. This is usually accomplished by calling the script from the onload event of the body element. The script to add the event handlers will only execute if the user agent supports and has JavaScript enabled.
            
+				
            Adding a JavaScript action to a div element
            
+				
            The div element on the page is given a unique id attribute and a tabindex attribute with value 0. A script uses the Document Object Model (DOM) to find the div element by its id and add the onclick handler and the onkeyup handler. The onkeyup handler will invoke the action when the Enter key is pressed. Note that the div element must be loaded into the DOM before it can be found and modified. This is usually accomplished by calling the script from the onload event of the body element. The script to add the event handlers will only execute if the user agent supports and has JavaScript enabled.
            
          
-
            <script>
+
            <script>
 // this is the function to perform the action. This simple example toggles a message.
 function doSomething(event) {
   var msg=document.getElementById("message");
diff --git a/techniques/client-side-script/SCR30.html b/techniques/client-side-script/SCR30.html
index 25881909f7..45f8af6475 100644
--- a/techniques/client-side-script/SCR30.html
+++ b/techniques/client-side-script/SCR30.html
@@ -27,7 +27,7 @@ 
            Examples
            
 			
            
 				
            This example uses Javascript to add contextual information directly to the text of a link. The link class is used to determine which additional text to add. When the "Expand Links" link is activated, each link on the page is tested to see whether additional text should be added.
            
 
-
            ...
+
            ...
 <script>
   var expanded = false;
   var linkContext = {
diff --git a/techniques/client-side-script/SCR31.html b/techniques/client-side-script/SCR31.html
index 395344b3df..9d99b4fe05 100644
--- a/techniques/client-side-script/SCR31.html
+++ b/techniques/client-side-script/SCR31.html
@@ -23,7 +23,7 @@ 
            Description
            
 		
            Examples
            
 		
            
 			
            In this example, when the link receives focus, its background turns yellow. When it loses focus, the yellow is removed. Note that if the link had a background color to begin with, you would use that color rather than "" in the script.
            
-
            <script>function toggleFocus(el) {
+
            <script>function toggleFocus(el) {
   el.style.backgroundColor =  el.style.backgroundColor=="yellow" ? "inherit" : "yellow";
 }
 </script>
diff --git a/techniques/client-side-script/SCR32.html b/techniques/client-side-script/SCR32.html
index 36ec3cd34b..96545da3a3 100644
--- a/techniques/client-side-script/SCR32.html
+++ b/techniques/client-side-script/SCR32.html
@@ -17,7 +17,7 @@ 
            When to Use
            
 		
            
 		
            
 			
            Description
            
-      
            The objective of this technique is to demonstrate the display of an error message when client side validation of a form field has failed. Anchor elements are used to display the error messages in a list and are inserted above the fields to be validated. Anchor elements are used in the error messages so that focus can be placed on the error message(s), drawing the user's attention to it. The href of the anchor elements contain an in-page link which references the fields where error(s) have been found.
            
+      
            The objective of this technique is to demonstrate the display of an error message when client side validation of a form field has failed. Anchor elements are used to display the error messages in a list and are inserted above the fields to be validated. Anchor elements are used in the error messages so that focus can be placed on the error message(s), drawing the user's attention to it. The href of the anchor elements contain an in-page link which references the fields where error(s) have been found.
            
       
            In a deployed application, if Javascript is turned off, client side validation will not occur. Therefore, this technique would only be sufficient in situations where scripting is relied upon for conformance or when server side validation techniques are also used to catch any errors and return the page with information about the fields with errors. 
            
    
            
 	 
            
@@ -31,7 +31,7 @@ 
            Listing errors in a block at the top of a form
            
       	
         
            
 				
            HTML for the form
            
-
            <!DOCTYPE HTML>
+
            <!DOCTYPE HTML>
 <html lang="en">
   <head>
     <title>Form Validation</title>
@@ -107,7 +107,7 @@ 
            HTML for the form
            
       
            
 
            The Javascript which performs the validation and inserts the error messages
            
          
-
            window.onload = initialise;
+
            window.onload = initialise;
 function initialise() {
   var objForms = document.getElementsByTagName('form');
   var iCounter;
diff --git a/techniques/client-side-script/SCR33.html b/techniques/client-side-script/SCR33.html
index d9c38b6e7c..eef302a193 100644
--- a/techniques/client-side-script/SCR33.html
+++ b/techniques/client-side-script/SCR33.html
@@ -25,7 +25,7 @@ 
            Examples
            
             
            In this example CSS and JavaScript are used to visually present some text in a scrolling format. A link is included to pause the scrolling movement.
            
             
            This implementation will display the full text and omit the link when JavaScript or CSS are unsupported or inactive.
            
             
            The HTML component
            
-
            ...
+
            ...
 <div id="scroller">
   <p id="tag">This text will scroll and a Pause/Scroll link will be present 
   when JavaScript and CSS are supported and active.</p>
@@ -33,7 +33,7 @@ 
            The HTML component
            
 ...
            
          
 
            The CSS component
            
-
            ...
+
            ...
 body {
   font:1em verdana,sans-serif;
   color:#000;
@@ -65,7 +65,7 @@ 
            The CSS component
            
          
 
            The JavaScript component
            
          
-
            var speed=50        // speed of scroller
+
            var speed=50        // speed of scroller
 var step=3          // smoothness of movement
 var StartActionText= "Scroll"  // Text for start link
 var StopActionText = "Pause"   // Text for stop link
diff --git a/techniques/client-side-script/SCR34.html b/techniques/client-side-script/SCR34.html
index 8db4257582..84aa8e217d 100644
--- a/techniques/client-side-script/SCR34.html
+++ b/techniques/client-side-script/SCR34.html
@@ -20,19 +20,19 @@ 
            Description
            
          
            The objective of this technique is to calculate the size and position of elements in a way that will scale appropriately as the text size is scaled.
            
       
            There are four properties in JavaScript that help determine the size and position of elements: 
            
       
              
-         
            • offsetHeight (the height of the element in pixels)
              • 
-         
            • offsetWidth (the width of the element in pixels)
              • 
-         
            • offsetLeft (the distance of the element from the left of its parent (offsetParent) in pixels)
              • 
-         
            • offsetTop (the distance of the element from the top of its parent (offsetParent) in pixels)
              • 
+         
            • offsetHeight (the height of the element in pixels)
              • 
+         
            • offsetWidth (the width of the element in pixels)
              • 
+         
            • offsetLeft (the distance of the element from the left of its parent (offsetParent) in pixels)
              • 
+         
            • offsetTop (the distance of the element from the top of its parent (offsetParent) in pixels)
              • 
       
            
-      
            Calculating the height and width using offsetHeight and offsetWidth is straightforward, but when calculating an object's left and top position as absolute values, we need to consider the parent element. The calculatePosition function below iterates through all of an element's parent nodes to give a final value. The function takes two parameters: objElement (the name of the element in question), and the offset property (offsetLeft or offsetTop):
            
+      
            Calculating the height and width using offsetHeight and offsetWidth is straightforward, but when calculating an object's left and top position as absolute values, we need to consider the parent element. The calculatePosition function below iterates through all of an element's parent nodes to give a final value. The function takes two parameters: objElement (the name of the element in question), and the offset property (offsetLeft or offsetTop):
            
    
            
    
            
       
            Examples
            
       
            
 				
            Calculating the size and position of elements in a way that will scale appropriately as the text size is scaled
            
   
-
            function calculatePosition(objElement, strOffset {
+
            function calculatePosition(objElement, strOffset {
   var iOffset = 0;
 	if (objElement.offsetParent) {
     do {
@@ -45,7 +45,7 @@ 
            Calculating the size and position of elements in a way that will scale appro
          
             
            The following example illustrates using the function above by aligning an object beneath a reference object, the same distance from the left: 
            
          
-
            // Get a reference object
+
            // Get a reference object
 var objReference = document.getElementById('refobject');
 // Get the object to be aligned
 var objAlign = document.getElementById('lineup');
diff --git a/techniques/client-side-script/SCR35.html b/techniques/client-side-script/SCR35.html
index 41426741dc..4812848a99 100644
--- a/techniques/client-side-script/SCR35.html
+++ b/techniques/client-side-script/SCR35.html
@@ -5,7 +5,7 @@
 		
 	
 	
-		
            Making actions keyboard accessible by using the onclick event of anchors and buttons
            
+		
            Making actions keyboard accessible by using the onclick event of anchors and buttons
            
 		
            
 			
            ID: SCR35
            
 			
            Technology: client-side-script
            
@@ -17,18 +17,18 @@ 
            When to Use
            
 		
            
 		
            
 			
            Description
            
-      
            The objective of this technique is to demonstrate how to invoke a scripting function in a way that is keyboard accessible by attaching it to a keyboard-accessible control. In order to ensure that scripted actions can be invoked from the keyboard, they are associated with "natively actionable" HTML elements (links and buttons). The onclick event of these elements is device independent. While "onclick" sounds like it is tied to the mouse, the onclick event is actually mapped to the default action of a link or button. The default action occurs when the user clicks the element with a mouse, but it also occurs when the user focuses the element and hits enter or space, and when the element is triggered via the accessibility API.
            
-      
            This technique relies on client-side scripting. However, it is beneficial to provide a backup implementation or explanation for environments in which scripting is not available. When using anchor elements to invoke a JavaScript action, a backup implementation or explanation is provided via the href attribute. When using buttons, it is provided via a form post. 
            
+      
            The objective of this technique is to demonstrate how to invoke a scripting function in a way that is keyboard accessible by attaching it to a keyboard-accessible control. In order to ensure that scripted actions can be invoked from the keyboard, they are associated with "natively actionable" HTML elements (links and buttons). The onclick event of these elements is device independent. While "onclick" sounds like it is tied to the mouse, the onclick event is actually mapped to the default action of a link or button. The default action occurs when the user clicks the element with a mouse, but it also occurs when the user focuses the element and hits enter or space, and when the element is triggered via the accessibility API.
            
+      
            This technique relies on client-side scripting. However, it is beneficial to provide a backup implementation or explanation for environments in which scripting is not available. When using anchor elements to invoke a JavaScript action, a backup implementation or explanation is provided via the href attribute. When using buttons, it is provided via a form post. 
            
    
            
 	 
            
 		
            Examples
            
       
            
 				
            Link that runs a script and has no fallback for non-scripted browsers
            
 				
            This approach should only be used when script is relied upon as an Accessibility Supported Technology.
            
-				
            Even though we do not want to navigate from this link, we must use the href attribute on the a element in order to make this a true link and get the proper eventing. In this case, we're using "#" as the link target, but you could use anything. This link will never be navigated.
            
-				
            The "return false;" at the end of the doStuff() event handling function tells the browser not to navigate to the URI. Without it, the page would refresh after the script ran.
            
+				
            Even though we do not want to navigate from this link, we must use the href attribute on the a element in order to make this a true link and get the proper eventing. In this case, we're using href="#" as the link target, but you could use anything. This link will never be navigated.
            
+				
            The "return false;" at the end of the doStuff() event handling function tells the browser not to navigate to the URI. Without it, the page would refresh after the script ran.
            
          
-
            <script> 
+
            <script> 
   function doStuff() {
     //do stuff
     return false;
@@ -38,9 +38,9 @@ 
            Link that runs a script and has no fallback for non-scripted browsers
            
       
            
       
            
 				
            Link that runs script, but navigates to another page when script is not available
            
-				
            This approach can be used to create sites that don't rely on script, if and only if the navigation target provides the same functionality as the script. This example is identical to the example 1, except that its href is now set to a real page, dostuff.html. The dostuff.html page must provide the same functionality as the script. The "return false;" at the end of the doStuff() event handling function tells the browser not to navigate to the URI. Without it, the browser would navigate to dostuff.html after the script ran.
            
+				
            This approach can be used to create sites that don't rely on script, if and only if the navigation target provides the same functionality as the script. This example is identical to the example 1, except that its href is now set to a real page, dostuff.html. The dostuff.html page must provide the same functionality as the script. The "return false;" at the end of the doStuff() event handling function tells the browser not to navigate to the URI. Without it, the browser would navigate to dostuff.html after the script ran.
            
          
-
            <script> 
+
            <script> 
   function doStuff() {  
   //do stuff
   return false;
@@ -55,7 +55,7 @@ 
            Link that runs script, but navigates to another page when script is not avai
 				
            Button that runs a script and falls back to a form post for users without script
            
          
            This approach can be used by sites that do not rely on script, if and only if the form post provides the same functionality as the script. The onsubmit="return false;" prevents the form from submitting. 
            
          
-
            <script>
+
            <script>
 function doStuff() {
   //do stuff
 }
@@ -67,10 +67,10 @@ 
            Button that runs a script and falls back to a form post for users without sc
 			
            A working example of this code is available. Refer to Creating Action Buttons using JavaScript.
            
 		
            
 		
            
-			
            Button that runs a script, implemented with input type="image"
            
-			
            Note that an alt attribute must be added to the input to provide a text equivalent for the image. This approach should only be used when script is relied upon.
            
+			
            Button that runs a script, implemented with input type="image"
            
+			
            Note that an alt attribute must be added to the input to provide a text equivalent for the image. This approach should only be used when script is relied upon.
            
          
-
            <script>
+
            <script>
 function doStuff() {
   //do stuff
   return false;
@@ -79,44 +79,44 @@ 
            Button that runs a script, implemented with inpu
 <input type="image" src="stuff.gif" alt="Do stuff" onclick="return doStuff();">
            
       
            
       
            
-				
            Button that runs a script, implemented with input type="submit", input type="reset" or input type="button"
            
+				
            Button that runs a script, implemented with input type="submit", input type="reset" or input type="button"
            
 				
            This approach should only be used when script is relied upon.
            
          
-
            <input type="submit" onclick="return doStuff();" value="Do Stuff">
            
+
            <input type="submit" onclick="return doStuff();" value="Do Stuff">
            
       
            
       
            
-				
            Button that runs a script, implemented with button
            
+				
            Button that runs a script, implemented with button
            
         
            This is valuable when you want more control over the look of your button. In this particular example, the button contains both an icon and some text. This approach should only be used when script is relied upon. 
            
          
-
            <button onclick="return doStuff();">
+
            <button onclick="return doStuff();">
   <img src="stuff.gif" alt="stuff icon">
   Do Stuff
 </button>
            
       
            
    
            Tests
            
       
            Procedure
            
-         
            For all script actions associated with a, button, or input elements: 
            
+         
            For all script actions associated with a, button, or input elements: 
            
          
              
             
            1. 
                
              In a user agent that supports Scripting
              
                
                
                   
              • Click on the control with the mouse.
                • 
                   
              • Check that the scripting action executes properly.
                • 
-                  
              • If the control is an anchor element, check that the URI in the href attribute of the anchor element is not invoked.
                • 
+                  
              • If the control is an anchor element, check that the URI in the href attribute of the anchor element is not invoked.
                • 
                   
              • Check that it is possible to navigate to and give focus to the control via the keyboard.
                • 
                   
              • Set keyboard focus to the control.
                • 
                   
              • Check that pressing ENTER invokes the scripting action. 
                • 
-                  
              • If the control is an anchor element, check that the URI in the href attribute of the anchor element is not invoked.
                • 
+                  
              • If the control is an anchor element, check that the URI in the href attribute of the anchor element is not invoked.
                • 
                
              
             
              2. 
             
            2. 
                
              In a user agent that does not support Scripting
              
                
                
                   
              • Click on the control with the mouse.
                • 
-                  
              • If the control is an anchor element, check that the URI in the href attribute of the anchor element is invoked. 
                • 
+                  
              • If the control is an anchor element, check that the URI in the href attribute of the anchor element is invoked. 
                • 
                   
              • Check that it is possible to navigate to and give focus to the control via the keyboard.
                • 
                   
              • Set keyboard focus to the control.
                • 
-                  
              • If the control is an anchor element, check that pressing ENTER invokes the URI of the anchor element's href attribute.
                • 
+                  
              • If the control is an anchor element, check that pressing ENTER invokes the URI of the anchor element's href attribute.
                • 
                
              
             
              3. 
          
            
@@ -143,13 +143,13 @@ 
            Related Techniques
            
 		
            Resources
            
 		
 	
            
diff --git a/techniques/client-side-script/SCR36.html b/techniques/client-side-script/SCR36.html
index f139ed2db5..ef9e4713ab 100644
--- a/techniques/client-side-script/SCR36.html
+++ b/techniques/client-side-script/SCR36.html
@@ -35,7 +35,7 @@ 
            Expanding Scrolling Text in Place
            
             
            
             
            The CSS component
            
          
-
            #scrollContainer {
+
            #scrollContainer {
   background-color: darkblue;
   left: 10px;
   overflow: hidden;
@@ -64,7 +64,7 @@ 
            The CSS component
            
 }
            
          
 
            The script and HTML content:
            
-
            <script>
+
            <script>
 var tid;
 function init() {
   var st = document.getElementById('scrollingText');
diff --git a/techniques/client-side-script/SCR37.html b/techniques/client-side-script/SCR37.html
index bbdc93f3b8..2e062b044f 100644
--- a/techniques/client-side-script/SCR37.html
+++ b/techniques/client-side-script/SCR37.html
@@ -6,11 +6,11 @@
 Creating Custom Dialogs in a Device Independent Way
            Creating Custom Dialogs in a Device Independent Way
            ID: SCR37
            Technology: client-side-script
            Type: Technique
            When to Use
            
       
            HTML and XHTML used with script.
            
    
            Description
            
-      
            Site designers often want to create dialogs that do not use the pop-up windows supplied by the browser. This is typically accomplished by enclosing the dialog contents in a div and placing the div above the page content using z-order and absolute positioning in CSS. 
            
+      
            Site designers often want to create dialogs that do not use the pop-up windows supplied by the browser. This is typically accomplished by enclosing the dialog contents in a div and placing the div above the page content using z-order and absolute positioning in CSS. 
            
       
            To be accessible, these dialogs must follow a few simple rules. 
            
       
              
          
            1. Trigger the script that launches the dialog from the onclick event of a link or button.
              2. 
-         
            2. Place the dialog div into the Document Object Model (DOM) immediately after the element that triggered it. The triggering element will maintain focus, and inserting the dialog content after that element will make the content inside the dialog next in the screen-reader reading order and next in the tab order. The dialog can still be absolutely positioned to be elsewhere on the page visually. This can be done either by creating the dialog in the HTML and hiding it with CSS, as in the example below, or by inserting it immediately after the triggering element with script. 
              3. 
+         
            3. Place the dialog div into the Document Object Model (DOM) immediately after the element that triggered it. The triggering element will maintain focus, and inserting the dialog content after that element will make the content inside the dialog next in the screen-reader reading order and next in the tab order. The dialog can still be absolutely positioned to be elsewhere on the page visually. This can be done either by creating the dialog in the HTML and hiding it with CSS, as in the example below, or by inserting it immediately after the triggering element with script. 
              4. 
          
            4. Ensure that the HTML inside the dialog div meets the same accessibility standard as other content.
              5. 
       
            
       
            It is also nice, but not always necessary, to make the launching link toggle the dialog open and closed, and to close the dialog when the keyboard focus leaves it. 
            
@@ -20,7 +20,7 @@ 
            An options button that opens a dialog
            
          
             
            The HTML for this example includes a triggering Element, in this case a button, and a div that acts as the frame for the dialog. 
            
             
            The triggering element is a button and the script is triggered from the onclick event. This sends the appropriate events to the operating system so that assistive technology is aware of the change in the DOM. 
            
-            
            In this example, the Submit and Reset buttons inside the dialog simply hide the div. 
            
+            
            In this example, the Submit and Reset buttons inside the dialog simply hide the div. 
            
          
          
            ...
 <button onclick="TogglePopup(event,true)"
@@ -44,7 +44,7 @@ 
            An options button that opens a dialog
            
 ...
 
            
          
-            
            The div, heading and form elements are styled with CSS to look like a dialog. 
            
+            
            The div, heading and form elements are styled with CSS to look like a dialog. 
            
          
          
            ...
 a { color:blue; }
@@ -61,7 +61,7 @@ 
            An options button that opens a dialog
            
 ...
 
            
          
-            
            The script toggles the display of the popup div, showing it and hiding it. 
            
+            
            The script toggles the display of the popup div, showing it and hiding it. 
            
          
          
            ...
 function TogglePopup(evt,show) {
@@ -128,7 +128,7 @@ 
            An options button that opens a dialog
            
       
          
       
    
            
diff --git a/techniques/client-side-script/SCR38.html b/techniques/client-side-script/SCR38.html
index 94fa322ba8..60edbf6c81 100644
--- a/techniques/client-side-script/SCR38.html
+++ b/techniques/client-side-script/SCR38.html
@@ -31,10 +31,10 @@ 
            Examples
            
       
            
 				
            Using JavaScript
            
 				
            The example uses JavaScript in the "accToggle.js" file to store the initial pre-enhanced version of the web page, created solely from the HTML in the source code, so that it can act as a "conforming alternate version" for any later enhanced versions of the web page; and inserts a toggle link into all enhanced versions of the web page which allows a user to revert the web page back to the stored pre-enhanced "Conforming Alternate Version". Note: The "sayhello.js" file is simply there as an example payload external file, and is to be replaced by any other external scripts which are desired.
            
-				
            The script in the acctoggle.js file stores the pre-enhanced version - assigning the version the url postfix #accessible. Clicking the "WCAG 2 conforming alternate version" link (inserted as the first child of the body element in any enhanced versions) changes the url to include the postfix "#accessible" which then resets the html located in the body element and the head element to pre-enhanced code. The pre-enhanced state can be reached from the link, or directly from a url typed into the browser. In addition, a link is inserted into the pre-enhanced "Conforming Alternate Version" which allows the user to re-enhance the web page (something which can also be done using the web browser's back button).
            
+				
            The script in the acctoggle.js file stores the pre-enhanced version - assigning the version the url postfix #accessible. Clicking the "WCAG 2 conforming alternate version" link (inserted as the first child of the body element in any enhanced versions) changes the URL to include the postfix #accessible which then resets the html located in the body element and the head element to pre-enhanced code. The pre-enhanced state can be reached from the link, or directly from a URL typed into the browser. In addition, a link is inserted into the pre-enhanced "Conforming Alternate Version" which allows the user to re-enhance the web page (something which can also be done using the web browser's back button).
            
 				
            
 				
            acctoggle.js JavaScript:
            
-
            window.onload = function(event) {
+
            window.onload = function(event) {
 
 // store pre-enhanced element content
 var initialHead = document.head.innerHTML;
@@ -97,7 +97,7 @@ 
            acctoggle.js JavaScript:
            
 
 
            
   
            HTML web page source code:
            
-
            <!DOCTYPE html>
+
            <!DOCTYPE html>
 <html lang="en">
   <head>
     <title>Evaluera Ltd</title>
@@ -111,7 +111,7 @@ 
            HTML web page source code:
            
 </html>
            
 
 
            sayhello.js source code
            
-
            var change = document.querySelector("#change");
+
            var change = document.querySelector("#change");
 change.innerText = "Hello";
                
 
                 
       
            
diff --git a/techniques/client-side-script/SCR39.html b/techniques/client-side-script/SCR39.html
index 371f118f35..2783f4aadf 100644
--- a/techniques/client-side-script/SCR39.html
+++ b/techniques/client-side-script/SCR39.html
@@ -36,7 +36,7 @@ 
            Content preview for links
            
 			key dismisses (closes) the additional content.
            
 		
            
 			
            HTML of example 1
            
-
            <p>This is the 
+
            <p>This is the 
    <a class="a-and-tooltip" id="parent" href="index.html">trigger
    <span id="popup" role="tooltip">And this additional text 
     gives additional context on the trigger term
@@ -47,7 +47,7 @@ 
            HTML of example 1
            
 		
            
 		
            
 			
            CSS of example 1
            
-
            [role="tooltip"] {
+
            [role="tooltip"] {
   display: none;
   padding: 0.5em;
   background:white;
@@ -68,7 +68,7 @@ 
            CSS of example 1
            
 		
            
 		
            
 			
            JavaScript of example 1
            
-			
            // trigger and popup inside the same link
+			
            // trigger and popup inside the same link
 
 var parent = document.getElementById("parent");
 
diff --git a/techniques/client-side-script/SCR40.html b/techniques/client-side-script/SCR40.html
index 0bab651e8b..a4f9fec43c 100644
--- a/techniques/client-side-script/SCR40.html
+++ b/techniques/client-side-script/SCR40.html
@@ -24,7 +24,7 @@ 
            When to Use
            
 
 
            
   
            Description
            
-  
            The objective of this technique is to allow users to prevent animations (including motion animations) from being displayed on web pages, by using JavaScript to evaluate the prefers-reduced-motion CSS Media Query.
            
+  
            The objective of this technique is to allow users to prevent animations (including motion animations) from being displayed on web pages, by using JavaScript to evaluate the prefers-reduced-motion CSS Media Query.
            
   
            Some users experience distraction or nausea from animated content. For example, if scrolling a page causes elements to move (other than the essential movement associated with scrolling the content, which is under the user's control) it can trigger vestibular disorders.
            
   
            Media queries that selectively enable/disable JavaScript-driven animations based on operating system or user agent preferences allow users to avoid those triggers.
            
   
            The understanding document for Animation from Interactions includes links for changing the 'reduced motion' setting.
            
@@ -35,7 +35,7 @@ 
            Examples
            
   
            
     
            Evaluating the prefers-reduced-motion CSS Media Query in JavaScript
            
     
            Users can indicate their motion preference for interfaces in their system. This choice can be detected in JavaScript by evaluating the prefers-reduced-motion CSS Media Query. The script can then decide to enable or disable animation effects based on the result of the media query test.
            
-
            const mediaQueryList = window.matchMedia("(prefers-reduced-motion: no-preference)");
+
            const mediaQueryList = window.matchMedia("(prefers-reduced-motion: no-preference)");
 
 if (mediaQueryList.matches) {
   /* The user has not expressed a preference for reduced motion – run JavaScript-based animation */
diff --git a/techniques/css/C12.html b/techniques/css/C12.html
index 8f35f8f5a6..8e36159d58 100644
--- a/techniques/css/C12.html
+++ b/techniques/css/C12.html
@@ -17,15 +17,15 @@ 
            When to Use
            
 		
            
 		
            
 			
            Description
            
-      
            The objective of this technique is to specify text font size proportionally so that user agents can scale content effectively. If a font-size is specified for the body element, all other elements inherit that value, unless overridden by a more specific selector.
            
+      
            The objective of this technique is to specify text font size proportionally so that user agents can scale content effectively. If a font-size is specified for the body element, all other elements inherit that value, unless overridden by a more specific selector.
            
 		
            
 		
            
 			
            Examples
            
 			
            
 				
            Percent font sizes in CSS
             
-				
            This example defines the font size for the strong element so that its text will always be larger than the surrounding text, in whatever context it is used. Assuming that headings and paragraphs use different font sizes, the emphasized words in this example will each be larger than their surrounding text.
            
+				
            This example defines the font size for the strong element so that its text will always be larger than the surrounding text, in whatever context it is used. Assuming that headings and paragraphs use different font sizes, the emphasized words in this example will each be larger than their surrounding text.
            
          
-
            <style>
+
            <style>
   strong {font-size: 120%}
 </style>
 
@@ -63,7 +63,7 @@ 
            Resources
            
 				Cascading Style Sheets, Fonts.
 			
 			
          3. 
-				CSS font-size property.
+				CSS font-size property.
 			
            4. 
 		
 	
            
diff --git a/techniques/css/C13.html b/techniques/css/C13.html
index 3a6cb7c269..a3bc4adc06 100644
--- a/techniques/css/C13.html
+++ b/techniques/css/C13.html
@@ -17,15 +17,15 @@ 
            When to Use
            
 		
            
 		
            
 			
            Description
            
-      
            The objective of this technique is to specify a named font size that expresses the relative font size desired. These values provide hints so that the user agent can choose a font-size relative to the inherited font-size.
            
+      
            The objective of this technique is to specify a named font size that expresses the relative font size desired. These values provide hints so that the user agent can choose a font-size relative to the inherited font-size.
            
 		
            
 		
            
 			
            Examples
            
       
            
 				
            Named font sizes in CSS
            
-				
            This example selects a larger font size for strong elements so that their text will always be larger than the surrounding text, in whatever context they are used. Assuming that headings and paragraphs use different font sizes, the emphasized words in this example will each be larger than their surrounding text.
            
+				
            This example selects a larger font size for strong elements so that their text will always be larger than the surrounding text, in whatever context they are used. Assuming that headings and paragraphs use different font sizes, the emphasized words in this example will each be larger than their surrounding text.
            
          
-
            <style>
+
            <style>
   strong {font-size: larger}
 </style>
 ...
@@ -41,7 +41,7 @@ 
            Tests
            
       
            
 				
            Procedure
            
 				
              
-					
            1. Check that the value of the CSS property that defines the font size is one of xx-small, x-small, small, medium, large, x-large, xx-large, smaller, or larger.
              2. 
+					
            2. Check that the value of the CSS property that defines the font size is one of xx-small, x-small, small, medium, large, x-large, xx-large, smaller, or larger.
              3. 
          
            
 				
            
 				
            
@@ -65,7 +65,7 @@ 
            Resources
            
 							CSS Fonts Module Level 3.
 						
             
          4. 
-							CSS 3 font-size Property.
+							CSS 3 font-size Property.
 						
            5. 
 					
 				
            
diff --git a/techniques/css/C14.html b/techniques/css/C14.html
index cea8c92de8..2bcc8a0294 100644
--- a/techniques/css/C14.html
+++ b/techniques/css/C14.html
@@ -5,7 +5,7 @@
 		
 	
 	
-		
            Using em units for font sizes
            
+		
            Using em units for font sizes
            
 		
            
 			
            ID: C14
            
 			
            Technology: css
            
@@ -17,14 +17,14 @@ 
            When to Use
            
 		
            
 		
            
 			
            Description
            
-      
            The objective of this technique is to specify text font size in em units so that user agents can scale content effectively. Since the em is a property of the font, it scales as the font changes size. If a font-size is specified for the body element, all other elements inherit that value, unless overridden by a more specific selector.
            
+      
            The objective of this technique is to specify text font size in em units so that user agents can scale content effectively. Since the em is a property of the font, it scales as the font changes size. If a font-size is specified for the body element, all other elements inherit that value, unless overridden by a more specific selector.
            
 		
            
 		
            
 			
            Examples
            
       
            
-				
            em font sizes in CSS
            
+				
            em font sizes in CSS
            
 				
            This example defines the font size for strong element so that its text will always be larger than the surrounding text, in whatever context it is used. Assuming that headings and paragraphs use different font sizes, the strong words in this example will each be larger than their surrounding text.
              
-
            <style>
+
            <style>
   strong {font-size: 1.6em}
 </style>
 ...	
@@ -63,7 +63,7 @@ 
            Resources
            
 					CSS Fonts Module Level 3.
 				
 				
          5. 
-					CSS 3 font-size Property.
+					CSS 3 font-size Property.
 				
            6. 
 			
 		
            
diff --git a/techniques/css/C15.html b/techniques/css/C15.html
index a835552ba8..17d26d7382 100644
--- a/techniques/css/C15.html
+++ b/techniques/css/C15.html
@@ -27,7 +27,7 @@ 
            Link elements
            
 			
            In this example, mouse and keyboard focus indicators have been applied to the link elements. CSS has been used to apply a background color when the link elements receive focus.
            
 			
            Here is the content to be displayed:
            
          
-
            <nav id="main-nav">
+
            <nav id="main-nav">
   <ul>
     <li>Home</li>
     <li><a href="/services">Services</a></li>
@@ -39,7 +39,7 @@ 
            Link elements
            
   </ul>
 <nav>
            
 			
            Here is the CSS that changes the background color for the above elements when they receive mouse or keyboard focus:
               
-
            #main-nav a:hover, #main-nav a:active, #main-nav a:focus-visible {
+
            #main-nav a:hover, #main-nav a:active, #main-nav a:focus-visible {
   background-color: #DCFFFF;
   color:#000066;
 }
            
@@ -48,7 +48,7 @@ 
            Link elements
            
 				
            Highlighting elements that receive focus
            
 				
            In this example, the :focus pseudo-class is used to change the style applied to input fields when they receive focus by changing the background color.
            
          
-
            <!doctype html>
+
            <!doctype html>
 <html lang="en">
   <head>
     <style>
diff --git a/techniques/css/C17.html b/techniques/css/C17.html
index 9f28700ce6..f1039f16c6 100644
--- a/techniques/css/C17.html
+++ b/techniques/css/C17.html
@@ -18,7 +18,7 @@ 
            When to Use
            
 		
            
 			
            Description
            
       
            The objective of this technique is to ensure text-based form controls resize when text size is changed in the user agent. This will allow users to enter text and read what they have entered in input boxes because the text is displayed at the size required by the user.
            
-      
            Text-based form controls include input boxes (text and textarea) as well as buttons.
            
+      
            Text-based form controls include input boxes (text and textarea) as well as buttons.
            
 		
            
 		
            
 			
            Examples
            
@@ -28,7 +28,7 @@ 
            A Contact Form
            
 				
            
 				
            The HTML
            
          
-
            <h1>Contact Us</h1>
+
            <h1>Contact Us</h1>
 <p>Please provide us with your details and we will contact you as soon as we can.
   Note that all of the form fields are required.</p>
 <div>
@@ -52,7 +52,7 @@ 
            The HTML
            
 				
            
 					
            The CSS component
            
          
-
            h1 { font-size: 2em; }
+
            h1 { font-size: 2em; }
 p, label { font-size: 1em; }
 label { display:block; }
 input { font: inherit; }
diff --git a/techniques/css/C18.html b/techniques/css/C18.html
index eeb7860152..52a915c4d3 100644
--- a/techniques/css/C18.html
+++ b/techniques/css/C18.html
@@ -17,17 +17,17 @@ 
            When to Use
            
 		
            
 		
            
 			
            Description
            
-      
            Web designers sometimes use spacer images (usually 1x1 pixel, transparent GIFs) for better control over layout, for example in tables or to indent a paragraph. However, Cascading Style Sheets (CSS) allow sufficient control over layout to replace spacer images. The CSS properties for margins and padding can be used on their own or in combination to control the layout. The margin properties ('margin-top', 'margin-right', 'margin-bottom', 'margin-left', and the shorthand 'margin') can be used on any element that is displayed as a block; they add space at the outside of an element. The padding properties ('padding-top', 'padding-right', 'padding-bottom', 'padding-left', and the shorthand 'padding') can be used on any element; they add space inside the element.
            
+      
            Web designers sometimes use spacer images (usually 1 by 1 pixel, transparent GIFs) for better control over layout, for example in tables or to indent a paragraph. However, Cascading Style Sheets (CSS) allow sufficient control over layout to replace spacer images. The CSS properties for margins and padding can be used on their own or in combination to control the layout. The margin properties ('margin-top', 'margin-right', 'margin-bottom', 'margin-left', and the shorthand 'margin') can be used on any element that is displayed as a block; they add space at the outside of an element. The padding properties ('padding-top', 'padding-right', 'padding-bottom', 'padding-left', and the shorthand 'padding') can be used on any element; they add space inside the element.
            
 		
            
 		
            
 			
            Examples
            
 			
            
 				
            The following example consists of two parts: the CSS code, which specifies a margin on all sides of the table, and padding for the table cells; and the HTML code for the table, which does not contain spacer images and is not nested inside another table.
            
 				
            The CSS
            
-
            table { margin: .5em; border-collapse: collapse; } 
+
            table { margin: .5em; border-collapse: collapse; } 
 td, th { padding: .4em; border: 1px solid #000; }
            
           
            The HTML
            
-
            <table>
+
            <table>
   <caption>Books in the category 'Web development'</caption>
   <thead>
     <tr>
@@ -53,10 +53,10 @@ 
            Tests
            
 					
            Resources
            
 					
 				
            
diff --git a/techniques/css/C19.html b/techniques/css/C19.html
index 1a36b09e91..ba265c584b 100644
--- a/techniques/css/C19.html
+++ b/techniques/css/C19.html
@@ -23,16 +23,16 @@ 
            Examples
            
 		
            
 			
            Aligning text to the left
            
 			
            In the following example, text is aligned left. In the style sheet, define the class:
            
-
            p.left {text-align: left}
            
+
            p.left {text-align: left}
            
 
            In the content call the up the class.
            
-
            <p class="left"> Lorem ipsum dolor sit ...</p>
            
+
            <p class="left"> Lorem ipsum dolor sit ...</p>
            
 		
            
       
            
 				
            Aligning text to the right
            
 				
            In the following example, text is aligned right.
             
-
            p.right {text-align: right}
            
+
            p.right {text-align: right}
            
 
            In the content call the up the class.
            
-
            <p class="right"> Lorem ipsum dolor sit ...</p>
            
+
            <p class="right"> Lorem ipsum dolor sit ...</p>
            
       
            
 		
            
 		
            
diff --git a/techniques/css/C20.html b/techniques/css/C20.html
index 18b52cc8cd..b2b18481e3 100644
--- a/techniques/css/C20.html
+++ b/techniques/css/C20.html
@@ -22,21 +22,21 @@ 
            Description
            
 	 
            
 		
            Examples
            
 		
            
-			
            In this example the div width is set in ems in the stylesheet.
            
-
            #main-content {max-width: 70em}
            
-
            And the text block would be placed inside the div in the content
            
+			
            In this example the div width is set in ems in the stylesheet.
            
+
            #main-content {max-width: 70em}
            
+
            And the text block would be placed inside the div in the content
            
          
-
            <div id="main-content"> 
+
            <div id="main-content"> 
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
 </div>
            
 		
            
 		
            
-			
            In this example the div width is set in percent in the stylesheet
            
+			
            In this example the div width is set in percent in the stylesheet
            
          
-
            #main-content {width: 90%}
            
-        
            And the text block would be placed inside the div in the content
            
+
            #main-content {width: 90%}
            
+        
            And the text block would be placed inside the div in the content
            
          
-
            <div id="main-content"> 
+
            <div id="main-content"> 
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
 </div>
            
       
            
diff --git a/techniques/css/C21.html b/techniques/css/C21.html
index ac2f3ab8e4..e76105a375 100644
--- a/techniques/css/C21.html
+++ b/techniques/css/C21.html
@@ -24,7 +24,7 @@ 
            Examples
            
 			
            
 				
            Setting the element to 1.5 line height
            
 				
            In the style sheet set the characteristics of the element.
            
-
            body { line-height: 1.5; }
            
+
            body { line-height: 1.5; }
            
 				
            This sets the line height of everything in the body of the document to 1.5.
            
       	
            
 			
            
@@ -48,7 +48,7 @@ 
            Expected Results
            
 				
            Resources
            
 				
              
 					
            • 
-						CSS3 Line spacing: the line-height property.
+						CSS3 Line spacing: the line-height property.
 					
              • 
 					
            • 
 						Eric Meyer - Unitless line heights
diff --git a/techniques/css/C22.html b/techniques/css/C22.html
index 35f8adf1a9..b9c3fa6417 100644
--- a/techniques/css/C22.html
+++ b/techniques/css/C22.html
@@ -28,19 +28,19 @@ 
              Description
              
       
              It is better to use real text for the text portion of these elements, and a combination of semantic markup and style sheets to create the appropriate visual presentation. For this to work effectively, choose fonts that are likely to be available on the user's system and define fallback fonts for users who may not have the first font that is specified. Newer machines and user agents often smooth or anti-alias all text, so it is likely that your headings and buttons will look nice on these systems without resorting to images of text.
              
       
              The following CSS properties are useful to style text and avoid the need for text in images:
              
       
                
-         
              • The font-family property is used to display the code aspect in a monospace font family.
                • 
-         
              • The text-align property is used to display the text to the right of the viewport.
                • 
-         
              • The font-size property is used to display the text in a larger size.
                • 
-         
              • The font-style property is used to display text in italics.
                • 
-         
              • The font-weight property is used to set how thick or thin characters in text should be displayed.
                • 
-         
              • The color property is used to display the color of text or text containers.
                • 
-         
              • The line-height property is used to display the line height for a block of text.
                • 
-         
              • The text-transform property is used to control the case of letters in text.
                • 
-         
              • The letter-spacing property is used to control the spacing of letters in text.
                • 
-         
              • The background-image property can be used to display text on a non-text background.
                • 
-         
              • The ::first-line pseudo-element can be used to modify the presentation of the first line in a block of text.
                • 
-         
              • The ::first-letter pseudo-element can be used to modify the presentation of the first letter in a block of text.
                • 
-         
              • The ::before and ::after pseudo-elements can be used to insert decorative non-text content before or after blocks of text.
                • 
+         
              • The font-family property is used to display the code aspect in a monospace font family.
                • 
+         
              • The text-align property is used to display the text to the right of the viewport.
                • 
+         
              • The font-size property is used to display the text in a larger size.
                • 
+         
              • The font-style property is used to display text in italics.
                • 
+         
              • The font-weight property is used to set how thick or thin characters in text should be displayed.
                • 
+         
              • The color property is used to display the color of text or text containers.
                • 
+         
              • The line-height property is used to display the line height for a block of text.
                • 
+         
              • The text-transform property is used to control the case of letters in text.
                • 
+         
              • The letter-spacing property is used to control the spacing of letters in text.
                • 
+         
              • The background-image property can be used to display text on a non-text background.
                • 
+         
              • The ::first-line pseudo-element can be used to modify the presentation of the first line in a block of text.
                • 
+         
              • The ::first-letter pseudo-element can be used to modify the presentation of the first letter in a block of text.
                • 
+         
              • The ::before and ::after pseudo-elements can be used to insert decorative non-text content before or after blocks of text.
                • 
       
              
 		
            
 		
            
@@ -49,33 +49,33 @@ 
            Examples
            
 				
            Using CSS font-family to control the font family for text
            
         
            
 				
            The HTML component
            
-         
            <p>The JavaScript method to convert a string to uppercase is <code>toUpperCase()</code>.</p>
            
+         
            <p>The JavaScript method to convert a string to uppercase is <code>toUpperCase()</code>.</p>
            
         
            
         
            
 				
            The CSS component
            
-
            code { font-family:"Courier New", Courier, monospace }
            
+
            code { font-family:"Courier New", Courier, monospace }
            
         
            
       
            
       
            
 				
            Using CSS text-align to control the placement (alignment) of text
            
         
            
           
            The HTML component
            
-  
            <p class="right">This text should be to the right of the viewport.</p>
            
+  
            <p class="right">This text should be to the right of the viewport.</p>
            
         
            
         
            
           
            The CSS component
            
-  
            .right { text-align: right; }
            
+  
            .right { text-align: right; }
            
         
            
       
            
       
            
 				
            Using CSS font-size to control the size of text
            
         
            
           
            The HTML component
            
-  
            <p>09 <strong class="largersize">March</strong> 2008</p>
            
+  
            <p>09 <strong class="largersize">March</strong> 2008</p>
            
           
            
           
            
             
            The CSS component
            
-
            strong.largersize { font-size: 1.5em; }
+
            strong.largersize { font-size: 1.5em; }
 
            
           
            
       	
            
@@ -86,11 +86,11 @@ 
            Using CSS color to control the color of text
            
           
           
            
             
            The HTML component
            
-
            <p>09 <em class="highlight">March</em> 2008</p>
            
+
            <p>09 <em class="highlight">March</em> 2008</p>
            
           
            
           
            
             
            The CSS component
            
-
            .highlight{ color: red; }
            
+
            .highlight{ color: red; }
            
           
            
       
            
 			
            
@@ -102,14 +102,14 @@ 
            Using CSS font-style to italicize text
            
             
            
               
            The HTML component
            
          
-
            <p>The article is available in the
+
            <p>The article is available in the
   <a href="https://www.example.com" class="featuredsite">Endocrinology Blog</a>.
 </p>
            
             
            
             
            
               
            The CSS component
            
          
-
            .featuredsite{ font-style:italic; }
            
+
            .featuredsite{ font-style:italic; }
            
             
            
       
            
       
            
@@ -119,11 +119,11 @@ 
            Using CSS font-weight to control the font weight of the text
            
 				
         
            
           
            The HTML component
             
-
            <p>This deal is available <span class="highlight">now!</span></p>
            
+
            <p>This deal is available <span class="highlight">now!</span></p>
            
         
            
         
            
             
            The CSS component
            
-
            .highlight { font-weight:bold; color:#990000; }
            
+
            .highlight { font-weight:bold; color:#990000; }
            
         
            
       
            
       
            
@@ -133,41 +133,41 @@ 
            Using CSS text-transform to control the case of text
            
 				
         
            
           
            The HTML component
             
-
            <p>09 <span class="caps">March</span> 2008</p>
            
+
            <p>09 <span class="caps">March</span> 2008</p>
            
         
            
          
            
           
            The CSS component
            
-
            .caps { text-transform:uppercase; }
            
+
            .caps { text-transform:uppercase; }
            
           
            
       
            
       
            
-				
            Using CSS line-height to control spacing between lines of text
            
-         
            The CSS line-height property is used to display the line height for the paragraph at twice the height of the font.
            
+				
            Using CSS line-height to control spacing between lines of text
            
+         
            The CSS line-height property is used to display the line height for the paragraph at twice the height of the font.
            
          
            
           
            The HTML component
            
          
-
            <p>Concern for man and his fate must always form the chief interest of all technical 
+
            <p>Concern for man and his fate must always form the chief interest of all technical 
 endeavors. Never forget this in the  midst of your diagrams and equations.</p>
            
         
            
         
            
           
           
            The CSS component
            
          
-          
            p { line-height:2; }
            
+          
            p { line-height:2; }
            
         
            
 
-
            The CSS line-height property is used to display the line height for the text at less than the height of the font. The second line of text is positioned after the first line of text and visually appears as though the text is part of the first line but dropped a little.
            
+
            The CSS line-height property is used to display the line height for the text at less than the height of the font. The second line of text is positioned after the first line of text and visually appears as though the text is part of the first line but dropped a little.
            
           
            
             
            The HTML component
            
          
-
            <h1 class="overlap"><span class="upper">News</span>
+
            <h1 class="overlap"><span class="upper">News</span>
   <span class="byline">today</span>
 </h1>
            
             
            
             
            
               
            The CSS component
            
          
-
            .overlap { line-height:0.2;}
+
            .overlap { line-height:0.2;}
 .upper { text-transform:uppercase; }
 .byline {
   color:red;
@@ -178,17 +178,17 @@ 
            The CSS component
            
               
            
         
            
       
            
-				
            Using CSS letter-spacing to space text
             
-        
            The CSS letter-spacing property is used to display the letters farther apart in the heading.
            
+				
            Using CSS letter-spacing to space text
             
+        
            The CSS letter-spacing property is used to display the letters farther apart in the heading.
            
         
            
           
            The HTML component
             
-
            <h1 class="overlap"><span class="upper">News</span><br>
+
            <h1 class="overlap"><span class="upper">News</span><br>
   <span class="byline">today</span>
 </h1>
            
         
            
         
            
           
            The CSS component
             
-
            .overlap { line-height:0.2em; }
+
            .overlap { line-height:0.2em; }
 .upper { text-transform:uppercase; }
 .byline {
   color:red;
@@ -199,34 +199,34 @@ 
            The CSS component
            
 }
            
           
            
          
-        
            The CSS letter-spacing property is used to display the letters closer together in the second line of text.
            
+        
            The CSS letter-spacing property is used to display the letters closer together in the second line of text.
            
         
            
         
           
            The HTML component
            
          
-
            <h1 class="upper2">News</h1>
            
+
            <h1 class="upper2">News</h1>
            
         
            
         
            
             
            The CSS component
            
          
-
            .upper2 { text-transform:uppercase; letter-spacing:1em; }
            
+
            .upper2 { text-transform:uppercase; letter-spacing:1em; }
            
         
             
       
            
       
            
-         
            Using CSS background-image to layer text and images
            
+         
            Using CSS background-image to layer text and images
            
          
-				 
            The CSS font-style property is used to display the textual component of a banner and background-image property is used to display a picture behind the text.
            
+				 
            The CSS font-style property is used to display the textual component of a banner and background-image property is used to display a picture behind the text.
            
          
            
             
            The HTML component
            
 
-
            <div id="banner"><span id="bannerstyle1">Welcome</span> 
+
            <div id="banner"><span id="bannerstyle1">Welcome</span> 
   <span id="bannerstyle2">to your local city council</span>
 </div>
            
           
            
           
            
             
            The CSS component
            
          
-
            #banner { 
+
            #banner { 
   color:white; 
   background-image:url(banner-bg.gif); 
   background-repeat:no-repeat; 
@@ -249,36 +249,36 @@ 
            The CSS component
            
           
            
       
            
       
            
-         
            Using CSS ::first-line to control the presentation of the first line of text
            
+         
            Using CSS ::first-line to control the presentation of the first line of text
            
          
-            
            The CSS ::first-line pseudo-element is used to display the first line of text in a larger, red font.
            
+            
            The CSS ::first-line pseudo-element is used to display the first line of text in a larger, red font.
            
 
           
            
             
            The HTML component
            
          
-
            <p class="startline">Once upon a time...<br />
+
            <p class="startline">Once upon a time...<br />
   ...in a land far, far away...</p>
            
           
            
           
            
             
            The CSS component
            
          
-
            .startline::first-line { font-size:2em; color:#990000; }
            
+
            .startline::first-line { font-size:2em; color:#990000; }
            
           
            
       
            
       
            
-         
            Using CSS ::first-letter to control the presentation of the first letter of text
            
+         
            Using CSS ::first-letter to control the presentation of the first letter of text
            
          
-            
            The CSS ::first-letter pseudo-element is used to display the first letter in a larger font size, red and vertically aligned in the middle.
            
+            
            The CSS ::first-letter pseudo-element is used to display the first letter in a larger font size, red and vertically aligned in the middle.
            
 
           
            
             
            The HTML component
            
          
-
            <p class="startletter">Once upon a time...</p>
            
+
            <p class="startletter">Once upon a time...</p>
            
           
            
           
            
             
            The CSS component
            
          
-
            .startletter::first-letter { font-size:2em; color:#990000; vertical-align:middle; }
            
+
            .startletter::first-letter { font-size:2em; color:#990000; vertical-align:middle; }
            
           
            
       
            
 		
            
diff --git a/techniques/css/C27.html b/techniques/css/C27.html
index 8760a53a58..53503829a0 100644
--- a/techniques/css/C27.html
+++ b/techniques/css/C27.html
@@ -21,7 +21,7 @@ 
            Description
            
 		
            There may also be situations where the visually presented order is necessary to the overall understanding of the page, and if the source order is presented differently, it may be much more difficult to understand. 
            
 		
            When the source order matches the visual order, everyone will read the content and interact with it in the same (correct) order. 
            
 		
            
-			
            The tabindex attribute in HTML has two functions. One is to make an element focusable and the other is to assign the element a position in the focus order. A tabindex of 0 makes an element focusable, but adds it to the focus order in the order of source elements. The focus order will follow positive values of tabindex in ascending order. Setting tabindex values that result in an order different from the order of elements in the Document Object Model (DOM) can mean the order is incorrect for users of assistive technologies. This is largely because the tabindex property is specified in the HTML and not the CSS. This may change in future specifications. It may also differ from the visual presentation order. 
            
+			
            The tabindex attribute in HTML has two functions. One is to make an element focusable and the other is to assign the element a position in the focus order. A tabindex of 0 makes an element focusable, but adds it to the focus order in the order of source elements. The focus order will follow positive values of tabindex in ascending order. Setting tabindex values that result in an order different from the order of elements in the Document Object Model (DOM) can mean the order is incorrect for users of assistive technologies. This is largely because the tabindex property is specified in the HTML and not the CSS. This may change in future specifications. It may also differ from the visual presentation order. 
            
 		
            
 	
            
 	
            
diff --git a/techniques/css/C28.html b/techniques/css/C28.html
index 9c0d64ffbc..772b17bbe1 100644
--- a/techniques/css/C28.html
+++ b/techniques/css/C28.html
@@ -5,7 +5,7 @@
 	
 
 
-	
            Specifying the size of text containers using em units
            
+	
            Specifying the size of text containers using em units
            
 	
            
 		
            ID: C28
            
 		
            Technology: css
            
@@ -17,7 +17,7 @@ 
            When to Use
            
 	
            
 	
            
 		
            Description
            
-		
            The objective of this technique is to specify the width and/or height of containers, that contain text or that will accept text input, in em units. This will allow user agents that support text resizing to resize the text containers in line with changes in text size settings.
            
+		
            The objective of this technique is to specify the width and/or height of containers, that contain text or that will accept text input, in em units. This will allow user agents that support text resizing to resize the text containers in line with changes in text size settings.
            
 		
            The width and/or height of text containers that have been specified using other units risk text cropping because it falls outside the container boundaries when the text size has been increased.
            
 		
            The containers generally control the placement of text within the web page and can include layout elements, structural elements and form controls.
            
 
@@ -28,33 +28,33 @@ 
            Description
            
 	
            
 		
            Examples
            
 		
            
-			
            em units for sizes for layout container containing text 
            
+			
            em units for sizes for layout container containing text 
            
 
-			
            In this example, a div element, with id value of "nav_menu", is used to position the navigation menu along the left-hand side of the main content area of the web page. The navigation menu consists of a list of text links, with id value of "nav_list". The text size for the navigation links and the width of the container are specified in em units.
            
+			
            In this example, a div element, with id value of "nav_menu", is used to position the navigation menu along the left-hand side of the main content area of the web page. The navigation menu consists of a list of text links, with id value of "nav_list". The text size for the navigation links and the width of the container are specified in em units.
            
 
-
            #nav_menu { width: 20em; height: 100em; }
+
            #nav_menu { width: 20em; height: 100em; }
 #nav_list { font-size: 100%; }
            
 		
            
 		
            
-			
            em units for text-based form controls
            
+			
            em units for text-based form controls
            
 
-			
            In this example, input elements that contain text or accept text input by the user have been given the class name "form1". CSS rules are used to define the font size in percent units and width for these elements in em units. This will allow the text within the form control to resize in response to changes in text size settings without being cropped (because the width of the form control itself also resizes according to the font size). 
            
+			
            In this example, input elements that contain text or accept text input by the user have been given class="form1". CSS rules are used to define the font size in percent units and width for these elements in em units. This will allow the text within the form control to resize in response to changes in text size settings without being cropped (because the width of the form control itself also resizes according to the font size). 
            
 
-			
            input.form1 { font-size: 100%; width: 15em; }
            
+			
            input.form1 { font-size: 100%; width: 15em; }
            
 		
            
 		
            
-			
            em units in dropdown boxes
            
+			
            em units in dropdown boxes
            
 
-			
            In this example, select elements have been given the class name "pick." CSS rules are used to define the font size in percent units and width in em units. This will allow the text within the form control to resize in response to changes in text size settings without being cropped. 
            
+			
            In this example, select elements have been given class="pick". CSS rules are used to define the font size in percent units and width in em units. This will allow the text within the form control to resize in response to changes in text size settings without being cropped. 
            
 
-			
            select.pick { font-size: 100%; width: 10em; }
            
+			
            select.pick { font-size: 100%; width: 10em; }
            
 		
            
 		
            
-			
            em units for non-text-based form controls
            
+			
            em units for non-text-based form controls
            
 
-			
            In this example, input elements that define checkboxes or radio buttons have been given the class name "choose." CSS rules are used to define the width and height for these elements in em units. This will allow the form control to resize in response to changes in text size settings.
            
+			
            In this example, input elements that define checkboxes or radio buttons have been given the class name "choose." CSS rules are used to define the width and height for these elements in em units. This will allow the form control to resize in response to changes in text size settings.
            
 
-			
            input.choose { width: 1.2em; height: 1.2em; }
            
+			
            input.choose { width: 1.2em; height: 1.2em; }
            
 		
            
 	
            
 	
            
@@ -63,7 +63,7 @@ 
            Tests
            
 			
            Procedure
            
 			
              
 				
            • Identify containers that contain text or allow text input.
              • 
-				
            • Check the container's width and/or height are specified in em units.
              • 
+				
            • Check the container's width and/or height are specified in em units.
              • 
 			
            
 		
            
 		
            
diff --git a/techniques/css/C29.html b/techniques/css/C29.html
index 0c755e38cc..e719d302cc 100644
--- a/techniques/css/C29.html
+++ b/techniques/css/C29.html
@@ -48,7 +48,7 @@ 
            Using a JavaScript control to apply a different external CSS file
            
 
 				
            The HTML components
            
 			
-
            <!doctype html>
+
            <!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
@@ -93,7 +93,7 @@ 
            The CSS components
            
 				
            
 					
            In main.css
            
 			
-
            body{ font-family: Geneva, Arial, Helvetica, sans-serif; margin: 2em; }
+
            body{ font-family: Geneva, Arial, Helvetica, sans-serif; margin: 2em; }
 
 #mainbody { 
   padding: 1em; 
@@ -114,7 +114,7 @@ 
            In main.css
            
 
 				
            
 					
            In defaultColors.css
            
-
            body, p { 
+
            body, p { 
   color:#000000; 
   background-color:#FFFFFF; 
 }
@@ -128,14 +128,14 @@ 
            In defaultColors.css
            
 
 					
            In altColors1.css
            
 
-
            body, h1, h2, h3, p, a { 
+
            body, h1, h2, h3, p, a { 
   color:#000066; 
   background-color:#FFFFFF; 
 }
            
 				
            
 				
            
 					
            In altColors2.css
            
-
            body, h1, h2, h3, p, a { 
+
            body, h1, h2, h3, p, a { 
   color:#FFFF33; 
   background-color:#000000; 
 }
            
@@ -143,7 +143,7 @@ 
            In altColors2.css
            
 				
            
 
 					
            In altColors3.css
            
-
            body, h1, h2, h3, p, a { 
+
            body, h1, h2, h3, p, a { 
   color:#000000; 
   background-color:#FFFF99; 
 }
            
@@ -151,7 +151,7 @@ 
            In altColors3.css
            
 				
            
 
 
            In altColors4.css
            
-
            body, h1, h2, h3, p, a { 
+
            body, h1, h2, h3, p, a { 
   color:#000000; 
   background-color:#FFFFFF; 
 }
            
@@ -161,7 +161,7 @@ 
            In altColors4.css
            
 			
 				
            The JavaScript components
            
 			
-
            function changeColors (newCSS){
+
            function changeColors (newCSS){
   document.getElementById('currentCSS').href = newCSS; 
 }
            
 			
@@ -178,7 +178,7 @@ 
            Using a client-side JavaScript to change a CSS property
            
 			
            
 				
            The HTML components
            
 			
-
            <h1>Product comparison</h1>
+
            <h1>Product comparison</h1>
 <p>The products you selected to compare are listed below. 
   Any differences between the products are highlighted and italicized.</p>
 <p class="inlinePara">Change hightlight color: </p>
@@ -233,7 +233,7 @@ 
            The HTML components
            
 			
            
 				
            The CSS components
            
 			
-
            body { color:#000000; background-color:#FFFFFF; }
+
            body { color:#000000; background-color:#FFFFFF; }
 .hghltLightYellow { color: #000000; background-color: #FFFF99; font-style:oblique; }
 .hghltBrightYellow { color: #000000; background-color: #FFFF00; font-style:oblique; }
 .hghltLightBlue { color: #000000; background-color: #33FFFF; font-style:oblique; }
@@ -249,7 +249,7 @@ 
            The CSS components
            
 			
            
 				
            The JavaScript components
            
 			
-
            function changeColor(hghltColor) {
+
            function changeColor(hghltColor) {
   // collects table data cells into an array 
   var els = document.getElementsByTagName('td');
 
@@ -276,7 +276,7 @@ 
            Using PHP $_GET to apply a different external CSS file 
            
 				
            The PHP and HTML components
            
 				
            
 					
            At the beginning of the PHP page
            
-
            <?php
+
            <?php
   $thestyle = $_GET['set'];
   if ($thestyle == "style1") {
     $thestyle = "style2";
@@ -289,11 +289,11 @@ 
            At the beginning of the PHP page
            
 				
            
 
 					
            In the <head> section
            
-
            <link rel="stylesheet" media="screen" href="<?php echo($thestyle);?>.css">
            
+
            <link rel="stylesheet" media="screen" href="<?php echo($thestyle);?>.css">
            
 				
            
 				
            
 					
            In <body> section
            
-
            <?php
+
            <?php
   if ($thestyle == "style1") {
     echo "<a href=\"index.php?set=style1\">Switch to Style Sheet Two</a>";
   }
@@ -315,13 +315,13 @@ 
            The CSS components
            
 				
            
 					
            In style1.css
            
 			
-
            body, p { color:#000000; background-color:#FFFFFF; }
+
            body, p { color:#000000; background-color:#FFFFFF; }
 h1, h2, h3 {color:#990000; background-color:#FFFFFF; }
            
 				
            
 				
            
 
 					
            In style2.css
            
-
            body, h1, h2, h3, p, a { color:#FFFF00; background-color:#000000; }
            
+
            body, h1, h2, h3, p, a { color:#FFFF00; background-color:#000000; }
            
 				
            
 			
            
 		
            
diff --git a/techniques/css/C30.html b/techniques/css/C30.html
index 7bce41a50e..3681f0a49b 100644
--- a/techniques/css/C30.html
+++ b/techniques/css/C30.html
@@ -31,7 +31,7 @@ 
            Replacing heading text with images of text
            
 				
            A design studio site uses a style switcher to allow users to view two presentations of their home page. For the default version, the heading text is replaced with images of text. A control on the page allows users to switch to a version that presents the headings as text.
            
 				
            
 					
            The HTML component
            
-
            <div id="Header"> 
+
            <div id="Header"> 
   <h1><span>Pufferfish Design Studio</span></h1> 
   <h2><span>Surprising Identity and Design Solutions</span></h2> 
 </div>
            
@@ -41,7 +41,7 @@ 
            The HTML component
            
 					
            The CSS for the presentation that includes images of text
            
 					
            Note that the CSS uses positioning to place the contents of the heading elements offscreen so that the text remains available to screen reader users.
            
          
-
            #Header h1 {
+
            #Header h1 {
   background-image: url(pufferfish-logo.png);
   height: 195px;
   width: 290px;
@@ -72,7 +72,7 @@ 
            The CSS for the presentation that includes images of text
            
          
 					
            The CSS for the presentation that does not include images of text
            
          
-
            #Header h1 {
+
            #Header h1 {
   font: normal 200%/100% Garamond, "Times New Roman", serif;
   margin-bottom: 0;
   color: #000099;
diff --git a/techniques/css/C31.html b/techniques/css/C31.html
index 4b24b62315..0afbea3fdd 100644
--- a/techniques/css/C31.html
+++ b/techniques/css/C31.html
@@ -34,7 +34,7 @@ 
            Example 1: Medium complex flexbox layout in 
         
-
            
+
            
   <!DOCTYPE html>
   <html lang="en">
     <head>
diff --git a/techniques/css/C32.html b/techniques/css/C32.html
index fa2a9eba5a..c1756567b3 100644
--- a/techniques/css/C32.html
+++ b/techniques/css/C32.html
@@ -34,7 +34,7 @@ 
            Grid layout in HTML and CSS - Medium complexity
            
         
            The following medium complexity example uses HTML and CSS to create a grid layout. The layout regions adjust their size as the viewport is adjusted. When the total viewport width matches the width defined via media queries, columns wrap to be positioned below, rather than beside each other or vice versa.
            
         
         
            The zoom level can be increased to 400% without requiring scrolling in more than one direction. This particular example uses fr units as a fraction of the free space of the grid container for the grid items by using the "grid-template-columns" property and are laid out in source order.
            
-
            
+
            
   <!DOCTYPE html>
     <html lang="en">
       <head>
diff --git a/techniques/css/C33.html b/techniques/css/C33.html
index f01d536ed9..71231c77b1 100644
--- a/techniques/css/C33.html
+++ b/techniques/css/C33.html
@@ -30,10 +30,10 @@ 
            Breaking long URLs
            
     
            Using the following CSS will cause long URLs to break at appropriate places (hyphens, forward slashes, etc.) and within words without causing reflow.
            
     
            List of CSS declarations used and why they are used:
            
     
              
-     
            • overflow-wrap: break-word: Allows words to be broken and wrapped within words. 
              • 
-	    
            • word-wrap: break-word: Allows words to be broken and wrapped within.
              • 
+     
            • overflow-wrap: break-word: Allows words to be broken and wrapped within words. 
              • 
+	    
            • word-wrap: break-word: Allows words to be broken and wrapped within.
              • 
     
            
-
            a {
+
            a {
   overflow-wrap: break-word;
   word-wrap: break-word;
 }
            
diff --git a/techniques/css/C34.html b/techniques/css/C34.html
index 5b8127580c..a127ec4b09 100644
--- a/techniques/css/C34.html
+++ b/techniques/css/C34.html
@@ -20,7 +20,7 @@ 
            When to Use
            
     
            
     
            
       
            Description
            
-      
            The objective of this technique is to be able to present content with sticky headers and footers when there is enough space. This is done by using min-height, max-height, and min-width media queries techniques that adapt to the available space of the viewport.
            
+      
            The objective of this technique is to be able to present content with sticky headers and footers when there is enough space. This is done by using min-height, max-height, and min-width media queries techniques that adapt to the available space of the viewport.
            
 
       
            Sticky regions always stay visible in the viewport while the other content will disappear underneath when scrolling. In terms of content visibility, this is often not a problem on the desktop and on mobile devices in portrait orientation. However, when using mobile devices in landscape orientation or when zooming in on the desktop, sticky regions may block a big portion of the screen: the height of the sticky region may leave only a small part of the screen for the display of page content.
            
       
@@ -30,9 +30,9 @@ 
            Description
            
 
       
            The basic approach for un-fixing sticky headers / footers is to:
            
       
              
-        
            1. Define the first sticky regions using media query min-height properties, so they get fixed or un-fixed depending on the available space;
              2. 
+        
            2. Define the first sticky regions using media query min-height properties, so they get fixed or un-fixed depending on the available space;
              3. 
 
-        
            3. Define other sticky regions using media query min-width and max-height properties for specific viewport sizes, so they get fixed or un-fixed depending on the available space, e.g. for tablets depending on the portrait or landscape position of the device.
              4. 
+        
            4. Define other sticky regions using media query min-width and max-height properties for specific viewport sizes, so they get fixed or un-fixed depending on the available space, e.g. for tablets depending on the portrait or landscape position of the device.
              5. 
       
            
 
     
            
@@ -40,8 +40,8 @@ 
            Description
            
       
            Examples
            
       
            
         
            Un-fix sticky headers / footers in HTML and CSS
            
-        
            The following example uses HTML and CSS to un-fix sticky headers / footers. The sticky regions get un-fixed as the height of the viewport is limited or the orientation is changed. When the min-height property matches the viewport space defined via media queries, regions which are not sticky get fixed or vice versa. This particular example uses the CSS min-height, max-height and min-width media query properties.
            
-
            
+        
            The following example uses HTML and CSS to un-fix sticky headers / footers. The sticky regions get un-fixed as the height of the viewport is limited or the orientation is changed. When the min-height property matches the viewport space defined via media queries, regions which are not sticky get fixed or vice versa. This particular example uses the CSS min-height, max-height and min-width media query properties.
            
+
            
 <!DOCTYPE html>
 <html lang="en">
   <head>
diff --git a/techniques/css/C35.html b/techniques/css/C35.html
index 5d733d17e2..5ae9614f63 100644
--- a/techniques/css/C35.html
+++ b/techniques/css/C35.html
@@ -24,18 +24,18 @@ 
            Description
            
 					
          6. allow the containers to expand in the direction of text.
            7. 
          
          
            There is some variability in the width that words or phrases will grow to when setting the letter and word spacing. If elements must use a fixed width, a safe value is 20% wider than the default maximum width. For example, if a small text-container allows for 20 characters, allowing enough width for 24 characters should allow enough space for text-spacing to be applied.
            
-         
            For boxes which can expand with the text, authors can take advantage of the inline-block value of the CSS display property and not set negative margins to allow for text-spacing overrides.
            
+         
            For boxes which can expand with the text, authors can take advantage of the inline-block value of the CSS display property and not set negative margins to allow for text-spacing overrides.
            
       
            
    
            
       
            Examples
            
       
            When a user adapts the page to increase the text spacing, text fits within the bounds of its containing box.
            
-      
            The ex unit has been used as as the closest available unit for character width, ex Represents the x-height of the element's font. (MDN page for CSS units). It is not perfect, different characters have different default widths.
            
+      
            The ex unit has been used as as the closest available unit for character width, ex Represents the x-height of the element's font. (MDN page for CSS units). It is not perfect, different characters have different default widths.
            
       
            
          
            A box sized with space to allow for expansion
            
          
            The containers are sized to a value greater than the default width of the text.
            
             
            
                
            The CSS
            
-
            <style>
+
            <style>
 /* Links are less than 8ex wide,
 so 10ex width of each li allows for expanded letter and word width */
 nav li { width: 10em; }
@@ -44,7 +44,7 @@ 
            The CSS
            
 
             
            
                
            The HTML
            
-
            <nav>
+
            <nav>
   <ul>
     <li><a href="/">Home</a></li>
     <li><a href="/contact/">Contact</a></li>
@@ -57,7 +57,7 @@ 
            The HTML
            
          
            A box which expands with the text size
            
             
            
                
            The CSS
            
-
            <style>
+
            <style>
 /* CSS containers are given a display of inline-block. No negative margins set. */
  nav li { display: inline-block; }
  </style>
            
@@ -65,7 +65,7 @@ 
            The CSS
            
 
             
            
                
            The HTML
            
-
            <nav>
+
            <nav>
   <ul>
     <li><a href="/">Home</a></li>
     <li><a href="/contact/">Contact</a></li>
diff --git a/techniques/css/C36.html b/techniques/css/C36.html
index f8371e1ac9..86b4a47e72 100644
--- a/techniques/css/C36.html
+++ b/techniques/css/C36.html
@@ -17,7 +17,7 @@ 
            Metadata
            
       
            
 				
            Description
            
 				
            The objective of this technique is to allow a user to override text spacing via user stylesheet, bookmarklet, extension, or application. Increased spacing between paragraphs, lines, words, and characters benefits people with low vision or some cognitive disabilities. Content needs to allow spacing changes without loss of content or functionality, so text containers must either have room for the text to expand or the container must be able to expand. This technique will typically apply to short strings of text such as in a navigation bar, as longer strings of text are increasingly likely to require wrapping to be readable when styles are changed.
            
-				
            In English languages, if authors do not set the CSS height property, it can help ensure paragraphs expand. Paragraphs need to allow text to increase vertically for languages or scripts such as English which are read horizontally or to increase horizontally for languages or scripts which are read vertically.
            
+				
            In English languages, if authors do not set the CSS height property, it can help ensure paragraphs expand. Paragraphs need to allow text to increase vertically for languages or scripts such as English which are read horizontally or to increase horizontally for languages or scripts which are read vertically.
            
 			
            
       
            
 				
            Examples
            
@@ -27,11 +27,11 @@ 
            Examples
            
 					
            A paragraph expands vertically within container
            
                
            
                   
            The CSS
            
-
            <style>
+
            <style>
 /* CSS: No height property is set.*/
 </style>
            
 
            The HTML
            
-
            <div class="card">
+
            <div class="card">
   <img alt="" src="image.png">
   <h3>Heading</h3>
   <p class="lede">Long lede paragraph...</p>
diff --git a/techniques/css/C37.html b/techniques/css/C37.html
index 677414f4cb..76d85b1641 100644
--- a/techniques/css/C37.html
+++ b/techniques/css/C37.html
@@ -5,7 +5,7 @@
     
   
   
-    
            Using CSS max-width and height to fit images
            
+    
            Using CSS max-width and height to fit images
            
     
            
       
            Metadata
            
       
            
@@ -18,13 +18,13 @@ 
            When to Use
            
     
            
     
            
       
            Description
            
-      
            The objective of this technique is to be able to present images without introducing a horizontal scroll bar at a width equivalent to 320 CSS pixels, or a vertical scroll bar at a height equivalent to 256 CSS pixels for content intended to scroll horizontally. This is done by using CSS max-width and height property techniques that adapt to the available space and keep the original dimensions of the image.
                  
+      
            The objective of this technique is to be able to present images without introducing a horizontal scroll bar at a width equivalent to 320 CSS pixels, or a vertical scroll bar at a height equivalent to 256 CSS pixels for content intended to scroll horizontally. This is done by using CSS max-width and height property techniques that adapt to the available space and keep the original dimensions of the image.
                  
       
            Responsive layouts can add or remove columns or layout blocks, and each part of the layout can be wider or smaller at different points. This technique ensures images do not break out of their layout area, including in one-column layouts where it would cause scrolling.
            
       
            The basic principles of fitting images are to:
            
       
       
              
-        
            1. Define the max-width property for images, and;
              2. 
-        
            2. Define the height property for images, so they enlarge or shrink in the available space and respond to zoom levels.
              3. 
+        
            3. Define the max-width property for images, and;
              4. 
+        
            4. Define the height property for images, so they enlarge or shrink in the available space and respond to zoom levels.
              5. 
       
            
       
       
            All images require design finesse by making sure the original size fits the biggest size of the available spaces to achieve good-looking results at a wide range of viewport sizes and zoom levels.
            
@@ -35,9 +35,9 @@ 
            Examples
            
       
            
         
            Fitting images in HTML and CSS
            
         
            The following simple example uses HTML and CSS to create a fitting image. The layout regions adjust their size as the viewport is adjusted. The images subsequently adjust their size to fit within the layout region containers.
            
-        
            The zoom level can be increased to 400% without requiring scrolling in more than one direction. This particular example uses a percent size for the max-width and auto size for the height of the image to remain the original dimensions.
            
+        
            The zoom level can be increased to 400% without requiring scrolling in more than one direction. This particular example uses a percent size for the max-width and auto size for the height of the image to remain the original dimensions.
            
 
-
            <style>
+
            <style>
 .img-responsive {
   max-width: 100%;
 }
diff --git a/techniques/css/C38.html b/techniques/css/C38.html
index 2ec947ca5e..1a4eec3ab6 100644
--- a/techniques/css/C38.html
+++ b/techniques/css/C38.html
@@ -5,7 +5,7 @@
     
   
   
-    
            Using CSS width, max-width and flexbox to fit labels and inputs
            
+    
            Using CSS width, max-width and flexbox to fit labels and inputs
            
     
            
       
            Metadata
            
       
            
@@ -18,7 +18,7 @@ 
            When to Use
            
     
            
     
            
       
            Description
            
-      
            The objective of this technique is to be able to present labels and inputs without introducing a horizontal scroll bar at a width equivalent to 320 CSS pixels for content intended to scroll vertically. When space is limited in the viewport for the label and input to sit next to each other horizontally, they will be changed to a vertical alignment. This is done by using CSS properties for width, max-width and flexbox that adapt to the available space.
            
+      
            The objective of this technique is to be able to present labels and inputs without introducing a horizontal scroll bar at a width equivalent to 320 CSS pixels for content intended to scroll vertically. When space is limited in the viewport for the label and input to sit next to each other horizontally, they will be changed to a vertical alignment. This is done by using CSS properties for width, max-width and flexbox that adapt to the available space.
            
       
       
            Responsive layouts can add or remove columns or layout blocks, and each part of the layout can be wider or smaller at different points. This technique ensures labels and inputs do not break out of their layout area, including in one-column layouts where it would cause horizontal scrolling.
            
 
@@ -38,9 +38,9 @@ 
            Examples
            
       
            
         
            Fitting labels, inputs and flexbox layout with HTML and CSS.
            
         
            The following example uses HTML and CSS to fit labels and inputs within various width containers, including the viewport. The layout regions adjust their size as the viewport is adjusted. The labels and inputs subsequently adjust their size to fit within the layout region containers.
            
-        
            The zoom level can be increased to 400% without requiring horizontal scrolling. This particular example uses a percent size for the width and max-width for the labels and inputs. The max-width is applied in order to fix elements spilling out of the grid in a cross-browser way, as replaced elements such as the select have intrinsic sizing.
            
+        
            The zoom level can be increased to 400% without requiring horizontal scrolling. This particular example uses a percent size for the width and max-width for the labels and inputs. The max-width is applied in order to fix elements spilling out of the grid in a cross-browser way, as replaced elements such as the select have intrinsic sizing.
            
 
-
            <style>
+
            <style>
 
 /* Fitting Inputs Styling */
 
diff --git a/techniques/css/C39.html b/techniques/css/C39.html
index a37a6117e6..32183aaebf 100644
--- a/techniques/css/C39.html
+++ b/techniques/css/C39.html
@@ -24,7 +24,7 @@ 
            When to Use
            
 
 
            
   
            Description
            
-  
            The objective of this technique is to allow users to prevent animations (including motion animations) from being displayed on web pages, via the use of the prefers-reduced-motion CSS Media Query.
            
+  
            The objective of this technique is to allow users to prevent animations (including motion animations) from being displayed on web pages, via the use of the prefers-reduced-motion CSS Media Query.
            
   
            Some users experience distraction or nausea from animated content. For example, if scrolling a page causes elements to move (other than the essential movement associated with scrolling the content, which is under the user's control) it can trigger vestibular disorders.
            
   
            Media queries that selectively enable/disable CSS-driven animations based on operating system or user agent preferences allow users to avoid those triggers.
            
   
            The understanding document for Animation from Interactions includes links for changing the 'reduced motion' setting.
            
@@ -35,7 +35,7 @@ 
            Examples
            
   
            
     
            prefers-reduced-motion CSS Media Query
            
     
            Users can indicate their motion preference for interfaces in their system and the prefers-reduced-motion CSS Media Query will respect that choice. CSS can then be applied to disable that motion for users that request it.
            
-
            /* CSS for the motion effect */
+
            /* CSS for the motion effect */
 
 @media (prefers-reduced-motion: reduce) {
   /* CSS to disable motion goes here */
@@ -44,7 +44,7 @@ 
            prefers-reduced-motion CSS Media Query
            
       Working example of 'prefers-reduced-motion' CSS Media Query
     
            
     
            Alternatively, it is possible to take the inverse approach: define static styles, and then include a media query that only applies when the user has not set the reduced motion preference.
            
-
            /* "Static" CSS styles */
+
            /* "Static" CSS styles */
 
 @media (prefers-reduced-motion: no-preference) {
   /* CSS for the motion effect goes here */
diff --git a/techniques/css/C40.html b/techniques/css/C40.html
index 674fb0b3ec..d2af2f6abd 100644
--- a/techniques/css/C40.html
+++ b/techniques/css/C40.html
@@ -26,9 +26,9 @@ 
            Description
            
 
 			
            This technique only guarantees that an indicator will pass if the entire indicator is drawn over the background, not within the boundary of the focused component, and if the entire background behind the indicator is one single, solid color. For example, if the background is an image or gradient, or if the indicator is partially overlaid on top of a different UI component, it may still be necessary to compare the indicator pixel-by-pixel against the background.
            
 
-			
            In CSS, two-color indicators can be implemented by combining the outline and box-shadow properties with the :focus or :focus-visible pseudo-classes.
            
+			
            In CSS, two-color indicators can be implemented by combining the outline and box-shadow properties with the :focus or :focus-visible pseudo-classes.
            
 
-			
            Avoid setting outline: none to use box-shadow on its own. User agents commonly suppress the box-shadow property in forced-color modes, so authors should avoid relying on box-shadow alone to implement focus indicators. If box-shadow only styling is required, consider combining it with an outline: 2px transparent solid property to ensure compatibility with forced-color modes.
            
+			
            Avoid setting outline: none to use box-shadow on its own. User agents commonly suppress the box-shadow property in forced-color modes, so authors should avoid relying on box-shadow alone to implement focus indicators. If box-shadow only styling is required, consider combining it with an outline: 2px transparent solid property to ensure compatibility with forced-color modes.
            
 		
            
 		
            
 			
            Examples
            
@@ -37,7 +37,7 @@ 
            Examples
            
 			
            
 				
            A thick two-color indicator
            
 				
            In this example, the indicator consists of two solid bands of color. Because each color band is 2 CSS pixels thick, either color band is large enough to meet the minimum indicator size requirement on its own. As long as one of the two colors has 3:1 change contrast with the pixels behind and around the focus indicator, the indicator will satisfy both the Focus Appearance and Non-Text Contrast success criteria.
            
-				
            *:focus {
+				
            *:focus {
 	/* inner indicator */
 	outline: 2px #F9F9F9 solid;
 	outline-offset: 0;
@@ -79,8 +79,8 @@ 
            Related Techniques
            
 		
            
 			
            Resources
            
 			
 		
            
 	
diff --git a/techniques/css/C41.html b/techniques/css/C41.html
index b0c6fdf17c..432f4ab41c 100644
--- a/techniques/css/C41.html
+++ b/techniques/css/C41.html
@@ -29,12 +29,12 @@ 
            Examples
            
 				
            Inner border
            
 				
            
 					
            HTML
            
-
            <button type="button">Example button</button>
            
+
            <button type="button">Example button</button>
            
 				
            
 				
            
 					
            CSS
                            
-					
            CSS to provide the indicator. It narrows the scope to buttons within the main element.
            
-
            button { 
+					
            CSS to provide the indicator. It narrows the scope to buttons within the main element.
            
+
            button { 
   background-color: #236AB8; /* medium-dark blue */
   color: white;
   padding: 10px;
diff --git a/techniques/css/C42.html b/techniques/css/C42.html
index 66beab040a..68d7052b29 100644
--- a/techniques/css/C42.html
+++ b/techniques/css/C42.html
@@ -5,7 +5,7 @@
 		
 	
 	
-		
            Using min-height and min-width to ensure sufficient target spacing
            
+		
            Using min-height and min-width to ensure sufficient target spacing
            
 		
            
 			
            Metadata
            
 			
            
@@ -26,7 +26,7 @@ 
            Examples
            
 			
            The following examples can be seen as rendered versions in the working examples.
            
 
 			
            
-				
            Using a display value of inline-block, min-height, and min-width
            
+				
            Using a display value of inline-block, min-height, and min-width
            
 				
            The first example shows a situation where the targets (in this case, the linked numbers in the pagination navigation) are smaller than 44 × 44 CSS pixels. However, the list items that contain them have a minimum height and width of 44 px set, so that sufficient target spacing is assured.
            
 				
            
 					A horizontal pagination component immediately above the search results.
@@ -35,7 +35,7 @@ 
            Using a display value of inline-block, 
 					
            The HTML
            
-
            <nav aria-label="pagination">
+
            <nav aria-label="pagination">
   <ol class="pagination-1">
     <li><a class="previous">previous</a></li>
     <li><a aria-current="page">1</li>
@@ -47,7 +47,7 @@ 
            The HTML
            
   </ol>
 </nav>
            
 
            The CSS
            
-
            .pagination-1 li {
+
            .pagination-1 li {
   display: inline-block; 
   min-height: 44px;
   min-width: 44px;
@@ -56,15 +56,15 @@ 
            The CSS
            
 			
 			
            
 			
            
-				
            Using a display value of flex and min-height / width
            
-				
            The second example uses min-width and min-height on the targets (the linked numbers in the pagination menu) and not on the parent container, thereby meeting this target spacing success criterion and incidentally also the AAA Success Criterion 2.5.5 Target Size.
            
+				
            Using a display value of flex and min-height / width
            
+				
            The second example uses min-width and min-height on the targets (the linked numbers in the pagination menu) and not on the parent container, thereby meeting this target spacing success criterion and incidentally also the AAA Success Criterion 2.5.5 Target Size.
            
 				
            
 					A horizontal pagination component immediately above the search results.
 					
            Example of using CSS to ensure enough spacing within targets
            
 				
            
 				
            
 					
            The HTML
            
-
            <nav aria-label="pagination">
+
            <nav aria-label="pagination">
   <ol class="pagination-2">
     <li><a class="previous">previous</a></li>
     <li><a aria-current="page">1</li>
@@ -79,7 +79,7 @@ 
            The HTML
            
 
 				
            
 					
            The CSS
            
-
            .pagination-2 {
+
            .pagination-2 {
   display: flex;
   flex-wrap: wrap;
 }
diff --git a/techniques/css/C43.html b/techniques/css/C43.html
index 4ef4dd0e6c..36c3ab557f 100644
--- a/techniques/css/C43.html
+++ b/techniques/css/C43.html
@@ -5,7 +5,7 @@
 		
 	
 	
-		
            Using CSS scroll-padding to un-obscure content
            
+		
            Using CSS scroll-padding to un-obscure content
            
 		
            
 			
            Metadata
            
 			
            
@@ -18,19 +18,19 @@ 
            When to Use
            
 		
            
 		
            
 			
            Description
            
-			
            The objective of this technique is to ensure that user interface components (for example: links, buttons, and form fields) that are initially completely obscured by a fixed-position component can still be accessed by users. In this example, this is achieved using CSS padding and scroll-padding properties to create space underneath the site footer and allow the link in the footer to scroll into view when it is focused with a keyboard.
            
+			
            The objective of this technique is to ensure that user interface components (for example: links, buttons, and form fields) that are initially completely obscured by a fixed-position component can still be accessed by users. In this example, this is achieved using CSS padding and scroll-padding properties to create space underneath the site footer and allow the link in the footer to scroll into view when it is focused with a keyboard.
            
 		
            
 		
            
 			
            Examples
            
 
 			
            
-				
            Using CSS scroll-padding to un-obscure content
            
+				
            Using CSS scroll-padding to un-obscure content
            
 				
            This example shows a situation where there is a fixed-position banner at the bottom of the screen that is covering up the site footer, which contains a link. This type of fixed-position banner is a common design for cookie-consent banners.
            
         
-				
            Working example: Using CSS scroll-padding to un-obscure content.
            
-
            <!doctype html>
+				
            Working example: Using CSS scroll-padding to un-obscure content.
            
+
            <!doctype html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
@@ -190,7 +190,7 @@ 
            Related Techniques
            
 			
            Resources
            
 			
              
 				
            1. W3C - CSS padding.
              2. 
-				
            2. W3C - CSS the scroll-padding property.
              3. 
+				
            3. W3C - CSS the scroll-padding property.
              4. 
 			
            
 
 		
            
diff --git a/techniques/css/C45.html b/techniques/css/C45.html
index 05eeb1e1b4..716caf52c6 100644
--- a/techniques/css/C45.html
+++ b/techniques/css/C45.html
@@ -5,7 +5,7 @@
 		
 	
 	
-		
            Using CSS :focus-visible to provide keyboard focus indication
            
+		
            Using CSS :focus-visible to provide keyboard focus indication
            
 		
            
 			
            Metadata
            
 			
            
@@ -18,24 +18,24 @@ 
            When to Use
            
 		
            
 		
            
 			
            Description
            
-			
            The objective of this technique is to provide custom styles for interactive elements when they receive keyboard focus. In this example, this is achieved using the CSS :focus-visible pseudo-class.
            
-      
            Styles defined with the regular :focus pseudo-class are applied whenever an element has focus, regardless of how it received focus. In contrast, user agents apply additional heuristics and logic to decide when to show :focus-visible styles – in particular, browsers always show these styles when a user is navigating using the keyboard, but will generally not show them as a result of a mouse/pointer interaction (with the exception of elements that also support keyboard input, such as <input> elements). This allows authors to provide strong visible focus indication for keyboard users, without forcing them on mouse/pointer users who may not necessarily want or need them (for instance, because they find them visually distracting).
            
+			
            The objective of this technique is to provide custom styles for interactive elements when they receive keyboard focus. In this example, this is achieved using the CSS :focus-visible pseudo-class.
            
+      
            Styles defined with the regular :focus pseudo-class are applied whenever an element has focus, regardless of how it received focus. In contrast, user agents apply additional heuristics and logic to decide when to show :focus-visible styles – in particular, browsers always show these styles when a user is navigating using the keyboard, but will generally not show them as a result of a mouse/pointer interaction (with the exception of elements that also support keyboard input, such as <input> elements). This allows authors to provide strong visible focus indication for keyboard users, without forcing them on mouse/pointer users who may not necessarily want or need them (for instance, because they find them visually distracting).
            
 			
            This satisfies the requirement of providing a mode of operation where the keyboard focus indicator is visible.
            
 			
            
 				
            This technique is only sufficient if it uses styles that provide a visible focus indicator.
            
 			
            
 			
            
-				
            There may be situations where mouse/pointer users could also benefit from having a visible focus indicator, even though they did not set focus to an element using the keyboard. As a best practice, consider still providing an explicit :focus style for these cases.
            
+				
            There may be situations where mouse/pointer users could also benefit from having a visible focus indicator, even though they did not set focus to an element using the keyboard. As a best practice, consider still providing an explicit :focus style for these cases.
            
       
            
 		
            
 		
            
 			
            Examples
            
 			
            
-				
            Using CSS :focus-visible to provide keyboard focus indication
            
+				
            Using CSS :focus-visible to provide keyboard focus indication
            
 				
            In this example, we have a standard <button> control in the HTML.
            
         
            By default, in all modern browsers, this button does not show any focus indication when activated using a mouse/pointer. Browsers show their default focus outline/indication when a user sets focus on the button using Tab.
            
-        
            In order to make this focus indication more prominent, we use the :focus-visible pseudo-class selector to define a more intentional and pronounced focus style.
            
-				
            Working example: Using CSS :focus-visible to provide keyboard focus indication.
            
+        
            In order to make this focus indication more prominent, we use the :focus-visible pseudo-class selector to define a more intentional and pronounced focus style.
            
+				
            Working example: Using CSS :focus-visible to provide keyboard focus indication.
            
 
            <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -90,8 +90,8 @@ 
            Related Techniques
            
 		
            
 			
            Resources
            
 			
              
-				
            1. CSS Selectors Level 4 - :focus-visible pseudo-class.
              2. 
-				
            2. MDN - :focus-visible pseudo-class.
              3. 
+				
            3. CSS Selectors Level 4 - :focus-visible pseudo-class.
              4. 
+				
            4. MDN - :focus-visible pseudo-class.
              5. 
 			
            
 		
            
 	
diff --git a/techniques/css/C6.html b/techniques/css/C6.html
index b06f4dc499..a529aae0fd 100644
--- a/techniques/css/C6.html
+++ b/techniques/css/C6.html
@@ -22,10 +22,10 @@ 
            Description
            
 	 
            
 		
            Examples
            
 		
            
-			
            In this example structural markup (description lists) have been applied to the content. CSS has been used to style the content into columnar form. Each class absolutely positions the content into columns and the margins have been set to 0 to override the default behavior of user agents to display HTML definition lists with the dd element indented.
            
+			
            In this example structural markup (description lists) have been applied to the content. CSS has been used to style the content into columnar form. Each class absolutely positions the content into columns and the margins have been set to 0 to override the default behavior of user agents to display HTML definition lists with the dd element indented.
            
 			
            Here is the content to be displayed:
            
          
-
            <div class="box">
+
            <div class="box">
   <dl>
     <dt class="menu1">Products</dt>
     <dd class="item1">Telephones</dd>
@@ -39,7 +39,7 @@ 
            Examples
            
          
 
            Here is the CSS which positions and styles the above elements:
            
          
-
            .item1 {
+
            .item1 {
    left: 0;
    margin: 0;
    position: absolute;
diff --git a/techniques/css/C7.html b/techniques/css/C7.html
index 16f3879733..b96e4aaa60 100644
--- a/techniques/css/C7.html
+++ b/techniques/css/C7.html
@@ -18,7 +18,7 @@ 
            When to Use
            
    
            
 		
            Description
            
 		
            The objective of this technique is to supplement the link text by adding additional text that describes the unique function of the link and styling the additional text so that it is not rendered on the screen by user agents that support CSS. When information in the surrounding context is needed to interpret the displayed link text, this technique provides a complete description of the link's input function while permitting the less complete text to be displayed.
            
-    
            This technique works by creating a CSS selector to target text that is to be hidden. The rule set for the selector places the text to be hidden in a 1-pixel box with overflow:hidden. This ensures the text does not display on screen but remains accessible to assistive technologies such as screen readers and braille displays. Note that the technique does not use visibility:hidden or display:none properties, since these have the effect of hiding the text from assistive technology in addition to preventing on-screen display.
            
+    
            This technique works by creating a CSS selector to target text that is to be hidden. The rule set for the selector places the text to be hidden in a 1-pixel box with overflow:hidden. This ensures the text does not display on screen but remains accessible to assistive technologies such as screen readers and braille displays. Note that the technique does not use visibility:hidden or display:none properties, since these have the effect of hiding the text from assistive technology in addition to preventing on-screen display.
            
     
            This technique is not a method for hiding complete links, only a section of text within a link. The resources section includes methods for hiding and showing links aimed at screen reader users.
            
 		
            
 			
            This technique to hide link text has been advocated by some screen reader users and corporate web authors. It has proved effective on some websites. Other screen reader users and accessibility experts don't recommend this as a general technique because the results can be overly chatty and constrain the ability of the experienced screen reader user to control the verbosity. The working group believes the technique can be useful for web pages that do not have repetitive content in the hidden text areas.
            
@@ -28,7 +28,7 @@ 
            Description
            
    
            
 		
            Examples
            
 		
            The following examples use the CSS selector and rule set below:
            
-
            .visually-hidden {
+
            .visually-hidden {
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
@@ -42,7 +42,7 @@ 
            Examples
            
 				
            A news site with "full story" links
            
 				
            This example describes a news site that has a series of short synopsis of stories followed by a link that says "full story". Hidden link text describes the purpose of the link.
            
          
-
            
+
            
 <p>Washington has announced plans to stimulate economic growth.
   <a href="/washington-growth/"><span class="visually-hidden">Washington stimulates
    economic growth </span>Full Story</a>
@@ -52,7 +52,7 @@ 
            A news site with "full story" links
            
          
            A list of books in different formats
            
          
            This example describes a resource that has electronic books in different formats. The title of each book is followed by links that say "HTML" and "PDF." Visually-hidden text describes the purpose of each link.
            
          
-
            <dl>
+
            <dl>
   <dt>Winnie the Pooh</dt>
   <dd><a href="winnie-the-pooh.html">
     <span class="visually-hidden">Winnie the Pooh </span>HTML</a></dd>
diff --git a/techniques/css/C8.html b/techniques/css/C8.html
index 48d13d7478..5ac75fb8ee 100644
--- a/techniques/css/C8.html
+++ b/techniques/css/C8.html
@@ -17,7 +17,7 @@ 
            When to Use
            
 		
            
 		
            
 			
            Description
            
-      
            The objective of this technique is to demonstrate how the visual appearance of spacing in text may be enhanced via style sheets while still maintaining meaningful text sequencing. The CSS letter-spacing property helps developers control the amount of white space between characters. This is recommended over adding blank characters to control the spacing, since the blank characters can change the meaning and pronunciation of the word.
            
+      
            The objective of this technique is to demonstrate how the visual appearance of spacing in text may be enhanced via style sheets while still maintaining meaningful text sequencing. The CSS letter-spacing property helps developers control the amount of white space between characters. This is recommended over adding blank characters to control the spacing, since the blank characters can change the meaning and pronunciation of the word.
            
    
            
 	 
            
 		
            Examples
            
@@ -70,7 +70,7 @@ 
            Related Techniques
            
 			
            Resources
            
 			
 		
            
diff --git a/techniques/css/C9.html b/techniques/css/C9.html
index 111a945922..4a36ec4e61 100644
--- a/techniques/css/C9.html
+++ b/techniques/css/C9.html
@@ -19,10 +19,10 @@ 
            Description
            
 		
             The objective of this technique is to provide a mechanism to add purely decorative images and images used for visual formatting to web content without requiring additional markup within the content. This makes it possible for assistive technologies to ignore the non-text content. Some user agents can ignore or turn off CSS at the user's request, so that background images included with CSS simply "disappear" and do not interfere with display settings such as enlarged fonts or high contrast settings.
            
 		
            Background images can be included with the following CSS properties:
            
       
              
-         
            • background;
              • 
-         
            • background-image;
              • 
-         
            • content, combined with the ::before and ::after pseudo-elements;
              • 
-         
            • list-style-image.
              • 
+         
            • background;
              • 
+         
            • background-image;
              • 
+         
            • content, combined with the ::before and ::after pseudo-elements;
              • 
+         
            • list-style-image.
              • 
       
            
       
            
         
            This technique is not appropriate for any image that conveys information or provides functionality, or for any image primarily intended to create a specific sensory experience.
            
@@ -34,7 +34,7 @@ 
            Examples
            
 			
            Background image for an HTML page
            
       
            The stylesheet for a web page specifies a background image for the whole page.
            
          
-
            <style>
+
            <style>
   body { background: #ffe url('/images/home-bg.jpg') repeat; }
 </style>
            
       
            
@@ -42,7 +42,7 @@ 
            Background image for an HTML
          
            Background image with CSS for image rollovers 
            
          
            The stylesheet for a web page uses the CSS background property to create a decorative rollover effects when a user hovers their mouse pointer over a link.
            
          
-
            a:hover {
+
            a:hover {
   background: #ffe url('/images/hover.gif') repeat;
   color: #000;
   text-decoration: none;
@@ -75,7 +75,7 @@ 
            Related Techniques
            
 	
            
 		
            Resources
            
 		
 	
            
 
diff --git a/techniques/failures/F1.html b/techniques/failures/F1.html
index f1d8da18d7..00f1f4a9fa 100644
--- a/techniques/failures/F1.html
+++ b/techniques/failures/F1.html
@@ -32,7 +32,7 @@
                                 Players Wisconsin Idaho." 
            
             
            Here is the HTML content:
            
          
-
            <div class="box">      
+
            <div class="box">      
      <span class="menu1">Products</span>       
      <span class="menu2">Locations</span>       
      <span class="item1">Telephones</span>       
@@ -44,7 +44,7 @@
          
             
            Here are the styles for the above content:
            
          
-
            .menu1 { 
+
            .menu1 { 
      position: absolute; 
      top: 3em; 
      left: 0em;     
diff --git a/techniques/failures/F100.html b/techniques/failures/F100.html
index dcf037c905..5535b85c7a 100644
--- a/techniques/failures/F100.html
+++ b/techniques/failures/F100.html
@@ -37,7 +37,7 @@ 
            Block an orientation ("door slam") by using HTML and CSS
            
 
         When the portrait property matches the viewport space defined via media queries, the message will disappear or vice versa. This particular example uses the CSS landscape, portrait media query properties.
            
 
-
            <style>
+
            <style>
 /* Orientation "door slam" Styling */
 
 @media all and (orientation: landscape) {
@@ -57,7 +57,7 @@ 
            Block an orientation ("door slam") by using HTML and CSS
            
 }
 </style>
            
 
-
            
+
            
 <!-- Orientation "door slam" HTML -->
 
 <div class="rotate">Please rotate your device!</div>
diff --git a/techniques/failures/F101.html b/techniques/failures/F101.html
index c66c32a6c6..e2b8386ab9 100644
--- a/techniques/failures/F101.html
+++ b/techniques/failures/F101.html
@@ -27,9 +27,9 @@ 
            Description
            
 					
          7. The up-event does not reverse the outcome of the activation;
            8. 
 					
          8. It is not essential for the functionality to execute and complete on the down-event.
            9. 
 				
          
-			
          Rather than taking advantage of the click event, authors may use down-events such as mousedown, touchstart or pointerdown. As a result, functionality will be executed as soon as a mouse button is pressed (but not released yet), or a finger or stylus makes contact with a touchscreen.
          
+			
          Rather than taking advantage of the click event, authors may use down-events such as mousedown, touchstart or pointerdown. As a result, functionality will be executed as soon as a mouse button is pressed (but not released yet), or a finger or stylus makes contact with a touchscreen.
          
 			
          It is possible to use the down event and mitigate potential issues to avoid failing the Success Criterion. For example, provide a method to easily undo or abort the functionality, or reverse the outcome on the up-event (when the mouse button is released, or when the finger or stylus are lifted from the touchscreen). And note that some uses of the down-event are essential for the functionality (e.g., where the control simulates the operation of a musical instrument like a set of piano keys, or when the control is used as an on-screen control for a game where a fast and immediate response is required), in which case they would not fail this Success Criterion.
          
-			
          The test procedure outlined below could be supplemented with automated or semi-automated tests to scan for JavaScript that registers event listeners such as mousedown, touchstart, or pointerdown. The automated test would not be sufficient to make a pass/fail determination, but it can help narrow down the number of potentially problematic controls.
          
+			
          The test procedure outlined below could be supplemented with automated or semi-automated tests to scan for JavaScript that registers event listeners such as mousedown, touchstart, or pointerdown. The automated test would not be sufficient to make a pass/fail determination, but it can help narrow down the number of potentially problematic controls.
          
 		
          
 		
 		
          
@@ -37,13 +37,13 @@ 
          Examples
          
       
       		
          
 				
          A close button that triggers on down-events
          
-				
          A modal dialog contains a lengthy form that a user needs to complete. The modal provides a simple "Close" control that closes the dialog and loses all information the user may already have entered in the form. However, instead of simply listening to the click event - which in most user agents is triggered on the up-event - the author decided to close the dialog on the down-event. This may lead to the user accidentally closing the dialog and losing all the data they entered into the form up to that point.
          
-
          <!-- modal dialog with a form -->
+				
          A modal dialog contains a lengthy form that a user needs to complete. The modal provides a simple "Close" control that closes the dialog and loses all information the user may already have entered in the form. However, instead of simply listening to the click event - which in most user agents is triggered on the up-event - the author decided to close the dialog on the down-event. This may lead to the user accidentally closing the dialog and losing all the data they entered into the form up to that point.
          
+
          <!-- modal dialog with a form -->
 ...
 <button id="close" type="button">Close</button>
 ...
          
 
-
          const trigger = document.getElementById("close");
+
          const trigger = document.getElementById("close");
 
 function closeDialog() {
   /* close the modal dialog */
diff --git a/techniques/failures/F103.html b/techniques/failures/F103.html
index e25253a719..4b3e29c807 100644
--- a/techniques/failures/F103.html
+++ b/techniques/failures/F103.html
@@ -32,11 +32,11 @@ 
          Description
          
 			 Where updated content does not conform to the definition of status messages, a failure of 4.1.3 has not taken place.
          
 				
          The second step in this failure technique involves examining code.  Where dynamic content meets the definition of a status message, its container can be examined for an appropriate WAI-ARIA role or property which allows it to be programmatically determinable as a status message. Currently there are only a small number of techniques available to indicate status messages to assistive technologies. They are:
 					
            
-						
          • the HTML output element
            • 
-						
          • role="status"
            • 
-						
          • role="alert"
            • 
-						
          • role="log"
            • 
-						
          • the use of an aria-live attribute on an element, set to either "polite" or "assertive"
            • 
+						
          • the HTML output element
            • 
+						
          • role="status"
            • 
+						
          • role="alert"
            • 
+						
          • role="log"
            • 
+						
          • the use of an aria-live attribute on an element, set to either "polite" or "assertive"
            • 
 					
          
 				The absence of all of these techniques predicts a failure for the status message be announced to the user. Additionally, if the role or property is not set before the dynamic content is added, this also predicts a failure.
          
 				
          Since additional techniques may exist to alert an assistive technology, the final step of this failure technique is confirming whether an assistive technology (such as a screen reader) detects the dynamic content and exposes the information to users. Where a status message exists but is not surfaced by assistive technology, it is confirmation that a failure has taken place.
          
diff --git a/techniques/failures/F104.html b/techniques/failures/F104.html
index 7f7277ccab..b46aeb2bf8 100644
--- a/techniques/failures/F104.html
+++ b/techniques/failures/F104.html
@@ -21,7 +21,7 @@ 
          Description
          
 			
          The purpose of this technique is to identify and test a failure condition where part of the content clips and is unreadable when the user overrides the spacing of the text within the boundaries set out in the Text Spacing success criterion. In general, this failure occurs when text is presented in a size-constrained block which does not expand if the size of the content increases. Some of the ways in which this can occur include:
          
 			
            
 			  
          • 
-			   Setting the overflow property of the enclosing element to hidden
+			   Setting the overflow property of the enclosing element to hidden
 		      
            • 
 			  
          • 
 			   Using absolutely positioned content
@@ -38,7 +38,7 @@ 
            Examples
            
 				
            Text inside a box overflows and overlaps text below it when text spacing is implemented.
            
 				
            The code below is what is implemented in the DOM before the user implements any CSS test spacing overrides. The text renders correctly in the box and doesn't interfere with the next paragraph.
            
 
-
            <div style="font-size:100%; width:130px; height:125px; border: thin solid gray;">
+
            <div style="font-size:100%; width:130px; height:125px; border: thin solid gray;">
   <p style="margin:0;">Now is the time for all good men to come to 
    the aid of their country.</p>
 </div>
@@ -59,7 +59,7 @@ 
            Text inside a box overflows and overlaps text below it when text spacing is
 			
            
 				
            Text inside a box is clipped when text spacing is implemented.
            
 				
            The code below is what is implemented in the DOM before the user implements any CSS test spacing overrides. The text renders correctly in the box and doesn't interfere with the next paragraph.
            
-
            <div style="font-size:100%; width:130px;
+
            <div style="font-size:100%; width:130px;
  height:95px; overflow:hidden; border:thin solid gray;">
   <p>Now is the time for all good men to come to the aid of their country.</p>
 </div>
diff --git a/techniques/failures/F107.html b/techniques/failures/F107.html
index 1e48148a7a..48b5192cfa 100644
--- a/techniques/failures/F107.html
+++ b/techniques/failures/F107.html
@@ -5,7 +5,7 @@
       
 
 
-    
            Failure of Success Criterion 1.3.5 due to incorrect autocomplete attribute values
            
+    
            Failure of Success Criterion 1.3.5 due to incorrect autocomplete attribute values
            
     
            
 			
            ID: F107
            
 			
            Technology: failures
            
@@ -17,9 +17,9 @@ 
            Applicability
            
     
            
     
            
       
            Description
            
-      
            The purpose of this technique is to identify a failure condition where form inputs do not have the correct autocomplete attribute values for inputs that request information about the user of the form.
            
+      
            The purpose of this technique is to identify a failure condition where form inputs do not have the correct autocomplete attribute values for inputs that request information about the user of the form.
            
 
-      
            Success Criterion 1.3.5 uses a fixed list of tokens in Input Purposes for user interface components (based on the HTML 5.2 autocomplete attribute's fixed list of token values) because the programmatic association of specified token values (metadata) allows for other machine processing, such as expressing the input label in different modalities.
            
+      
            Success Criterion 1.3.5 uses a fixed list of tokens in Input Purposes for user interface components (based on the HTML 5.2 autocomplete attribute's fixed list of token values) because the programmatic association of specified token values (metadata) allows for other machine processing, such as expressing the input label in different modalities.
            
 
       
            Another important part of this success criterion is that the token values are associated with inputs that are scoped directly to the primary end user.
            
     
            
@@ -28,9 +28,9 @@ 
            Description
            
       
            Examples
            
 			
            
 				
            Incorrect attribute
            
-				
            An online form used to collect the user's name and birthday which uses incorrect autocomplete attributes. The correct attribute value for the first control is name, and for the second control the made-up attribute value birthday was used instead of bday.
            
+				
            An online form used to collect the user's name and birthday which uses incorrect autocomplete attributes. The correct attribute value for the first control is name, and for the second control the made-up attribute value birthday was used instead of bday.
            
         
-
            <h2>Your details:</h2>
+
            <h2>Your details:</h2>
 <label for="uname">Name:</label>
 <input autocomplete="email" id="uname" type="text"> 
 <label for="ubirthday">Birthday:</label>
@@ -46,7 +46,7 @@ 
            Procedure
            
 
 				
            For each form field which collects information about the user of the form:
            
 				
              
-					
            1. Check that the form field has an autocomplete attribute and value pair that does not match the purpose of the input.
              2. 
+					
            2. Check that the form field has an autocomplete attribute and value pair that does not match the purpose of the input.
              3. 
 					
            3. Check that the input purpose is not communicated programmatically through any other method.
              4. 
 				
            
         
            
@@ -60,7 +60,7 @@ 
            Expected Results
            
     
     
            
@@ -70,7 +70,7 @@ 
            Resources
            
 					WCAG - Input Purposes for User Interface Components.
 				
            • 
 				
          • 
-					HTML - Autofilling form controls: the autocomplete attribute.
+					HTML - Autofilling form controls: the autocomplete attribute.
 				
            • 
 			
          
     
          
diff --git a/techniques/failures/F109.html b/techniques/failures/F109.html
index 34f59dce22..a00e34f7fb 100644
--- a/techniques/failures/F109.html
+++ b/techniques/failures/F109.html
@@ -33,7 +33,7 @@ 
          Examples
          
     
            
         
          • A fieldset that prompts a user to "Enter the 2nd, 6th and last characters of your password", with separate input fields for each character.
            • 
         
          • A fieldset that prompts a user to enter each digit of a verification code in a separate input (unless the user can paste the entire code in the first input, and the remaining inputs are populated automatically).
            • 
-        
          • A password input fieldset composed of <select> elements that requires a user to select each character of a fixed-length password from individual dropdown fields.
            • 
+        
          • A password input fieldset composed of <select> elements that requires a user to select each character of a fixed-length password from individual dropdown fields.
            • 
     
          
    
          
    
diff --git a/techniques/failures/F2.html b/techniques/failures/F2.html
index 0cab6e3969..30b3cd2620 100644
--- a/techniques/failures/F2.html
+++ b/techniques/failures/F2.html
@@ -4,11 +4,11 @@
       
          This document describes a failure that occurs when a change in the appearance of text conveys meaning without using appropriate semantic markup. This failure also applies to images of text that are not enclosed in the appropriate semantic markup.
          
    
          Examples
          
       
          
-         
          Using CSS to style the p element to look like a heading
          
+         
          Using CSS to style the p element to look like a heading
          
          
             
          The author intended to make a heading but didn't want the look of the default HTML heading. So they used CSS to style the P element to look like a heading and they called it a heading. But they failed to use the proper HTML heading element. Therefore, the Assistive Technology could not distinguish it as a heading.
          
          
-
          <style>
+
          <style>
 .heading1{
   font-family: Times, serif;
   font-size:200%;
@@ -16,12 +16,12 @@ 
          Using CSS to style the p element to look
 }
 </style>
 
-<p class="heading1">Introduction</p>
+<p class="heading1">Introduction</p>
 <p>This introduction provides detailed information about how to use this ...</p>
 
          
          
             
          
-               
          In this case, the proper approach would be to use CSS to style the H1 element in HTML.
          
+               
          In this case, the proper approach would be to use CSS to style the h1 element in HTML.
          
             
          
          
       
          
@@ -30,7 +30,7 @@ 
          Images of text used as headings where the images are not marked up with head
          
             
          Chapter1.gif is an image of the words, "Chapter One" in a Garamond font sized at 20 pixels. This is a failure because at a minimum the img element should be enclosed within a header element. A better solution would be to eliminate the image and to enclose the text within a header element which has been styled using CSS.
          
          
-
          <img src="Chapter1.gif" alt="Chapter One">
+
          <img src="Chapter1.gif" alt="Chapter One">
 <p>Once upon a time in the land of the Web...</p>
          
       
          
 
diff --git a/techniques/failures/F24.html b/techniques/failures/F24.html
index 503b9f4acb..09b2b2c243 100644
--- a/techniques/failures/F24.html
+++ b/techniques/failures/F24.html
@@ -19,7 +19,7 @@ 
          Specifying only background color with CSS
          
                stylesheet, however the foreground color is not defined. Therefore,
                the example fails the Success Criterion.
          
          
-
          <!doctype>
+
          <!doctype>
   <html lang="en">
   <head>
     <title>Setting the canvas background</title>
@@ -39,7 +39,7 @@ 
          Specifying only foreground color with CSS
          
                stylesheet, however the background color is not defined. Therefore,
                the example fails the Success Criterion. 
          
          
-
          <!doctype>
+
          <!doctype>
 <html lang="en">
 <head>
   <title>Setting the canvas foreground</title>
@@ -59,7 +59,7 @@ 
          Specifying foreground color of link text with CSS
          
                the body element. However, the background color is not defined.
                Therefore, the example fails the Success Criterion. 
          
          
-
          <!doctype>
+
          <!doctype>
 <html lang="en">
 <head>
   <title>A study of population dynamics</TITLE>
diff --git a/techniques/failures/F3.html b/techniques/failures/F3.html
index 9a0ef9e975..a477b807d0 100644
--- a/techniques/failures/F3.html
+++ b/techniques/failures/F3.html
@@ -21,14 +21,14 @@ 
          
                                 image that is presented by CSS alone. In this example, the image
                                 TopRate.png is a 180 by 200 pixel image that contains the text,
                                 "19.3% APR Typical Variable." 
          
-
          p#bestinterest {
+
          p#bestinterest {
    padding-left: 200px;
    background: transparent url(/images/TopRate.png) no-repeat top left;
  }
 
          
          
           It is used in this excerpt: 
          
          
-
          <p id="bestinterest">Where else would you find a better interest rate?</p>
+
          <p id="bestinterest">Where else would you find a better interest rate?</p>
 
          
       
          
       
          
@@ -39,7 +39,7 @@ 
          
                                 in-stock, or out of stock. 
          
             
          The CSS contains: 
          
          
-
          ul#booklist li {
+
          ul#booklist li {
    padding-left: 20px;
  }
  
@@ -62,7 +62,7 @@ 
          
          
             
          It is used in this excerpt: 
          
          
-
          <ul id="booklist">
+
          <ul id="booklist">
   <li class="new">Some book</li>
   <li class="instock">Some other book</li>
   <li class="limited">A book we desperately want to get rid of</li>
@@ -74,10 +74,10 @@ 
          
          
          
          
             
          Using the code from example 1, the same background image is declared in the HTML style attribute:
          
-
          <p id="bestinterest" style="background: transparent url(/images/TopRate.png) no-repeat top left;">
+
          <p id="bestinterest" style="background: transparent url(/images/TopRate.png) no-repeat top left;">
    Where else would you find a better interest rate?<p>
          
             
          In the following code, the background image declaration is created in a client script:
          
-
          <script>
+
          <script>
    var newP = document.createElement('p');
    var newPText = document.createTextNode('Where else would you find a better interest rate?');
    newP.appendChild(newPText);
diff --git a/techniques/failures/F32.html b/techniques/failures/F32.html
index 3aa102c269..08b7bb8d1e 100644
--- a/techniques/failures/F32.html
+++ b/techniques/failures/F32.html
@@ -18,12 +18,12 @@ 
          Failure due to adding white space in the middle of a word
          
                                 in a heading. Screen readers may read each letter individually
                                 instead of the word "Welcome."
          
          
-
          <h1>W e l c o m e</h1>
+
          <h1>W e l c o m e</h1>
 
          
          
             
          &nbsp; can also be used to add white space, producing similar failures:
          
          
-
          <h1>H&nbsp;E&nbsp;L&nbsp;L&nbsp;O</h1>
          
+
          <h1>H&nbsp;E&nbsp;L&nbsp;L&nbsp;O</h1>
          
       
          
       
          
          
          White space in the middle of a word changing its meaning
          
@@ -35,7 +35,7 @@ 
          White space in the middle of a word changing its meaning
          
                                 characters. The characters mean "Tokyo," but screen readers say
                                 "Higashi Kyo".
          
          
-
          <h1>東　京</h1>
          
+
          <h1>東　京</h1>
          
       
          
       
          
          
          Using line break characters to format vertical text
          
@@ -47,7 +47,7 @@ 
          Using line break characters to format vertical text
          
                                 following example, "東京都"(Tokyo-to) will be read "Higashi Kyo
                                 Miyako".
          
          
-
          <table>
+
          <table>
    <caption>表1.　都道府県別一覧表</caption>
    <tr>
      <td></td>
diff --git a/techniques/failures/F33.html b/techniques/failures/F33.html
index d577f202c7..2928cae4b3 100644
--- a/techniques/failures/F33.html
+++ b/techniques/failures/F33.html
@@ -20,7 +20,7 @@
             
          The following example incorrectly uses white space characters to
                                 format a paragraph into a two column format.
          
          
-         
          +         
           Web Content Accessibility Guidelines      including blindness and low vision, 
 2.0 (WCAG 2.0) covers a wide range of     deafness and hearing loss, learning 
 issues and recommendations for making     difficulties, cognitive limitations, limited 
diff --git a/techniques/failures/F34.html b/techniques/failures/F34.html
index 3f69141fc3..f7ef1151c5 100644
--- a/techniques/failures/F34.html
+++ b/techniques/failures/F34.html
@@ -25,7 +25,7 @@
             
          The following example incorrectly uses white space to format a Menu
                                 as a visual table.
          
          
-         
          +         
           Menu
          Breakfast        Lunch           Dinner
 
diff --git a/techniques/failures/F36.html b/techniques/failures/F36.html
index 819390c2d2..f0096f6ee9 100644
--- a/techniques/failures/F36.html
+++ b/techniques/failures/F36.html
@@ -26,7 +26,7 @@ 
          
                                 the form's default behavior of submitting when the user hits enter
                                 in a text field. 
          
          
-
          <form method="get" id="form1">
+
          <form method="get" id="form1">
    <input type="text" name="text1" size="3" maxlength="3"> - 
    <input type="text" name="text2" size="3" maxlength="3"> - 
    <input type="text" name="text3" size="4" maxlength="4" onchange="form1.submit();">
@@ -38,7 +38,7 @@ 
          
             
          This is a  example that submits a form when the user
                                 selects an option from the menu when there is no warning of this behavior in advance. The form will submit as soon as an item from the menu is selected. A user using a keyboard will not be able to navigate past the first item in the menu. Blind users and users with hand tremors can easily make a mistake on which item on the dropdown menu to choose and they are taken to the wrong destination before they can correct it.  
          
          
-
          <form method="get" id="form2">
+
          <form method="get" id="form2">
    <input type="text" name="text1">
     <select name="select1" onchange="form2.submit();">
       <option>one</option>
diff --git a/techniques/failures/F37.html b/techniques/failures/F37.html
index a419b8ef31..2ed09e6e6c 100644
--- a/techniques/failures/F37.html
+++ b/techniques/failures/F37.html
@@ -19,14 +19,14 @@ 
          
                                 the form when a radio button is selected instead of using a submit
                                 button. 
          
          
-
          <script> 
+
          <script> 
    function goToMirror(theInput) {
     var mirrorSite = "https://download." + theInput.value + "/"; 
     window.open(mirrorSite); 
    }
-</script>
+</script>
 ...
-<form name="mirror_form" id="mirror_form" action="" method="get">
+<form name="mirror_form" id="mirror_form" action="" method="get">
   <p>Please select a mirror download site:</p> 
   <p> 
     <input type="radio" onclick="goToMirror(this);" name="mirror" 
diff --git a/techniques/failures/F38.html b/techniques/failures/F38.html
index ac63a8a4a1..635a37fb68 100644
--- a/techniques/failures/F38.html
+++ b/techniques/failures/F38.html
@@ -5,19 +5,19 @@
                         should be ignored by AT. If there is no alt attribute at all assistive
                         technologies are not able to ignore the non-text content. The alt attribute
                         must be provided and have a null value (i.e., alt="" ) to avoid a failure of this Success Criterion. 
          
-      
          This describes a failure condition for text alternatives for images that should be ignored by assistive technology (AT). If an image has the attribute role="presentation", it will be ignored by AT. However, if it does not have role="presentation", and if there is no alt attribute at all assistive technologies are not able to ignore the image. For decorative images which need to be ignored by AT, either role="presentation" must be used or the alt attribute must be provided and have a null value (i.e., alt="") to avoid a failure of this Success Criterion.
          
+      
          This describes a failure condition for text alternatives for images that should be ignored by assistive technology (AT). If an image has the attribute role="presentation", it will be ignored by AT. However, if it does not have role="presentation", and if there is no alt attribute at all assistive technologies are not able to ignore the image. For decorative images which need to be ignored by AT, either role="presentation" must be used or the alt attribute must be provided and have a null value (i.e., alt="") to avoid a failure of this success criterion.
          
    
          Examples
          
       
            
-         
          • Decorative images that have no alt
-                                attribute and no role attribute
+         
          • Decorative images that have no alt
+                                attribute and no role attribute
             
            • 
       
          
    
          Tests
          
       
          Procedure
          
-         
          For any img element that is used for purely decorative content:
          
+         
          For any img element that is used for purely decorative content:
          
          
            
-            
          1. Check whether the element has no role attribute or has a role attribute value that is not presentation.
            2. 
-            
          2. Check whether the element has no alt attribute or has an alt attribute with a value that is not null.
            3. 
+            
          3. Check whether the element has no role attribute or has a role attribute value that is not presentation.
            4. 
+            
          4. Check whether the element has no alt attribute or has an alt attribute with a value that is not null.
            5. 
          
          
       
          
       
          Expected Results
          
diff --git a/techniques/failures/F39.html b/techniques/failures/F39.html
index c575271fe2..2471142a2f 100644
--- a/techniques/failures/F39.html
+++ b/techniques/failures/F39.html
@@ -15,7 +15,7 @@
             of this Success Criterion. 
          
    
          Examples
          
       
          
-         
          Decorative images that have no alt attribute
          
+         
          Decorative images that have no alt attribute
          
          
             
          An image is used to create a blank space between content, where the
                 spacing itself is not meaningful to the content. The image has an alt
@@ -23,7 +23,7 @@ 
          Decorative images that have no alt attrib
                 because the text alternative does not serve an equivalent purpose.
                 The image is meant to be ignored but its alternative text "spacer" is
                 announced by screen readers and displayed in some alternate color schemes. 
          
-
          <div>
+
          <div>
   Tree type: <img src="spacer.gif" width="100" height="1" alt="spacer">
   Cedrus deodara
 </div>
diff --git a/techniques/failures/F4.html b/techniques/failures/F4.html
index 78976b0b59..747c52182b 100644
--- a/techniques/failures/F4.html
+++ b/techniques/failures/F4.html
@@ -28,7 +28,7 @@ 
          Description
          
       
          Examples
          
       
          
          
          A product list page uses the text-decoration:blink style on an element to draw attention to sale prices. This fails the success criterion because users cannot control the blink.
          
-
          <p>My Great Product <span style="text-decoration:blink">Sale! $44,995!</span></p>
          
+
          <p>My Great Product <span style="text-decoration:blink">Sale! $44,995!</span></p>
          
       
          
    
          
    
          
diff --git a/techniques/failures/F40.html b/techniques/failures/F40.html
index 90cd0e3fe4..847d639e64 100644
--- a/techniques/failures/F40.html
+++ b/techniques/failures/F40.html
@@ -3,7 +3,7 @@
         
          ID: F40
          Technology: failures
          Type: Failure
          When to Use
          
       
           All pages
          
    
          Description
          
-      
          meta http-equiv content="{time} url=..." is often used to
+      
          meta http-equiv="refresh" content="{time}; url=..." is often used to
                         automatically redirect users. When this occurs after a time delay, it is an
                         unexpected change of context that may interrupt the user.
          
       
          It is acceptable to use the meta element to create a redirect
@@ -16,7 +16,7 @@
          
             
           The page below is a failure because it will redirect to the URI https://www.example.com/newpage after a time limit of 5 seconds.
          
          
-
          <!doctype>
+
          <!doctype>
 <html lang="en">
 <head>
   <title>Do not use this!</title>     
@@ -33,7 +33,7 @@
       
          
    
          Tests
          
       
          Procedure
          
-        
          For a page that uses meta http-equiv="refresh":
           
+        
          For a page that uses meta http-equiv="refresh":
           
         
            
           
          1. Check that the numerical value for seconds until refresh in the content attribute is present.
            2. 
           
          2. Check that the numerical value for seconds until refresh in the content attribute is less than one or greater than 72,000.
            3. 
@@ -56,7 +56,7 @@
       
          
    
          
diff --git a/techniques/failures/F41.html b/techniques/failures/F41.html
index e42ad1b58e..2de2c4b23a 100644
--- a/techniques/failures/F41.html
+++ b/techniques/failures/F41.html
@@ -3,14 +3,14 @@
    
          
    
          
       
          Description
          
-      
          meta http-equiv of refresh is often used to periodically refresh pages or to redirect users to another page. If the time interval is too short, and there is no way to turn auto-refresh off, people who are blind will not have enough time to make their screen readers read the page before the page refreshes unexpectedly and causes the screen reader to begin reading at the top. Sighted users may also be disoriented by the unexpected refresh.
          
+      
          meta http-equiv="refresh" is often used to periodically refresh pages or to redirect users to another page. If the time interval is too short, and there is no way to turn auto-refresh off, people who are blind will not have enough time to make their screen readers read the page before the page refreshes unexpectedly and causes the screen reader to begin reading at the top. Sighted users may also be disoriented by the unexpected refresh.
          
    
          
    
          
       
          Examples
          
       
          
          
          This is a deprecated example that changes the user's page at regular intervals. Content developers should not use this technique to simulate "push" technology. Developers cannot predict how much time a user will require to read a page; premature refresh can disorient users. Content developers should avoid periodic refresh and allow users to choose when they want the latest information. (The number in the content attribute is the refresh interval in seconds.)
          
          
-
          <!doctype>
+
          <!doctype>
 <html lang="en">
 <head>     
   <title>HTML Techniques for WCAG 2</title>     
@@ -23,13 +23,13 @@ 
          Examples
          
       
          
    
          Tests
          
       
          Procedure
          
-        
          For a page that uses meta http-equiv="refresh":
           
+        
          For a page that uses meta http-equiv="refresh":
           
         
            
-          
          1. Check that the numerical value for seconds until refresh in the content attribute is present.
            2. 
-          
          2. Check that the numerical value for seconds until refresh in the content attribute is less than one or greater than 72,000.
            3. 
+          
          3. Check that the numerical value for seconds until refresh in the content attribute is present.
            4. 
+          
          4. Check that the numerical value for seconds until refresh in the content attribute is less than 1 or greater than 72000.
            5. 
           
          5. Check if the page qualifies for Real-time or Essential Exceptions in Success Criterion 2.2.1 Timing Adjustable.
            6. 
           
          6. Check if the user is provided an opportunity to turn off, extend, or adjust the timing of the page refresh.
            7. 
-            
          7. Check if the page does not refresh after the duration specified in the content attribute.
            8. 
+            
          8. Check if the page does not refresh after the duration specified in the content attribute.
            9. 
         
          
       
          
       
          Expected Results
          
diff --git a/techniques/failures/F42.html b/techniques/failures/F42.html
index 798048f15b..28c03b0bb6 100644
--- a/techniques/failures/F42.html
+++ b/techniques/failures/F42.html
@@ -7,40 +7,40 @@
                         agents including assistive technology may not be able to identify the links
                         in the content as links. They may be recognized as interactive controls but still not recognized as links.  Such elements do not appear in the links
                         list generated by user agents or assistive technology.
          
-                        
          It is possible to use the ARIA role attribute to identify an anonymous element as link control for assistive technologies. However, best practice for ARIA calls for making use of native elements whenever possible, so the use of the role attribute to identify anonymous elements as links is not recommended.
          
-      
          The a and area
+                        
          It is possible to use the ARIA role attribute to identify an anonymous element as link control for assistive technologies. However, best practice for ARIA calls for making use of native elements whenever possible, so the use of the role attribute to identify anonymous elements as links is not recommended.
          
+      
          The a and area
                         elements are intended to mark up links.
          
    
          Examples
          
       
          
-         
          Scripting a span element
          
+         
          Scripting a span element
          
          
-            
          Scripted event handling is added to a span element so
+            
          Scripted event handling is added to a span element so
                                 that it functions as a link when clicked with a mouse. Assistive
                                 technology does not recognize this element as a link.
          
          
-
          <span onclick="location.href='newpage.html'">Fake link</span>
          
+
          <span onclick="location.href='newpage.html'">Fake link</span>
          
       
          
       
          
-         
          Scripting an img element
          
+         
          Scripting an img element
          
          
-            
          Scripted event handling is added to an img element so
+            
          Scripted event handling is added to an img element so
                                 that it functions as a link when clicked with a mouse. Assistive
                                 technology does not recognize this element as a link.
          
          
-
          <img src="go.gif" alt="go to the new page" onclick="location.href='newpage.html'">
+
          <img src="go.gif" alt="go to the new page" onclick="location.href='newpage.html'">
 
          
       
          
       
          
-         
          Scripting an img element, with keyboard
+         
          Scripting an img element, with keyboard
                             support
          
          
-            
          Scripted event handling is added to an img element so
+            
          Scripted event handling is added to an img element so
                                 that it functions as a link. In this example, the link functionality
                                 can be invoked with the mouse or via the Enter key if the user agent
                                 includes the element in the tab chain. Nevertheless, the element
                                 will not be recognized as a link.
          
          
-
          function doNav(url){
+
          function doNav(url){
   window.location.href = url;
 }
    
@@ -53,7 +53,7 @@ 
          Scripting an img element, with keyboard
          
             
          The markup for the image is:
          
          
-
          <p>
+
          <p>
   <img src="bargain.jpg"
   tabindex="0" 
   alt="View Bargains"
@@ -62,15 +62,15 @@ 
          Scripting an img element, with keyboard
 </p>
          
       
          
       
          
-         
          Scripting a div element
          
+         
          Scripting a div element
          
          
-            
          This example uses script to make a div element behave
+            
          This example uses script to make a div element behave
                                 like a link. Although the author has provided complete keyboard
                                 access and separated the event handlers from the markup to enable
-                                repurposing of the content, the div element will not be
+                                repurposing of the content, the div element will not be
                                 recognized as a link by assistive technology.
          
          
-
          window.onload = init;
+
          window.onload = init;
 function init(){
   var objAnchor = document.getElementById('linklike');
   
@@ -97,9 +97,9 @@ 
          Scripting a div element
          
   window.location.href = strLocation;
 }
          
          
-            
          The markup for the div element is:
          
+            
          The markup for the div element is:
          
          
-
          <div id="linklike">View the results of the survey.</div>
          
+
          <div id="linklike">View the results of the survey.</div>
          
       
          
    
          Tests
          
       
          Procedure
          
diff --git a/techniques/failures/F43.html b/techniques/failures/F43.html
index b382c78ab8..c1f4a243c1 100644
--- a/techniques/failures/F43.html
+++ b/techniques/failures/F43.html
@@ -13,7 +13,7 @@
                             <th> or <caption>
                         elements.
          
       
          
-         
          Though an element's semantic meaning is generally exposed to AT, the WAI-ARIA presentation role can be used to suppress the native semantics of an element so that they are not mapped to the accessibility API. Setting an element's role to presentation may avoid this failure by hiding that element's semantics from the user.
          
+         
          Though an element's semantic meaning is generally exposed to AT, the WAI-ARIA presentation role can be used to suppress the native semantics of an element so that they are not mapped to the accessibility API. Setting an element's role to presentation may avoid this failure by hiding that element's semantics from the user.
          
       
          
    
          Examples
          
       
          
@@ -23,7 +23,7 @@ 
          A heading used only for visual effect
          
                                 large, bold font. The address does not identify a new section of the
                                 document, however, so it should not be marked as a heading.
          
          
-
          <p>Interested in learning more? Write to us at</p> 
+
          <p>Interested in learning more? Write to us at</p> 
 <h4>3333 Third Avenue, Suite 300 · New York City</h4>
 <p>And we'll send you the complete informational packet absolutely Free!</p>
          
       
          
@@ -39,21 +39,21 @@ 
          Using heading elements for presentational effect
          
                                 effect — to control the fonts used to display the authors' names and
                                 the date.
          
          
-
          <h1>Study on the Use of Heading Elements in Web Pages</h1>
+
          <h1>Study on the Use of Heading Elements in Web Pages</h1>
 <h3>Joe Jones and Mary Smith<h3>
 <h4>March 14, 2006</h4>
 <h2>Abstract</h2>
 <p>A study was conducted in early 2006 ...</p>
          
       
          
       
          
-         
          Using blockquote elements to provide additional
+         
          Using blockquote elements to provide additional
                             indentation
          
          
             
          The following example uses blockquote for text that is
                                 not a quotation to give it prominence by indenting it when displayed
                                 in graphical browsers.
          
          
-
          <p>After extensive study of the company website, the task force identified 
+
          <p>After extensive study of the company website, the task force identified 
    the following common problem.</p>
    
 <blockquote>
@@ -67,7 +67,7 @@ 
          Using blockquote elements to provide addi
       
          
          
          Using the fieldset and legend elements to
                             give a border to text
          
-
          <fieldset>
+
          <fieldset>
   <legend>Bargain Corner</legend>
   <p>Buy today, and save 20%</p>
 </fieldset>
          
diff --git a/techniques/failures/F44.html b/techniques/failures/F44.html
index b28cb68e32..b5a23f19de 100644
--- a/techniques/failures/F44.html
+++ b/techniques/failures/F44.html
@@ -22,7 +22,7 @@
             
          The following example incorrectly uses tabindex to specify an
                                 alternative tab order:
          
          
-
          <ol>
+
          <ol>
   <li><a href="main.html" tabindex="1">Homepage</a></li>
   <li><a href="chapter1.html" tabindex="4">Chapter 1</a></li>
   <li><a href="chapter2.html" tabindex="3">Chapter 2</a></li>
@@ -63,7 +63,7 @@
       
          
    
          
diff --git a/techniques/failures/F46.html b/techniques/failures/F46.html
index 09fcfd63c1..bd8e72f0a9 100644
--- a/techniques/failures/F46.html
+++ b/techniques/failures/F46.html
@@ -13,9 +13,9 @@
       
          Although not commonly used in a layout table, the following structural markup would also be failures of Success Criterion 1.3.1 if used in a layout table: 
          
       
            
          
          •  
-               headers attributes 
            • 
+               headers attributes 
          
          •  
-               scope attributes 
+               scope attributes 
               
            • 
       
          
       
          Assistive technologies use the structure of an HTML table to present data to
@@ -49,7 +49,7 @@
                                 the right. At the top is a page title. The example marks the page
                                 title as <th>.
          
          
-
          <table>
+
          <table>
   <tr>
     <th colspan=3>Page Title</th>
   </tr>
diff --git a/techniques/failures/F47.html b/techniques/failures/F47.html
index 08c709153d..780653de83 100644
--- a/techniques/failures/F47.html
+++ b/techniques/failures/F47.html
@@ -12,7 +12,7 @@
          
             
          A product list page uses the blink element to draw attention to sale prices. This fails the success criterion because users cannot control the blink.
          
          
-         
          <p>My Great Product <blink>Sale! $44,995!</blink></p>
          
+         
          <p>My Great Product <blink>Sale! $44,995!</blink></p>
          
       
          
    
          Tests
          
       
          Procedure
          
diff --git a/techniques/failures/F48.html b/techniques/failures/F48.html
index abcba9c063..e9e7eaf5df 100644
--- a/techniques/failures/F48.html
+++ b/techniques/failures/F48.html
@@ -16,7 +16,7 @@
    
          Examples
          
       
          
          
          A schedule formatted with tabs between columns
          
-
          <pre>
+
          <pre>
          Monday   Tuesday     Wednesday      Thursday         Friday
 8:00-
 9:00	          Meet with Sam
@@ -26,7 +26,7 @@ 
          A schedule formatted with tabs between columns
          
       
          
       
          
          
          Election results displayed using preformatted text
          
-         
          <pre>
+         
          <pre>
          CIRCUIT COURT JUDGE BRANCH 3
                                                            W
                                                             R
diff --git a/techniques/failures/F49.html b/techniques/failures/F49.html
index 364869b9ca..fe278dd79e 100644
--- a/techniques/failures/F49.html
+++ b/techniques/failures/F49.html
@@ -3,7 +3,7 @@
           Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized  
          ID: F49
          Technology: failures
          Type: Failure
          When to Use
          
       
          HTML
          
    
          Description
          
-      
          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 layout table is used, however, it is important that the content make sense when linearized.
+      
          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 layout table is used, however, it is important that the content make sense when linearized.
           
          
       
          This failure occurs when a meaningful sequence of content conveyed through
                         presentation is lost because HTML tables used to control the visual
@@ -33,7 +33,7 @@ 
          A layout table that does not linearize correctly
          
             
          An advertisement makes clever use of visual positioning, but changes
                                 meaning when linearized.
          
          
-
          <table>
+
          <table>
   <tr>
     <td><img src="logo.gif" alt="XYZ mountaineering"></td>
     <td rowspan="2" valign="bottom">top!</td>
@@ -66,7 +66,7 @@ 
          A layout table that separates a meaningful sequence when linearized
          
                                 links in the navigation bar are split into different cells in the
                                 leftmost column.
          
          
-
          <table>
+
          <table>
   <tr>
     <td><a href="#">Link 1</a></td>
     <td rowspan="20"><img src="img.png" alt="Museum Picture"></td>
diff --git a/techniques/failures/F50.html b/techniques/failures/F50.html
index 7d4cb168a9..afe194f663 100644
--- a/techniques/failures/F50.html
+++ b/techniques/failures/F50.html
@@ -10,7 +10,7 @@
             
          The following example uses script to blink content, but the blink
                                 continues indefinitely rather than stopping after five seconds.
          
          
-
          <script>
+
          <script>
   // blink "on" state
   function show(){
       document.getElementById("blink1").style.visibility = "visible";
@@ -25,9 +25,9 @@
 
    // kick it off
    show();
-</script>
+</script>
 ...
-<span id="blink1">This content will blink</span>
          
+<span id="blink1">This content will blink</span>
          
       
          
    
          Tests
          
       
          Procedure
          
diff --git a/techniques/failures/F52.html b/techniques/failures/F52.html
index 3168095504..d8dfda37ee 100644
--- a/techniques/failures/F52.html
+++ b/techniques/failures/F52.html
@@ -14,7 +14,7 @@
       
          
          
          example commonly used to open new windows when pages are loaded
          
          
-
          window.addEventListener("load", showAdvertisement, true);
+
          window.addEventListener("load", showAdvertisement, true);
 window.attachEvent("onload", showAdvertisement);
    
 function showAdvertisement(){
diff --git a/techniques/failures/F54.html b/techniques/failures/F54.html
index 09258d8309..8e5ed64570 100644
--- a/techniques/failures/F54.html
+++ b/techniques/failures/F54.html
@@ -21,7 +21,7 @@ 
          An image that responds to a mouse click to go to another page
          
          
          
          This is a failure because the keyboard cannot be used to move to the next page.
          
 
-
          <p><img onmousedown="nextPage();" src="nextarrow.gif" alt="Go to next page"></p>
           
+
          <p><img onmousedown="nextPage();" src="nextarrow.gif" alt="Go to next page"></p>
           
 
          
       
          
diff --git a/techniques/failures/F55.html b/techniques/failures/F55.html
index fa9689dc62..38da48a821 100644
--- a/techniques/failures/F55.html
+++ b/techniques/failures/F55.html
@@ -33,16 +33,13 @@ 
          Description
          
    
          
       
          Examples
          
       
          
-         
          <input type="submit" onFocus="this.blur();">
          
+         
          <input type="submit" onFocus="this.blur();">
          
       
          
       
          
-         
          <a onFocus="this.blur()" href="Page.html"><img src="myImage.gif"></a>
          
+         
          <a onFocus="this.blur()" href="Page.html"><img src="myImage.gif"></a>
          
       
          
       
          
-         
          <a href="link.html" onfocus="if(this.blur)this.blur();">Link Phrase</a>
          
+         
          <a href="link.html" onfocus="if(this.blur)this.blur();">Link Phrase</a>
          
       
          
    
          
    
          
diff --git a/techniques/failures/F58.html b/techniques/failures/F58.html
index f7736d0e21..541d5cdbea 100644
--- a/techniques/failures/F58.html
+++ b/techniques/failures/F58.html
@@ -25,7 +25,7 @@
                                 redirect is implemented in Java Servlets or JavaServer Pages
                             (JSP).
          
          
-
          public void doGet (HttpServletRequest request, HttpServletResponse response)
+
          public void doGet (HttpServletRequest request, HttpServletResponse response)
    throws IOException, ServletException {
       response.setContentType("text/html");
 PrintWriter out = response.getWriter();
@@ -34,7 +34,7 @@
 out.println("<html><head><title>Redirect</title></head><body>");
 out.println("<p>This page will redirect you in 10 seconds.</p>");
 out.println("</body></html>");
-}
          
+}
          
       
          
    
          Tests
          
       
          Procedure
          
diff --git a/techniques/failures/F59.html b/techniques/failures/F59.html
index 2b58b4a030..6272250c92 100644
--- a/techniques/failures/F59.html
+++ b/techniques/failures/F59.html
@@ -6,12 +6,12 @@
                         technology. Assistive technologies rely on knowledge of the role and current
                         state of a component in order to provide that information to the user. Many
                         HTML elements have well defined roles, such as links, buttons, text fields,
-                        etc. Generic elements such as div and span do not
+                        etc. Generic elements such as div and span do not
                         have any predefined roles. When these generic elements are used to create
                         user interface controls in HTML the assistive technology may not have the
                         necessary information to describe and interact with the control. 
          
       
          Attaching event handlers to elements that are not normally interactive, such
-                        as span and div, can be disorienting to
+                        as span and div, can be disorienting to
                         users. Even if care is taken to provide keyboard access to such elements,
                         users may have a difficult time discovering that there are interactive
                         controls in the content or understanding what type of behavior to expect
@@ -24,13 +24,13 @@
       
          
          
             
          The following example fails because it creates a checkbox using a span and an image.
          
-
          <p> 
+
          <p> 
    <span onclick="toggleCheckbox('chkbox')"> 
      <img src="unchecked.gif" id="chkbox" alt=""> Include Signature 
    </span> 
 </p>
          
-            
          Here is the scripting code which changes the image source when the span is clicked with the mouse.
          
-
          var CHECKED = "check.gif"; 
+            
          Here is the scripting code which changes the image source when the span is clicked with the mouse.
          
+
          var CHECKED = "check.gif"; 
 var UNCHECKED = "unchecked.gif"; 
 function toggleCheckbox(imgId) { 
   var theImg = document.getElementById(imgId); 
diff --git a/techniques/failures/F63.html b/techniques/failures/F63.html
index 9086bbac28..4ad0f5c187 100644
--- a/techniques/failures/F63.html
+++ b/techniques/failures/F63.html
@@ -4,7 +4,7 @@
       
          This describes a failure condition when the context needed for understanding the purpose of a link is located in content that is not programmatically determined link context.  If the context for the link is not provided in one of the following ways:
          
       
            
          
          • in the same sentence, paragraph, list item, or table cell as the link
            • 
-         
          • via a suitable ARIA property such as aria-label or aria-labelledby
+         
          • via a suitable ARIA property such as aria-label or aria-labelledby
             
            • 
       
          
       
          then the user will not be able to find out where the link is going with any ease. If the user must leave the link to search for the context, the context is not programmatically determined link context and this failure condition occurs.
          
@@ -14,7 +14,7 @@ 
          A Link in an Adjacent Paragraph
          
          
             
          
 A news service lists the first few sentences of an article in a paragraph. The next paragraph contains the link "Read More...". Because the link is not in the same paragraph as the lead sentence, the user cannot easily discover what the link will let the user read more about.
          
-
          <p>A British businessman has racked up 2 million flyer miles and plans to 
+
          <p>A British businessman has racked up 2 million flyer miles and plans to 
    travel on the world's first commercial tourism flights to space.</p>
 <p><a href="ff.html">Read More...</a></p>
          
          
@@ -23,7 +23,7 @@ 
          A Link in an Adjacent Paragraph
          
          
          A Link in an Adjacent Cell Within a Layout Table
          
          
             
          An audio site provides links to where its player can be downloaded. The information about what would be downloaded by the link is in the preceding row of the layout table, which is not programmatically determined context for the link.
          
-
          <table>
+
          <table>
   <tr> 
     <td>Play music from your browser</td>
   </tr>
@@ -42,7 +42,7 @@ 
          A Link in an Adjacent Cell Within a Layout Table
          
          
          Locate links where some additional link context is needed to understand the purpose of the link. For each link:
          
          
            
             
          1. Check whether the context is contained in the same sentence, paragraph, list item, table cell, or associated table headers.
            2. 
-            
          2. Check whether the link context can be programmatically determined in some other way, for example, by using a WAI-ARIA property such as aria-label, aria-labelledby or aria-describedby on the link to provide sufficient context
            3. 
+            
          3. Check whether the link context can be programmatically determined in some other way, for example, by using a WAI-ARIA property such as aria-label, aria-labelledby or aria-describedby on the link to provide sufficient context
            4. 
          
          
       
          
       
          Expected Results
          
diff --git a/techniques/failures/F65.html b/techniques/failures/F65.html
index 5b5447ac96..c186a81296 100644
--- a/techniques/failures/F65.html
+++ b/techniques/failures/F65.html
@@ -1,9 +1,9 @@
 Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type "image"
          Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type "image"
          ID: F65
          Technology: failures
          Type: Failure
          When to Use
          
       
          HTML
          
    
          Description
          
-      
          This describes a failure condition for text alternatives on images. If there is no source of text to provide an alternative for the image then assistive technologies are not able to identify the image or to convey its purpose to the user. The alt attribute continues to be the preferred way to provide alternative text for images. Appropriate WAI-ARIA attributes may be used to provide alternative text, as long as they are accessibility supported.  For more information about accessibility support, see Documenting Accessibility Support. The Accessible Name and Description Computation described the method of deriving text alternative from the HTML and WAI-ARIA attributes of an element.
          
+      
          This describes a failure condition for text alternatives on images. If there is no source of text to provide an alternative for the image then assistive technologies are not able to identify the image or to convey its purpose to the user. The alt attribute continues to be the preferred way to provide alternative text for images. Appropriate WAI-ARIA attributes may be used to provide alternative text, as long as they are accessibility supported.  For more information about accessibility support, see Documenting Accessibility Support. The Accessible Name and Description Computation described the method of deriving text alternative from the HTML and WAI-ARIA attributes of an element.
          
       
          
-Some Assistive Technologies attempt to compensate for the missing text alternatives by reading the file name of the image. But it is insufficient to rely simply on the file name for many reasons. For example, file names may not be descriptive (e.g., images/nav01.gif), and technology specifications do not require descriptive file names. And some Assistive Technologies do not read the file name if there is no text alternative provided via HTML attributes.
+Some Assistive Technologies attempt to compensate for the missing text alternatives by reading the file name of the image. But it is insufficient to rely simply on the file name for many reasons. For example, file names may not be descriptive (e.g., images/nav01.gif), and technology specifications do not require descriptive file names. And some Assistive Technologies do not read the file name if there is no text alternative provided via HTML attributes.
 
          
    
          Examples
          
       
          
@@ -11,16 +11,16 @@ 
          Missing text alternative
          
          
             
          In the code example below, the person using a screen reader would not know the purpose of the image.
          
          
-         
          <img src="../images/animal.jpg">
          
+         
          <img src="../images/animal.jpg">
          
       
          
    
          Tests
          
       
          Procedure
          
-         
          Identify img, area, and input elements of type image. For each of these elements:
          
+         
          Identify img, area, and input elements of type image. For each of these elements:
          
          
            
-            
          1. Check if the alt attribute is present.
            2. 
-            
          2. Check if aria-labelledby attribute is present AND references one or more id attributes in the page AND check if aria-labelledby is accessibility supported.
            3. 
-            
          3. Check if the aria-label attribute is present AND check if aria-label is accessibility supported.
            4. 
-            
          4. Check if the title attribute is present AND check if title is  accessibility supported.
            5. 
+            
          5. Check if the alt attribute is present.
            6. 
+            
          6. Check if aria-labelledby attribute is present AND references one or more id attributes in the page AND check if aria-labelledby is accessibility supported.
            7. 
+            
          7. Check if the aria-label attribute is present AND check if aria-label is accessibility supported.
            8. 
+            
          8. Check if the title attribute is present AND check if title is  accessibility supported.
            9. 
          
          
       
          
       
          Expected Results
          
diff --git a/techniques/failures/F66.html b/techniques/failures/F66.html
index 6b835fca61..36be29ce38 100644
--- a/techniques/failures/F66.html
+++ b/techniques/failures/F66.html
@@ -11,7 +11,7 @@ 
          Navigation presenting a series of links that are in a different relative ord
             
          
                
          Page 1 navigation
          
          
-
          <nav>
+
          <nav>
   <ul>
     <li><a href="brazil.html">Brazil</a></li>
     <li><a href="canada.html">Canada</a></li>
@@ -23,7 +23,7 @@ 
          Page 1 navigation
          
             
          
                
          Page 2 navigation
          
          
-
          <nav>
+
          <nav>
   <ul>
      <li><a href="canada.html">Canada</a></li>
      <li><a href="brazil.html">Brazil</a></li>
diff --git a/techniques/failures/F68.html b/techniques/failures/F68.html
index df70356954..f3a3961a8f 100644
--- a/techniques/failures/F68.html
+++ b/techniques/failures/F68.html
@@ -3,34 +3,34 @@
    
          ID: F68
          Technology: failures
          Type: Failure
          When to Use
          
       
          HTML controls
          
    
          Description
          
-      
          This failure describes a problem that occurs when a form control does not have a name exposed to assistive technologies. The result is that some users will not be able to identify the purpose of the form control. The name can be provided in multiple ways, including the label element. Other options include use of the title attribute and aria-label which are used to directly provide text that is used for the accessibility name or aria-labelledby which indicates an association with other text on a page that is providing the name. Button controls can have a name assigned in other ways, as indicated below, but in certain situations may require use of label, title, aria-label, or aria-labelledby.
          
+      
          This failure describes a problem that occurs when a form control does not have a name exposed to assistive technologies. The result is that some users will not be able to identify the purpose of the form control. The name can be provided in multiple ways, including the label element. Other options include use of the title attribute and aria-label which are used to directly provide text that is used for the accessibility name or aria-labelledby which indicates an association with other text on a page that is providing the name. Button controls can have a name assigned in other ways, as indicated below, but in certain situations may require use of label, title, aria-label, or aria-labelledby.
          
       
          
-         
          Elements that can use an explicitly-associated label element are:
          
+         
          Elements that can use an explicitly-associated label element are:
          
          
            
             
          • 
-                  input
+                  input
                
            • 
             
          • 
-                  textarea
+                  textarea
                
            • 
             
          • 
-                  select
+                  select
                
            • 
          
          
-         
          The label element is not used for the following because labels for these elements are provided via the value attribute (for Submit and Reset buttons), the alt attribute (for image buttons), or element content itself (button):
          
+         
          The label element is not used for the following because labels for these elements are provided via the value attribute (for Submit and Reset buttons), the alt attribute (for image buttons), or element content itself (button):
          
          
            
-            
          • Submit and Reset buttons (<input type="submit"> or <input type="reset">)
            • 
-            
          • Image buttons (<input type="image">)
            • 
-            
          • Hidden input fields (<input type="hidden">)
            • 
-            
          • Buttons (button elements or <input type="button">)
            • 
+            
          • Submit and Reset buttons (<input type="submit"> or <input type="reset">)
            • 
+            
          • Image buttons (<input type="image">)
            • 
+            
          • Hidden input fields (<input type="hidden">)
            • 
+            
          • Buttons (button elements or <input type="button">)
            • 
          
          
       
          
    
          Examples
          
       
          
          
          
          
-            
          The following example demonstrates a form that visually presents labels for form controls, but does not use the label element to associate them with their controls. The code example below is a failure because assistive technology may not be able to determine which label goes with which control.
          
-            
          <form>
+            
          The following example demonstrates a form that visually presents labels for form controls, but does not use the label element to associate them with their controls. The code example below is a failure because assistive technology may not be able to determine which label goes with which control.
          
+            
          <form>
   First name:
   <input type="text" name="firstname">
   <br>
@@ -45,8 +45,8 @@ 
          
       
          
          
          
          
-            
          In the following code example, label elements are present, but they are not programmatically linked to the corresponding input controls and may therefore not be properly determined by assistive technology.
          
-
          <form> 
+            
          In the following code example, label elements are present, but they are not programmatically linked to the corresponding input controls and may therefore not be properly determined by assistive technology.
          
+
          <form> 
   <p> 
     <label>First Name</label>
     <input type="text" name="firstname"> 
@@ -60,23 +60,23 @@ 
          
          
          
          
             
          The search text box in the following code example does not have a programmatically determinable name. The name can be supplied with any of the approaches mentioned above.
          
-
          <input type="text" value="Type your search here">
+
          <input type="text" value="Type your search here">
 <input type="submit" value="Search">
          
          
       
          
    
          Tests
          
       
          Procedure
          
-         
          For all input, textarea, and select elements in the web page (except inputs of type hidden, submit, reset, or button:
          
+         
          For all input, textarea, and select elements in the web page (except inputs of type hidden, submit, reset, or button:
          
          
            
             
          1. 
                
            Check that each element has a programmatically determined name using one of the following ways:
            
                
              
-				  
            1. the text label or labels are programmatically associated with the control element via the aria-labelledby attribute (each id given as a value in the aria-labelledby attribute matches the id of the text label element).
              2. 
-				  
            2. the control is programmatically determined through the value of its aria-label attribute.
              3. 
-                  
            3. the text label is contained in a label element that is correctly associated to the respective input element via the label's for attribute (the id given as value in the for attribute matches the id of the input element).
              4. 
-                  
            4. the control is contained within a label element that also contains the label text.
              5. 
-				  
            5. the control is an input of type image and the alt attribute provides a text label.
              6. 
-                  
            6. the control is programmatically determined through the value of title attribute.
              7. 
+				  
            7. the text label or labels are programmatically associated with the control element via the aria-labelledby attribute (each id given as a value in the aria-labelledby attribute matches the id of the text label element).
              8. 
+				  
            8. the control is programmatically determined through the value of its aria-label attribute.
              9. 
+                  
            9. the text label is contained in a label element that is correctly associated to the respective input element via the label's for attribute (the id given as value in the for attribute matches the id of the input element).
              10. 
+                  
            10. the control is contained within a label element that also contains the label text.
              11. 
+				  
            11. the control is an input of type image and the alt attribute provides a text label.
              12. 
+                  
            12. the control is programmatically determined through the value of title attribute.
              13. 
                
            
             
            2. 
          
          
diff --git a/techniques/failures/F69.html b/techniques/failures/F69.html
index e2d7be886e..a64ce130d7 100644
--- a/techniques/failures/F69.html
+++ b/techniques/failures/F69.html
@@ -18,7 +18,7 @@ 
          Overflowing text
          
          
             
          The font size is set in a scalable way, but the container is set to a fixed pixel size. A gray border shows the boundaries of the text container. When the text is resized, it spills out of its container, and obscures the next paragraph.
          
          
-
          <div style="font-size:100%; width:120px; height:100px; border: thin solid gray;"> 
+
          <div style="font-size:100%; width:120px; height:100px; border: thin solid gray;"> 
   Now is the time for all good men to come to the aid of their country. 
 </div>
 <p>The quick brown fox jumps over the lazy dog.</p>
          
@@ -36,7 +36,7 @@ 
          Truncated text
          
          
             
          This example is identical to the last one, except that the container is set to clip the text. The text is no longer bleeding into the next paragraph, but now it is truncated. This is also a failure.
          
          
-
          <div style="font-size:100%; width:120px; height:100px; overflow: hidden; 
+
          <div style="font-size:100%; width:120px; height:100px; overflow: hidden; 
  border: thin solid gray;">
  Now is the time for all good men to come to the aid of their country. 
 </div>
diff --git a/techniques/failures/F70.html b/techniques/failures/F70.html
index 9730964935..618225c5be 100644
--- a/techniques/failures/F70.html
+++ b/techniques/failures/F70.html
@@ -22,42 +22,42 @@ 
          Missing angle brackets
          
          
             
          The following code fails because the opening tag is missing an angle bracket, and the intended boundary of the tag is unclear.
          
          
-         
          <p This is a paragraph</p>
          
+         
          <p This is a paragraph</p>
          
       
          
       
          
          
          Missing slash on closing tag
          
          
             
          The following code fails because the closing tag is missing the slash, making it look like it is in fact another opening tag.
          
          
-         
          <p>This is a paragraph<p>
          
+         
          <p>This is a paragraph<p>
          
       
          
       
          
          
          Unbalanced attribute quoting
          
          
             
          The following code fails because the attribute value is missing the closing quote, which makes the boundary of the attribute-value pair unclear.
          
          
-         
          <input title="name type="text">
          
+         
          <input title="name type="text">
          
       
          
       
          
          
          Lack of whitespace between attributes
          
          
             
          The following code fails because the there is not whitespace between attributes, which makes the boundary between attribute-value pairs unclear.
          
          
-         
          <input title="name"type="text">
          
+         
          <input title="name"type="text">
          
       
          
       
          
          
          Unquoted attribute with whitespace value
          
          
             
          The following code fails because an attribute value is not quoted and contains whitespace, which makes the boundary of the attribute-value pair unclear.
          
          
-         
          <input title=Enter name here type=text>
          
+         
          <input title=Enter name here type=text>
          
       
          
       
          
          
          Missing end tags
          
          
             
          The following code fails because the closing tag of the first paragraph is missing, making it unclear whether the second paragraph is a child or sibling of the first.
          
          
-         
          <p>This is a paragraph
+         
          <p>This is a paragraph
 <p>This is another paragraph</p>
          
       
          
    
          Tests
          
diff --git a/techniques/failures/F71.html b/techniques/failures/F71.html
index a2248a4f63..945a4343d3 100644
--- a/techniques/failures/F71.html
+++ b/techniques/failures/F71.html
@@ -12,14 +12,14 @@ 
          Characters 
          
          
             
          The following word looks, in browsers with appropriate font support, like the English word "cook", yet is composed of the string U+03f2 U+043E U+03BF U+006B, only one of which is a letter from the Western alphabet. This word will not be processed meaningfully, and a text alternative is not provided.
          
          
-         
          ϲоοk
          
+         
          ϲоοk
          
       
          
       
          
          
          Character entities
          
          
             
          The following example, like its predecessor, will look like the English word "cook" when rendered in browsers with appropriate font support. In this case, the characters are implemented with character entities, but the word will still not be processed meaningfully, and a text alternative is not provided.
          
          
-         
          &#x03F2;&#x043E;&#x03BF;&#x006B;
          
+         
          &#x03F2;&#x043E;&#x03BF;&#x006B;
          
          
             
          Working Example: "ϲоοk"
          
          
diff --git a/techniques/failures/F72.html b/techniques/failures/F72.html
index f92cd02637..8c85b234b6 100644
--- a/techniques/failures/F72.html
+++ b/techniques/failures/F72.html
@@ -8,7 +8,7 @@ 
           ASCII Art chart without a text alternative 
          
          
             
          The following ASCII art chart lacks a text alternative and therefore does not meet Success Criterion 1.1.1. Note this failure example does in fact cause this page to fail, but you may skip over the example.
          
          
-         
          +         
             %   __ __ __ __ __ __ __ __ __ __ __ __ __ __   
 100 |             *                             |
  90 |                *  *                       |
diff --git a/techniques/failures/F73.html b/techniques/failures/F73.html
index bf0981b3b5..343da57ed5 100644
--- a/techniques/failures/F73.html
+++ b/techniques/failures/F73.html
@@ -19,7 +19,7 @@ 
          Links with no underlines and similar contrast to body text
          
       
          
          
          Removing the underline from a link in a sentence or paragraph without providing another visual cue besides color
          
          
-
          <head>
+
          <head>
   <style>
     p a:link {text-decoration: none}
     p a:visited {text-decoration: none}
diff --git a/techniques/failures/F77.html b/techniques/failures/F77.html
index 531f2be0f7..90caaa74a8 100644
--- a/techniques/failures/F77.html
+++ b/techniques/failures/F77.html
@@ -6,27 +6,27 @@
 Failure of Success Criterion 4.1.1 due to duplicate values of type ID
          Failure of Success Criterion 4.1.1 due to duplicate values of type ID
          ID: F77
          Technology: failures
          Type: Failure
          When to Use
          
       
          HTML, and any XML-based markup languages including SVG
          
    
          Description
          
-      
          This describes a failure condition where duplicate id errors are known to cause problems for assistive technologies when they are trying to interact with content. Duplicate values of type id can be problematic for user agents that rely on this attribute to accurately convey relationships between different parts of content to users. For example, a screen reader may use id values to identify the applicable header content for a data cell within a data table, or an input control to which a given label applies. If these values are not unique, the screen reader will be unable to programmatically determine which headers are associated with the data cell or which control is associated with which label or name.
          
-      
          Checking that id attribute values are unique within a document can be done by validating the document against its specification, because the specification defines which attributes contain document-wide unique identifiers.
          
+      
          This describes a failure condition where duplicate id errors are known to cause problems for assistive technologies when they are trying to interact with content. Duplicate values of type id can be problematic for user agents that rely on this attribute to accurately convey relationships between different parts of content to users. For example, a screen reader may use id values to identify the applicable header content for a data cell within a data table, or an input control to which a given label applies. If these values are not unique, the screen reader will be unable to programmatically determine which headers are associated with the data cell or which control is associated with which label or name.
          
+      
          Checking that id attribute values are unique within a document can be done by validating the document against its specification, because the specification defines which attributes contain document-wide unique identifiers.
          
       
          
-         
          In most markup languages, id values are attribute values, for example in HTML and SVG.
          
-         
          XML documents that use only the xml:id attribute as an id attribute, parsing the XML document with a validating parser that supports the xml:id specification is sufficient.
          
+         
          In most markup languages, id values are attribute values, for example in HTML and SVG.
          
+         
          XML documents that use only the xml:id attribute as an id attribute, parsing the XML document with a validating parser that supports the xml:id specification is sufficient.
          
       
          
    
          Examples
          
       
          
          
-            
          An author uses an online validation service to check that all id attribute values are unique.
          
+            
          An author uses an online validation service to check that all id attribute values are unique.
          
          
       
          
       
          
          
-            
          A developer utilizes features in their authoring tool to ensure that id attribute values are unique.
          
+            
          A developer utilizes features in their authoring tool to ensure that id attribute values are unique.
          
          
       
          
    
          Tests
          
       
          Procedure
          
          
            
-            
          1. Check that all values of type id are unique in the web page
            2. 
+            
          2. Check that all values of type id are unique in the web page
            3. 
          
          
       
          
       
          Expected Results
          
diff --git a/techniques/failures/F78.html b/techniques/failures/F78.html
index adb6ffb2f2..24dcbd52a3 100644
--- a/techniques/failures/F78.html
+++ b/techniques/failures/F78.html
@@ -38,7 +38,7 @@ 
          The focus indicator is turned off with CSS
          
          
          The following CSS example will remove the default focus indicator, which fails the requirement to provide a
             visible focus indicator.
          
 
-         
          :focus {outline: none}
          
+         
          :focus {outline: none}
          
       
          
       
          
          
          The outline of elements is visually similar to the focus indicator
          
@@ -47,7 +47,7 @@ 
          The outline of elements is visually similar to the focus indicator
          
             This makes it impossible for users to determine which one in fact has the focus, even though the user agent
             does draw the focus indicator.
          
 
-         
          a {outline: thin dotted black}
          
+         
          a {outline: thin dotted black}
          
       
          
       
          
          
          Elements have a border that occludes the focus indicator
          
@@ -57,7 +57,7 @@ 
          Elements have a border that occludes the focus indicator
          
             border, but as both are black and the border is thicker than the focus indicator, it no longer meets the
             definition of "visible".
          
 
-         
          a {border: medium solid black}
          
+         
          a {border: medium solid black}
          
       
          
    
          
    
          
diff --git a/techniques/failures/F80.html b/techniques/failures/F80.html
index 0eb7c04e9e..ee57e76730 100644
--- a/techniques/failures/F80.html
+++ b/techniques/failures/F80.html
@@ -10,7 +10,7 @@ 
          A Contact Form
          
             
          A Contact Us form has some introductory information and then form controls for users to enter their first name, last name, telephone number and email address. The heading, introductory text and form control labels have been implemented in a scalable way but the form controls themselves have not.
          
             
          The HTML component:
          
          
-
          <h1>Contact Us</h1>
+
          <h1>Contact Us</h1>
 <p>Please provide us with your details and we will contact you as soon as we can.
    Note that all of the form fields are required.</p>
 <div>
@@ -33,7 +33,7 @@ 
          A Contact Form
          
          
             
          The CSS component:
          
          
-
          h1 { font-size: 2em; }
+
          h1 { font-size: 2em; }
 p, label { font-size: 1em; }
 input {font-size: 12pt;}
          
       
          
diff --git a/techniques/failures/F84.html b/techniques/failures/F84.html
index 76c8c85f82..421d13f1cc 100644
--- a/techniques/failures/F84.html
+++ b/techniques/failures/F84.html
@@ -5,10 +5,10 @@
       
          Many blind people who use screen readers call up a dialog box that has a list of links from the page. They use this list of links to decide where they will go. But if many of the links in that list simply say "click here" or "more" they will be unable to use this feature in their screen reader, which is a core navigation strategy. That's why it's a failure of 2.4.9 to not provide any way of allowing them to know the destination from the link text alone. It is also true for people who tab through links. If all they hear as they tab through the document is "click here, click here, click here etc." they will become confused. 
          
    
          Examples
          
       
          
-
          <a href="file110.html">Click here</a> for more information on the Rocky Mountains.
          
+
          <a href="file110.html">Click here</a> for more information on the Rocky Mountains.
          
       
          
       
          
-
          <h2>News headlines</h2>
+
          <h2>News headlines</h2>
 <p>Bishops Tickle Darwin's Monkey Theory</p>
 <a href="btdmt.html">read more</a>
          
       
          
diff --git a/techniques/failures/F86.html b/techniques/failures/F86.html
index 52df390adb..98356f4ede 100644
--- a/techniques/failures/F86.html
+++ b/techniques/failures/F86.html
@@ -9,7 +9,7 @@
       
          
          
             
          A US telephone number consists of a three-digit area code, a three-digit prefix, and a four-digit suffix. They are typically formatted as follows ([area code]) [prefix]-[suffix], such as (939) 555-0113. Often, forms asking for a telephone number will include three separate fields, but with a single label, such as:
          
-            
          Phone number: (<input type="text" size="3">) 
+            
          Phone number: (<input type="text" size="3">) 
 <input type="text" size="3">-<input type="text" size="4">
          
             
          The failure occurs when there is not a name for each of the three fields in the Accessibility API. A user with assistive technology will experience these as three undefined text fields. Some assistive technologies will read the punctuation as identification for the text fields, which can be even more confusing. In the case of a three-field US phone number, some assistive technologies would name the fields "(", ")" and "-", which is not very useful.
          
          
@@ -17,7 +17,7 @@
       
          
          
             
          The same US telephone number. In this case, the label is not programmatically associated with any of the parts. 
          
-
          Phone number: (<input type="text" size="3">) 
+
          Phone number: (<input type="text" size="3">) 
 <input type="text" size="3">-<input type="text" size="4">
          
             
           A user with assistive technology will experience these as three undefined text fields. 
          
          
@@ -25,7 +25,7 @@
       
          
          
             
          The same US telephone number. In this case, the label is programmatically associated with the first part.
          
-
          <label for="area">Phone number:</label> (<input id="area" type="text" size="3">)
+
          <label for="area">Phone number:</label> (<input id="area" type="text" size="3">)
 <input type="text" size="3">-<input type="text" size="4">
          
             
          A user with assistive technology will be led to believe that the first field is for the entire phone number, and will experience the second and third fields as undefined text fields.
          
          
diff --git a/techniques/failures/F87.html b/techniques/failures/F87.html
index 2b28d3370d..49c74a71f4 100644
--- a/techniques/failures/F87.html
+++ b/techniques/failures/F87.html
@@ -11,17 +11,17 @@
    
          Examples
          
       
          
          
-            
          In the following example, ::before and ::after are used to indicate speaker changes and to insert quotation marks in a screenplay.
          
+            
          In the following example, ::before and ::after are used to indicate speaker changes and to insert quotation marks in a screenplay.
          
             
          The CSS contains:
          
          
-
          p.jim::before {	content: "Jim: " }
+
          p.jim::before {	content: "Jim: " }
 p.mary::before { content: "Mary: " }
 q::before { content: open-quote }
 q::after  { content: close-quote }
          
          
             
          It is used in this excerpt:
          
          
-
          <p class="jim">
+
          <p class="jim">
   <q>Do you think he's going to make it?</q>
 </p>
 <p class="mary">
@@ -30,20 +30,20 @@
       
          
       
          
          
-            
          In this example, ::before is used to differentiate facts from opinions.
          
+            
          In this example, ::before is used to differentiate facts from opinions.
          
             
          The CSS contains:
          
          
-
          p.fact::before { content: "Fact: "; font-weight: bold; }
+
          p.fact::before { content: "Fact: "; font-weight: bold; }
 p.opinion::before { content: "Opinion: "; font-weight: bold; }
          
          
             
          It is used in this excerpt:
          
          
-
          <p class="fact">The defendant was at the scene of the crime when it occurred.</p>
+
          <p class="fact">The defendant was at the scene of the crime when it occurred.</p>
 <p class="opinion">The defendant committed the crime.</p>
          
       
          
    
          Tests
          
       
          Procedure
          
-  
          For each instance of content inserted through use of the ::before and ::after pseudo-elements and the content property:
          
+  
          For each instance of content inserted through use of the ::before and ::after pseudo-elements and the content property:
          
         
            
             
          1. Check that non-decorative information presented by the generated content is available when styles are overridden.
            2. 
          
          
diff --git a/techniques/failures/F88.html b/techniques/failures/F88.html
index 9056649111..1c7b094ff0 100644
--- a/techniques/failures/F88.html
+++ b/techniques/failures/F88.html
@@ -5,9 +5,9 @@
    
          Examples
          
       
          
          
-            
          In the following example of a failure, the HTML align attribute is used to create justified text.
          
+            
          In the following example of a failure, the HTML align attribute is used to create justified text.
          
          
-
          <p align="justify">
+
          <p align="justify">
  Peter Piper picked a peck of pickled peppers
  A peck of pickled peppers Peter Piper picked
  If Peter Piper picked a peck of pickled peppers
@@ -18,13 +18,12 @@
          
             
          In this example of a failure, the CSS text-align property is used to create justified text.
          
          
-
          p {text-align: justify}
-<p>
+
          p {text-align: justify}
          
+
          <p>
  How much wood would a woodchuck chuck if a woodchuck could chuck wood?
  He would chuck, he would, as much as he could, and chuck as much wood
  As a woodchuck would if a woodchuck could chuck wood.
-</p>
-
          
+</p>
          
       
          
    
          Tests
          
       
          Procedure
          
diff --git a/techniques/failures/F89.html b/techniques/failures/F89.html
index 38eee87f45..3bea2a383d 100644
--- a/techniques/failures/F89.html
+++ b/techniques/failures/F89.html
@@ -7,9 +7,9 @@
       
          
          
          Search Results
          
          
-            
          A search site returns search results that include both a text link and an image link to the match site. The image has a null alt attribute, since the result already contains a link with a text description. However, the screen reader does not ignore the image link but uses heuristics to find some text that might describe the purpose of the link. For example, the screen reader might announce, "football dot gif Football Scorecard." 
          
+            
          A search site returns search results that include both a text link and an image link to the match site. The image has a null alt attribute, since the result already contains a link with a text description. However, the screen reader does not ignore the image link but uses heuristics to find some text that might describe the purpose of the link. For example, the screen reader might announce, "football dot gif Football Scorecard."
          
          
-
          <a href="scores.html">
+
          <a href="scores.html">
   <img src="football.gif" alt="">
 </a>
 <a href="scores.html">Football Scoreboard</a>
@@ -19,9 +19,9 @@ 
          Search Results
          
       
          Procedure
          
          
            
             
          1. Check whether the link contains only non-text content.
            2. 
-            
          2. Check whether the non-text content has been implemented in a way that it can be ignored by assistive technologies, such as using role="presentation" or alt=""
+            
          3. Check whether the non-text content has been implemented in a way that it can be ignored by assistive technologies, such as using role="presentation" or alt=""
                   .
            4. 
-            
          4. Check that the link does not have an accessible name provided in another way such as aria-label or aria-labelledby.
            5. 
+            
          5. Check that the link does not have an accessible name provided in another way such as aria-label or aria-labelledby.
            6. 
          
          
       
          
       
          Expected Results
          
diff --git a/techniques/failures/F90.html b/techniques/failures/F90.html
index ec45ae0924..1fa58a4c8c 100644
--- a/techniques/failures/F90.html
+++ b/techniques/failures/F90.html
@@ -2,17 +2,17 @@
       
          HTML
          
    
          Description
          
       
          One way for authors to explicitly associate header cells to data cells is by using the id and headers attributes. These allow the author to associate multiple header cells to a particular data cell, which can be necessary when complex data tables with more than one level of heading are used. 
          
-      
          The failure occurs when the relationship between data cells and corresponding header cells cannot be programmatically determined correctly because the association of id and headers attributes is faulty. This can happen, for example, when copying code within tables and forgetting to update the code.
          
+      
          The failure occurs when the relationship between data cells and corresponding header cells cannot be programmatically determined correctly because the association of id and headers attributes is faulty. This can happen, for example, when copying code within tables and forgetting to update the code.
          
    
          Examples
          
       
          Note: The example below is based on the complex data table presented as example 1 of Technique H43: Using id and headers attributes to associate data cells with header cells in data tables.
 					
          
       
          
          
          Table content not correctly associated to nested headers
          
          
-            
          In this example, nested headers are used, but the content cells are incorrectly associated via the id and headers attributes. All cells reference top level header 'Exams' (id="e") - this isn't correct for the last three columns which should reference header 'Projects'. Also, the referencing of the second level column headers has been accidentally swapped even though in this example this makes no difference as the contents (1, 2, Final) are repeated.
+            
          In this example, nested headers are used, but the content cells are incorrectly associated via the id and headers attributes. All cells reference top level header 'Exams' (id="e") - this isn't correct for the last three columns which should reference header 'Projects'. Also, the referencing of the second level column headers has been accidentally swapped even though in this example this makes no difference as the contents (1, 2, Final) are repeated.
 							
          
             
          Example Code:
          
-
          <table>
+
          <table>
   <tr>
     <th rowspan="2" id="h">Homework</th>
     <th colspan="3" id="e">Exams</th>
diff --git a/techniques/failures/F91.html b/techniques/failures/F91.html
index 2ef437b939..955e895764 100644
--- a/techniques/failures/F91.html
+++ b/techniques/failures/F91.html
@@ -1,15 +1,15 @@
 Failure of Success Criterion 1.3.1 for not correctly marking up table headers
          Failure of Success Criterion 1.3.1 for not correctly marking up table headers
          ID: F91
          Technology: failures
          Type: Failure
          When to Use
          
       
          HTML
          
    
          Description
          
-      
          This failure occurs when data tables do not use header elements (th) or other appropriate table mark-up (the scope attribute, headers and id or the ARIA columnheader and rowheader) roles to make the headers programmatically determinable from within table content.  Making headers programmatically determinable is especially important when data cells are only intelligible together with header information. When screen reader users navigate through the table content horizontally or vertically, the headers that change can be read out to provide the necessary context for the information in the data cells.
          
+      
          This failure occurs when data tables do not use header elements (th) or other appropriate table mark-up (the scope attribute, headers and id or the ARIA columnheader and rowheader) roles to make the headers programmatically determinable from within table content.  Making headers programmatically determinable is especially important when data cells are only intelligible together with header information. When screen reader users navigate through the table content horizontally or vertically, the headers that change can be read out to provide the necessary context for the information in the data cells.
          
    
          Examples
          
       
          
          
          Headers not marked up appropriately
          
          
-            
          This table does not use th (or other appropriate header markup) for headers. Instead, it uses td elements for all cells. Navigating cell by cell, screen readers will often fail to read the header cells associated with content.
+            
          This table does not use th (or other appropriate header markup) for headers. Instead, it uses td elements for all cells. Navigating cell by cell, screen readers will often fail to read the header cells associated with content.
 							
          
             
          Example Code:
          
-
          <table>
+
          <table>
   <tr>
     <td>Name</td>
     <td>Age</td>
@@ -51,11 +51,11 @@ 
          Headers not marked up appropriately
          
          
          For all data tables, check if table headers can be correctly programmatically determined by use of one of the following mechanisms: 
 						
          
          
            
-            
          1. headers marked up with table header (th) elements
            2. 
-         	
          2. scope attributes on th for tables with more than a single row or column of table headers.
            3. 
-            
          3. headers and data cells associated using headers and id attributes
            4. 
-            
          4. headers marked up as td elements with the scope attribute
            5. 
-            
          5. headers marked up with ARIA role attributes rowheader or columnheader
            6. 
+            
          6. headers marked up with table header (th) elements
            7. 
+         	
          7. scope attributes on th for tables with more than a single row or column of table headers.
            8. 
+            
          8. headers and data cells associated using headers and id attributes
            9. 
+            
          9. headers marked up as td elements with the scope attribute
            10. 
+            
          10. headers marked up with ARIA role attributes rowheader or columnheader
            11. 
          
          
       
          
       
          Expected Results
          
diff --git a/techniques/failures/F92.html b/techniques/failures/F92.html
index 8eb6ae11e4..9e73d77213 100644
--- a/techniques/failures/F92.html
+++ b/techniques/failures/F92.html
@@ -1,9 +1,9 @@
 Failure of Success Criterion 1.3.1 due to the use of role presentation on content which conveys semantic information
          Failure of Success Criterion 1.3.1 due to the use of role presentation on content which conveys semantic information
          ID: F92
          Technology: failures
          Type: Failure
          When to Use
          
       
          HTML
          
    
          Description
          
-      
          This failure occurs when a role of presentation is applied to an element whose purpose is to convey information or relationships in the content. Elements such as table, can convey information about the content contained in them via their semantic markup. The WAI-ARIA role of 
-            presentation
-          on the other hand, is intended to suppress semantic information of content from the accessibility API and prevent user agents from conveying that information to the user. Use of the presentation role for content which should convey semantic information may prevent the user from understanding that content.
+      
          This failure occurs when a role of presentation is applied to an element whose purpose is to convey information or relationships in the content. Elements such as table, can convey information about the content contained in them via their semantic markup. The WAI-ARIA role of 
+            presentation
+          on the other hand, is intended to suppress semantic information of content from the accessibility API and prevent user agents from conveying that information to the user. Use of role="presentation" for content which should convey semantic information may prevent the user from understanding that content.
 
          
    
          Examples
          
       
          
@@ -11,7 +11,7 @@ 
          
          
             
          In this example, tabular data is marked up with role=presentation. Though design layout tables can be marked up in such a way, data tables need to retain their semantic information and should therefore not be marked up with role=presentation.
          
             
          Example Code:
          
-
          <table role="presentation">
+
          <table role="presentation">
   <caption>Fruits and their colors</caption>
   <tr>
     <th>Name</th>
@@ -33,7 +33,7 @@ 
          
          
            
             
          1. Check if an element which conveys information, structure, or relationships through its semantic markup
 
            2. 
-            
          2. Element has the attribute role="presentation".
+            
          3. Element has the attribute role="presentation".
 
            4. 
          
          
       
          
diff --git a/techniques/failures/F93.html b/techniques/failures/F93.html
index 573d21b0ca..62537f1b63 100644
--- a/techniques/failures/F93.html
+++ b/techniques/failures/F93.html
@@ -1,28 +1,28 @@
 Failure of Success Criterion 1.4.2 for absence of a way to pause or stop an HTML5 media element that autoplays
          Failure of Success Criterion 1.4.2 for absence of a way to pause or stop an HTML5 media element that autoplays
          ID: F93
          Technology: failures
          Type: Failure
          When to Use
          
       
          HTML
          
    
          Description
          
-
          This failure occurs when an audio or video element with an audio track contains the autoplay attribute and does not contain the muted attribute, and no controls or commands have been provided to pause or stop the media resource.
          
-
          When the autoplay attribute is present, the user agent will automatically begin playback of the media resource as soon as it can do so without stopping. When the muted attribute is present, the user agent will initially mute the media resource's audio output, overriding any user preference.
          
+
          This failure occurs when an audio or video element with an audio track contains the autoplay attribute and does not contain the muted attribute, and no controls or commands have been provided to pause or stop the media resource.
          
+
          When the autoplay attribute is present, the user agent will automatically begin playback of the media resource as soon as it can do so without stopping. When the muted attribute is present, the user agent will initially mute the media resource's audio output, overriding any user preference.
          
 
          If the media element is shorter than 3 seconds, the failure does not occur. If the user agent provides user preferences to override autoplay behavior, the failure does not occur.
          
 
          The HTML spec contains the following notes:
          
-
          • User agents do not need to support autoplay, and it is suggested that user agents honor user preferences on the matter. Authors are urged to use the autoplay attribute rather than using script to force the video to play, so as to allow the user to override the behavior if so desired.
            • 
-
          • Authors are urged to use the autoplay attribute rather than using script to trigger automatic playback, as this allows the user to override the automatic playback when it is not desired, e.g. when using a screen reader. Authors are also encouraged to consider not using the automatic playback behavior at all, and instead to let the user agent wait for the user to start playback explicitly.
          
+
          • User agents do not need to support autoplay, and it is suggested that user agents honor user preferences on the matter. Authors are urged to use the autoplay attribute rather than using script to force the video to play, so as to allow the user to override the behavior if so desired.
            • 
+
          • Authors are urged to use the autoplay attribute rather than using script to trigger automatic playback, as this allows the user to override the automatic playback when it is not desired, e.g. when using a screen reader. Authors are also encouraged to consider not using the automatic playback behavior at all, and instead to let the user agent wait for the user to start playback explicitly.
          
    
          Examples
          
       
          
          
          An auto-playing audio track
          
          
-            
          In this example, the advertising video contains an audio track. The video will play continuously because of the loop attribute, and the video will start automatically because of the autoplay attribute and because there does not appear to be any controls to allow the user to stop the video.
          
+            
          In this example, the advertising video contains an audio track. The video will play continuously because of the loop attribute, and the video will start automatically because of the autoplay attribute and because there does not appear to be any controls to allow the user to stop the video.
          
          
-
          <video src="ads.cgi?kind=video" autoplay loop></video>
+
          <video src="ads.cgi?kind=video" autoplay loop></video>
 
          
       
          
    
          Tests
          
       
          Procedure
          
          
            
-            
          1. Check if an audio or video element has an active audio track.
            2. 
+            
          2. Check if an audio or video element has an active audio track.
            3. 
             
          3. Check if the audio or video lasts longer than 3 seconds.
            4. 
-            
          4. Check if the element has an autoplay attribute.
            5. 
-            
          5. Check if the element does not have a muted attribute.
            6. 
+            
          6. Check if the element has an autoplay attribute.
            7. 
+            
          7. Check if the element does not have a muted attribute.
            8. 
             
          8. Check if no command or control has been provided to stop or pause the media element.
            9. 
           
          
       
          
diff --git a/techniques/failures/F94.html b/techniques/failures/F94.html
index eaea7a6eff..0a64ea4d6b 100644
--- a/techniques/failures/F94.html
+++ b/techniques/failures/F94.html
@@ -27,13 +27,13 @@ 
          Examples
          
 			
          
 				
          Failure example 1
          
 				
          The following CSS and HTML snippet uses VW units to size the text.
          
-
          /* CSS */
+
          /* CSS */
 .callout {
   font-size:1vw;
-}
+}
          
 
-<p class="callout">Text that scales by viewport units</p>
          
-				
          Example page with an example of text sized in vh units.
          
+
          <p class="callout">Text that scales by viewport units</p>
          
+				
          Example page with an example of text sized in vh units.
          
 			
          
 		
          
 		
          
@@ -71,7 +71,7 @@ 
          Related Techniques
          
 		
          
 				
          Related Resources
          
 				
 			
          
diff --git a/techniques/failures/F96.html b/techniques/failures/F96.html
index 1dc11263a6..bc0db0d9d3 100644
--- a/techniques/failures/F96.html
+++ b/techniques/failures/F96.html
@@ -32,20 +32,20 @@ 
          Examples
          
       
          
 				
          Mismatch of visible button text and accessible name supplied via aria-label
          
 				
          The text in a search button reads "Go" but the accessible name provided in an aria-label attribute is "Find in this site"
          
-
          <button id="sitesearch" aria-label="Find in this site">Go</button>
+
          <button id="sitesearch" aria-label="Find in this site">Go</button>
 
          
       
          
 
       
          
 				
          Invisible link text disrupts visible label text string in accessible name
          
 				
          A download link reads "Download specification" but there is invisible link text so that the accessible name of that link is "Download gizmo specification". While the visible label text is contained in the accessible name, there is no string match which may prevent the link from being activated by speech input.
          
-
          <a href="#">Download <span class="accessibly-hidden">gizmo</span> specification</a>
          
+
          <a href="#">Download <span class="accessibly-hidden">gizmo</span> specification</a>
          
       
          
 
       
          
 				
          Input with a hidden label carrying text that differs from the input's value attribute
          
 				
          An input of type="submit" with the value="search" which is exposed as visible label of the input, has a programmatically linked and accessibly hidden label enclosing the text "Find in this site" referenced by aria-labelledby. Because aria-labelledby takes precedence over the value of the input, the accessible name of the input in most browser / screen reader combinations will be "Find in this site". Speech users speaking a command such as "Click search" will be unable to activate the input.
          
-
          <div id="hidden-label">Find in this site</div>
+
          <div id="hidden-label">Find in this site</div>
 <input type="submit" aria-labelledby="hidden-label" value="search">
 
          
       
          
diff --git a/techniques/failures/F98.html b/techniques/failures/F98.html
index 4a6d5e7576..2e9eab5654 100644
--- a/techniques/failures/F98.html
+++ b/techniques/failures/F98.html
@@ -31,7 +31,7 @@ 
          Examples
          
       
          
 				
          Only using touch-specific JavaScript event listeners when a touchscreen is detected
          
 				
          These types of approaches have historically been popular for "mobile" specific development, to ensure that touchscreen interactions are more responsive and immediate (due to the way that touch interactions used to add a delay of approximately 300ms between a "tap" interaction and the generic click event being fired).
          
-				
          
+				
          
 /* inferring the presence of a touchscreen based on
    support for the Touch Events API */
 
@@ -45,7 +45,7 @@ 
          Only using touch-specific JavaScript event listeners when a touchscreen is d
   target.addEventListener('click', ...);
   ...
 }
          
-
          
+
          
 /* inferring the presence of a touchscreen based on
    the CSS Media Queries 4 Interaction Media Features
    match for a "coarse" primary input mechanism */
@@ -63,7 +63,7 @@ 
          Only using touch-specific JavaScript event listeners when a touchscreen is d
 			
 				
          Similarly, web content that omits relevant/necessary keyboard event listeners (e.g. for the correct keyboard interaction with a complex widget, such as a tab interface) when a touchscreen is detected - under the assumption that on a touch device, keyboard support won't be necessary.
          
 
-
          
+
          
 /* inferring the presence of a touchscreen based on
    the navigator.maxTouchPoints property defined in
    the Pointer Events API */
@@ -86,7 +86,7 @@ 
          Only using touch-specific JavaScript event listeners when a touchscreen is d
       
          
 				
          Hiding/omitting controls for mouse and keyboard users when a touchscreen is detected
          
 				
          Web content containing interactive widgets such as content carousels, with visible buttons to operate the widget (such as previous/next buttons, or a visible scrollbar/slider). These visible controls are hidden/omitted when a touchscreen is detected, under the assumption that users will simply use touch gestures to operate the widgets, and no other alternatives are then provided for keyboard or mouse users.
          
-
          /* using CSS Media Queries 4 Interaction Media Features
+
          /* using CSS Media Queries 4 Interaction Media Features
    to hide particular elements in the page (such as a container
    with visible controls) when a "coarse" primary input is present */
 
diff --git a/techniques/failures/F99.html b/techniques/failures/F99.html
index 3cf322c54c..94db0101cc 100644
--- a/techniques/failures/F99.html
+++ b/techniques/failures/F99.html
@@ -30,8 +30,8 @@ 
          Description
          
     
          The use of a single key keyboard shortcut is not a failure if the shortcut is only active when a particular interface element has focus. For example, when a select element or a custom listbox has focus, the input of single character keys to navigate the list is a useful feature.
          
     
          The test procedure suggests asking the author (often the developer of the site) whether keyboard shortcuts are used. If that information is trusted then the procedure can be simpler than pressing all the keys.
          
 
-    
          The success criterion does not apply when single key shortcuts are only active when interface elements have the focus, for example, a select element. Here, pressing a letter key is used for fast navigation within the select options.
          
-    
          Viewing page scripts and searching for typical keyboard event handlers such as document.addEventListener('keydown' ...)  or the handling of keyboard-related event properties with code such as .key, .code, .charCode, or .keyCode
+    
          The success criterion does not apply when single key shortcuts are only active when interface elements have the focus, for example, a select element. Here, pressing a letter key is used for fast navigation within the select options.
          
+    
          Viewing page scripts and searching for typical keyboard event handlers such as document.addEventListener('keydown' ...)  or the handling of keyboard-related event properties with code such as .key, .code, .charCode, or .keyCode
       may establish the presence of scripts that intercept keyboard shortcuts without modification keys like ALT or Ctrl being held down at the same time. As there are several ways of implementing character key events, this method is not considered reliable.
          
     
          Some browsers employ single key shortcuts with Shift. For example, Firefox opens a page search when pressing Shift + / and a search in page links when pressing Shift + '. In these cases, it will be necessary to press Esc or click an empty part of the page to remove the focus from the browser input.
          
   
          
diff --git a/techniques/flash/FLASH1.html b/techniques/flash/FLASH1.html
index 261f747ed3..115fd4eec3 100644
--- a/techniques/flash/FLASH1.html
+++ b/techniques/flash/FLASH1.html
@@ -5,8 +5,8 @@
       
    
          Description
          
       
          The objective of this technique is to show how non-text objects in Flash can be marked so that they can be read by assistive technology.
          
-      
          The Flash Player supports text alternatives to non-text objects using the name property in the accessibility object, which can be defined in ActionScript or within Flash authoring tools.
          
-      
          When an object contains words that are important to understanding the content, the name property should include those words. This will allow the name property to play the same function on the page as the object. Note that it does not necessarily describe the visual characteristics of the object itself but must convey the same meaning as the object. 
          
+      
          The Flash Player supports text alternatives to non-text objects using the name property in the accessibility object, which can be defined in ActionScript or within Flash authoring tools.
          
+      
          When an object contains words that are important to understanding the content, the name property should include those words. This will allow the name property to play the same function on the page as the object. Note that it does not necessarily describe the visual characteristics of the object itself but must convey the same meaning as the object. 
          
    
          Examples
          
       
          
          
          Applying a textual alternative for a symbol (graphic, button or movieclip)
          
@@ -31,16 +31,16 @@ 
          Applying textual alternatives programmatically in ActionScript 2.0
          
          
             
          To manage an object's text equivalent programmatically using  ActionScript 2, the _accProps object must be used. This references an  object containing accessibility related properties set for the object.  The code example below shows a simple example of how the _accProps  object is used to set an objects name in ActionScript. 
          
          
-         
          // 'print_btn' is an instance placed on the movie's main timeline
+         
          // 'print_btn' is an instance placed on the movie's main timeline
 _root.print_btn._accProps = new Object();
 _root.print_btn._accProps.name = "Print";
          
       
          
       
          
          
          Applying textual alternatives programmatically in ActionScript 3.0
          
          
-            
          To manage an object's text equivalents programmatically using  ActionScript 3, the AccessibilityProperties object and name property  must be used. The code example below shows a simple example of how the  name property is used to set an objects name in ActionScript. 
          
+            
          To manage an object's text equivalents programmatically using  ActionScript 3, the AccessibilityProperties object and name property  must be used. The code example below shows a simple example of how the  name property is used to set an objects name in ActionScript. 
          
          
-         
          // 'print_btn' is an instance placed on the movie's main timeline
+         
          // 'print_btn' is an instance placed on the movie's main timeline
 print_btn.accessibilityProperties = new AccessibilityProperties();
 print_btn.accessibilityProperties.name = "Print";
          
       
          
diff --git a/techniques/flash/FLASH11.html b/techniques/flash/FLASH11.html
index 2ec8fcd53f..29094f3d57 100644
--- a/techniques/flash/FLASH11.html
+++ b/techniques/flash/FLASH11.html
@@ -11,14 +11,14 @@ 
          Making a hidden description visible on request
          
          
             
          In this example, an image containing statistical data is shown. The   image is provided a short textual alternative ("Graph of percentage of   total U.S. noninsitutionalized population age 16-64 declaring one or   more disabilities"). Below the image, the user can click a button that   will overlay a long textual description of the statistical information   itself. When the button is clicked, the following actions are taken: 
          
             
            
-               
          •  The MovieClip containing the long text description is made   visible, and its AccessibilityProperties.silent property is   set to false to make it visible to assistive technology. Its contents   are placed in the tab order. 
            • 
+               
          •  The MovieClip containing the long text description is made   visible, and its AccessibilityProperties.silent property is   set to false to make it visible to assistive technology. Its contents   are placed in the tab order. 
            • 
                
          •  The original image and button are temporarily hidden from   assistive technology and the tab order. 
            • 
             
          
             
          The image and descriptive text were taken from a previously published HTML example for long image descriptions on WebAIM.org
 							     
          
       	
          The results for this technique are shown in the working version of Making a hidden description visible on request. The source of Making a hidden description visible on request is available.
          
          
-         
          import flash.accessibility. *;
+         
          import flash.accessibility. *;
 import fl.accessibility.ButtonAccImpl;
 import flash.system.Capabilities;
 
diff --git a/techniques/flash/FLASH12.html b/techniques/flash/FLASH12.html
index 77d265f0d8..ce345e704e 100644
--- a/techniques/flash/FLASH12.html
+++ b/techniques/flash/FLASH12.html
@@ -10,13 +10,13 @@
       
          
          
          Validating a text field
          
          
-            
          In this example, a sample form is shown with two text fields ('name'   and 'zip code'). Both fields are required. When the form's submit button   is pressed, the values of the text fields will be validated. If a   textfield contains an invalid value, an _accProps object is   created for the textfield, and its description property is   set the error message. 
          
+            
          In this example, a sample form is shown with two text fields ('name'   and 'zip code'). Both fields are required. When the form's submit button   is pressed, the values of the text fields will be validated. If a   textfield contains an invalid value, an _accProps object is   created for the textfield, and its description property is   set the error message. 
          
             
          
-               
          Instead of using the accessible description, the error text   can also be added to the accessible name (_accProps.name),   which is supported by a wider range of assistive technology than the _accProps.description   property. 
          
+               
          Instead of using the accessible description, the error text   can also be added to the accessible name (_accProps.name),   which is supported by a wider range of assistive technology than the _accProps.description   property. 
          
             
          
             
          ActionScript 2.0 Code
          
          
-         
          import flash.accessibility. *;
+         
          import flash.accessibility. *;
 import mx.accessibilty.ButtonAccImpl;
 import mx.controls.Alert;
 import mx.accessibility.AlertAccImpl;
diff --git a/techniques/flash/FLASH13.html b/techniques/flash/FLASH13.html
index 3281d1dcf4..1770855106 100644
--- a/techniques/flash/FLASH13.html
+++ b/techniques/flash/FLASH13.html
@@ -12,7 +12,7 @@ 
          Using the language of the page as whole in the embedded Flash
          
          
             
          This example defined the content of the entire web page to be in the   French language. The Flash content will inherit the specified language   from the HTML container. 
          
          
-         
          <?xml version="1.0" encoding="UTF-8"?>
+         
          <?xml version="1.0" encoding="UTF-8"?>
 <html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <meta content="text/html; charset=iso-8859-1"
@@ -47,7 +47,7 @@ 
          Applying a language just to the embedded Flash
          
          
             
          This example defines the content of a Flash movie to be in the French   language. The Flash movie is embedded using SWFObject's static publishing method. This means   that there are two nested object elements, the outer to target Internet   Explorer, the Inner to target other browsers. For this reason the lang   and xml:lang attributes must be added twice. 
          
          
-         
          <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
+         
          <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
   height="420" id="myMovie" lang="fr" width="780" xml:lang="fr">
   <param name="movie" value="myMovie.swf"/>
   <!--[if !IE]>-->
diff --git a/techniques/flash/FLASH14.html b/techniques/flash/FLASH14.html
index 852f1dc5f1..cb13db80e8 100644
--- a/techniques/flash/FLASH14.html
+++ b/techniques/flash/FLASH14.html
@@ -11,7 +11,7 @@ 
          Updating button text with multiple event handlers
          
          
             
          In this example, a group of buttons is assigned the same event   handlers for the flash.events.FocusEvent.FOCUS_IN and flash.events.MouseEvent.MOUSE_OVER   events. When a button receives focus or is hovered over using a mouse,   text describing the button will be updated. 
          
          
-         
          import fl.accessibility.ButtonAccImpl;
+         
          import fl.accessibility.ButtonAccImpl;
 import fl.controls.Button;
 import flash.accessibility. *
 import flash.events.FocusEvent;
diff --git a/techniques/flash/FLASH16.html b/techniques/flash/FLASH16.html
index c12863492f..5f6dfa0c10 100644
--- a/techniques/flash/FLASH16.html
+++ b/techniques/flash/FLASH16.html
@@ -11,7 +11,7 @@ 
          Click event on a button
          
          
             
          This example shows a button that uses the MouseEvent.CLICK   event to change its label. This event will fire both on mouse click and   when the space key is pressed 
          
          
-         
          import fl.controls.Button;
+         
          import fl.controls.Button;
 import fl.accessibility.ButtonAccImpl;
 
 ButtonAccImpl.enableAccessibility();
diff --git a/techniques/flash/FLASH17.html b/techniques/flash/FLASH17.html
index d58a35e6f1..3ceaa6926e 100644
--- a/techniques/flash/FLASH17.html
+++ b/techniques/flash/FLASH17.html
@@ -48,7 +48,7 @@ 
          Using automatically generated links
          
             
          The sample code below shows how to load the content dynamically   with SWFObject. 
          
             
          HTML and Javascript Code Sample for Example 1 
          
          
-         
          <?xml version="1.0" encoding="UTF-8"?>
+         
          <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
@@ -85,7 +85,7 @@ 
          Using automatically generated links
          
             
          The SWFFocus class needs to be added to a Flash or Flex project's source   path. The easiest way to achieve this is to import the SWFFocus.swc into Library path for your project or to copy the   com/swffocus/SWFFocus.as file (including the nested directory structure)   to the project's root directory. 
          
             
          When the SWFFocus class is added to the content's source path, it   needs to be initialized with the following code: 
          
          
-         
          import com.adobe.swffocus.SWFFocus;
+         
          import com.adobe.swffocus.SWFFocus;
 SWFFocus.init(stage);
          
          
             
          The code for the class itself can be found in the source files.
          
@@ -107,7 +107,7 @@ 
          Explicitly identifying existing focusable html element
          
             
             
          For example, the HTML code could look like this (notice the added   class names on the object tag): 
          
          
-         
          <a href="http://www.lipsum.com/" id="focus1">test 1</a>
+         
          <a href="http://www.lipsum.com/" id="focus1">test 1</a>
 <object class="swfPrev-focus1 swfNext-focus2"
   data="keyboard_trap_fix_as3.swf" tabindex="0"
   type="application/x-shockwave-flash"/>
@@ -116,7 +116,7 @@ 
          Explicitly identifying existing focusable html element
          
             
          Since this example uses SWFObject's dynamic loading, the class names   will have to be specified as attribute when SWFObject is initialized.   This is demonstrated in the code example below. 
          
             
          HTML and Javascript Code Sample for Example 2 
          
          
-         
          <?xml version="1.0" encoding="UTF-8"?>
+         
          <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
@@ -156,7 +156,7 @@ 
          Explicitly identifying existing focusable html element
          
          
             
          Note: this example assumes that the focusable HTML elements exist and   have an ID value at the time SWFObject is called to insert the Flash   content. However, in some situations it is also possible that these   elements do not yet exist when the Flash content is created, or that the   elements will be deleted dynamically at a later point. If this happens,   it is possible to reassign ID values for previous and next focusable   elements. To do this, call the SWFsetFocusIds() method on the Flash   content object, like so: 
          
          
-         
          var o = document.getElementById("FlashSample1SWF");
+         
          var o = document.getElementById("FlashSample1SWF");
 o.SWFsetFocusIds('prevId', 'nextId');
          
          
             
          From that point on the updated IDs will be used to move focus to when   tabbing out of the Flash content. 
          
diff --git a/techniques/flash/FLASH18.html b/techniques/flash/FLASH18.html
index 6ff25c513b..609a721daf 100644
--- a/techniques/flash/FLASH18.html
+++ b/techniques/flash/FLASH18.html
@@ -12,7 +12,7 @@ 
          Providing a button in the Flash to stop sound
          
          
             
          This example demonstrates the addition of a button within the Flash   movie to allow the user to stop sounds from playing.  A class called   SoundHandler is created which automatically starts playing an mp3 file   when the movie loads. 
          
          
-         
          package wcagSamples {
+         
          package wcagSamples {
   import flash.display.Sprite;
   import flash.net.URLRequest;
   import flash.media.Sound;
@@ -60,7 +60,7 @@ 
          Providing a button in the HTML before the Flash object to stop sound
          
             
          A class called SoundHandler is created which automatically starts   playing an mp3 file when the movie loads. An HTML button is placed in   the HTML document containing the Flash movie. When the button is clicked   the action is communicated between the HTML page and the Flash movie   via the Flash Player JavaScript API, resulting in the toggleSound   method being called on the SoundHandler class. 
          
             
          ActionScript 3.0 code for Example 2
          
          
-         
          package wcagSamples {
+         
          package wcagSamples {
   import flash.display.Sprite;
   import flash.external.ExternalInterface;
   import flash.net.URLRequest;
@@ -96,7 +96,7 @@ 
          Providing a button in the HTML before the Flash object to stop sound
          
          
             
          HTML code for Example 2
          
          
-         
          <?xml version="1.0" encoding="UTF-8"?>
+         
          <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
diff --git a/techniques/flash/FLASH19.html b/techniques/flash/FLASH19.html
index 947f81c9f2..ffc6d2a1bc 100644
--- a/techniques/flash/FLASH19.html
+++ b/techniques/flash/FLASH19.html
@@ -12,7 +12,7 @@ 
          Using ActionScript to offer a time limit extension before the timeout expire
          
             
          This is a basic AS2 example of a time limit that can be extended by   the user.  An alert is shown after 40 seconds of inactivity, warning that the   session is about to expire. The user is given 20 seconds to press the   space bar or click on the "Yes" button.  Note that the 40 second   duration would be insufficient for most tasks and is artificially short   for ease of demonstration. 
          
          
-         
          import mx.controls.Alert;
+         
          import mx.controls.Alert;
 import flash.accessibility.Accessibility;
 
 mx.accessibility.AlertAccImpl.enableAccessibility();
diff --git a/techniques/flash/FLASH2.html b/techniques/flash/FLASH2.html
index 8975a18bd6..ab6c54abb9 100644
--- a/techniques/flash/FLASH2.html
+++ b/techniques/flash/FLASH2.html
@@ -5,7 +5,7 @@
       
    
          Description
          
       
          The objective of this technique is to provide a long text  alternative that serves the same purpose and presents the same  information as the original non-text content when a short text  alternative is not sufficient. 
          
-      
          The Flash Player supports long text alternatives to non-text  objects, which can be defined in ActionScript or within Flash authoring  tools using the description property, as indicated in the examples  below. 
          
+      
          The Flash Player supports long text alternatives to non-text  objects, which can be defined in ActionScript or within Flash authoring  tools using the description property, as indicated in the examples  below. 
          
    
          Examples
          
       
          
          
          Applying a Description for a symbol (graphic, button or movieclip)
          
@@ -31,10 +31,10 @@ 
          Applying a Description for a symbol (graphic, button or movieclip)
          
       
          
          
          Applying Description programmatically in ActionScript 2.0 
          
          
-            
          To manage an object's text equivalents programmatically using  ActionScript, the _accProps object must be used. This references an  object containing accessibility related properties set for the object.  The code example below shows a simple example of how the _accProps  object is used to set an objects name and description in ActionScript. 
          
+            
          To manage an object's text equivalents programmatically using  ActionScript, the _accProps object must be used. This references an  object containing accessibility related properties set for the object.  The code example below shows a simple example of how the _accProps  object is used to set an objects name and description in ActionScript. 
          
             
          A chart showing sales for October has a short text alternative  of "October sales chart". The long description would provide more  information, as shown in the code below. 
          
          
-         
          // 'chart_mc' is an instance placed on the movie's main timeline
+         
          // 'chart_mc' is an instance placed on the movie's main timeline
 _root.chart_mc._accProps = new Object();
 _root.chart_mc._accProps.name = "October Sales Chart";
 _root.chart_mc._accProps.description = "Bar Chart showing sales for October.\
@@ -46,10 +46,10 @@ 
          Applying Description programmatically in ActionScript 2.0 
          
       
          
          
          Applying Description programmatically in ActionScript 3.0
          
          
-            
          To manage an object's text equivalents programmatically using  ActionScript, the AccessibilityProperties object must be used. The code  example below shows a simple example of how the AccessibilityProperties  object used to set an objects name and description in ActionScript. 
          
+            
          To manage an object's text equivalents programmatically using  ActionScript, the AccessibilityProperties object must be used. The code  example below shows a simple example of how the AccessibilityProperties  object used to set an objects name and description in ActionScript. 
          
             
          A chart showing sales for October has a short text alternative  of "October sales chart". The long description would provide more  information, as shown in the code below. 
          
          
-         
          // 'chart_mc' is an instance placed on the movie's main timeline
+         
          // 'chart_mc' is an instance placed on the movie's main timeline
 chart_mc.accessibilityProperties = new AccessibilityProperties();
 chart_mc.accessibilityProperties.name = "October Sales Chart";
 chart_mc.accessibilityProperties.description = "Bar Chart showing sales for October.\
diff --git a/techniques/flash/FLASH20.html b/techniques/flash/FLASH20.html
index 4bf3655375..4a898cc840 100644
--- a/techniques/flash/FLASH20.html
+++ b/techniques/flash/FLASH20.html
@@ -61,7 +61,7 @@ 
          A thick blue border to indicate focus
          
             
          The result of this technique can be found in the working version of A thick blue border to indicate focus. 
          
             
          Code for Example 1 (ActionScript 3.0)
          
          
-         
          package wcagSamples {
+         
          package wcagSamples {
   import fl.accessibility.ButtonAccImpl;
   import fl.accessibility.CheckBoxAccImpl;
   import fl.controls.CheckBox;
diff --git a/techniques/flash/FLASH21.html b/techniques/flash/FLASH21.html
index 16f0cf6c45..f06e1dfc1f 100644
--- a/techniques/flash/FLASH21.html
+++ b/techniques/flash/FLASH21.html
@@ -21,7 +21,7 @@ 
          A statistical data table
          
          
             
          In this example, statistical data is used as data provider for a   dynamically created DataGrid component. The lines import   fl.accessibility.DataGridAccImpl;   DataGridAccImpl.enableAccessibility(); are required to enable   accessibility for the Datagrid Component. 
          
          
-         
          import fl.accessibility.DataGridAccImpl;
+         
          import fl.accessibility.DataGridAccImpl;
 DataGridAccImpl.enableAccessibility();
 
 import fl.data.DataProvider;
diff --git a/techniques/flash/FLASH22.html b/techniques/flash/FLASH22.html
index 23b896cc08..2d498bda51 100644
--- a/techniques/flash/FLASH22.html
+++ b/techniques/flash/FLASH22.html
@@ -7,7 +7,7 @@
       
          The objective of this technique is to demonstrate how to provide keyboard
     				access to a Flash MovieClip that is not keyboard accessible by default.
     				This technique ensures that the element is focusable by setting the
-    				tabEnabled property, and it ensures that the action can be triggered
+    				tabEnabled property, and it ensures that the action can be triggered
     				from the keyboard by providing a keydown handler in addition to a click
     				handler. 
          
    
          Examples
          
@@ -19,7 +19,7 @@ 
          MovieClip used as a button
          
     						the tabEnabled. Additionally, redundant event handlers are added so
     						that the custom button responds to both a mouse click and a space bar
     						keypress. Finally, the custom button is provided an accessible name
-    						using the MovieClip's AccessibilityProperties object. This makes the
+    						using the MovieClip's AccessibilityProperties object. This makes the
     						button's label perceivable by assistive technology. 
          
             
          This result can be viewed in the working
             	version of MovieClip used as a button. The source of MovieClip used as a button is available.
          
@@ -30,7 +30,7 @@ 
          MovieClip used as a button
          
     						Button component, or create a new symbol with a type of "button". 
          
             
          
          
-         
          import flash.accessibility. *
+         
          import flash.accessibility. *
 import flash.events.KeyboardEvent;
 import flash.events.MouseEvent;
 import flash.net.navigateToURL;
@@ -65,7 +65,7 @@ 
          MovieClip used as a button
          
          
          When a Flash Movie contains generic MovieClip instances that are used
     					as interactive controls, confirm that: 
          
          
            
-            
          1.  The MovieClip instance has its tabEnabled property set to true 
            2. 
+            
          2.  The MovieClip instance has its tabEnabled property set to true 
            3. 
             
          3.  The MovieClip instance has event handlers for both mouse and keyboard events 
            4. 
          
          
       
          
diff --git a/techniques/flash/FLASH23.html b/techniques/flash/FLASH23.html
index 7709320d3d..095ee8c649 100644
--- a/techniques/flash/FLASH23.html
+++ b/techniques/flash/FLASH23.html
@@ -41,7 +41,7 @@ 
          Adding a summary to a DataGrid with ActionScript 3
          
             
          This is a basic AS3 example of a DataGrid component that has summary
     						text added as its accessible description. 
          
          
-         
          import fl.accessibility.DataGridAccImpl;
+         
          import fl.accessibility.DataGridAccImpl;
 import fl.controls.DataGrid;
 import fl.controls.Label;
 import fl.data.DataProvider;
diff --git a/techniques/flash/FLASH24.html b/techniques/flash/FLASH24.html
index e7ae2ca4db..9f7944573d 100644
--- a/techniques/flash/FLASH24.html
+++ b/techniques/flash/FLASH24.html
@@ -18,7 +18,7 @@ 
          Changing timeout with a dropdown list
          
     						by the user through a dropdown list. In this example there is a combobox
     						with the instance name sessionLimitDuration. 
          
          
-         
          import mx.controls.Alert;
+         
          import mx.controls.Alert;
 import mx.accessibility.AlertAccImpl;
 import mx.accessibility.ComboBoxAccImpl;
 
diff --git a/techniques/flash/FLASH25.html b/techniques/flash/FLASH25.html
index 8c22f47b52..ef9730f525 100644
--- a/techniques/flash/FLASH25.html
+++ b/techniques/flash/FLASH25.html
@@ -6,7 +6,7 @@
    
          Description
          
       
          The objective of this technique is to provide an accessible name to
     				the built in form components provided by Flash. Some components, such
-    				as radio buttons, checkboxes and buttons, have their own label property.
+    				as radio buttons, checkboxes and buttons, have their own label property.
     				For other components, the developer needs to specify the component's
     				label text as accessible name. This can be either be achieved through
     				the Accessibility panel (for components placed on the stage during
@@ -15,11 +15,11 @@
       
       
          ActionScript 2
          
       
          In ActionScript 2 the accessible name needs to be set on a component's
-    				_accProps property. This property must be an object. If the property
+    				_accProps property. This property must be an object. If the property
     				has not been set yet, the developer needs to create a custom object
-    				and assign it to the _accProps property. The object itself can have
-    				several accessibility related properties, one of them being _accProps.name,
-    				which specifies the accessible name. When an _accProps property is
+    				and assign it to the _accProps property. The object itself can have
+    				several accessibility related properties, one of them being _accProps.name,
+    				which specifies the accessible name. When an _accProps property is
     				updated, the developer must call Accessibility.UpdateProperties() for
     				the changes to take effect. Before calling Accessibility.UpdateProperties(),
     				it is recommended to check the System.capabilities.hasAccessibility
@@ -42,13 +42,13 @@
       
       
          ActionScript 3
          
       
          In ActionScript 3 the accessible name needs to be set on a component's
-    				accessibilityProperties property. This property must be an instance
-    				of flash.accessibility.AccessibilityProperties. If the property has
-    				not been set yet, the developer needs to create the a new AccessibilityProperties
-    				instance and assign it to the accessibilityProperties property. The
+    				accessibilityProperties property. This property must be an instance
+    				of flash.accessibility.AccessibilityProperties. If the property has
+    				not been set yet, the developer needs to create the a new AccessibilityProperties
+    				instance and assign it to the accessibilityProperties property. The
     				object itself can have several accessibility related properties, one
-    				of them being accessibilityProperties.name which specifies the accessible
-    				name. When an accessibilityProperties property is updated, the developer
+    				of them being accessibilityProperties.name which specifies the accessible
+    				name. When an accessibilityProperties property is updated, the developer
     				must call flash.accessibility.Accessibility.UpdateProperties() for the
     				changes to take effect. Before calling Accessibility.UpdateProperties(),
     				it is recommended to check the flash.system.capabilities.hasAccessibility
@@ -81,7 +81,7 @@ 
          Setting the accessible name through ActionScript 2.0
          
          
             
          The code example below shows how a ListBox component is created and assigned an accessible name. 
          
          
-         
          mx.accessibility.ListAccImpl.enableAccessibility();
+         
          mx.accessibility.ListAccImpl.enableAccessibility();
 
 this.createClassObject(mx.controls.List, "my_list", 1);
 my_list.addItem({label: "R. Davis", data: 1});
@@ -105,7 +105,7 @@ 
          Setting the accessible name through ActionScript 3.0
          
          
             
          The code example below shows how a ListBox component is created and assigned an accessible name. 
          
          
-         
          import fl.controls.List;
+         
          import fl.controls.List;
 import fl.accessibility.ListAccImpl;
 import flash.system.Capabilities;
 import flash.accessibility.*;
@@ -137,9 +137,9 @@ 
          Setting the accessible name through ActionScript 3.0
          
             
        3.  The selected component's label text is specified in the Accessibility
     					Panel's "name" field. 
          4. 
             
        4.  In ActionScript 2.0: Scripting is used to dynamically set the
-    					component's _accProps.name property 
          5. 
+    					component's _accProps.name property 
             
        5.  In ActionScript 3.0: Scripting is used to dynamically set the
-    					component's accessibilityProperties.name property 
          6. 
+    					component's accessibilityProperties.name property 
          
        
       
        
       
        Expected Results
        
diff --git a/techniques/flash/FLASH26.html b/techniques/flash/FLASH26.html
index 2f178a4e24..214e0c2b22 100644
--- a/techniques/flash/FLASH26.html
+++ b/techniques/flash/FLASH26.html
@@ -28,7 +28,7 @@ 
        Playing descriptions when cue points are reached
        
     						provided below the video player that allows the user to turn
     						audio descriptions on or off. 
        
          
-         
        package {
+         
        package {
   import fl.video. *;
   import flash.events. *;
   import flash.media.Sound;
diff --git a/techniques/flash/FLASH27.html b/techniques/flash/FLASH27.html
index 3824961882..0c444c8228 100644
--- a/techniques/flash/FLASH27.html
+++ b/techniques/flash/FLASH27.html
@@ -18,7 +18,7 @@
    
        Examples
        
       
        
          
        Using the label property to describe the button's purpose
        
-         
        import fl.controls.Button;
+         
        import fl.controls.Button;
 import fl.accessibility.ButtonAccImpl;
 
 ButtonAccImpl.enableAccessibility();
@@ -30,9 +30,9 @@ 
        Using the label property to describe the button's purpose
        
       
        
          
        Using scripting to set the accessible name for an image button using Actionscript 3.0
        
          
-            
        In this example, the button's label property is deliberately set to an empty string. To be perceivable to assistive technology, the button's accessibilityProperties.name property is set.
        
+            
        In this example, the button's label property is deliberately set to an empty string. To be perceivable to assistive technology, the button's accessibilityProperties.name property is set.
        
          
-         
        import fl.controls.Button;
+         
        import fl.controls.Button;
 import fl.accessibility.ButtonAccImpl;
 import flash.accessibility.*;
 import flash.system.Capabilities;
diff --git a/techniques/flash/FLASH28.html b/techniques/flash/FLASH28.html
index dd76b692a0..203c4aafa4 100644
--- a/techniques/flash/FLASH28.html
+++ b/techniques/flash/FLASH28.html
@@ -9,7 +9,7 @@
     			through the visual appearance of groupings of individual characters. 
        
       
        In Flash, such groupings of characters can be made accessible
     				by wrapping them in a MovieClip, and providing an accessible
-    				name. It is crucial that  the forceSimple property for the
+    				name. It is crucial that  the forceSimple property for the
     				MovieClip is set to true also. This will hide the actual ASCII
     				characters from assistive technology. 
        
    
        Examples
        
@@ -52,11 +52,11 @@ 
        Providing a text alternative for ASCII art using ActionScript
        
                
      4.  Place the ASCII characters in a MovieClip instance 
        5. 
                
      5.  Provide an instance name for the MovieClip instance (e.g. myASCII) 
        6. 
                
      6.  Set the accessible name for the MovieClip and set the
-    							forceSimple property to true to hide the text inside the
+    							forceSimple property to true to hide the text inside the
     							MovieClip. 
        7. 
             
      
          
-         
      // 'myASCII' is a MovieClip instance placed on the movie's main timeline
+         
      // 'myASCII' is a MovieClip instance placed on the movie's main timeline
 myASCII.accessibilityProperties = new AccessibilityProperties();
 myASCII.accessibilityProperties.name = "WCAG 2 Rulez";
 myASCII.accessibilityProperties.forceSimple = true;
diff --git a/techniques/flash/FLASH29.html b/techniques/flash/FLASH29.html
index 0479b5c001..44d55d025a 100644
--- a/techniques/flash/FLASH29.html
+++ b/techniques/flash/FLASH29.html
@@ -5,10 +5,10 @@
       
    
      Description
      
       
      The objective of this technique is to explicitly associate a form
-    				component with its label text by setting the component's label property.
+    				component with its label text by setting the component's label property.
     				Setting this property will visually place a label next to the component,
     				and exposes the label text to assistive technology. 
      
-      
      Components that support the label property are: 
      
+      
      Components that support the label property are: 
      
       
        
          
      • 
 								       Button
@@ -72,7 +72,7 @@ 
        Setting the label using the Component Inspector panel
        
       
      
       
      
          
      Setting the label on a Button, CheckBox and RadioButton component using ActionScript 3.0
      
-         
      import fl.accessibility.ButtonAccImpl
+         
      import fl.accessibility.ButtonAccImpl
 import fl.accessibility.CheckBoxAccImpl
 import fl.accessibility.RadioButtonAccImpl
 import fl.controls.Button;
@@ -108,7 +108,7 @@ 
      Setting the label on a Button, CheckBox and RadioButton component using Acti
          
      When the Button, CheckBox or RadioButton components are used: 
      
          
        
             
      1.  confirm that labels describing the purpose of the button have
-    					been provided through the component's label property. 
        2. 
+    					been provided through the component's label property. 
          
      
       
      
       
      Expected Results
      
diff --git a/techniques/flash/FLASH3.html b/techniques/flash/FLASH3.html
index 5244750ceb..e3f3d989f2 100644
--- a/techniques/flash/FLASH3.html
+++ b/techniques/flash/FLASH3.html
@@ -5,7 +5,7 @@
       
    
      Description
      
       
      The purpose of this technique is to show how images can be marked so that they can be ignored by Assistive Technology. 
      
-      
      The Flash Player supports the ability for authors to control  which graphics appear to assistive technologies using the silent  property of the accessibility object, as indicated in the examples  below. 
      
+      
      The Flash Player supports the ability for authors to control  which graphics appear to assistive technologies using the silent  property of the accessibility object, as indicated in the examples  below. 
      
    
      Examples
      
       
      
          
      Hiding a graphic in the Flash Professional authoring tool
      
@@ -22,9 +22,9 @@ 
      Hiding a graphic in the Flash Professional authoring tool
      
       
      
          
      Applying textual alternatives programmatically in ActionScript 2.0
      
          
-            
      To manage an object's text equivalents programmatically using  ActionScript, the _accProps property must be used. This references an  object containing accessibility related properties set for the object.  The code example below shows a simple example of how the _accProps  property is used to remove an object from the accessibility information  for the movie using ActionScript. 
      
+            
      To manage an object's text equivalents programmatically using  ActionScript, the _accProps property must be used. This references an  object containing accessibility related properties set for the object.  The code example below shows a simple example of how the _accProps  property is used to remove an object from the accessibility information  for the movie using ActionScript. 
      
          
-         
      // 'decorative_mc' is an instance placed on the movie's main timeline
+         
      // 'decorative_mc' is an instance placed on the movie's main timeline
 _root.decorative_mc._accProps = new Object();
 _root.decorative_mc._accProps.silent = true; 
      
       
      
diff --git a/techniques/flash/FLASH30.html b/techniques/flash/FLASH30.html
index 801cb549b5..09b360159e 100644
--- a/techniques/flash/FLASH30.html
+++ b/techniques/flash/FLASH30.html
@@ -18,7 +18,7 @@ 
      Accessible name for a simple image button
      
             
      In this example, an icon based button is given an accessible name
     					through scripting. When the button is clicked a web page is opened. 
      
          
-         
      //provide text equivalent for image button
+         
      //provide text equivalent for image button
 this.check_btn.accessibilityProperties = new AccessibilityProperties();
 this.check_btn.accessibilityProperties.name = "Check page validation";
 
@@ -39,7 +39,7 @@ 
      Accessible name for a simple image button
      
       
      
          
      Accessible name for a dynamic image button
      
          
-         
      import fl.controls.Button;
+         
      import fl.controls.Button;
 import fl.accessibility.ButtonAccImpl;
 
 ButtonAccImpl.enableAccessibility();
diff --git a/techniques/flash/FLASH31.html b/techniques/flash/FLASH31.html
index ca26139950..1c56f7aae8 100644
--- a/techniques/flash/FLASH31.html
+++ b/techniques/flash/FLASH31.html
@@ -15,7 +15,7 @@
     				the grid's caption text. 
          
    6.  Duplicate the caption text and add it as the grid's accessible
     					name. This can either be achieved by setting a value to the grid's   "name" field
-    					in the Accessibility panel or by setting the grid's AccessibilityProperties.name
+    					in the Accessibility panel or by setting the grid's AccessibilityProperties.name
     					property. 
      7. 
       
    
    
    Examples
    
@@ -47,7 +47,7 @@ 
    Associating a caption with a DataGrid using ActiveScript 3
    
     						Additionally a label element is created, containing the caption text,
     						and the caption text is added to the grid as an accessible name. 
    
          
-         
    import fl.accessibility.DataGridAccImpl;
+         
    import fl.accessibility.DataGridAccImpl;
 import fl.controls.DataGrid;
 import fl.controls.Label;
 import fl.data.DataProvider;
@@ -116,8 +116,8 @@ 
    Associating a caption with a DataGrid using ActiveScript 3
    
                
  •  In the above example, the text used for the DataGrid caption will
     								be read twice, once as the text label that is offered for sighted
     								users, and again as the accessible name for the DataGrid. Authors
-    								can avoid duplicate voicing by setting the silent property for the
-    								label text to true. 
    • 
+    								can avoid duplicate voicing by setting the silent property for the
+    								label text to true. 
    •
    diff --git a/techniques/flash/FLASH32.html b/techniques/flash/FLASH32.html index 41110000c0..be7d6f7065 100644 --- a/techniques/flash/FLASH32.html +++ b/techniques/flash/FLASH32.html @@ -4,12 +4,12 @@
  • Adobe Flex

    • Description

    -

    Except for the CheckBox and RadioButton component, the built in Flash +

    Except for the CheckBox and RadioButton component, the built in Flash components are not automatically provided an associated label. For these components, label text has to be placed adjacent to their control - manually, using the Label component. If the 'auto-label' feature is + manually, using the Label component. If the 'auto-label' feature is enabled in the Accessibility panel, then the Flash Player will automatically - associate the label text for the TextInput and TextArea components. + associate the label text for the TextInput and TextArea components. This means that for these components, it is not necessary to duplicate the label text for the control using the Accessibility panel. The auto label feature is enabled by default.

    @@ -42,8 +42,8 @@

    As an alternative to using the Accessibility panel, the auto - label feature can also be turned off by setting the AccessibilityProperties.noAutoLabel - to true for the stage object.

    + label feature can also be turned off by setting the AccessibilityProperties.noAutoLabel + to true for the stage object.

    Examples

    diff --git a/techniques/flash/FLASH33.html b/techniques/flash/FLASH33.html index ac309c6b3e..50bdd99d61 100644 --- a/techniques/flash/FLASH33.html +++ b/techniques/flash/FLASH33.html @@ -5,7 +5,7 @@

    Description

    The objective of this technique is to specify the width and/or height - of an embedded Flash object using relative units such as em values. + of an embedded Flash object using relative units such as em values. The size of the Flash object is allowed to expand to fill the size of its container (a parent element) by setting the movie width and height to 100%. The container's width and height is set with relative @@ -28,9 +28,9 @@

    Scaling text while keeping a minimum size

    relative em values. When the user increases or decreases the browser's text size, the Flash object will scale accordingly. To ensure that the object does not become too small when text size is decreased, - the min-width and min-height properties are set to the default dimensions.

    + the min-width and min-height properties are set to the default dimensions.

    - 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
+         
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
diff --git a/techniques/flash/FLASH34.html b/techniques/flash/FLASH34.html
index 1a93778f23..2ab17effd0 100644
--- a/techniques/flash/FLASH34.html
+++ b/techniques/flash/FLASH34.html
@@ -11,13 +11,13 @@
     				and language disabilities). By default, the sound will be played automatically.
     				When a screen reader such as JAWS is detected however, the sound will
     				have to be started manually. 
    
-      
    To perform screen reader detection, Flash provides the flash.accessibility.Accessibility.active
-    				property. If this property is set to true, it means that the Flash
+      
    To perform screen reader detection, Flash provides the flash.accessibility.Accessibility.active
+    				property. If this property is set to true, it means that the Flash
     				player has detected running assistive technology. Based on this flag,
     				the Flash developer can choose to run different functionality. 
    
       
    
          
    The Flash Player requires some time to detect active assistive
-    				technology and set the Accessibility.active property. To get accurate
+    				technology and set the Accessibility.active property. To get accurate
     				results, do not check for this property immediately on the first frame
     				of the movie. Instead, perform the check 5 frames in or based on a
     				timed event. 
    
@@ -26,20 +26,20 @@
     				is running. 
    
          
    Other assistive technology tools, including screen magnifiers,
     				or tools not used as assistive technologies may also utilize MSAA in
-    				ways that result in Accessibility.active being set to true. 
    
+    				ways that result in Accessibility.active being set to true.

    Examples

    A SoundHandler class

    A class called SoundHandler is created which automatically starts - playing an MP3 file only when Accessibility.active is set to false. - Note that this example also checks the flash.system.Capabilities.hasAccessibility + playing an MP3 file only when Accessibility.active is set to false. + Note that this example also checks the flash.system.Capabilities.hasAccessibility property. This property does not check whether a screen reader is running, but instead indicates whether the Flash Player is running in an environment that supports MSAA (which basically means the Windows operating system).

    - 
    package wcagSamples {
+         
    package wcagSamples {
   import flash.accessibility.Accessibility;
   import flash.display.Sprite;
   import flash.net.URLRequest;
diff --git a/techniques/flash/FLASH35.html b/techniques/flash/FLASH35.html
index 73eb8589ef..56e28e75f6 100644
--- a/techniques/flash/FLASH35.html
+++ b/techniques/flash/FLASH35.html
@@ -25,7 +25,7 @@ 
    A toggle button to pause and resume scrolling
    
     						to accomplish this. 
    
             
          
-         
    import fl.accessibility.ButtonAccImpl;
+         
    import fl.accessibility.ButtonAccImpl;
 import fl.accessibility.CheckBoxAccImpl;
 
 ButtonAccImpl.enableAccessibility();
diff --git a/techniques/flash/FLASH36.html b/techniques/flash/FLASH36.html
index c3a91baff0..a445bb12c7 100644
--- a/techniques/flash/FLASH36.html
+++ b/techniques/flash/FLASH36.html
@@ -16,7 +16,7 @@ 
    Stopping blinking after a timeout
    
     						generate a blinking effect. Before 5 seconds has passed, the MovieClip's
     						gotoAndStop() method is called, which stops the blinking effect. 
    
          
-         
    setTimeout(stopBlinking, 4500);
+         
    setTimeout(stopBlinking, 4500);
 function stopBlinking() {
   var blinkingTextMC = getChildByName('blinkingTextMC');
   blinkingTextMC.gotoAndStop(1);
diff --git a/techniques/flash/FLASH4.html b/techniques/flash/FLASH4.html
index 228e28365c..6787b057ba 100644
--- a/techniques/flash/FLASH4.html
+++ b/techniques/flash/FLASH4.html
@@ -11,7 +11,7 @@ 
    ActionScript 3 combobox with submit button
    
          
             
    This is a basic ActionScript 3 example of a combobox component with  a submit button to redirect the user to a different resource. 
    
          
-         
    import fl.accessibility.ComboBoxAccImpl;
+         
    import fl.accessibility.ComboBoxAccImpl;
 import flash.net.navigateToURL;
 import flash.net.URLRequest;
 ComboBoxAccImpl.enableAccessibility();
@@ -27,7 +27,7 @@ 
    ActionScript 2 combobox with submit button
    
          
             
    This is a basic ActionScript 2 example of a combobox component with  a submit button to redirect the user to a different resource - the same  example as in example 1 except in ActionScript 2: 
    
          
-         
    import fl.accessibility.ComboBoxAccImpl;
+         
    import fl.accessibility.ComboBoxAccImpl;
 ComboBoxAccImpl.enableAccessibility();
 state_submit.addEventListener("click", submitHandler);
 function submitHandler(e) {
diff --git a/techniques/flash/FLASH5.html b/techniques/flash/FLASH5.html
index 06954f2fbb..ae21a727d9 100644
--- a/techniques/flash/FLASH5.html
+++ b/techniques/flash/FLASH5.html
@@ -39,13 +39,13 @@ 
    Using ActionScript to specify the accessible name
    
          
             
    ActionScript 3 can be used instead of the Accessibility control  panel to define the accessibility name for the combined button, as  follows: 
    
          
-         
    // 'flashLink1' is an instance placed on the movie's main timeline
+         
    // 'flashLink1' is an instance placed on the movie's main timeline
 flashLink1.accessibilityProperties = new AccessibilityProperties();
 flashLink1.accessibilityProperties.name = "Learn more about Flash";
    
          
             
    ActionScript 2 can be used instead of the Accessibility control  panel to define the accessibility name for the combined button, as  follows 
    
          
-         
    // 'flashLink1' is an instance placed on the movie's main timeline
+         
    // 'flashLink1' is an instance placed on the movie's main timeline
 flashLink1._accProps = new Object();
 flashLink1._accProps.name = "Learn more about Flash";
    diff --git a/techniques/flash/FLASH7.html b/techniques/flash/FLASH7.html index 8690075ea2..10e96ea29c 100644 --- a/techniques/flash/FLASH7.html +++ b/techniques/flash/FLASH7.html @@ -12,9 +12,9 @@

    Using ActionScript to add contextual information directly to the label of a button

    -

    This example uses ActionScript to add contextual information directly to the label of a button. When the "Expand Button Labels" button is toggled, each button on the page has its label property modified.

    +

    This example uses ActionScript to add contextual information directly to the label of a button. When the "Expand Button Labels" button is toggled, each button on the page has its label property modified.

    - 
    import fl.accessibility.ButtonAccImpl;
+         
    import fl.accessibility.ButtonAccImpl;
 ButtonAccImpl.enableAccessibility();
 btn1.addEventListener(MouseEvent.CLICK, clickHandler);
 
diff --git a/techniques/flash/FLASH8.html b/techniques/flash/FLASH8.html
index b0c6488e05..2ed5a97d78 100644
--- a/techniques/flash/FLASH8.html
+++ b/techniques/flash/FLASH8.html
@@ -15,7 +15,7 @@ 
    Adding a group name to the accessible name of radio buttons
    
             
    This example shows how the group name for radio buttons in a group   can be made accessible by adding it to each button's accessible name: 
    
             
      
                
    1.  Add radio button components to the stage: 
      2. 
-               
    2.  Enter each button's label using its label property 
      3. 
+               
    3.  Enter each button's label using its label property 
      4. 
                
    4.  Add the visual group label to the left or above the buttons   added in step 1 
      5. 
                
    5.  Select each radio button. In the Accessibility panel, add the   group name to the "Name" field; 
      6. 
             
    
@@ -38,9 +38,9 @@ 
    Adding a group name to the accessible name of radio buttons
    
       
    
          
    Programmatically adding a group name with the accessible name of radio buttons
    
          
-            
    The code example below shows a basic proof of concept of a class that   automatically places a set of form controls inside a fieldset like   rectangle, including a legend. For each added control an AccessibilityProperties   object is created, and its name property is set to a   combination of the legend text and the actual form control label. 
    
+            
    The code example below shows a basic proof of concept of a class that   automatically places a set of form controls inside a fieldset like   rectangle, including a legend. For each added control an AccessibilityProperties   object is created, and its name property is set to a   combination of the legend text and the actual form control label. 
    
          
-         
    +         
     package wcagSamples {
   import flash.display. *;
   import flash.text. *;
@@ -186,7 +186,7 @@ 
    Programmatically adding a group name with the accessible name of radio butto
          
             
    This example class can be initialized as follows: 
    
          
-         
    var myFieldSet = new FieldSet("Personal Details",  // the legend 
+         
    var myFieldSet = new FieldSet("Personal Details",  // the legend 
   [["TextInput", "Name"],                          // text field
   ["RadioGroup", "Gender", ["Male", "Female"]],    // radio button group
   ["CheckBox", "Do you smoke", "yes"],             // checkbox
@@ -206,7 +206,7 @@ 
    Programmatically adding a group name with the accessible name of radio butto
          
    When a Flash Movie contains grouped form controls, confirm that   either : 
    
          
      
             
    •  The group's name is included in the Accessibility panel's   "name" field for each control. 
      • 
-            
    •  Each control has an AccessibilityProperties.name property,   which contains both the group's name and the control's label text 
      • 
+            
    •  Each control has an AccessibilityProperties.name property,   which contains both the group's name and the control's label text 
      • 
          
    
       
    
       
    Expected Results
    
diff --git a/techniques/flash/FLASH9.html b/techniques/flash/FLASH9.html
index e6af439ebe..11416e2b4d 100644
--- a/techniques/flash/FLASH9.html
+++ b/techniques/flash/FLASH9.html
@@ -16,7 +16,7 @@ 
    Adding a timed text caption file to Flash
    
                
  •  From the components list also create an instance of the   FLVPlayback captioning component. In the 'Component inspector' panel set   its 'Source' parameter to the name of your timed text xml file. The   captions will automatically placed at the bottom of the player's frame. 
    • 
             
          
-         
    <?xml version="1.0" encoding="UTF-8"?>
+         
    <?xml version="1.0" encoding="UTF-8"?>
 <tt xml:lang="en" xmlns="https://www.w3.org/2006/04/ttaf1"
   xmlns:tts="https://www.w3.org/2006/04/ttaf1#styling">
   <head>
diff --git a/techniques/general/G115.html b/techniques/general/G115.html
index d8844fca48..ee15f824c1 100644
--- a/techniques/general/G115.html
+++ b/techniques/general/G115.html
@@ -18,21 +18,21 @@ 
    When to Use
    
 		
    Description
    
 		
    The objective of this technique is to mark up the structure of the web content using the appropriate semantic elements. In other words, the elements are used according to their meaning, not because of the way they appear visually.
    
 		
    Using the appropriate semantic elements will make sure the structure is available to the user agent. This involves explicitly indicating the role that different units have in understanding the meaning of the content. The nature of a piece of content as a paragraph, header, emphasized text, table, etc. can all be indicated in this way. In some cases, the relationships between units of content should also be indicated, such as between headings and subheadings, or amongst the cells of a table. The user agent can then make the structure perceivable to the user, for example using a different visual presentation for different types of structures or by using a different voice or pitch in an auditory presentation.
    
-		
    In HTML, for example, phrase-level elements such as em, abbr, and cite add semantic information within sentences, marking text for emphasis and identifying abbreviations and citations, respectively. MathML, a markup language designed to maintain important distinctions between structure and presentation in mathematics, includes special "presentation" markup for the complex notations used to represent mathematical ideas as well as "content" (semantic) markup for the mathematical ideas themselves.
    
+		
    In HTML, for example, phrase-level elements such as em, abbr, and cite add semantic information within sentences, marking text for emphasis and identifying abbreviations and citations, respectively. MathML, a markup language designed to maintain important distinctions between structure and presentation in mathematics, includes special "presentation" markup for the complex notations used to represent mathematical ideas as well as "content" (semantic) markup for the mathematical ideas themselves.
    
 	
    
 	
    
 		
    Examples
    
 		
    
 			
    Linking to another page
    
-			
    A paragraph contains a hyperlink to another page. The hyperlink is marked up using the a element.
       
-
    <p>Do you want to try our new tool yourself? A free demonstration
+			
    A paragraph contains a hyperlink to another page. The hyperlink is marked up using the a element.
       
+
    <p>Do you want to try our new tool yourself? A free demonstration
   version is available in our <a href="download.html">download section</a>
 </p>
    
       
    
       
    
-				
    Using cite and blockquote to reference a book and a quotation from it
    
-				
    A page about the history of marriage uses a quotation from Jane Austen's novel, Pride and Prejudice, as an example. The reference to the book is marked up using the cite element and the quotation itself is marked up using the blockquote element.
    
-
    <p>Marriage was considered a logical step for a bachelor, as can be seen in the
+				
    Using cite and blockquote to reference a book and a quotation from it
    
+				
    A page about the history of marriage uses a quotation from Jane Austen's novel, Pride and Prejudice, as an example. The reference to the book is marked up using the cite element and the quotation itself is marked up using the blockquote element.
    
+
    <p>Marriage was considered a logical step for a bachelor, as can be seen in the
    first chapter of the novel <cite>Pride and Prejudice</cite>:</p>
 <blockquote>
   <p>It is a truth universally acknowledged, that a single man in
@@ -44,22 +44,22 @@ 
    Using cite and 
-				
    Using the strong element to emphasize important text
    
-				
    A car manual explains how to start the engine. The instructions include a warning to make sure the gear is in neutral. The author feels the warning is so important that it should be emphasized so the warning is marked up using the strong element.
     
-
    <h1>How to start the engine</h1>
+				
    Using the strong element to emphasize important text
    
+				
    A car manual explains how to start the engine. The instructions include a warning to make sure the gear is in neutral. The author feels the warning is so important that it should be emphasized so the warning is marked up using the strong element.
     
+
    <h1>How to start the engine</h1>
 <p>Before starting the engine, <strong>make sure the gear is in neutral</strong>
    Next, turn the key in the ignition. The engine should start.</p>
    
       
    
       
    
-				
    Using the em and strong elements to emphasize text
    
+				
    Using the em and strong elements to emphasize text
    
          
-
    <p>What the user <em>really</em> meant to say was, 
+
    <p>What the user <em>really</em> meant to say was, 
    <q>This is not ok, it is <strong>excellent</strong>!</q>
 </p>
    
       
    
       
    
          
    Using highlighting and background color to visually and semantically identify important information
    
-
    <style>
+
    <style>
 .vocab {
   background-color:cyan;
   font-style:normal;
diff --git a/techniques/general/G117.html b/techniques/general/G117.html
index d781e5a0f4..2873decde4 100644
--- a/techniques/general/G117.html
+++ b/techniques/general/G117.html
@@ -25,7 +25,7 @@ 
    Examples
    
          
    Indicating new content with boldface and a text indicator
    
 				 
    The following example shows a list of accessibility standards. WCAG 2.2 is new, so is indicated in bold face. To avoid conveying information solely by presentation, the word "(new)" is included after it as well.
    
          
-
    <h2>Web Accessibility Guidelines</h2>
+
    <h2>Web Accessibility Guidelines</h2>
 <ul>
   <li><strong>WCAG 2.2 (New)</strong></li>
   <li>WCAG 2.1</li>
diff --git a/techniques/general/G120.html b/techniques/general/G120.html
index 046e1d435c..2340e8d1f5 100644
--- a/techniques/general/G120.html
+++ b/techniques/general/G120.html
@@ -25,7 +25,7 @@ 
    Examples
    
       
    
 				
    In the following example of Japanese text, the information giving the pronunciation in Han characters (Kanji) is rendered in parentheses immediately following the text.
    
          
-
    <p>慶應大学 (けいおうだいがく)</p>
    
+
    <p>慶應大学 (けいおうだいがく)</p>
    
       
    
 		
    
 		
    
diff --git a/techniques/general/G123.html b/techniques/general/G123.html
index 08f85eb977..6017f97efb 100644
--- a/techniques/general/G123.html
+++ b/techniques/general/G123.html
@@ -37,7 +37,7 @@ 
    Several sets of links
    
          
    HTML page with several blocks of navigation
    
 				 
    This example demonstrates both the use of heading elements at the beginning of each section (H69) and links that skip to the end of each section. This allows people to skip blocks of repeated content using keyboard navigation or using heading navigation, depending on the capabilities of their user agents.
    
          
-
    <a href="#content">skip navigation</a>
+
    <a href="#content">skip navigation</a>
 <h2><span id="main-label">Main</span> Navigation</h2>
 <nav aria-labelledby="main-label">
   <ul>
diff --git a/techniques/general/G130.html b/techniques/general/G130.html
index af80676e98..07396f97b5 100644
--- a/techniques/general/G130.html
+++ b/techniques/general/G130.html
@@ -23,7 +23,7 @@ 
    Description
    
       
    Examples
    
       
    
          
    An HTML page that describes the range of tasks for disaster preparation
    
-
    <h1>Disaster preparation</h1>
+
    <h1>Disaster preparation</h1>
 <h2>Flood preparation</h2>
 <h2>Fire preparation</h2>
    
          
diff --git a/techniques/general/G134.html b/techniques/general/G134.html
index d5f3049553..eb7fceb78e 100644
--- a/techniques/general/G134.html
+++ b/techniques/general/G134.html
@@ -29,7 +29,7 @@ 
    Description
    
 		
    Examples
    
 		
    
 			
    Validating HTML
    
-			
    HTML pages include a document type declaration (sometimes referred to as !DOCTYPE statement) and are valid according to the HTML version specified by the document type declaration. The developer can use off-line or online validators (see Resources section) to check the validity of the HTML pages.
    
+			
    HTML pages include a document type declaration (sometimes referred to as !DOCTYPE statement) and are valid according to the HTML version specified by the document type declaration. The developer can use off-line or online validators (see Resources section) to check the validity of the HTML pages.
    
     
    
     
    
 			
    Validating XML
    
@@ -37,8 +37,8 @@ 
    Validating XML
    
     
    
     
    
 			
    Batch validation with Ant
    
-      
    The xmlvalidate task of Apache Ant can be used for batch validation of XML files. The following Apache Ant target is a simple example for the validation of files with the extension .xml in the directory dev\\Web (relative to the Ant build file).
    
-
    <target name="validate-xml"> 
+      
    The xmlvalidate task of Apache Ant can be used for batch validation of XML files. The following Apache Ant target is a simple example for the validation of files with the extension .xml in the directory dev\\Web (relative to the Ant build file).
    
+
    <target name="validate-xml"> 
   <xmlvalidate lenient="no"> 
     <fileset dir="dev/web" includes="*.xml" /> 
   </xmlvalidate> 
diff --git a/techniques/general/G141.html b/techniques/general/G141.html
index d90d6457d8..ad74e6121a 100644
--- a/techniques/general/G141.html
+++ b/techniques/general/G141.html
@@ -18,14 +18,14 @@ 
    When to Use
    
 		
    
 			
    Description
    
       
    The objective of this technique is to ensure that sections have headings that identify them. Success Criterion 1.3.1 requires that the headings be marked such that they can be programmatically identified.
    
-      
    In HTML, this could be done using the HTML heading elements (h1, h2, h3, h4, h5, and h6). These allow user agents to automatically identify section headings. Other technologies use other techniques for identifying headers. To facilitate navigation and understanding of overall document structure, authors should use headings that are properly nested (e.g., h1 followed by h2, h2 followed by h2 or h3, h3 followed by h3 or h4, etc.).
    
+      
    In HTML, this could be done using the HTML heading elements (h1, h2, h3, h4, h5, and h6). These allow user agents to automatically identify section headings. Other technologies use other techniques for identifying headers. To facilitate navigation and understanding of overall document structure, authors should use headings that are properly nested (e.g., h1 followed by h2, h2 followed by h2 or h3, h3 followed by h3 or h4, etc.).
    
    
    
 	 
    
 		
    Examples
    
 		
    
 			
    Headings used to organize an HTML page
       
 			
    A page on cooking techniques uses a h1 element for the overall title, and h2 elements for major sections on cooking with oil vs cooking with butter, and h3 elements for sub-sections on oil-cooking techniques.
             
-
    <!doctype html>
+
    <!doctype html>
 <html lang="en">
   <head>
     <title>Cooking techniques</title>
@@ -75,7 +75,7 @@ 
    Resources
    
 				WebAIM: Semantic Structure
 			
 			
  • 
-				HTML - The h1, h2, h3, h4, h5, and h6 elements
+				HTML - The h1, h2, h3, h4, h5, and h6 elements
 			
    • 
 		
 	
    
diff --git a/techniques/general/G146.html b/techniques/general/G146.html
index 39a0a7c72c..0bf1f148f7 100644
--- a/techniques/general/G146.html
+++ b/techniques/general/G146.html
@@ -30,7 +30,7 @@ 
    Examples
    
 		
    
 			
    Simple liquid layout in HTML and CSS
    
 			
    The following fairly simple example uses HTML and CSS to create a liquid layout. The three columns adjust their size as text size is adjusted. When the total horizontal width exceeds the available width of the columns, the last column wraps to be positioned below, rather than beside, the previous column. The font size can be increased without either clipping or introducing horizontal scrolling until the longest word no longer fits in a column. This particular example uses percent sizes for the columns and defines them as floating regions using the "float" property.
    
-
    <!DOCTYPE html>
+
    <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
diff --git a/techniques/general/G166.html b/techniques/general/G166.html
index 7d3ba6fe29..5b17816873 100644
--- a/techniques/general/G166.html
+++ b/techniques/general/G166.html
@@ -22,7 +22,7 @@ 
    Description
    
 			
    Examples
    
       
    
 				
    A web page has a link to a video-only presentation of a spaceship landing on Mars. The link to the video is a picture of a spaceship. Near the video is a link to an audio file of a person describing the video. This would look something like the following code example in HTML.
    
-
    <a href="../video/marslanding.mp4">
+
    <a href="../video/marslanding.mp4">
   <img src="../images/spaceship.jpg" alt="Mars landing, video-only"
    width="193" height="255"/>
 </a>
diff --git a/techniques/general/G169.html b/techniques/general/G169.html
index f7df802a34..5a68bfd8e0 100644
--- a/techniques/general/G169.html
+++ b/techniques/general/G169.html
@@ -23,7 +23,7 @@ 
    Description
    
 			
    Examples
    
       
    
 				
    For most technologies, simply leave out any alignment declarations. For example, the following text will be justified to the left by default in HTML where the language of the page is left to right.
     
-	
    <p>Lorem ipsum dolor sit amet, ...</p>
    
+	
    <p>Lorem ipsum dolor sit amet, ...</p>
    
       
    
       
    
 				
    A web page includes sections with mixed alignment. Paragraphs in the body of the page are aligned to the left margin. The text also includes a number of pulled quotations which are aligned to the right margin.
     
diff --git a/techniques/general/G178.html b/techniques/general/G178.html
index 54845e4cb1..a3295e73ac 100644
--- a/techniques/general/G178.html
+++ b/techniques/general/G178.html
@@ -11,7 +11,7 @@
       
    
    Examples
    
       
      
-         
    • A newspaper article has two buttons near the top of the page. The "increase text size" button has a big letter "T" with an upward arrow and the "decrease text size" button has a small letter "T" with a down arrow. There is alt text on each button.
      • 
+         
    • A newspaper article has two buttons near the top of the page. The "increase text size" button has a big letter "T" with an upward arrow and the "decrease text size" button has a small letter "T" with a down arrow. There is alt text on each button.
      • 
          
    • A site has a number of style sheets with different text size. The user can choose any of the style sheets if their browser provides this functionality. Each page also includes the links "Increase text size" and "Decrease text size" that will change the style sheet currently applied to the appropriate alternate style sheet.
      • 
          
    • A site includes the text "Change text size:" followed by text links "Up" and "Down" on every web page. The links trigger a Javascript that alters the value of the text-size property accordingly.
      • 
          
    • A site includes a link on every page that reads "Change text size." The resulting page includes a series of links that includes options representing the available sizes. The links read, "Smallest font size," "Small font size," "Default font size," "Large font size," etc. Instructions preceding the list direct users to choose a link to change to the desired font size.
      • 
diff --git a/techniques/general/G188.html b/techniques/general/G188.html
index 3cc3e1797d..1eb5d4a5ea 100644
--- a/techniques/general/G188.html
+++ b/techniques/general/G188.html
@@ -26,7 +26,7 @@ 
      Description
      
 				
      Examples
      
 				
      
 					
      Use standard style page switching and have a button or link on the page that switches the stylesheet. The new stylesheet contains a rule to increase the line height and a class to increase the paragraph spacing.
      
-
      p {
+
      p {
   line-height: 1.5;
   margin-bottom: 2em;
 }
      
diff --git a/techniques/general/G189.html b/techniques/general/G189.html
index e26abf6ddf..48e3f54382 100644
--- a/techniques/general/G189.html
+++ b/techniques/general/G189.html
@@ -31,7 +31,7 @@ 
      Examples
      
 			
      Providing a Link to another Version
      
 			
      A web page lists books for download in different formats. Alternate versions of the web page use just the book format as the link text or the book title and format type.
      
 			
      Version with short link text:
               
-
      <h1>Books for download</h1>
+
      <h1>Books for download</h1>
 <p><a href="books-full-links.html">Full link Version</a></p>
 <ul>
   <li>The History of the Web: 
@@ -43,7 +43,7 @@ 
      Providing a Link to another Version
      
          
 			
      
 				
      Version with full link text:
      
-
      <h1>Books for download</h1>
+
      <h1>Books for download</h1>
 <p><a href="books-short-links.html">Short link Version</a></p>
 <ul>
   <li>The History of the Web: 
diff --git a/techniques/general/G196.html b/techniques/general/G196.html
index 7a76376fb8..f412cfe3ea 100644
--- a/techniques/general/G196.html
+++ b/techniques/general/G196.html
@@ -26,7 +26,7 @@ 
      Examples
      
 		
      
 			
      A rating system in HTML
      
 			
      In the following example, a rating is shown as three filled stars and two empty stars. While a text alternative could have been provided for each of the five images, the author has instead provided the rating in the form "3 out of 5 stars" for the first image and has marked the others using null alt text.
      
-
      <p>Rating: 
+
      <p>Rating: 
   <img src="star-filled" alt="3 out of 5 stars">
   <img src="star-filled" alt="">
   <img src="star-filled" alt="">
@@ -37,7 +37,7 @@ 
      A rating system in HTML
      
       
      
 				
      Buttons created with groups of images in HTML
      
 				
      In this example, each button has a set of images to indicate the level of conformance to WCAG being claimed. This approach makes it possible for assistive technologies to avoid announcing things like, "Image A, Image A, Image A" etc.
       
-
      <p>Conformance Level:</p>
+
      <p>Conformance Level:</p>
 <button name="A" type="button">
   <img src="a.png" alt="A">
 </button>
diff --git a/techniques/general/G201.html b/techniques/general/G201.html
index f0291bb672..8839243225 100644
--- a/techniques/general/G201.html
+++ b/techniques/general/G201.html
@@ -34,7 +34,7 @@ 
      Examples
      
 							
      Including the warning in the text describing a control
      
 							
      The name or label that describes a control can include the warning
                 about opening in a new window.
      
-
      <a href="knitting.html" rel="noopener" target="_blank">
+
      <a href="knitting.html" rel="noopener" target="_blank">
   All about Knitting (opens in new window)
 </a>
      
       
      
@@ -44,7 +44,7 @@ 
      Using CSS to provide a warning before opening a new window
      
             
      The code below uses CSS to provide a warning before opening a new
                 window.
      
          
-
      <!DOCTYPE html>
+
      <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
diff --git a/techniques/general/G205.html b/techniques/general/G205.html
index 191cca54b3..568c271ea2 100644
--- a/techniques/general/G205.html
+++ b/techniques/general/G205.html
@@ -25,7 +25,7 @@ 
      Examples
      
       
      
 				
      Required fields in an HTML form
      
 				
      The instructions for an online form say, "Required fields are shown in red and marked with (required)." The cue "(required)" is included within the label element.
      
-
      <style>
+
      <style>
   .required {
     color:#ec0000;
   }
diff --git a/techniques/general/G208.html b/techniques/general/G208.html
index 69cc569962..dbbe926dbf 100644
--- a/techniques/general/G208.html
+++ b/techniques/general/G208.html
@@ -39,17 +39,16 @@ 
      Examples
      
 	
      
 		
      Link text matches the beginning of the accessible name
      
 		
      A link contains visible text and hidden link text. Both together make up the link's accessible name. The visible text comes first. The idea is to make the link more descriptive for users of assistive technologies. 
      	
-		<p>Go to <a href="code-of-conduct.html">Code of conduct <span class="hidden_accessibly"> of ACME Corporation</span></a><p>
+		
      <p>Go to <a href="code-of-conduct.html">Code of conduct <span class="hidden_accessibly"> of ACME Corporation</span></a><p>
      
 	
      	
 
 	
      
 		
      Generic link text concatenated with heading
      
 		
      A generic link is combined with the heading of the paragraph to give context. It is a variation on the first example, this time using aria-labelledby. The advantage of this implementation is that it uses existing visible text on the page, and so is more likely to be properly translated during any localization transformations.
      
 
-				
-					<h4 id="poor">Insufficient Link Names Invade Community</h4>
      
+		
      <h4 id="poor">Insufficient Link Names Invade Community</h4>
      
 <p>Citizens are reeling from the growing invasion of useless "read more" links appearing in their online resources. <a href="poor.html" aria-labelledby="generic poor"><span id="generic">More...</span></a>
-      
+
      
 		
      
 		
      Insufficient Link Names Invade Community
      
 
      [The following link opens nothing] Citizens are reeling from the growing invasion of useless "read more" links appearing in their online resources. More...
      
@@ -58,14 +57,12 @@ 
      Insufficient Link Names Invade Community
      
 	
      
 		
      Link text included in aria-label
      
 		
      Where two strings cannot be grammatically or seamlessly combined using aria-labelledby, aria-label can be used to make a new name which includes the visible label.
      
-		
-			...end of news story. <a href="poor.html" aria-label="Read more about Insufficient link names">Read more</a>
-		
+		
      ...end of news story. <a href="poor.html" aria-label="Read more about Insufficient link names">Read more</a>
      
 	
      
 	
      		
 		
      The visible button text matches the beginning of the accessible name
      
 		
      The visible text inside a button element matches the beginning of accessible name, which also includes hidden text. The idea of the hidden text is to make the button more descriptive for users of assistive technologies.
      	
-		<button>Send <span class="accessibly-hidden"> Mail</span></button>			
+		
      <button>Send <span class="accessibly-hidden"> Mail</span></button>
      
 	
      
 
 
      
@@ -96,10 +93,10 @@ 
      Expected Results
      
 			
diff --git a/techniques/general/G211.html b/techniques/general/G211.html
index de0a859ae5..480fd0cbeb 100644
--- a/techniques/general/G211.html
+++ b/techniques/general/G211.html
@@ -32,8 +32,8 @@ 
      Examples
      
 			
      The accessible name should be assigned through native elements and semantics where possible. That helps ensure an exact match between the visible label and name.
      
 			
      
 			
      Anchor text provides both the link's label and its accessible name
      
-			
      Using conventional HTML, the text between the a element's tags provides both the link's visible text and the accessible name "Code of conduct":
      		
-			<p>Go to our <a href="url-to-page-about-code.html">Code of conduct</a></p>
+			
      Using conventional HTML, the text between the a element's tags provides both the link's visible text and the accessible name "Code of conduct":
      		
+			
      <p>Go to our <a href="url-to-page-about-code.html">Code of conduct</a></p>
      
 				
      
 			
      Non-working sample of anchor
      
 			
      Go to our Code of conduct
      
@@ -41,9 +41,9 @@ 
      Non-working sample of anchor
      
 			
      
 				
      
 
-		
      Text in label element provides name for input via for attribute
      
-		
      The text between the label tags also serves as the checkbox input's accessible name "Notify me of delays" by using the for attribute which references the id of the input.
      	
-
      <input type="checkbox" id="notification" name="notify" value="delays">
+		
      Text in label element provides name for input via for attribute
      
+		
      The text between the label tags also serves as the checkbox input's accessible name "Notify me of delays" by using the for attribute which references the id of the input.
      	
+
      <input type="checkbox" id="notification" name="notify" value="delays">
 <label for="notification">Notify me of delays</label>
 
      
       
      
@@ -55,8 +55,8 @@ 
      Working sample of input
      
 		
      			
 		
      The button text provides the accessible name
      
 
-		
      The text inside a button element becomes both its visible label and its accessible name:
      	
-		<button>Send</button>
+		
      The text inside a button element becomes both its visible label and its accessible name:
      	
+		
      <button>Send</button>
      
     
      
   		
      Non-working sample of button
      
   		
@@ -72,15 +72,13 @@ 
      Simple Radio Button Group
      
 				
 				
      The label for each component should be restricted to "Yes" and "No". To meet  1.3.1 Information and Relationships and  3.3.2 Labels or Instructions, the "Call me…" text can be coded to convey the relationship to ATs, in this example by using a fieldset and legend.
      
 				
      If the label is not restricted to the string adjacent to the radio button, multiple interpretations of what constitutes the label can result in less uniform functionality. If "Yes" alone is not the label for the first radio button, is it "Call me when balance exceeds $10,000"? Or is it a combination of text strings, in which case is the order "Call me when balance exceeds $10,000 Yes" or "Yes, Call me when balance exceeds $10,000"? Decisions to combine text strings can have negative effects on screen reader users since the order of concatenation can affect meaning. In this example, "No, call me when balance exceeds $10,000" could be very confusing to a screen reader user.
      
-				
-					<fieldset>
      
-					<legend>Call me when balance exceeds $10,000?</legend><br />
      
-					<input type="radio" id="yes" name="callme" value="yes">
      
-					<label for="yes">Yes</label>
      
-					<input type="radio" id="no" name="callme" value="no">
      
-					<label for="no">No</label>
      
-				</fieldset>
      
-			      
+				
      <fieldset>
+  <legend>Call me when balance exceeds $10,000?</legend><br />
+  <input type="radio" id="yes" name="callme" value="yes">
+  <label for="yes">Yes</label>
+  <input type="radio" id="no" name="callme" value="no">
+  <label for="no">No</label>
+</fieldset>
      
 				
      Working example of Simple Radio Button Group
      
 			
      
 			
      
@@ -106,23 +104,21 @@ 
      Stacked Labels
      
 				
 				
 				
      In Figure 3, the inputs are stacked and left-aligned, with the labels immediately preceding each input, also left-aligned. There is additional white space between the label and the preceding input so that the label is closest to its associated text input. Stacked labels are relatively common in mobile designs, where horizontal space is constrained.
      
-				
      Figure 4 shows a variation on stacked labels, where hints and guidance are included between the label and the input. This design does not provide an adjacent label. However, the "New Password" label is still considered to be in close enough proximity, especially given its size and boldness relative to the smaller and lower-contrast guidance text. The associations are reinforced programmatically, where the hint text is given a role of aria-describedby and the label is properly associated with the input.
      
+				
      Figure 4 shows a variation on stacked labels, where hints and guidance are included between the label and the input. This design does not provide an adjacent label. However, the "New Password" label is still considered to be in close enough proximity, especially given its size and boldness relative to the smaller and lower-contrast guidance text. The associations are reinforced programmatically, where the hint text is given a role of aria-describedby and the label is properly associated with the input.
      
 								
      
 					New Password. Passwords must be 10 or more characters, and contain at least one capital, numeric and non-alphanumeric.'
 					
      Figure 4 New Password label positioned above input with a smaller-point text string about the password requirements positioned between the large label and the input.
      
 				
      
 				
      The hint text in such implementations should be kept to a single line where possible, since accessibility issues can arise where a more lengthy hint separates the label from its input. Figure 4 illustrates that the concept of "adjacent text" is a guide for label interpretation, but cannot always serve as a hard rule.
      
-				
-				<form>
      
-			<label class="label" for="example-2">
      
-				Password
      
-			</label>
      
-			<span id="example-2-hint" class="hint">
      
-				Passwords must be 10 or more characters, and contain at least one capital, numeric and non-alphanumeric.
      
-			</span>
      
-			<input class="input" id="example-2" name="example-2" type="text" aria-describedby="example-2-hint">
      
-		</form>
      
-	      
+				
      <form>
+  <label class="label" for="example-2">
+    Password
+  </label>
+  <span id="example-2-hint" class="hint">
+    Passwords must be 10 or more characters, and contain at least one capital, numeric and non-alphanumeric.
+  </span>
+  <input class="input" id="example-2" name="example-2" type="text" aria-describedby="example-2-hint">
+</form>
      
 				
      Working example of stacked labels
      
 
 		
      
@@ -135,8 +131,8 @@ 
      Range of inputs with few labels
      
 					
      Figure 6 Line of 5 radio buttons with Hated it and Loved it labels at each end
      
 				
 				
-				
      The two labels, "Hated it" and "Loved it", are adjacent to the first and last radio buttons, and should be their accessible names. Speech-input users can speak either of these labels to select a radio button, and then use arrow navigation (e.g., "Press right arrow") to modify the selection. "Rate your response" is the text describing the whole widget and can be associated as the group label (here using legend). The three middle radio buttons do not have visible labels. In the code example they are given title attributes of "Disliked", "So-so" and "Liked" in order to meet 3.3.2 Labels or Instructions.
      
-				
      <fieldset>
+				
      The two labels, "Hated it" and "Loved it", are adjacent to the first and last radio buttons, and should be their accessible names. Speech-input users can speak either of these labels to select a radio button, and then use arrow navigation (e.g., "Press right arrow") to modify the selection. "Rate your response" is the text describing the whole widget and can be associated as the group label (here using legend). The three middle radio buttons do not have visible labels. In the code example they are given title attributes of "Disliked", "So-so" and "Liked" in order to meet 3.3.2 Labels or Instructions.
      
+				
      <fieldset>
   <legend>Rate your response</legend>
   <label for="hated">Hated it</label>
   <input type="radio" name="meal" id="hated" value="hated">
@@ -153,9 +149,9 @@ 
      Range of inputs with few labels
      
 		
      
 			
      Text in parentheses and punctuation
      
 			
      Technique G211 is not intended to complicate existing conventions for the construction of accessible form inputs. As described in the Punctuation and capitalization and Text in parentheses subsections of the Understanding document, information does not always need to be included in the accessible name in an attempt to meet the Label in Name requirement, especially where the text would not normally be spoken when using speech recognition to navigate to controls. Where there are established ways of ensuring information and relationships conveyed visually are present programmatically, it is acceptable to leave text in parentheses and punctuation out of the accessible name.
      
-			
      The following snippet demonstrates possible techniques mentioned in the Understanding document. Since the required field is programmatically indicated, and the input restrictions on the date are surfaced through aria-describedby, the asterisk and parenthetical information has been left out of the accessible name.
      
+			
      The following snippet demonstrates possible techniques mentioned in the Understanding document. Since the required field is programmatically indicated, and the input restrictions on the date are surfaced through aria-describedby, the asterisk and parenthetical information has been left out of the accessible name.
      
 
-
      
+
      
 <label for="name">Name</label> *
 <input type="text" name="name" id="name" required>
 <label for="birth">Birth date</label> <span id="mask">(YYYY-MM-DD)</span>
@@ -171,19 +167,16 @@ 
      Working sample of inputs with simplified accessible names
      
 
 
      
 
-				
      
-					
-						<fieldset>
      <legend>Rate your response</legend>
      
-    <label for="hated">Hated it</label> 
      
-    <input type="radio" name="meal" id="hated" value="hated">
      
-    <input type="radio" name="meal" id="poor" value="poor" title="Disliked">
      
-    <input type="radio" name="meal" id="neutral" value="neutral" title="So-so">
      
-    <input type="radio" name="meal" id="okay" value="okay" title="Liked">
      
-    <input type="radio" name="meal" id="loved" value="loved">
      
-    <label for="loved">Loved it</label>
      
-</fieldset>
      
-      
-
      
+			
      <fieldset>
+  <legend>Rate your response</legend>
+  <label for="hated">Hated it</label>
+  <input type="radio" name="meal" id="hated" value="hated">
+  <input type="radio" name="meal" id="poor" value="poor" title="Disliked">
+  <input type="radio" name="meal" id="neutral" value="neutral" title="So-so">
+  <input type="radio" name="meal" id="okay" value="okay" title="Liked">
+  <input type="radio" name="meal" id="loved" value="loved">
+  <label for="loved">Loved it</label>
+</fieldset>
      
 				
      Working example of range of inputs
      
 
 		
      
diff --git a/techniques/general/G55.html b/techniques/general/G55.html
index 2fcf3594f4..65f0d51e70 100644
--- a/techniques/general/G55.html
+++ b/techniques/general/G55.html
@@ -39,7 +39,7 @@ 
      Examples
      
 		
      
 		
      
 			
      A Japanese idiom is linked to its definition. This example uses a link within the page to navigate to the definition of an idiomatic expression.
      
-
      <p>...<a href="#definition">さじを投げる</a>...</p>
+
      <p>...<a href="#definition">さじを投げる</a>...</p>
 <h3>脚注：</h3>
 <dl>
   <dt id="definition">さじを投げる</dt>
diff --git a/techniques/general/G57.html b/techniques/general/G57.html
index 78f41b9126..82bd48853a 100644
--- a/techniques/general/G57.html
+++ b/techniques/general/G57.html
@@ -27,7 +27,7 @@ 
      Examples
      
 		
           
 			
      A web page from a museum exhibition contains a navigation bar containing a long list of links. The page also contains an image of one of the pictures from the exhibition, a heading for the picture, and a detailed description of the picture. The links in the navigation bar form a meaningful sequence. The heading, image, and text of the description also form a meaningful sequence. CSS is used to position the elements on the page.
      
 			
      HTML
      
-
      <h1>My Museum Page</h1>
+
      <h1>My Museum Page</h1>
 <ul id="nav">
   <li><a href="#">Link 1</a></li>
   ...
@@ -43,7 +43,7 @@ 
      HTML
      
 			
 			
      CSS
      
 			
-
      ul#nav {
+
      ul#nav {
   float: left;
   width: 9em;
   list-style-type: none;
diff --git a/techniques/general/G58.html b/techniques/general/G58.html
index af94c5e13b..0c15bbbd7d 100644
--- a/techniques/general/G58.html
+++ b/techniques/general/G58.html
@@ -26,7 +26,7 @@ 
      A .MOV Document in an HTML Document
      
 			
 			
      Code on a page called "olympic-sports.html"
      
 			
-
      <p id="olympic-wrestling">
+
      <p id="olympic-wrestling">
   <a href="/movies/olympic-wrestling.mov">Olympic wrestling movie</a>, 
   <a href="/transcripts/olympic-wrestling-transcript.html">Olympic 
    wrestling collated transcript</a>
@@ -37,7 +37,7 @@ 
      The link back to the .MOV Document in an HTML Document
      
 			
 			
      Code on the page olympic-wrestling-transcript.html
      
 			
-
      <p>Sports announcer 1: This is a great battle tonight between England's "Will Johnson"
+
      <p>Sports announcer 1: This is a great battle tonight between England's "Will Johnson"
    and "Theodore Derringo" from Argentina.</p>
 <p>Scenery: There is a mat set out in the middle of the stadium with 500 people in the 
    stands...</p>
diff --git a/techniques/general/G65.html b/techniques/general/G65.html
index 8840791356..60af1c4d81 100644
--- a/techniques/general/G65.html
+++ b/techniques/general/G65.html
@@ -27,12 +27,12 @@ 
      Examples
      
 			
      Photographer's portfolio
      
 			
      A photographer's portfolio website has been organized into different galleries and each gallery has further been divided into categories. A user who navigates through the website to a particular page containing a photo of a Gentoo penguin would see the following breadcrumb trail at the top of the web page:
      
 
-
      Home / Galleries / Antarctica / Penguins / Gentoo Penguin
      
+
      Home / Galleries / Antarctica / Penguins / Gentoo Penguin
      
 
-
      The markup for this example implements all of the text items except "Gentoo Penguin" as links. To provide semantic structure to the breadcrumb trail, the links are contained within a list element, which is nested within a nav element with an aria-label. The current location, Gentoo Penguin, is included as the last item in the breadcrumb trail but it is not implemented as a link to visually and semantically differentiate it from the previous items in the trail.
      
-
      The aria-current attribute is specified on the last list item in the trail to programmatically identify it as the item that reprsents the current web page. The markup would be styled using CSS to display the breadcrumb trail horizontally.
      
+
      The markup for this example implements all of the text items except "Gentoo Penguin" as links. To provide semantic structure to the breadcrumb trail, the links are contained within a list element, which is nested within a nav element with an aria-label. The current location, Gentoo Penguin, is included as the last item in the breadcrumb trail but it is not implemented as a link to visually and semantically differentiate it from the previous items in the trail.
      
+
      The aria-current attribute is specified on the last list item in the trail to programmatically identify it as the item that reprsents the current web page. The markup would be styled using CSS to display the breadcrumb trail horizontally.
      
       
-
      <nav aria-label="Breadcrumbs"> 
+
      <nav aria-label="Breadcrumbs"> 
   <ul>
     <li><a href="/">Home</a> /</li>
     <li><a href="/galleries">Galleries</a> /</li> 
@@ -50,11 +50,11 @@ 
      E-commerce site
      
 			
      The information architecture of an e-commerce website is categorized from general to increasingly more specific product subsections.
      
 			
      You are here: Acme Company → Electronics → Computers → Laptops
      
 			
      The trail begins with "You are here" and ends with the current page. Items in the trail are clickable or tappable links with the exception of "You are here", which is a static heading. This example uses a right arrow symbol (→) as a separator.
      
-			
      In this example a h2 element, a nav element with an aria-label attribute, and an unordered list are used to provide semantics. The markup would be styled using CSS to display the breadcrumb trail horizontally.
      
+			
      In this example a h2 element, a nav element with an aria-label attribute, and an unordered list are used to provide semantics. The markup would be styled using CSS to display the breadcrumb trail horizontally.
      
 			
      
 				
      HTML
      
 
-
      <nav aria-label="Breadcrumbs"> 
+
      <nav aria-label="Breadcrumbs"> 
   <h2>You are here:</h2> 
   <ul>
     <li><a href="/">Acme Company</a> &#8594;</li> 
@@ -70,7 +70,7 @@ 
      HTML
      
 
 				
      CSS
      
 
-
      h2, ul, ul li{ display: inline;}
+
      h2, ul, ul li{ display: inline;}
 nav > h2{ font-size: 1em; } 
 ul { padding-left: 0em; }
      
 
@@ -108,7 +108,7 @@ 
      Procedure
      
           
      For a breadcrumb trail that does include the current location and it behaves as a link:
      
           
        
 						
      1. Check that all elements are implemented as links.
        2. 
-						
      2. Check that the current location is programmatically identified as such (e.g., using the aria-current attribute).
        3. 
+						
      3. Check that the current location is programmatically identified as such (e.g., using the aria-current attribute).
        4. 
 					
      
         
 				
    • Check that all links navigate to the correct web page as specified by the breadcrumb trail.
      • 
diff --git a/techniques/general/G71.html b/techniques/general/G71.html
index 829b84a692..2359af1c7e 100644
--- a/techniques/general/G71.html
+++ b/techniques/general/G71.html
@@ -24,7 +24,7 @@ 
      Examples
      
 		
      
 			
      The example below shows a label element that includes a help link. Including the help link within the label element allows screen reader users to have access to the help link when interacting with the input form control.
      
          
-
      <form>
+
      <form>
   <label for="serial-number"><span>Serial Number</span>
   <a href="help.html" target="_blank">Help</a></label>
   <input type="text" name="serial-number" id="serial-number">
diff --git a/techniques/general/G76.html b/techniques/general/G76.html
index 0b82350079..7950908cee 100644
--- a/techniques/general/G76.html
+++ b/techniques/general/G76.html
@@ -40,7 +40,7 @@ 
      Examples
      
 							
      Providing a button to update content
      
             
      In HTML, a developer can provide a button or link that allows the user to update the content. For example, on a page with news items.
      
          
-
      <button type="button">Update this page</button>
      
+
      <button type="button">Update this page</button>
      
       
      
 		
      
 		
      
diff --git a/techniques/general/G83.html b/techniques/general/G83.html
index 8259610522..f09bbea3bc 100644
--- a/techniques/general/G83.html
+++ b/techniques/general/G83.html
@@ -3,7 +3,7 @@
    
      Description
      
       
      The objective of this technique is to notify the user when a field that must be completed has not been completed. When users fail to provide input for any mandatory form fields, information is provided in text to enable the users to identify which fields were omitted. One approach is to use client-side validation and provide an alert dialog box identifying the mandatory fields which were omitted. Another approach, using server-side validation, is to re-display the form (including any  previously entered data), with either a text description at the location of the omitted mandatory field, or a text description that identifies the omitted mandatory fields.
      
       
      
-         
      The best practice is to include a message or alert, as some users may not be aware that an error has occurred and could assume that the form is not functioning correctly. It is also best practice to include an error notification in the page title (title element) since a screen reader user is likely to believe the page was submitted correctly and continue to navigate to another page as soon as the new page is returned instead of reading the main content area of the page again.
      
+         
      The best practice is to include a message or alert, as some users may not be aware that an error has occurred and could assume that the form is not functioning correctly. It is also best practice to include an error notification in the page title (title element) since a screen reader user is likely to believe the page was submitted correctly and continue to navigate to another page as soon as the new page is returned instead of reading the main content area of the page again.
      
       
      
    
      Examples
      
       
        
diff --git a/techniques/general/G88.html b/techniques/general/G88.html
index e9adc805a2..bb00c747e7 100644
--- a/techniques/general/G88.html
+++ b/techniques/general/G88.html
@@ -35,7 +35,7 @@ 
        A title that lists the most important identifying information first
        
          
             
        A web page is published by a group within a larger organization. The title of the web page first identifies the topic of the page, then shows the group name followed by the name of the parent organization.
        
          
-
        <title>Working with us: The Small Group: The Big Organization</title>
        
+
        <title>Working with us: The Small Group: The Big Organization</title>
        
       
      
       
      
          
      A synchronized media presentation with a descriptive title
      
@@ -44,7 +44,7 @@ 
      A synchronized media presentation with a descriptive title
      
       
      
          
      A web page with a descriptive title in three parts
      
 				 
      A web page provides guidelines and suggestions for creating closed captions. The web page is part of a "sub-site" within a larger site. The title is separated into three parts by dashes. The first part of the title identifies the organization. The second part identifies the sub-site to which the web page belongs. The third part identifies the web page itself.
      
-
      <title>Computer Hardware Corporation - Laptop Division - Laptop FAQs</title>
      
+
      <title>Computer Hardware Corporation - Laptop Division - Laptop FAQs</title>
      
       
      
       
      
 				
      A newspaper web page
      
diff --git a/techniques/general/G89.html b/techniques/general/G89.html
index 2c2e323f13..b78347ea6b 100644
--- a/techniques/general/G89.html
+++ b/techniques/general/G89.html
@@ -28,7 +28,7 @@ 
      Examples
      
 			
      Date text input
      
 			
      The following HTML form control for a date indicates in the label that the date must be in day-month-year format, not month-day-year as many users in the United States may assume.
      
 			
-
      <label for="date">Date (dd-mm-yyyy)</label>
+
      <label for="date">Date (dd-mm-yyyy)</label>
 <input type="text" name="date" id="date">
 
      
 		
      
diff --git a/techniques/general/G91.html b/techniques/general/G91.html
index fc26701ce4..4498b6f465 100644
--- a/techniques/general/G91.html
+++ b/techniques/general/G91.html
@@ -22,8 +22,8 @@ 
      Description
      
 	
      
 		
      Examples
      
 		
      
-			
      Describing the purpose of a link in HTML in the text content of the a element
      
-
      <a href="routes.html">Current routes at Boulders Climbing Gym</a>
      
+			
      Describing the purpose of a link in HTML in the text content of the a element
      
+
      <a href="routes.html">Current routes at Boulders Climbing Gym</a>
      
 		
      
 	
      
 	
      
diff --git a/techniques/general/G96.html b/techniques/general/G96.html
index 25461b10fe..04b8a6c897 100644
--- a/techniques/general/G96.html
+++ b/techniques/general/G96.html
@@ -35,7 +35,7 @@ 
      Button referenced by position and accessible name
      
 
 			
      
 				
      The HTML
      
-
      <form class="wrapper">
+
      <form class="wrapper">
   <h1>Sign up to our mailing list</h1>
     <div role="note">
       Complete the form and then press the lower-right (<i>sign up</i>) button.
@@ -55,7 +55,7 @@ 
      The HTML
      
 			
      
 			
      
 				
      The CSS
      
-
      .wrapper{
+
      .wrapper{
   border:1px solid #aeaeae;
   display:grid;
   gap:1rem;
diff --git a/techniques/html/H100.html b/techniques/html/H100.html
index 348b453df9..ac85d839c1 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/H101.html b/techniques/html/H101.html
index d5aaf42812..319670b669 100644
--- a/techniques/html/H101.html
+++ b/techniques/html/H101.html
@@ -21,15 +21,15 @@ 
      Description
      
       
      Landmarks provide an easy way for users of assistive technology understand the programmatic structure of a page and skip over content they're not interested in. For instance, if a site's header, global navigation, main content area, and footer are marked up as landmarks, a screen reader user can easily skip to the landmark they're interested in without having to work their way through all the preceding content. A blind user who may be familiar with a news site's menu, and is only interested in getting to the top story, could easily navigate to the "main" landmark, and bypass dozens of menu links. In another circumstance, a user who is blind may want to quickly find a navigation menu, and can do so by jumping to the navigation landmark.
      
       
      Landmark regions are implicitly created when certain semantic HTML elements are used, which is different from using ARIA to explicitly create landmarks. These elements are:
      
       
        
-        
      • <header>: When a header is a direct child of the body element, it creates a banner role, a region that typically contains the site's logo, name, and other persistent site-wide content at the top of a page.
        • 
-        
      • <nav>: A region that contains navigation links to other pages or different parts of the same page.
        • 
-        
      • <main>: A region that contains a page's main content.
        • 
-        
      • <section>: A region that contains a generic section of a document or application. A section element isn't exposed as a landmark region unless it has an accessible name.
        • 
-        
      • <form>: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing. A form element isn't exposed as a landmark region unless it has an accessible name.
        • 
-        
      • <aside>: A region of the document that supports the main content, yet is separate and meaningful on its own.
        • 
-        
      • <footer>: A region that, when its nearest ancestor is the body element, contains information about the page such as copyrights and links to privacy statements.
        • 
+        
      • <header>: When a header is a direct child of the body element, it creates a banner role, a region that typically contains the site's logo, name, and other persistent site-wide content at the top of a page.
        • 
+        
      • <nav>: A region that contains navigation links to other pages or different parts of the same page.
        • 
+        
      • <main>: A region that contains a page's main content.
        • 
+        
      • <section>: A region that contains a generic section of a document or application. A section element isn't exposed as a landmark region unless it has an accessible name.
        • 
+        
      • <form>: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing. A form element isn't exposed as a landmark region unless it has an accessible name.
        • 
+        
      • <aside>: A region of the document that supports the main content, yet is separate and meaningful on its own.
        • 
+        
      • <footer>: A region that, when its nearest ancestor is the body element, contains information about the page such as copyrights and links to privacy statements.
        • 
       
      
-      
      Modern web browsers don't need to have the HTML element's related ARIA role added to them to be exposed as a landmark region. For example, <main role="main"> is unnecessary, and should just be <main>.
      
+      
      Modern web browsers don't need to have the HTML element's related ARIA role added to them to be exposed as a landmark region. For example, <main role="main"> is unnecessary, and should just be <main>.
      
       
      There are cases when a particular landmark role can be used more than once on a page, for example, primary and secondary blocks of navigation. In these cases, identical roles should be labeled using a valid technique for labelling regions.
      
       
      It is a best practice to include all content on the page in landmarks, so that screen reader users who rely on landmarks to navigate from section to section do not lose track of content.
      
   
      
@@ -39,7 +39,7 @@ 
      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>
@@ -50,8 +50,8 @@ 
      Simple landmarks
      
   
      
     
      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">
+    
      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">
   <h2 id="site-nav-heading">Site</h2>
   <ul>
     <li><a href="/news">News</a></li>  
@@ -71,7 +71,7 @@ 
      Multiple landmarks of the same type and aria-labelledby
      
   
      
     
      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>
@@ -90,8 +90,8 @@ 
      Multiple landmarks of the same type and aria-label
      
   
      
   
      
     
      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">
+    
      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">
   <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>
@@ -104,7 +104,7 @@ 
      Tests
      
     
      Procedure
      
     
        
       
      1. Examine each HTML element that creates a landmark role.
        2. 
-      
      2. Examine whether the correct element has been used to mark up content. For example: a nav element has been used to mark up a section with navigation links, or the main element is used to contain the page's main content.
        3. 
+      
      3. Examine whether the correct element has been used to mark up content. For example: a nav element has been used to mark up a section with navigation links, or the main element is used to contain the page's main content.
        4. 
       
      4. If a landmark region needs to have an accessible name to be exposed as a landmark, check to see that there is an accessible name.
        5. 
     
      
   
      
diff --git a/techniques/html/H102.html b/techniques/html/H102.html
index 310b6aa970..de372f78e7 100644
--- a/techniques/html/H102.html
+++ b/techniques/html/H102.html
@@ -5,7 +5,7 @@
 		
    
 	 
-		
      Creating modal dialogs with the HTML dialog element
      
+		
      Creating modal dialogs with the HTML dialog element
      
 		
      
 			
      ID: 
      
 			
      Technology: html
      
@@ -17,24 +17,24 @@ 
      When to Use
      
 		
      
 		
      
 			
      Description
      
-			
      Website authors often use modal dialogs to focus a user's attention on information, or a task-related activity beyond the scope of the primary page's content. Modal dialogs can be built in markup using ARIA's dialog role and related attributes, or the HTML's dialog element. As well as meeting the first rule of ARIA, the HTML dialog element offers several advantages to its ARIA counterpart, with the browser handling these features:
      
+			
      Website authors often use modal dialogs to focus a user's attention on information, or a task-related activity beyond the scope of the primary page's content. Modal dialogs can be built in markup using ARIA's dialog role and related attributes, or the HTML's dialog element. As well as meeting the first rule of ARIA, the HTML dialog element offers several advantages to its ARIA counterpart, with the browser handling these features:
      
       
        
-        
      • keyboard focus is moved to the newly-opened modal dialog;
        • 
-        
      • keyboard focus returns to the invoking element (assuming the element is still on the page) when the modal dialog is closed;
        • 
-        
      • keyboard focus is limited to the contents of the modal dialog and the browser's chrome (e.g., the browser-specific UI, such as the address bar, etc.);
        • 
-        
      • the page's content 'outside' of the modal dialog becomes inert, resulting in the content becoming hidden from assistive technologies, and inoperable to all users, so long as the modal dialog remains open;
        • 
-        
      • the use of the Escape key to close the modal dialog.
        • 
+        
      • keyboard focus is moved to the newly-opened modal dialog;
        • 
+        
      • keyboard focus returns to the invoking element (assuming the element is still on the page) when the modal dialog is closed;
        • 
+        
      • keyboard focus is limited to the contents of the modal dialog and the browser's chrome (e.g., the browser-specific UI, such as the address bar, etc.);
        • 
+        
      • the page's content 'outside' of the modal dialog becomes inert, resulting in the content becoming hidden from assistive technologies, and inoperable to all users, so long as the modal dialog remains open;
        • 
+        
      • the use of the Escape key to close the modal dialog.
        • 
       
      
-      
      This technique uses the HTML dialog element rather than a custom ARIA implementation, reducing the level of effort to create an accessible modal dialog.
      
+      
      This technique uses the HTML dialog element rather than a custom ARIA implementation, reducing the level of effort to create an accessible modal dialog.
      
    
      Examples
      
       
      
          
      A dialog to sign up to a mailing list
      
-				 
      This is an example of using a modal dialog element to show a mailing-list sign-up form to a user. The main part of the page contains a button element that, when activated, invokes the modal dialog. The button uses the type attribute to tell the browser that this isn't a submit button.
      
+				 
      This is an example of using a modal dialog element to show a mailing-list sign-up form to a user. The main part of the page contains a button element that, when activated, invokes the modal dialog. The button uses the type attribute to tell the browser that this isn't a submit button.
      
 				 
-				 
      When the modal dialog is opened, the browser will treat all content outside of the modal dialog as inert, rendering it inoperable and hiding the content from assistive technology. For example, a screen reader will not be able to reach or announce any of the inert content. Additionally, because the page content is inert, keyboard focus will only be able to reach focusable elements within the dialog element, and the browser's controls. When invoked, the browser automatically sets focus to the first focusable element in the dialog's DOM. In this example the h1 element will receive focus because it has a tabindex="-1" attribute. Note that, although the dialog's close button is visibly before the h1, it is the last item in the dialog's DOM. If the button was first, it would receive focus when dialog was opened.
      
+				 
      When the modal dialog is opened, the browser will treat all content outside of the modal dialog as inert, rendering it inoperable and hiding the content from assistive technology. For example, a screen reader will not be able to reach or announce any of the inert content. Additionally, because the page content is inert, keyboard focus will only be able to reach focusable elements within the dialog element, and the browser's controls. When invoked, the browser automatically sets focus to the first focusable element in the dialog's DOM. In this example the h1 element will receive focus because it has a tabindex="-1" attribute. Note that, although the dialog's close button is visibly before the h1, it is the last item in the dialog's DOM. If the button was first, it would receive focus when dialog was opened.
      
          
      
             
      The HTML
      
-
      <!doctype html>
+
      <!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
@@ -74,7 +74,7 @@ 
      The HTML
      
          
      
          
      
            
      The CSS
      
-
      *, *::after, *::before {
+
      *, *::after, *::before {
   box-sizing: inherit;
 }
 
@@ -151,10 +151,10 @@ 
      The CSS
      
          
      
          
      
 		
      The JavaScript
      
-		
      The script is necessary to display the dialog when invoked. The HTML dialog element can be opened using two different commands: show() (for non-modal dialogs), and  showModal() (for modal dialogs) - used in this example.
      
-		 
      Note: instead of writing a function to close the dialog, the close button is nested within a separate form element with a method="dialog" attribute. This method allows the dialog to be closed when activating this button, and the browser will handle returning keyboard focus to the invoking element, 
      
+		
      The script is necessary to display the dialog when invoked. The HTML dialog element can be opened using two different commands: show() (for non-modal dialogs), and  showModal() (for modal dialogs) - used in this example.
      
+		 
      Note: instead of writing a function to close the dialog, the close button is nested within a separate form element with a method="dialog" attribute. This method allows the dialog to be closed when activating this button, and the browser will handle returning keyboard focus to the invoking element, 
      
          
-
      document.addEventListener("DOMContentLoaded", function(e){
+
      document.addEventListener("DOMContentLoaded", function(e){
   const d = document.querySelector("dialog");
   const btnOpen = document.querySelector(".open-modal");
 
@@ -168,11 +168,11 @@ 
      The JavaScript
      
    
      Tests
      
       
      Procedure
      
          
        
-            
      1. Find the components on the page that invoke modal dialog elements.
        2. 
-            
      2. Check that each dialog can be opened using the keyboard to activate the invoking element (for example, activate a button by pressing the Enter key or Spacebar.
        3. 
-            
      3. When the modal dialog is opened, check that focus has moved to it / one of its focusable descendants.
        4. 
-            
      4. While the modal dialog is open, check that keyboard focus cannot move to elements of the primary document.
        5. 
-						
      5. When the modal dialog is closed, check that focus is placed back onto the invoking element, if the element still exists on the page.
        6. 
+            
      6. Find the components on the page that invoke modal dialog elements.
        7. 
+            
      7. Check that each dialog can be opened using the keyboard to activate the invoking element (for example, activate a button by pressing the Enter key or Spacebar.
        8. 
+            
      8. When the modal dialog is opened, check that focus has moved to it / one of its focusable descendants.
        9. 
+            
      9. While the modal dialog is open, check that keyboard focus cannot move to elements of the primary document.
        10. 
+						
      10. When the modal dialog is closed, check that focus is placed back onto the invoking element, if the element still exists on the page.
        11. 
          
      
       
      
       
      Expected Results
      
@@ -196,10 +196,10 @@ 
      Related Techniques
      
 		
      Resources
      
 		
        
 			
      • 
-				HTML - the dialog element.
+				HTML - the dialog element.
 			
        • 
 			
      • 
-				HTML - the button element.
+				HTML - the button element.
 			
        • 
 			
      • 
 				ARIA Authoring Practices Guide - dialog (modal) pattern.
diff --git a/techniques/html/H2.html b/techniques/html/H2.html
index 36fac57552..6ca135bf07 100644
--- a/techniques/html/H2.html
+++ b/techniques/html/H2.html
@@ -18,25 +18,25 @@ 
        When to Use
        
    
        
       
        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.
         
+      
        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.
         
-      
        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.
        
+      
        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.
        
    
        
    
        
       
        Examples
        
       
        
          
-         
        The icon and text are contained in the same a element.
        
+         
        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>
        
       
        
       
        
-         
        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">
+
        <a href="home.html">
   <img src="house.gif" alt="home page icon">Go to the home page
 </a>
        
       
        
@@ -45,10 +45,10 @@ 
        Examples
        
       
        Tests
        
       
        
          
        Procedure
        
-         
        For each a applying this technique:
        
+         
        For each a applying this technique:
        
          
          
-            
        1. Check that every img element contained within the a element has a null value set for its alt attribute.
          2. 
-            
        2. Check that the a element contains an img element that has either a null alt attribute value or a value that supplements the link text and describes the image
          3. 
+            
        3. Check that every img element contained within the a element has a null value set for its alt attribute.
          4. 
+            
        4. Check that the a element contains an img element that has either a null alt attribute value or a value that supplements the link text and describes the image
          5. 
          
        
       
        
       
        
diff --git a/techniques/html/H24.html b/techniques/html/H24.html
index 3b045d742e..5cb53db606 100644
--- a/techniques/html/H24.html
+++ b/techniques/html/H24.html
@@ -5,7 +5,7 @@
       
    
    
-      
        Providing text alternatives for the area elements of image maps
        
+      
        Providing text alternatives for the area elements of image maps
        
       
        
          
        ID: H24
        
          
        Technology: html
        
@@ -13,23 +13,23 @@ 
        Providing text alternatives for the area
       
        
       
        
          
        When to Use
        
-      
        HTML documents that contain area elements.
        
+      
        HTML documents that contain area elements.
        
    
        
    
        
       
        Description
        
       
        The objective of this technique is to provide text alternatives that serve the same
             purpose as the selectable regions of an image map. An image map is an image divided into
-            selectable regions defined by area elements. Each area is a link to another
-            web page or another part of the current web page. The alt attribute of each
-              area element serves the same purpose as the selectable area of the
+            selectable regions defined by area elements. Each area is a link to another
+            web page or another part of the current web page. The alt attribute of each
+              area element serves the same purpose as the selectable area of the
           image.
        
    
        
    
        
       
        Examples
        
       
        
-         
        This example uses the alt attribute of the area element to provide text that describes the purpose of the image map areas.
        
+         
        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">
@@ -41,11 +41,11 @@ 
        Examples
        
       
        Tests
        
       
        
          
        Procedure
        
-         
        For each area element in an image map:
        
+         
        For each area element in an image map:
        
          
          
-            
        1. Check that the area element has an alt attribute.
          2. 
-            
        2. Check that the text alternative specified by the alt attribute serves the same
-                  purpose as the part of image map image referenced by the area element
+            
        3. Check that the area element has an alt attribute.
          4. 
+            
        4. Check that the text alternative specified by the alt attribute serves the same
+                  purpose as the part of image map image referenced by the area element
                   of the image map.
          5. 
          
        
       
        
diff --git a/techniques/html/H25.html b/techniques/html/H25.html
index ec1f90c124..b0747e6504 100644
--- a/techniques/html/H25.html
+++ b/techniques/html/H25.html
@@ -17,15 +17,15 @@ 
        When to Use
        
       
        
       
        
          
        Description
        
-         
        All HTML documents, including those in frames, have a title element in the head section that defines in a simple phrase the purpose of the document. This helps users to orient themselves within the site quickly without having to search for orientation information in the body of the page.
        
-         
        Note that the (mandatory) title element, which only appears once in a document, is different from the title attribute, which may be applied to almost every HTML element.
        
+         
        All HTML documents, including those in frames, have a title element in the head section that defines in a simple phrase the purpose of the document. This helps users to orient themselves within the site quickly without having to search for orientation information in the body of the page.
        
+         
        Note that the (mandatory) title element, which only appears once in a document, is different from the title attribute, which may be applied to almost every HTML element.
        
    
        
    
        
       
        Examples
        
       
           
          
        This example defines a document's title.
        
          
-
        <!doctype html>
+
        <!doctype html>
 <html lang="en">
   <head>
     <title>The World Wide Web Consortium</title>     
@@ -41,8 +41,8 @@ 
        Tests
        
       
        
          
        Procedure
        
          
          
-            
        1. Examine the source code of the HTML document and check that a non-empty title element appears in the head section.
          2. 
-            
        2. Check that the title element describes the document.
          3. 
+            
        3. Examine the source code of the HTML document and check that a non-empty title element appears in the head section.
          4. 
+            
        4. Check that the title element describes the document.
          5. 
          
        
       
        
       
        
@@ -63,7 +63,7 @@ 
        Related Techniques
        
    
        Resources
        
    
    
        
diff --git a/techniques/html/H28.html b/techniques/html/H28.html
index 48ca06c97b..2de8bc79c0 100644
--- a/techniques/html/H28.html
+++ b/techniques/html/H28.html
@@ -17,7 +17,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.
        
             
        This technique has been altered from a sufficient technique to an advisory technique because it uses the title attribute of abbr to provide the expansion of the abbreviation needed to achieve a sufficient technique when used in combination with G102. As noted in the  specification:
        
 
                
        Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g., requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).
        
@@ -26,14 +26,14 @@ 
        Description
        
    
        
       
        Examples
        
       
        
-         
        Using abbr element to expand abbreviations
        
-
        <p>Sugar is commonly sold in 5 <abbr title="pound">lb.</abbr> bags.</p>
+         
        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>
        
       
        
 
       
        
-         
        Using dfn and abbr element to define abbreviations
        
-
        <p>Tasini 
+         
        Using dfn and abbr element to define abbreviations
        
+
        <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 
@@ -42,13 +42,13 @@ 
        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>
        
+         
        Using the abbr element to expand an acronym
        
+         
        <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>
        
+         
         Using the abbr element to expand an initialism
        
+         
        <p><abbr title="British Broadcasting Corporation">BBC</abbr></p>
        
       
        
 
    
        
@@ -57,7 +57,7 @@ 
        Tests
        
       
        
          
        Procedure
        
          
          
-            
        1. Check that an expansion or definition is provided for each abbreviation via abbr.
          2. 
+            
        2. Check that an expansion or definition is provided for each abbreviation via abbr.
          3. 
          
        
       
        
       
        
@@ -77,10 +77,10 @@ 
        Related Techniques
        
       
        Resources
        
       
        
 		
        
 			
        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>
        
 		
        
     
        
-			
        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> 
        
     
        
     
        
-			
        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>
        
@@ -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.html">
+
        <a href="prod_123_feedback.html">
   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>
@@ -83,12 +83,12 @@ 
        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 the text of the link describes the purpose of the link.
          5. 
-			
        5. If the a element only contains text, check that the text describes
+			
        6. 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.
          7. 
+			
        7. If the a element only contains text, check that the text describes
 						the purpose of the link.
          8. 
 		
        
     
        
diff --git a/techniques/html/H32.html b/techniques/html/H32.html
index fd0eb641d7..0236db7311 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"> 
@@ -38,7 +38,7 @@ 
        Tests
        
          
        Procedure
        
          
          
             
        1. Find all forms in the content.
          2. 
-            
        2. For each form, check that it has a submit button (<input type="submit">, <input type="image">, or <button type="submit">).
          3. 
+            
        3. For each form, check that it has a submit button (<input type="submit">, <input type="image">, or <button type="submit">).
          4. 
          
        
       
        
       
        
@@ -60,10 +60,10 @@ 
        Related Techniques
        
    
        Resources
        
    
    
        
diff --git a/techniques/html/H33.html b/techniques/html/H33.html
index 80c928edcd..5af641e0d4 100644
--- a/techniques/html/H33.html
+++ b/techniques/html/H33.html
@@ -17,14 +17,14 @@ 
        When to Use
        
     
        
 	  
        
 		  
        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.
        
+      
        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="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>
        
@@ -36,7 +36,7 @@ 
        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.
          3. 
          
        
       
        
       
        
@@ -57,7 +57,7 @@ 
        Related Techniques
        
 			
        Resources
        
 			
    
        
diff --git a/techniques/html/H34.html b/techniques/html/H34.html
index 316ece3d5d..96fe7f1768 100644
--- a/techniques/html/H34.html
+++ b/techniques/html/H34.html
@@ -24,8 +24,8 @@ 
        Description
        
             are described in Inline markup and bidirectional text in HTML.
        
             
        Unicode right-to-left marks and left-to-right marks can be entered directly or by means of character entities or numeric character references, as shown here.
        
       
          
-         
        • left-to-right mark: &lrm; or &#x200e; (U+200E)
          • 
-         
        • right-to-left mark: &rlm; or &#x200f; (U+200F)
          • 
+         
        • left-to-right mark: &lrm; or &#x200e; (U+200E)
          • 
+         
        • right-to-left mark: &rlm; or &#x200f; (U+200F)
          • 
       
        
       
        Due to the bidi algorithm, a source code editor may not display character entities or numeric character references as expected.
        
    
        
diff --git a/techniques/html/H35.html b/techniques/html/H35.html
index cd2c491059..f15fc9c37c 100644
--- a/techniques/html/H35.html
+++ b/techniques/html/H35.html
@@ -5,13 +5,13 @@
   Use embed or object instead.
 obsoleteSince: 20
 ---
- Providing text alternatives on applet elements 
         Providing text alternatives on applet elements 
        ID: H35
        Technology: html
        Type: Technique
        When to Use
        
-      
         HTML and XHTML Documents that load Java applets where applet is not deprecated.
+ Providing text alternatives on applet elements 
         Providing text alternatives on applet elements 
        ID: H35
        Technology: html
        Type: Technique
        When to Use
        
+      
         HTML and XHTML Documents that load Java applets where applet is not deprecated.
           
        
    
        Description
        
-      
         Provide a text alternative for an applet by using the alt attribute to label an applet
+      
         Provide a text alternative for an applet by using the alt attribute to label an applet
             and providing the text alternative in the body of the applet element. In this technique, both mechanisms
-            are required due to the varying support of the alt attribute and applet body text by
+            are required due to the varying support of the alt attribute and applet body text by
             user agents. 
        
    
        Examples
        
       
        
@@ -24,7 +24,7 @@ 
        An applet to play the tic-tac-toe game. 
        
       
        Procedure
        
          
          
             
        1.  View the source code of the applet element 
          2. 
-            
        2.  Check that the applet element contains an alt attribute with a text alternative
+            
        3.  Check that the applet element contains an alt attribute with a text alternative
                   for the applet 
          4. 
             
        4.  Check that the applet element contains a text alternative for the applet in the
                   body of the applet element 
          5. 
diff --git a/techniques/html/H36.html b/techniques/html/H36.html
index 6435aff9db..4150e091ee 100644
--- a/techniques/html/H36.html
+++ b/techniques/html/H36.html
@@ -5,7 +5,7 @@
       
    
    
-      
          Using alt attributes on images used as submit buttons
          
+      
          Using alt attributes on images used as submit buttons
          
       
          
          
          ID: H36
          
          
          Technology: html
          
@@ -17,14 +17,14 @@ 
          When to Use
          
       
          
       
          
          
          Description
          
-         
          For input elements of type image, the alt attribute of the input element is used to provide a functional label. This label indicates the button's function, but does not attempt to describe the image. The label is especially important if there are multiple submit buttons on the page that each lead to different results.
          
+         
          For input elements of type image, the alt attribute of the input element is used to provide a functional label. This label indicates the button's function, but does not attempt to describe the image. The label is especially important if there are multiple submit buttons on the page that each lead to different results.
          
       
          
       
          
          
          Examples
          
          
          
-            
          An input element with an alt attribute
          
+            
          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">
@@ -36,8 +36,8 @@ 
          Tests
          
       
          
          
          Procedure
          
          
            
-            
          1. For all input elements that have a type attribute value of image, check for the presence of an alt attribute.
            2. 
-            
          2. Check that the value of the alt attribute describes the button's function.
            3. 
+            
          3. For all input elements that have a type attribute value of image, check for the presence of an alt attribute.
            4. 
+            
          4. Check that the value of the alt attribute describes the button's function.
            5. 
          
          
       
          
       
          
@@ -56,7 +56,7 @@ 
          Related Techniques
          
    
          
       
          Resources
          
       
    
          
 
diff --git a/techniques/html/H37.html b/techniques/html/H37.html
index e38d9cd6ba..86345ad764 100644
--- a/techniques/html/H37.html
+++ b/techniques/html/H37.html
@@ -5,7 +5,7 @@
 	
 
 
-	
          Using alt attributes on img elements
          
+	
          Using alt attributes on img elements
          
 	
          
 		
          ID: H37
          
 		
          Technology: html
          
@@ -17,8 +17,8 @@ 
          When to Use
          
    
          
 	 
          
 		 
          Description
          
-		 
          When using the img element, specify a short text alternative with the
-            alt attribute. Note. The value of this attribute is referred to as "alt
+		 
          When using the img element, specify a short text alternative with the
+            alt attribute. Note. The value of this attribute is referred to as "alt
             text".
          
       
          When an image contains words that are important to understanding the content, the alt
             text should include those words. This will allow the alt text to play the same function
@@ -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.">
          
       
          
       
          
@@ -48,8 +48,8 @@ 
          Tests
          
       
          
 		   
          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. Examine each img element in the content.
            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.
            6. 
          
          
       
          
@@ -70,8 +70,8 @@ 
          Related Techniques
          
 	
          
 		
          Resources
          
        
    
          
diff --git a/techniques/html/H39.html b/techniques/html/H39.html
index 9bb73fda25..8cab67d725 100644
--- a/techniques/html/H39.html
+++ b/techniques/html/H39.html
@@ -5,7 +5,7 @@
 	
 
 
-	
          Using caption elements to associate data table captions with data tables
          
+	
          Using caption elements to associate data table captions with data tables
          
 	
          
 		
          ID: H39
          
 		
          Technology: html
          
@@ -18,17 +18,17 @@ 
          When to Use
          
 	 
          
 		 
          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.
          
+            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.
          
       
          
-         
          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.
          
+         
          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.
          
       
          
    
          
 	 
          
 		 
          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>
          
@@ -40,8 +40,8 @@ 
          Tests
          
 				
          Procedure
          
         
          For each data table:
          
         
            
-          
          1. Check that the table includes a caption element.
            2. 
-          
          2. Check that the text that titles or describes the table is included in the caption element.
            3. 
+          
          3. Check that the table includes a caption element.
            4. 
+          
          4. Check that the text that titles or describes the table is included in the caption element.
            5. 
         
          
       
          
       
          
@@ -61,7 +61,7 @@ 
          Related Techniques
          
 	
          
 		
          Resources
          
 		
    
          
 	
diff --git a/techniques/html/H4.html b/techniques/html/H4.html
index 383f7fcec1..b28cb3dfd5 100644
--- a/techniques/html/H4.html
+++ b/techniques/html/H4.html
@@ -12,13 +12,13 @@
             to introduce usability bugs when setting the tab order explicitly.
          
       
          In some cases, the author may want to specify a tab order that follows relationships in
             the content without following the order of the interactive elements in the code. In
-            these cases, an alternative order can be specified using the tabindex
-            attribute of the interactive element. The tabindex is given a value between
-            0 and 32767. 
          
+            these cases, an alternative order can be specified using the tabindex
+            attribute of the interactive element. The tabindex is given a value between
+            0 and 32767. 
          
       
          When the interactive elements are navigated using the tab key, the elements are given
-            focus in increasing order of the value of their tabindex attribute.
-            Elements that have a tabindex value higher than zero will receive focus
-            before elements without a tabindex or a tabindex of 0. After
+            focus in increasing order of the value of their tabindex attribute.
+            Elements that have a tabindex value higher than 0 will receive focus
+            before elements without a tabindex or a tabindex of 0. After
             all of the elements with a tabindex higher than 0 have received focus, the rest of the
             interactive elements are given focus in the order in which they appear in the web
           page.
          
@@ -31,7 +31,7 @@
                 the bride in the second column. The order in the content is row by row but the
                 author feels it is more logical to navigate the form column by column. This way, all
                 the groom's criteria can be filled in before moving on to the bride's criteria. The
-                  tabindex attributes of the input fields are used to specify a tab
+                  tabindex attributes of the input fields are used to specify a tab
                 order that navigates column by column.
          
          
          
          <form action="#" method="post">
@@ -78,9 +78,9 @@
       
          
          
             
          
-								       Tabindex values need not be sequential nor must they begin with any
+								       tabindex values need not be sequential nor must they begin with any
                 particular value. The values do not have to be unique. Elements that have identical
-                  tabindex values are navigated in the order they appear in the
+                  tabindex values are navigated in the order they appear in the
                 character stream. 
          
          
          
@@ -100,9 +100,9 @@
    
          Tests
          
       
          Procedure
          
          
            
-            
          1. Check if tabindex is used
            2. 
-            
          2. If tabindex is used, check that the tab order specified by the
-                    tabindex attributes follows relationships in the content.
            3. 
+            
          3. Check if tabindex is used
            4. 
+            
          4. If tabindex is used, check that the tab order specified by the
+                    tabindex attributes follows relationships in the content.
            5. 
          
          
       
          
       
          Expected Results
          
diff --git a/techniques/html/H40.html b/techniques/html/H40.html
index 8b8f881d47..545b5d9031 100644
--- a/techniques/html/H40.html
+++ b/techniques/html/H40.html
@@ -17,14 +17,14 @@ 
          When to Use
          
    
          
    
          
       
          Description
          
-      
          The objective of this technique is to provide the description of names or terms by presenting them in a description list. The list is marked up using the dl element. Within the list, each term is put in a separate dt element, and its description goes in the dd element directly following it. Multiple terms can be associated with a single description, as can a single term with multiple descriptions, provided that semantic sequence is maintained. The title attribute can be used to provide additional information about the description list. Usage of description lists ensures that terms and their descriptions are semantically related even as presentation format changes, as well as ensuring that these terms and descriptions are semantically grouped as a unit.
          
+      
          The objective of this technique is to provide the description of names or terms by presenting them in a description list. The list is marked up using the dl element. Within the list, each term is put in a separate dt element, and its description goes in the dd element directly following it. Multiple terms can be associated with a single description, as can a single term with multiple descriptions, provided that semantic sequence is maintained. The title attribute can be used to provide additional information about the description list. Usage of description lists ensures that terms and their descriptions are semantically related even as presentation format changes, as well as ensuring that these terms and descriptions are semantically grouped as a unit.
          
       
          Description lists are easiest to use when the descriptions are ordered alphabetically. A common use for description lists is a glossary of terms.
          
    
          
    
          
       
          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 
@@ -54,11 +54,11 @@ 
          Tests
          
          
          Procedure
          
          
          For any set of terms and their associated descriptions:
          
          
            
-            
          1. Check that the list is contained within a dl element.
            2. 
-            
          2. Check that each term in the list being described is contained within a dt element.
            3. 
-            
          3. Check that when there is more than one term that shares the same description that the dt elements immediately follow each other.
            4. 
-            
          4. Check that the description for each term is contained in one or more dd elements.
            5. 
-            
          5. Check that the one or more dd elements immediately follow the one or more dt elements containing the term being described.
            6. 
+            
          6. Check that the list is contained within a dl element.
            7. 
+            
          7. Check that each term in the list being described is contained within a dt element.
            8. 
+            
          8. Check that when there is more than one term that shares the same description that the dt elements immediately follow each other.
            9. 
+            
          9. Check that the description for each term is contained in one or more dd elements.
            10. 
+            
          10. Check that the one or more dd elements immediately follow the one or more dt elements containing the term being described.
            11. 
          
          
       
          
       
          
@@ -78,7 +78,7 @@ 
          Related Techniques
          
       
          Resources
          
       
    
          
diff --git a/techniques/html/H42.html b/techniques/html/H42.html
index 4cb619185e..2ff389e697 100644
--- a/techniques/html/H42.html
+++ b/techniques/html/H42.html
@@ -24,9 +24,9 @@ 
          Examples
          
          
          
             
          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.
          
+            
          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>
@@ -50,12 +50,12 @@ 
          Hierarchical Heading Organization
          
       
          
          
          Headings in a three-column layout
          
          
-            
          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.
          
+            
          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.
          
+               
          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>
@@ -110,10 +110,10 @@ 
          Related Techniques
            
       
            Resources
            
       
              
          
            • 
-            HTML - the h1, h2, h3, h4, h5, and h6 elements.
+            HTML - the h1, h2, h3, h4, h5, and h6 elements.
          
              • 
          
            • 
-            MDN <h1> - <h6>: The HTML Section Heading elements.
+            MDN <h1> - <h6>: The HTML Section Heading elements.
             
              • 
             
            • 
                Nomensa: How to structure headings for web accessibility.
diff --git a/techniques/html/H43.html b/techniques/html/H43.html
index 06abe569ed..8dd8eccce6 100644
--- a/techniques/html/H43.html
+++ b/techniques/html/H43.html
@@ -5,7 +5,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
              
       
              
          
              ID: H43
              
          
              Technology: html
              
@@ -17,15 +17,15 @@ 
              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.
              
+         
              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 not recommended for layout tables since its use implies a relationship between cells that is not meaningful when tables are used for layout.
              
       
              
       
              
          
              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>
@@ -57,13 +57,13 @@ 
              Tests
              
          
              Procedure
              
          
                
             
              1. Check for layout tables: determine whether the content has a relationship with other content in both its column and its row. If "no", the table is a layout table. If "yes", the table is a data table.
                2. 
-            
              2. For data tables, check that any cell that is associated with more than one row and/or one column header contains a headers attribute that lists the id for all headers associated with that cell.
                3. 
+            
              3. For data tables, check that any cell that is associated with more than one row and/or one column header contains a headers attribute that lists the id for all headers associated with that cell.
                4. 
             
              4. 
-               
                For data tables where any cell contains an id or headers attribute:
                
+               
                For data tables where any cell contains an id or headers attribute:
                
                
                  
-                  
                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. 
-                  
                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 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.
                  5. 
+                  
                5. Check that the headers attribute of a data cell contains the id attribute of all headers associated with the data cell.
                  6. 
+                  
                6. Check that all ids are unique (that is, no two elements in the page have the same id).
                  7. 
                
                
             
                5. 
          
              
@@ -71,8 +71,8 @@ 
              Procedure
              
       
              
          
              Expected Results
              
          
                
-            
              • If table is a layout table, no cells contain headers or id attributes.
                • 
-            
              • If table is a data table and any cell contains an id attribute, checks #3.1, #3.2, and #3.3 are true.
                • 
+            
              • If table is a layout table, no cells contain headers or id attributes.
                • 
+            
              • If table is a data table and any cell contains an id attribute, checks #3.1, #3.2, and #3.3 are true.
                • 
             
              • If table is a data table and any cell is associated with more than one row and/or one column header, check #2 is true.
                • 
          
              
       
              
@@ -88,7 +88,7 @@ 
              Related Techniques
              
    
              
       
              Resources
              
       
    
              
diff --git a/techniques/html/H44.html b/techniques/html/H44.html
index 2e9a191542..ebe2f2030e 100644
--- a/techniques/html/H44.html
+++ b/techniques/html/H44.html
@@ -17,60 +17,60 @@ 
              When to Use
              
       
              
       
              
          
              Description
              
-         
              The objective of this technique is to use the label element to explicitly associate a form control with a label. A label is attached to a specific form control through the use of the for attribute. The value of the for attribute must be the same as the value of the id attribute of the form control.
              
-         
              The id attribute may have the same value as the name attribute, but both must be provided, and the id must be unique in the web page.
              
-         
              This technique is sufficient for Success Criteria 1.1.1 (Non-Text Content), 1.3.1 (Info and Relationships) and 4.1.2 (Name, Role, Value) whether or not the label element is visible. That is, it may be hidden using CSS. However, for Success Criterion 3.3.2 (Labels or Instructions), the label element must be visible since it provides assistance to all users who need help understanding the purpose of the field. 
              
+         
              The objective of this technique is to use the label element to explicitly associate a form control with a label. A label is attached to a specific form control through the use of the for attribute. The value of the for attribute must be the same as the value of the id attribute of the form control.
              
+         
              The id attribute may have the same value as the name attribute, but both must be provided, and the id must be unique in the web page.
              
+         
              This technique is sufficient for Success Criteria 1.1.1 (Non-Text Content), 1.3.1 (Info and Relationships) and 4.1.2 (Name, Role, Value) whether or not the label element is visible. That is, it may be hidden using CSS. However, for Success Criterion 3.3.2 (Labels or Instructions), the label element must be visible since it provides assistance to all users who need help understanding the purpose of the field. 
              
       
              An additional benefit of this technique is a larger clickable area for the control, since clicking on the label or the control will activate the control. This can be helpful for users with impaired motor control.
              
-      
              Note that the label is positioned after input elements of type="checkbox" and type="radio".
              
+      
              Note that the label is positioned after input elements of type="checkbox" and type="radio".
              
       
              
          
              Elements that use explicitly associated labels are:
              
          
                
             
              • inputs for text entry:
                
                  
-                  
                • input type="date"
                  • 
-                  
                • input type="datetime-local"
                  • 
-                  
                • input type="email"
                  • 
-                  
                • input type="month"
                  • 
-                  
                • input type="number"
                  • 
-                  
                • input type="password"
                  • 
-                  
                • input type="search"
                  • 
-                  
                • input type="tel"
                  • 
-                  
                • input type="text"
                  • 
-                  
                • input type="time"
                  • 
-                  
                • input type="url"
                  • 
-                  
                • input type="week"
                  • 
+                  
                • input type="date"
                  • 
+                  
                • input type="datetime-local"
                  • 
+                  
                • input type="email"
                  • 
+                  
                • input type="month"
                  • 
+                  
                • input type="number"
                  • 
+                  
                • input type="password"
                  • 
+                  
                • input type="search"
                  • 
+                  
                • input type="tel"
                  • 
+                  
                • input type="text"
                  • 
+                  
                • input type="time"
                  • 
+                  
                • input type="url"
                  • 
+                  
                • input type="week"
                  • 
                
                   
             
                • 
             
              • 
-               input type="checkbox"
+               input type="checkbox"
             
                • 
             
              • 
-               input type="color"
+               input type="color"
             
                • 
             
              • 
-               input type="file"
+               input type="file"
             
                • 
             
              • 
-               input type="radio"
+               input type="radio"
             
                • 
             
              • 
-               input type="range"
+               input type="range"
             
                • 
             
              • 
-               select
+               select
             
                • 
             
              • 
-               textarea
+               textarea
 				
                • 
          
              
-         
              The label element is not used for the following elements:
              
+         
              The label element is not used for the following elements:
              
          
                
-            
              • button (the label is provided by the content)
                • 
-            
              • input type="button"  (the label is provided by the content)
                • 
-            
              • input type="hidden"
                • 
-            
              • input type="image" (the label is provided by the alt attribute)
                • 
-            
              • input type="reset" (the label is label provided by the value attribute)
                • 
-            
              • input type="submit" (the label is label provided by the value attribute)
                • 
+            
              • button (the label is provided by the content)
                • 
+            
              • input type="button"  (the label is provided by the content)
                • 
+            
              • input type="hidden"
                • 
+            
              • input type="image" (the label is provided by the alt attribute)
                • 
+            
              • input type="reset" (the label is label provided by the value attribute)
                • 
+            
              • input type="submit" (the label is label provided by the value attribute)
                • 
          
              
       
              
    
              
@@ -78,21 +78,21 @@ 
              Description
              
       
              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.
              
+         
              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>
@@ -111,17 +111,17 @@ 
              A group of radio buttons
              
       
              Tests
              
       
              
          
              Procedure
              
-         
              For all input elements of type text, file or password, for all textarea elements, and for all select elements in the web page:
              
+         
              For all input elements of type text, file or password, for all textarea elements, and for all select elements in the web page:
              
          
                
-            
              1. Check that there is a label element that identifies the purpose of the control before the input, textarea, or select element
                2. 
-            
              2. Check that the for attribute of the label element matches the id of the input, textarea, or select element.
                3. 
-            
              3. Check that the label element is visible.
                4. 
+            
              4. Check that there is a label element that identifies the purpose of the control before the input, textarea, or select element
                5. 
+            
              5. Check that the for attribute of the label element matches the id of the input, textarea, or select element.
                6. 
+            
              6. Check that the label element is visible.
                7. 
          
              
-         
              For all input elements of type checkbox or radio in the web page:
              
+         
              For all input elements of type checkbox or radio in the web page:
              
          
                
-            
              1. Check that there is a label element that identifies the purpose of the control after the input element.
                2. 
-            
              2. Check that the for attribute of the label element matches the id of the input element.
                3. 
-            
              3. Check that the label element is visible.
                4. 
+            
              4. Check that there is a label element that identifies the purpose of the control after the input element.
                5. 
+            
              5. Check that the for attribute of the label element matches the id of the input element.
                6. 
+            
              6. Check that the label element is visible.
                7. 
          
              
       
              
       
              
@@ -144,10 +144,10 @@ 
              Related Techniques
              
       
              Resources
              
       
    
              
diff --git a/techniques/html/H45.html b/techniques/html/H45.html
index a19568f4c4..a12a13b9a7 100644
--- a/techniques/html/H45.html
+++ b/techniques/html/H45.html
@@ -11,8 +11,8 @@
           described in a short text alternative. 
              
    
              Description
              
       
               The objective of this technique is to provide information in a file designated by the
-            longdesc attribute when a short text alternative does not adequately convey the function
-            or information provided in the image. The longdesc attribute is a URI, the target of
+            longdesc attribute when a short text alternative does not adequately convey the function
+            or information provided in the image. The longdesc attribute is a URI, the target of
             which contains a long description of the non-text content. 
              
       
              Authors can provide a description for an image by including text in a separate resource or within the text of the page containing the image.  An advantage of using a separate resource for the description is that it is easily reusable for multiple instances of the same image, it does not add on-page visual clutter to the original document, and the description's end-point is apparent to the user. An advantage of providing the description within the same page as the image is that all users can access the description.  A limitation of the on-page method, as well as in providing multiple descriptions on a single separate page, is that current implementations supporting longdesc do not identify the long description's end-point. Authors can solve this by providing a well-formed description, which identifies the where the description ends.
              
    
              Examples
              
@@ -32,8 +32,8 @@ 
              Using longdesc to refer to a long description within the same page.
              
    
              Tests
              
       
              Procedure
              
          
                
-            
              1. Check that the img element has a longdesc attribute. 
                2. 
-            
              2. Check that the value of the longdesc attribute is a valid URI of an existing resource.
                3. 
+            
              3. Check that the img element has a longdesc attribute. 
                4. 
+            
              4. Check that the value of the longdesc attribute is a valid URI of an existing resource.
                5. 
             
              5. Check that the content at the target of that URI contains a long description describing the original non-text content associated with it.
                6. 
          
              
       
              
diff --git a/techniques/html/H46.html b/techniques/html/H46.html
index 2669e535c9..4e7c8ec7f0 100644
--- a/techniques/html/H46.html
+++ b/techniques/html/H46.html
@@ -6,20 +6,20 @@
 obsoleteSince: 20
 ---
 Using noembed with embed
-				
              Using noembed with embed
+				
              Using noembed with embed
 				
              ID: H46
              Technology: html
              Type: Technique
              When to Use
              
-      
              Documents that load plugins with the embed element.
              
+      
              Documents that load plugins with the embed element.
              
    
              Description
              
       
              The objective of this technique is to provide alternative content for the
-            embed element in a noembed element. The noembed is rendered
-            only if the embed is not supported. While it can be positioned anywhere on the
-            page, it is a good idea to include it as a child element of embed so that it is
+            embed element in a noembed element. The noembed is rendered
+            only if the embed is not supported. While it can be positioned anywhere on the
+            page, it is a good idea to include it as a child element of embed so that it is
             clear to assistive technologies that a text alternative is associated with the
-            embed element it describes.
              
+            embed element it describes.
              
    
              Examples
              
       
              
          
              
-							     noembed is provided inside an embed
+							     noembed is provided inside an embed
 						   
              
          
              <embed src="../movies/history_of_rome.mov"
   height="60" width="144" autostart="false">
@@ -30,7 +30,7 @@ 
              
       
              
       
              
          
              
-							     noembed is provided beside an embed
+							     noembed is provided beside an embed
 						   
              
          
              <embed src="moviename.swf" width="100" height="80"
   pluginspage="http://example.com/shockwave/download/" />
@@ -42,8 +42,8 @@ 
              
    
              Tests
              
       
              Procedure
              
          
                
-            
              1. Check if embed element has a child noembed element 
                2. 
-            
              2. Check if embed element has a noembed element that
+            
              3. Check if embed element has a child noembed element 
                4. 
+            
              4. Check if embed element has a noembed element that
                   immediately follows it. 
                5. 
          
              
       
              
diff --git a/techniques/html/H48.html b/techniques/html/H48.html
index 1df1ebf4d0..c1e862b9c9 100644
--- a/techniques/html/H48.html
+++ b/techniques/html/H48.html
@@ -5,7 +5,7 @@
       
    
    
-      
              Using ol, ul and dl for lists or groups of links
              
+      
              Using ol, ul and dl for lists or groups of links
              
       
              
          
              ID: H48
              
          
              Technology: html
              
@@ -17,8 +17,8 @@ 
              When to Use
              
       
              
       
              
          
              Description
              
-         
              The objective of this technique is to create lists of related items using list elements appropriate for their purposes. The ol element is used when the list is ordered and the ul element is used when the list is unordered. Description lists (dl) are used to group name-value pairs of information, for example: terms and definitions or questions and answers. Although the use of this markup can make lists more readable, not all lists need markup. For instance, sentences that contain comma-separated lists may not need list markup.
              
-         
              When markup is used that visually formats items as a list but does not indicate the list relationship, users may have difficulty in navigating the information. An example of such visual formatting is including asterisks in the content at the beginning of each list item and using br elements to separate the list items.
              
+         
              The objective of this technique is to create lists of related items using list elements appropriate for their purposes. The ol element is used when the list is ordered and the ul element is used when the list is unordered. Description lists (dl) are used to group name-value pairs of information, for example: terms and definitions or questions and answers. Although the use of this markup can make lists more readable, not all lists need markup. For instance, sentences that contain comma-separated lists may not need list markup.
              
+         
              When markup is used that visually formats items as a list but does not indicate the list relationship, users may have difficulty in navigating the information. An example of such visual formatting is including asterisks in the content at the beginning of each list item and using br elements to separate the list items.
              
          
              Some assistive technologies allow users to navigate from list to list or item to item. Style sheets can be used to change the presentation of the lists while preserving their integrity.
              
          
              The list structure, commonly unordered lists, is also useful to group hyperlinks. When this is done, it helps screen reader users to navigate from the first item in a list to the end of the list or jump to the next list. This helps them to bypass groups of links if they choose to.
              
          
              
@@ -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>
@@ -76,9 +76,9 @@ 
              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>
@@ -117,13 +117,13 @@ 
              Related Techniques
              
       
              Resources
              
          
       
diff --git a/techniques/html/H49.html b/techniques/html/H49.html
index 7b5f563313..68babf896a 100644
--- a/techniques/html/H49.html
+++ b/techniques/html/H49.html
@@ -31,22 +31,22 @@ 
              Description
              
       
              Examples
              
       
              See rendered examples of semantic text.
              
       
              
-         
              Using the em and strong elements
+         
              Using the em and strong elements
             to emphasize text
              
          
-            
              The em and strong elements are
+            
              The em and strong elements are
                 designed to indicate structural emphasis that may be rendered in a variety of ways
                 (font style changes, speech inflection changes, etc.).
              
          
-         
               ... 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;! ...
              
       
              
       
              
-         
              Using the blockquote element to mark up long quotations from another source
              
+         
              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.
              
+            
              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
@@ -56,25 +56,25 @@ 
              Using the blockquote element to mark up l
 </blockquote>
              
       
              
       
              
-         
              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
              
          
          
              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>
              
       
              
       
              
-         
              Using the sup and sub elements to mark up superscripts and subscripts
              
+         
              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.
              
+            
              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>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
              
+         
              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;
@@ -87,7 +87,7 @@ 
              Using the code element to mark up code
              Procedure
              
          
                
             
              1. Examine the content for information that is conveyed through variations in presentation of text.
                2. 
-            
              2. Check that appropriate semantic markup (such as em, strong, cite, blockquote, sub, and sup) have been used to mark the text that conveys information through variations in text.
                3. 
+            
              3. Check that appropriate semantic markup (such as em, strong, cite, blockquote, sub, and sup) have been used to mark the text that conveys information through variations in text.
                4. 
          
              
       
              
       
              
@@ -104,10 +104,10 @@ 
              Expected Results
              
    
              Resources
                 
    
 
              
 
diff --git a/techniques/html/H51.html b/techniques/html/H51.html
index 65dba123af..d1a01f76db 100644
--- a/techniques/html/H51.html
+++ b/techniques/html/H51.html
@@ -24,9 +24,9 @@ 
              Description
              
             (vertical and horizontal). These relationships are represented in columns and rows, and
             the columns and rows must be recognizable in order for the logical relationships to be
             perceived.
              
-            
              Using the table element with the child elements tr,
-              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.
              
+            
              Using the table element with the child elements tr,
+              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.
              
             
              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.
              
@@ -36,10 +36,10 @@ 
              Examples
              
             
              
                
              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.
              
+            
              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>
@@ -76,7 +76,7 @@ 
              Procedure
              
             
            • 
                
              For each occurrence of tabular information:
              
                
                
-                  
              1. Check that table markup with at least the elements table, tr, th, and td is used.
                2. 
+                  
              2. Check that table markup with at least the elements table, tr, th, and td is used.
                3. 
                
              
             
              • 
          
        
@@ -100,16 +100,16 @@ 
        Related Techniques
        
       
        Resources
        
          
    
        
diff --git a/techniques/html/H53.html b/techniques/html/H53.html
index c441f1b87b..d00aa7ba19 100644
--- a/techniques/html/H53.html
+++ b/techniques/html/H53.html
@@ -5,42 +5,42 @@
       
    
    
-		
        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.
        
+      
        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.
        
+            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="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.
        
+				
        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...
@@ -54,7 +54,7 @@ 
        Tests
        
 		
        
 			
        Procedure
        
 			
          
-				
        1. Check that the body of each object element contains a text alternative for the object.
          2. 
+				
        2. Check that the body of each object element contains a text alternative for the object.
          3. 
       
        
       
        
       
        
@@ -74,7 +74,7 @@ 
        Related Techniques
        
 			
        Resources
        
 			
    
        
diff --git a/techniques/html/H54.html b/techniques/html/H54.html
index 7e7dcb4fc8..28daeb35c8 100644
--- a/techniques/html/H54.html
+++ b/techniques/html/H54.html
@@ -5,7 +5,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
        
       
        
          
        ID: H54
        
          
        Technology: html
        
@@ -17,8 +17,8 @@ 
        When to Use
        
       
        
       
        
          
        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
+         
        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
@@ -26,7 +26,7 @@ 
        Description
        
    
        Examples
        
       
        
          
-         
        <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
@@ -41,7 +41,7 @@ 
        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. 
+            
        3. Check that each word that is defined inline is contained in a dfn element.
          4. 
          
        
       
        
       
        
@@ -60,7 +60,7 @@ 
        Related Techniques
        
    
        
       
        Resources
        
               
    
        
diff --git a/techniques/html/H56.html b/techniques/html/H56.html
index 76a15d7510..4e218a58ea 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 with nested directional runs
        
+      
        Using the dir attribute on an inline element to resolve problems with nested directional runs
        
       
        
          
        ID: H56
        
          
        Technology: html
        
@@ -17,7 +17,7 @@ 
        When to Use
        
       
        
       
        
          
        Description
        
-         
        The objective of this technique is to identify changes in the text direction of text that includes nested directional runs by providing the dir attribute on inline elements. A nested directional run is a run of text that includes mixed directional text, for example, a paragraph in English containing a quoted Hebrew sentence which in turn includes an English phrase. Use of the dir attribute on an enclosing span or other inline element may be necessary because the Unicode bidirectional algorithm can produce undesirable results when mixed directional text contains spaces or punctuation. The concepts used in this technique are described in What you need to know about the bidi algorithm and inline markup.
        
+         
        The objective of this technique is to identify changes in the text direction of text that includes nested directional runs by providing the dir attribute on inline elements. A nested directional run is a run of text that includes mixed directional text, for example, a paragraph in English containing a quoted Hebrew sentence which in turn includes an English phrase. Use of the dir attribute on an enclosing span or other inline element may be necessary because the Unicode bidirectional algorithm can produce undesirable results when mixed directional text contains spaces or punctuation. The concepts used in this technique are described in What you need to know about the bidi algorithm and inline markup.
        
          
        
          
        
             
        Examples
        
@@ -42,8 +42,8 @@ 
        Tests
        
          
        Procedure
        
          
          
             
        1. Examine the text direction of text in the document
          2. 
-            
        2. If the text direction is right-to-left, check that for the ancestor element that has a dir attribute, the attribute has the value "rtl"
          3. 
-            
        3. If the text direction is left-to-right, check that there is no ancestor element with a dir attribute, or that for the ancestor element that has a dir attribute, the attribute has the value "ltr"
          4. 
+            
        4. If the text direction is right-to-left, check that for the ancestor element that has a dir attribute, the attribute has the value "rtl"
          5. 
+            
        5. If the text direction is left-to-right, check that there is no ancestor element with a dir attribute, or that for the ancestor element that has a dir attribute, the attribute has the value "ltr"
          6. 
          
        
       
        
       
        
@@ -63,7 +63,7 @@ 
        Related Techniques
        
       
        Resources
        
       
          
          
        • 
-            HTML - the dir attribute.
+            HTML - the dir attribute.
          
          • 
          
        • 
             HTML - bidirectional text.
diff --git a/techniques/html/H57.html b/techniques/html/H57.html
index 904c0952a4..9d34288f30 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
          
@@ -18,7 +18,7 @@ 
          When to Use
          
    
          
    
          
       
          Description
          
-      
           The objective of this technique is to identify the default language of a document by providing the lang attribute on the html element.
          
+      
           The objective of this technique is to identify the default language of a document by providing the lang attribute on the html element.
          
       
          Identifying the language of the document is important for a number of reasons:
          
       
            
          
          • It allows braille translation software to substitute control codes for accented characters, and insert control codes necessary to prevent erroneous creation of Grade 2 braille contractions.
            • 
@@ -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">
@@ -49,10 +49,10 @@ 
            Defining the content of an HTML document to be in French
            
       
            Tests
            
       
            
          
            Procedure
            
-         
            Examine the html element of the document.
            
+         
            Examine the html element of the document.
            
          
              
-            
            1. Check that the html element has a lang attribute.
              2. 
-            
            2. Check that the value of the lang attribute conforms to BCP 47: Tags for Identifying Languages; Matching of Language Tags or its successor and reflects the primary language used by the web page.
              3. 
+            
            3. Check that the html element has a lang attribute.
              4. 
+            
            4. Check that the value of the lang attribute conforms to BCP 47: Tags for Identifying Languages; Matching of Language Tags or its successor and reflects the primary language used by the web page.
              5. 
          
            
       
            
       
            
@@ -72,10 +72,10 @@ 
            Related Techniques
            
       
            Resources
            
       
              
          
            • 
-            HTML - The lang and xml:lang attributes.
+            HTML - The lang and xml:lang attributes.
          
              • 
          
            • 
-            HTML "lang" attribute on the Mozilla Developer Network.
+            HTML "lang" attribute on the Mozilla Developer Network.
          
              • 
          
            • 
             BCP 47: Tags for Identifying Languages; Matching of Language Tags.
diff --git a/techniques/html/H58.html b/techniques/html/H58.html
index a10cd65038..b2107d7ac8 100644
--- a/techniques/html/H58.html
+++ b/techniques/html/H58.html
@@ -19,16 +19,16 @@ 
              When to Use
              
 
    
              
       
              Description
              
-      
              The objective of this technique is to clearly identify any changes in language on a page by using the lang attribute.
              
+      
              The objective of this technique is to clearly identify any changes in language on a page by using the lang attribute.
              
 
-      
              Allowed values for the lang attribute are indicated in the resources referenced below. Language tags use a primary code to indicate the language, and optional sub-codes (separated by hyphen characters) to indicate variants of the language. For instance, English is indicated with the primary code "en"; British English and American English can be distinguished by using "en-GB" and "en-US", respectively. Use of the primary code is important for this technique. Use of sub-codes is optional but may be helpful in certain circumstances.
              
+      
              Allowed values for the lang attribute are indicated in the resources referenced below. Language tags use a primary code to indicate the language, and optional sub-codes (separated by hyphen characters) to indicate variants of the language. For instance, English is indicated with the primary code "en"; British English and American English can be distinguished by using "en-GB" and "en-US", respectively. Use of the primary code is important for this technique. Use of sub-codes is optional but may be helpful in certain circumstances.
              
    
              
    
              
       
              Examples
              
       
              
-         
              The use of the lang attribute to define a quote written in German
              
+         
              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
@@ -45,12 +45,12 @@ 
              Procedure
              
          
              For each element in the document:
              
          
                
             
              1. Check that the human language of the content of the element is the same as the
-                  inherited language for the element as specified in HTML - The lang and xml:lang attributes.
+                  inherited language for the element as specified in HTML - The lang and xml:lang attributes.
             
                2. 
          
              
-         
              For each lang attribute in the document:
              
+         
              For each lang attribute in the document:
              
          
                
-            
              1. Check that the value of the lang attribute conforms to BCP 47: Tags for Identifying Languages; Matching of Language Tags or its successor.
                2. 
+            
              2. Check that the value of the lang attribute conforms to BCP 47: Tags for Identifying Languages; Matching of Language Tags or its successor.
                3. 
             
              3. Check that the language code matches the language of the content it applies to.
                4. 
          
              
       
              
@@ -71,10 +71,10 @@ 
              Related Techniques
              
       
              Resources
              
       
                
          
              • 
-            HTML - The lang and xml:lang attributes.
+            HTML - The lang and xml:lang attributes.
          
                • 
          
              • 
-               HTML "lang" attribute on the Mozilla Developer Network.
+               HTML "lang" attribute on the Mozilla Developer Network.
          
                • 
          
              • 
             BCP 47: Tags for Identifying Languages; Matching of Language Tags.
diff --git a/techniques/html/H59.html b/techniques/html/H59.html
index f50d3f75f3..6acda14da8 100644
--- a/techniques/html/H59.html
+++ b/techniques/html/H59.html
@@ -9,7 +9,7 @@
       
    
    
-      
                Using the link element and navigation tools
                
+      
                Using the link element and navigation tools
                
       
                
          
                ID: H59
                
          
                Technology: html
                
@@ -21,14 +21,14 @@ 
                When to Use
                
       
                
       
                
          
                Description
                
-         
                The objective of this technique is to describe how the link element can
+         
                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:
                
+            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.
                  • 
+         
                • next: Refers to the next document in a linear sequence of documents.
                  • 
+         
                • prev: Refers to the previous document in an ordered series of documents.
                  • 
       
                
    
                
    
                
@@ -36,7 +36,7 @@ 
                Examples
                
       
                
          
             
                A web page for Chapter 2 of an on-line book might contain the following links
-                within the head section.
                
+                within the head section.
                
          
 
                <link rel="prev" href="Chapter01.html" title="01. Why Volunteer?">
 <link rel="next" href="Chapter03.html" title="03. Who Volunteers?" />
                
@@ -48,12 +48,12 @@ 
                Tests
                
          
                Procedure
                
          
                For a web page that is within a sequence or collection of web pages: 
                
          
                  
-            
                1. Check that all link elements pertaining to navigation occur in the head section of the document.
                  2. 
+            
                2. Check that all link elements pertaining to navigation occur in the head section of the document.
                  3. 
             
                3. 
-               
                  For each link element in the head section of the document which pertains to navigation, check that it contains at least:
                  
+               
                  For each link element in the head section of the document which pertains to navigation, check that it contains at least:
                  
                
                    
-                  
                  1. a rel attribute identifying the link type
                    2. 
-                  
                  2. a valid href attribute to locate the appropriate resource
                    3. 
+                  
                  3. a rel attribute identifying the link type
                    4. 
+                  
                  4. a valid href attribute to locate the appropriate resource
                    5. 
                
                  
             
                  4. 
          
                
@@ -79,7 +79,7 @@ 
                Resources
                
       
          
                Description
                
       
                The objective of this technique is to provide a mechanism for locating a glossary. When
             terms in the content are defined on a separate glossary page, the glossary is referenced
-            using a link element in the head element of the document that
-            uses the glossary. The rel attribute of the link element is
-            set to "glossary", and the href attribute contains the URI of the glossary
+            using a link element in the head element of the document that
+            uses the glossary. The rel attribute of the link element is
+            set to "glossary", and the href attribute contains the URI of the glossary
             page. User agents can then assist users in accessing the glossary quickly and
           easily.
                
    
                Examples
                
@@ -21,14 +21,14 @@ 
                The WCAG 2 Glossary.
                
       
                Procedure
                
          
                For any set of words and their definitions that are meant to serve as a glossary: 
                
          
                  
-            
                1. Check that the head section of the web page that contains words,
-                  phrases or abbreviations defined in a glossary contains a link
+            
                2. Check that the head section of the web page that contains words,
+                  phrases or abbreviations defined in a glossary contains a link
                   element
                  3. 
-            
                3. Check that the link element has attribute
+            
                4. Check that the link element has attribute
                   
-										rel="glossary"
+										rel="glossary"
 								       
                  5. 
-            
                5. Check that the href attribute of the link element
+            
                6. Check that the href attribute of the link element
                   refers to the glossary page.
                  7. 
          
                
       
                
diff --git a/techniques/html/H62.html b/techniques/html/H62.html
index e2d2c57a87..8bf43395e8 100644
--- a/techniques/html/H62.html
+++ b/techniques/html/H62.html
@@ -5,7 +5,7 @@
 		
 	
 	
-		
                Using the ruby element
                
+		
                Using the ruby element
                
 		
                
 			
                ID: H62
                
 			
                Technology: html
                
@@ -20,7 +20,7 @@ 
                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).
                
+      
                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.
                
@@ -29,8 +29,8 @@ 
                Description
                
 			
                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
+        
                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>
@@ -41,9 +41,9 @@ 
                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.)
                
+         
                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>
@@ -59,8 +59,8 @@ 
                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.
                  5. 
          
                
       
                
       
                
@@ -89,13 +89,13 @@ 
                Resources
                
 				W3C Internationalization Techniques: "Using Ruby Markup"
 			
                • 
 			
              • 
-				HTML - ruby element
+				HTML - ruby element
 			
                • 
 			
              • 
-				HTML - rp element
+				HTML - rp element
 			
                • 
 			
              • 
-				HTML - rt element
+				HTML - rt element
 			
                • 
 		
              
 	
              
diff --git a/techniques/html/H63.html b/techniques/html/H63.html
index 575b8c9a48..4a2c8f49e2 100644
--- a/techniques/html/H63.html
+++ b/techniques/html/H63.html
@@ -5,7 +5,7 @@
       
    
    
-      
              Using the scope attribute to associate header cells with data cells in data tables
              
+      
              Using the scope attribute to associate header cells with data cells in data tables
              
       
              
          
              ID: H63
              
          
              Technology: html
              
@@ -17,11 +17,11 @@ 
              When to Use
              
       
              
       
              
          
              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.
              
+      
              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.
              
       
              
-         
              For simple tables that have the headers in the first row or column, it is sufficient to simply use the th elements without scope.
              
-         
              For complex tables use ids and headers as in Using id and headers attributes to associate data cells with header cells in data tables.
              
+         
              For simple tables that have the headers in the first row or column, it is sufficient to simply use the th elements without scope.
              
+         
              For complex tables use ids and headers as in Using id and headers attributes to associate data cells with header cells in data tables.
              
 
          
              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.
              
       
              
@@ -30,9 +30,9 @@ 
              Description
              
 		
              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, 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>
@@ -67,8 +67,8 @@ 
              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. 
+				
              3. Check that all th elements have a scope attribute.
                4. 
+				
              4. Check that all scope attributes have the value row, col, rowgroup, or colgroup.
                5. 
 			
              
 		
              
 		
              
@@ -89,13 +89,13 @@ 
              Related Techniques
              
 		
              Resources
                
 		 
    
              
diff --git a/techniques/html/H64.html b/techniques/html/H64.html
index 3b76ba055e..ed0c6ae8d5 100644
--- a/techniques/html/H64.html
+++ b/techniques/html/H64.html
@@ -5,7 +5,7 @@
       
    
    
-      
              Using the title attribute of the iframe element
              
+      
              Using the title attribute of the iframe element
              
       
              
 				
              ID: H64
              
 				
              Technology: html
              
@@ -13,22 +13,22 @@ 
              Using the title attribute of the 
       
              
         
              When to Use
              
-        
              HTML documents that use iframes
              
+        
              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 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 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.
              
+        
              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
              
+    	
              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>
@@ -44,8 +44,8 @@ 
              Tests
              
       
              
          
              Procedure
              
          
                
-            
              1. Check each iframe element in the HTML source code for the presence of a title attribute.
                2. 
-            
              2. Check that the title attribute contains text that describes the iframe's content.
                3. 
+            
              3. Check each iframe element in the HTML source code for the presence of a title attribute.
                4. 
+            
              4. Check that the title attribute contains text that describes the iframe's content.
                5. 
          
              
       
              
       
              
@@ -59,7 +59,7 @@ 
              Expected Results
              
 		
              Resources
              
 		
    
              
diff --git a/techniques/html/H65.html b/techniques/html/H65.html
index 0984a06942..df10c3a8df 100644
--- a/techniques/html/H65.html
+++ b/techniques/html/H65.html
@@ -5,25 +5,25 @@
     
 	
 	
-		
              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
              
+			
              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.
              
+    
              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>
+      
              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">
   ...
@@ -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="">
@@ -45,8 +45,8 @@ 
              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">
+				
              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">
 
              
       
              
       
              
@@ -59,11 +59,11 @@ 
              A data table of form controls
              
 		
              Tests
              
 		
              
 			
              Procedure
              
-      
              For all form controls that are not associated with a label element:
               
+      
              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 control has a title attribute
                3. 
           
              3. Check that the purpose of the form control is clear to users who can see the control.
                4. 
-          
              4. Check that the title attribute identifies the purpose of the control and that it matches the apparent visual purpose.
                5. 
+          
              5. Check that the title attribute identifies the purpose of the control and that it matches the apparent visual purpose.
                6. 
          
              
       
              
       
              
@@ -83,7 +83,7 @@ 
              Related Techniques
              
 		
              
 			
              Resources
                
 			
 		
              
 	
diff --git a/techniques/html/H67.html b/techniques/html/H67.html
index 9ffd866da8..1f38ab44a4 100644
--- a/techniques/html/H67.html
+++ b/techniques/html/H67.html
@@ -5,7 +5,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
              
       
              
          
              ID: H67
              
          
              Technology: html
              
@@ -18,16 +18,16 @@ 
              When to Use
              
       
              
          
              Description
              
          
              The purpose of this technique is to show how images can be marked so that they can be ignored by assistive technology.
              
-         
              If no title attribute is used, and the alt text is set to null (i.e., alt="") it indicates to assistive technology that the image can be safely ignored.
              
+         
              If no title attribute is used, and the alt text is set to null (i.e., alt="") it indicates to assistive technology that the image can be safely ignored.
              
       
              
-         
              Having a "null" alt attribute is not the same as having no alt attribute.
              
+         
              Having a "null" alt attribute is not the same as having no alt attribute.
              
       
              
    
              
    
              
       
              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">
              
       
              
    
              
    
              
@@ -36,8 +36,8 @@ 
              Tests
              
          
              Procedure
              
          
              For each image that should be ignored:
              
          
                
-            
              1. Check that title attribute is either absent or empty.
                2. 
-            
              2. Check that alt attribute is present and empty.
                3. 
+            
              3. Check that title attribute is either absent or empty.
                4. 
+            
              4. Check that alt attribute is present and empty.
                5. 
          
              
       
              
       
              
@@ -60,7 +60,7 @@ 
              Resources
              
             HTML - the title attribute.
          
              • 
          
            • 
-            HTML - the img element.
+            HTML - the img element.
          
              • 
       
            
    
            
diff --git a/techniques/html/H69.html b/techniques/html/H69.html
index a64ab10e32..e8e278c07a 100644
--- a/techniques/html/H69.html
+++ b/techniques/html/H69.html
@@ -25,7 +25,7 @@ 
            Description
            
          	
          • 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.
          
+      	
          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.).
          
@@ -35,9 +35,9 @@ 
          Description
          
       	
          Examples
          
       	
          
 					
          Organizing the sections of a search page
          
-         	
          This example marks up each section heading using h2 elements.
          
+         	
          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">
@@ -125,10 +125,10 @@ 
          Related Techniques
          
 		
          Resources
           
 		
          Examples
          
       
          
          
diff --git a/techniques/html/H71.html b/techniques/html/H71.html
index fb4725aa89..e70bdf4780 100644
--- a/techniques/html/H71.html
+++ b/techniques/html/H71.html
@@ -5,7 +5,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
          
       
          
          
          ID: H71
          
          
          Technology: html
          
@@ -18,19 +18,19 @@ 
          When to Use
          
       
          
          
          Description
          
          
          The objective of this technique is to provide a semantic grouping for related form controls. This allows users to understand the relationship of the controls and interact with the form more quickly and effectively.
          
-         
          Form controls can be grouped by enclosing them within the fieldset element. All controls within a given fieldset are then related. The first element inside the fieldset must be a legend element, which provides a label or description for the group. Authors should avoid nesting fieldsets unnecessarily, as this can lead to confusion.
          
-         
          Grouping controls is most important for related radio buttons and checkboxes. A set of radio buttons or checkboxes is related when they all submit values for a single named field. They work in the same way as selection lists, allowing the user to choose from a set of options, except selection lists are single controls while radio buttons and checkboxes are multiple controls. The individual label associated with each radio or checkbox control may not fully convey the group's descriptive context. In this situation, it is essential that they be grouped together semantically to facilitate being treated as a single control, as well as to provide an additional group level description. Often, user agents will present the value of the legend before the label of each control to provide this description, as well as to remind users that they are part of the same group.
          
-         
          It can also be useful to group other sets of controls less tightly related than radio buttons and checkboxes. For instance, several fields that collect a user's address might be grouped together with a legend of "Address", thus providing a group level description for these controls. As a rule of thumb, it can be said that where a group of controls within a larger form requires an additional heading to provide a description specific to that particular group, the use of fieldset and legend elements is appropriate.
          
-         
          However, when a group of related radio buttons or checkboxes (even having values for a single named field) includes clear instructions and distinct selections (i.e., where the individual label associated with each particular control provides a sufficient description), the use of the fieldset and legend elements is not required. H44 is sufficient in this case.
          
-         
          Authors sometimes avoid using the fieldset element because of the default display in the browser, which draws a border around the grouped controls. This visual grouping is also useful and authors should seriously consider retaining it (or some form of visual grouping). The visual effect can be modified in CSS by overriding the border property of the fieldset and the position property of the legend.
          
+         
          Form controls can be grouped by enclosing them within the fieldset element. All controls within a given fieldset are then related. The first element inside the fieldset must be a legend element, which provides a label or description for the group. Authors should avoid nesting fieldsets unnecessarily, as this can lead to confusion.
          
+         
          Grouping controls is most important for related radio buttons and checkboxes. A set of radio buttons or checkboxes is related when they all submit values for a single named field. They work in the same way as selection lists, allowing the user to choose from a set of options, except selection lists are single controls while radio buttons and checkboxes are multiple controls. The individual label associated with each radio or checkbox control may not fully convey the group's descriptive context. In this situation, it is essential that they be grouped together semantically to facilitate being treated as a single control, as well as to provide an additional group level description. Often, user agents will present the value of the legend before the label of each control to provide this description, as well as to remind users that they are part of the same group.
          
+         
          It can also be useful to group other sets of controls less tightly related than radio buttons and checkboxes. For instance, several fields that collect a user's address might be grouped together with a legend of "Address", thus providing a group level description for these controls. As a rule of thumb, it can be said that where a group of controls within a larger form requires an additional heading to provide a description specific to that particular group, the use of fieldset and legend elements is appropriate.
          
+         
          However, when a group of related radio buttons or checkboxes (even having values for a single named field) includes clear instructions and distinct selections (i.e., where the individual label associated with each particular control provides a sufficient description), the use of the fieldset and legend elements is not required. H44 is sufficient in this case.
          
+         
          Authors sometimes avoid using the fieldset element because of the default display in the browser, which draws a border around the grouped controls. This visual grouping is also useful and authors should seriously consider retaining it (or some form of visual grouping). The visual effect can be modified in CSS by overriding the border property of the fieldset and the position property of the legend.
          
       
          
       
          
          
          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.
          
+            
          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">
@@ -56,9 +56,9 @@ 
          A multiple choice test
          
       
          
       
          
          
          A set of checkboxes
          
-         
          The User Profile page for a website 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.
          
+         
          The User Profile page for a website 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">
@@ -77,9 +77,9 @@ 
          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.
          
+         
          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>
@@ -111,8 +111,8 @@ 
          Tests
          
          
          Procedure
          
          
          For groups of related controls where the individual labels for each control do not provide a sufficient description, and an additional group level description is needed:
          
          
            
-            
          1. Check that the group of logically related input or select elements are contained within fieldset elements.
            2. 
-            
          2. Check that each fieldset has a legend element that is the first child in the fieldset and includes a description for that group.
            3. 
+            
          3. Check that the group of logically related input or select elements are contained within fieldset elements.
            4. 
+            
          4. Check that each fieldset has a legend element that is the first child in the fieldset and includes a description for that group.
            5. 
          
          
       
          
       
          
@@ -133,10 +133,10 @@ 
          Related Techniques
          
       
          Resources
          
       
    
          
diff --git a/techniques/html/H73.html b/techniques/html/H73.html
index 8d5f183ddf..36be9be1cd 100644
--- a/techniques/html/H73.html
+++ b/techniques/html/H73.html
@@ -10,31 +10,31 @@
           tables
          ID: H73
          Technology: html
          Type: Technique
          When to Use
          
       
          HTML 4.01, XHTML 1.x
          
    
          Description
          
-      
          The objective of this technique is to provide a brief overview of how data has been organized into a table or a brief explanation of how to navigate the table. The summary attribute of the table element makes this information available to people who use screen readers; the information is not displayed visually.
          
-      
          The summary is useful when the table has a complex structure (for example,
+      
          The objective of this technique is to provide a brief overview of how data has been organized into a table or a brief explanation of how to navigate the table. The summary attribute of the table element makes this information available to people who use screen readers; the information is not displayed visually.
          
+      
          The summary is useful when the table has a complex structure (for example,
             when there are several sets of row or column headers, or when there are multiple groups
-            of columns or rows). The summary may also be helpful for simple data tables
+            of columns or rows). The summary may also be helpful for simple data tables
             that contain many columns or rows of data.
          
-      
          The summary attribute may be used whether or not the table includes a
-              caption element. If both are used, the summary should not
-            duplicate the caption.
          
-      
          In HTML5 the summary attribute is obsolete. Assistive technologies may or may not continue to support the attribute. Authors should consider alternatives and only use with caution.
          
+      
          The summary attribute may be used whether or not the table includes a
+              caption element. If both are used, the summary should not
+            duplicate the caption.
          
+      
          In HTML5 the summary attribute is obsolete. Assistive technologies may or may not continue to support the attribute. Authors should consider alternatives and only use with caution.
          
       
          
          
           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
+               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.
-               However, if a layout table is used, then the summary attribute is not used or
+               However, if a layout table is used, then the summary attribute is not used or
                is null. The purpose of a layout table is simply to control the placement of content;
-               the table itself is “transparent" to the user. A summary would “break" this
-               transparency by calling attention to the table. A null summary
-                 (summary="") on layout tables is acceptable. See F46 for details.
          
+               the table itself is “transparent" to the user. A summary would “break" this
+               transparency by calling attention to the table. A null summary
+                 (summary="") on layout tables is acceptable. See F46 for details.
          
       
          
    
          Examples
          
       
          
-         
          A data table with a summary but no caption
          
+         
          A data table with a summary but no caption
          
          
             
          This example shows a bus schedule. The route number and direction are included in
-                the summary along with information on how to use the schedule.
          
+                the summary along with information on how to use the schedule.
          
          
          
          <table summary="Schedule for Route 7 going downtown. Service begins 
 at 4:00 AM and ends at midnight. Intersections are listed in the top row. 
@@ -56,14 +56,14 @@ 
          A data table with a summary but no 
          
       
          
       
          
-         
          A data table with both a summary and a caption
+         
          A data table with both a summary and a caption
 						   
          
          
-            
          In this example both a summary attribute and a caption
-                element are used. The caption identifies the bus route. The
-                  summary helps users who are blind understand how to use the schedule.
-                Screen readers read the caption, followed by the
-              summary.
          
+            
          In this example both a summary attribute and a caption
+                element are used. The caption identifies the bus route. The
+                  summary helps users who are blind understand how to use the schedule.
+                Screen readers read the caption, followed by the
+              summary.
          
          
          
          <table summary="Intersections are listed in row 1. 
 Find the intersection closest to your starting point 
@@ -78,12 +78,12 @@ 
          A data table with both a summary and a 
          Procedure
          
          
          For each data table: 
          
          
            
-            
          1. If a summary is present, check that the summary
+            
          2. If a summary is present, check that the summary
                   attribute describes the table's organization or explains how
                   to use the table
            3. 
-            
          3. If both a summary attribute and a caption element are present
-                  for the data table, check that the summary does not
-                  duplicate the caption.
            4. 
+            
          4. If both a summary attribute and a caption element are present
+                  for the data table, check that the summary does not
+                  duplicate the caption.
            5. 
          
          
       
          
       
          Expected Results
          
diff --git a/techniques/html/H74.html b/techniques/html/H74.html
index 974c6e3567..3f0a2c3b3d 100644
--- a/techniques/html/H74.html
+++ b/techniques/html/H74.html
@@ -28,7 +28,7 @@ 
          Description
          
             
          Examples
          
             
          
                
          HTML
          
-               
          HTML pages include a document type declaration (sometimes referred to as !DOCTYPE declaration). A developer can use offline or online validators (see the Resources section) to check that all id attribute values are unique and that opening and closing tags are used according to the specification.
          
+               
          HTML pages include a document type declaration (sometimes referred to as !DOCTYPE declaration). A developer can use offline or online validators (see the Resources section) to check that all id attribute values are unique and that opening and closing tags are used according to the specification.
          
             
          
          
          
          
          
@@ -59,7 +59,7 @@ 
          Resources
          
                   Recommended DTDs to use in your web document.
                
          • 
                
        • 
-                  HTML - The doctype.
+                  HTML - The doctype.
                
          • 
                
        • 
                   Validating web pages.
diff --git a/techniques/html/H76.html b/techniques/html/H76.html
index b809d07953..074d3afcb4 100644
--- a/techniques/html/H76.html
+++ b/techniques/html/H76.html
@@ -5,7 +5,7 @@
       
    
    
-      
          Using meta refresh to create an instant client-side redirect
          
+      
          Using meta refresh to create an instant client-side redirect
          
       
          
          
          ID: H76
          
          
          Technology: html
          
@@ -18,13 +18,13 @@ 
          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
          
          
          
             
          Instantly redirecting a page
          
-
          <!doctype html>
+
          <!doctype html>
 <html lang="en">    
   <head>
     <meta charset="utf-8">
@@ -42,10 +42,10 @@ 
          Instantly redirecting a page
          
          
          Tests
          
          
          
             
          Procedure
          
-            
          Find all meta elements in the document that contain the http-equiv attribute with value refresh, check that:
          
+            
          Find all meta elements in the document that contain the http-equiv attribute with value refresh, check that:
          
             
            
-               
          1. the content attribute has a number with a value of 0, and
            2. 
-               
          2. the number is followed by ;URL=anyURL (where anyURL stands for the URI that should replace the current page).
            3. 
+               
          3. the content attribute has a number with a value of 0, and
            4. 
+               
          4. the number is followed by ;URL=anyURL (where anyURL stands for the URI that should replace the current page).
            5. 
             
          
          
          
          
          
@@ -62,8 +62,8 @@ 
          Related Techniques
          
    
          
       
          Resources
          
       
    
          
 
diff --git a/techniques/html/H77.html b/techniques/html/H77.html
index 2965760086..aa6e3a5019 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 b688189bb2..85ff9c94f2 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 4d77c3ac5d..819fbb7834 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 e03f38eb90..9174c9fb1b 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 website
          
-
          <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 ff7433d77a..b1d36b8e33 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>
@@ -95,9 +95,9 @@ 
          Tests
          
          
          Procedure
          
          
          For each nested link in the content that uses this technique:
          
          
            
-            
          1. Find the link's parent ul or ol element.
            2. 
-            
          2. Check that this list element (ul, ol) is a descendant of an li element.
            3. 
-            
          3. Check that the text of the link combined with the text of that parent li element describes the purpose of the link.
            4. 
+            
          4. Find the link's parent ul or ol element.
            5. 
+            
          5. Check that this list element (ul, ol) is a descendant of an li element.
            6. 
+            
          6. Check that the text of the link combined with the text of that parent li element describes the purpose of the link.
            7. 
          
          
       
          
       
          
@@ -123,8 +123,8 @@ 
          Related Techniques
          
    
          
       
          Resources
          
       
    
          
   
diff --git a/techniques/html/H83.html b/techniques/html/H83.html
index 73c5b0f84c..33334aec41 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
          
@@ -17,17 +17,17 @@ 
          When to Use
          
       
          
       
          
          
          Description
          
-         
          The objective of this technique is to avoid confusion that may be caused by the appearance of new windows that were not requested by the user. Suddenly opening new windows can disorient users or be missed completely by some. In HTML, the target attribute can be used to open a new window.
          
-         
          Use of the target attribute provides an unambiguously machine-readable indication that a new window will open. User agents can inform the user, and can also be configured not to open the new window. For those not using assistive technology, the indication would also be available from the link text.
          
+         
          The objective of this technique is to avoid confusion that may be caused by the appearance of new windows that were not requested by the user. Suddenly opening new windows can disorient users or be missed completely by some. In HTML, the target attribute can be used to open a new window.
          
+         
          Use of the target attribute provides an unambiguously machine-readable indication that a new window will open. User agents can inform the user, and can also be configured not to open the new window. For those not using assistive technology, the indication would also be available from the link text.
          
          
          
-            
          Note that not using the target allows the user to decide whether a new window should be opened or not.
          
+            
          Note that not using the target allows the user to decide whether a new window should be opened or not.
          
          
          
       
          
       
          
          
          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>
          
+            
          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>
          
          
          
       
          
       
          
@@ -36,7 +36,7 @@ 
          Tests
          
             
          Procedure
          
             
            
                
          1. Activate each link in the document to check if it opens a new window.
            2. 
-               
          2. For each link that opens a new window, check that it uses the target attribute.
            3. 
+               
          3. For each link that opens a new window, check that it uses the target attribute.
            4. 
                
          4. Check that the link text contains information indicating that the link will open in a new window.
            5. 
             
          
          
          
@@ -56,7 +56,7 @@ 
          Related Techniques
          
       
          
          
          Resources
          
          
       
          
    
diff --git a/techniques/html/H84.html b/techniques/html/H84.html
index 38a4189869..85a9672a73 100644
--- a/techniques/html/H84.html
+++ b/techniques/html/H84.html
@@ -17,15 +17,15 @@ 
          When to Use
          
       
          
       
          
          
          Description
          
-         
          The objective of this technique is to allow the user to control when an action is performed, rather than having the action occur as a side effect of choosing a value for the select element. The user may inspect the different values of the select element, or may accidentally choose the wrong value, without causing the action to occur. When the user is satisfied with their choice, they select the button to perform the action.
          
-         
          This is particularly important for users who are choosing the value of the select element via the keyboard, since navigating through the options of the select element changes the value of the control.
          
+         
          The objective of this technique is to allow the user to control when an action is performed, rather than having the action occur as a side effect of choosing a value for the select element. The user may inspect the different values of the select element, or may accidentally choose the wrong value, without causing the action to occur. When the user is satisfied with their choice, they select the button to perform the action.
          
+         
          This is particularly important for users who are choosing the value of the select element via the keyboard, since navigating through the options of the select element changes the value of the control.
          
       
          
       
          
          
          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>
@@ -38,9 +38,9 @@ 
          A calendar
          
       
          
       
          
          
          Choosing an action
          
-         
          A select element contains a list of possible actions. The action is not performed until the user presses the "Update" button.
          
+         
          A select element contains a list of possible actions. The action is not performed until the user presses the "Update" button.
          
          
-
          <form action="/process-form" method="post">
+
          <form action="/process-form" method="post">
   <label for="action">Options:</label>
   <select name="action" id="action">
     <option value="add">Add</option>
@@ -56,10 +56,10 @@ 
          Choosing an action
          
       
          Tests
          
       
          
          
          Procedure
          
-         
          For each select element/button element combination:
          
+         
          For each select element/button element combination:
          
          
            
-            
          1. Check that focus (including keyboard focus) on an option in the select element does not result in any actions
            2. 
-            
          2. Check that selecting the button performs the action associated with the current select value
            3. 
+            
          3. Check that focus (including keyboard focus) on an option in the select element does not result in any actions
            4. 
+            
          4. Check that selecting the button performs the action associated with the current select value
            5. 
          
          
       
          
       
          
@@ -79,8 +79,8 @@ 
          Related Techniques
          
    
          
       
          Resources
          
       
    
          
 
diff --git a/techniques/html/H85.html b/techniques/html/H85.html
index ea61c15aa0..78ed77b1e4 100644
--- a/techniques/html/H85.html
+++ b/techniques/html/H85.html
@@ -5,7 +5,7 @@
     
   
   
-    
          Using optgroup to group option elements inside a select
          
+    
          Using optgroup to group option elements inside a select
          
     
          
       
          ID: H85
          
       
          Technology: html
          
@@ -17,17 +17,17 @@ 
          When to Use
          
    
          
    
          
     
          Description
          
-    
          The objective of this technique is to group items in a selection list. A selection list is a set of allowed values for a form control such as a multi-select list or a combo box. Often, selection lists have groups of related options. Those groups should be semantically identified, rather than being delimited with "dummy" list entries, for example: an option element containing only a series of dashes to create a horizontal line. Semantically identifying groups of options helps to visually break up long lists so that users can more easily locate what they are interested in.
          
-    
          In HTML, the select element is used to create both multi-select lists and combo boxes. The various allowed options are each indicated with option elements. To group options together, use the optgroup element, with the related option elements inside that element. Label the group with the label attribute so users will know what to expect inside the group.
          
-      
          The optgroup element should be directly inside the select element, and the option  elements directly inside the optgroup. It is possible for a select element to contain both single option elements and optgroup groups, though authors should consider if this is in fact the desired intent when using this. It is not possible to nest the optgroup element, so only one level of grouping can be done within a select.
          
-      
          If grouping information is essential to understanding the list, authors may define option labels that can be understood even when the screen reader does not present the grouping information provided by optgroup.
          
+    
          The objective of this technique is to group items in a selection list. A selection list is a set of allowed values for a form control such as a multi-select list or a combo box. Often, selection lists have groups of related options. Those groups should be semantically identified, rather than being delimited with "dummy" list entries, for example: an option element containing only a series of dashes to create a horizontal line. Semantically identifying groups of options helps to visually break up long lists so that users can more easily locate what they are interested in.
          
+    
          In HTML, the select element is used to create both multi-select lists and combo boxes. The various allowed options are each indicated with option elements. To group options together, use the optgroup element, with the related option elements inside that element. Label the group with the label attribute so users will know what to expect inside the group.
          
+      
          The optgroup element should be directly inside the select element, and the option  elements directly inside the optgroup. It is possible for a select element to contain both single option elements and optgroup groups, though authors should consider if this is in fact the desired intent when using this. It is not possible to nest the optgroup element, so only one level of grouping can be done within a select.
          
+      
          If grouping information is essential to understanding the list, authors may define option labels that can be understood even when the screen reader does not present the grouping information provided by optgroup.
          
    
          
    
          
       
          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">
@@ -50,9 +50,9 @@ 
          Examples
          
       
          
       
          
          
-  
          The following example shows how a multi-select box can make use of the optgroup element.
          
+  
          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">
@@ -84,7 +84,7 @@ 
          Tests
          
       
          Procedure
          
       
            
         
          1. Check the set of options within a selection list to see if there are groups of related options.
            2. 
-        
          2. If there are groups of related options, they should be grouped with optgroup.
            3. 
+        
          3. If there are groups of related options, they should be grouped with optgroup.
            4. 
       
          
       
          
       
          
@@ -98,13 +98,13 @@ 
          Expected Results
          
     
          Resources
                
     
            
       
          • 
-        HTML - select element.
+        HTML - select element.
       
            • 
       
          • 
-        HTML - optgroup element.
+        HTML - optgroup element.
       
            • 
       
          • 
-        HTML - option element.
+        HTML - option element.
       
            • 
       
          • 
         WebAIM - Creating Accessible Forms.
diff --git a/techniques/html/H86.html b/techniques/html/H86.html
index 0f428b7a4a..a0bb93e30b 100644
--- a/techniques/html/H86.html
+++ b/techniques/html/H86.html
@@ -28,8 +28,8 @@ 
            Description
            
          
            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 
+            
            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>!
 </p>
            
@@ -37,16 +37,16 @@ 
            Marking up emojis in a sentence
            
          
            
             
            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">
            
 
            
 
          
            
-            
            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.
            
-
            
+            
            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   
@@ -61,7 +61,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>
@@ -119,7 +119,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 1f8a235821..d53240d767 100644
--- a/techniques/html/H89.html
+++ b/techniques/html/H89.html
@@ -6,7 +6,7 @@
 		
    
 	 
-		
            Using the title attribute to provide context-sensitive help
            
+		
            Using the title attribute to provide context-sensitive help
            
 		
            
 			
            ID: H89
            
 			
            Technology: html
            
@@ -18,23 +18,23 @@ 
            When to Use
            
 		
            
 		
            
 			
            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.
            
+			
            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.
            
+				
            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.
            
-
            <label for="search-address">Address:</label>
+				
            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>
 <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.
            
+				
            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="">
            
@@ -47,7 +47,7 @@ 
            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. Check that each form control has context-sensitive help provided in the title attribute.
              5. 
          
            
       
            
       
            
diff --git a/techniques/html/H90.html b/techniques/html/H90.html
index 2761a4d017..3660f8a831 100644
--- a/techniques/html/H90.html
+++ b/techniques/html/H90.html
@@ -5,7 +5,7 @@
 		
 	
 	
-		
            Indicating required form controls using label or legend
            
+		
            Indicating required form controls using label or legend
            
 		
            
 			
            ID: H90
            
 			
            Technology: html
            
@@ -17,14 +17,14 @@ 
            When to Use
            
 		
            
 		
            
 			
            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. 
            
+      
            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> 
+			
            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.
            
@@ -32,14 +32,14 @@ 
            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 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> 
@@ -51,7 +51,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">
@@ -60,9 +60,9 @@ 
            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. 
            
+			
            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">
@@ -85,7 +85,7 @@ 
            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 required form control, check that the required status is indicated in the form control's label or legend.
              3. 
 				
            3. 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.
              4. 
 			
            
 		
            
@@ -108,10 +108,10 @@ 
            Related Techniques
            
 		
            Resources
            
 		
 	
            
diff --git a/techniques/html/H91.html b/techniques/html/H91.html
index ac3d766b78..b75a8abac1 100644
--- a/techniques/html/H91.html
+++ b/techniques/html/H91.html
@@ -19,27 +19,27 @@ 
            When to Use
            
 			
            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; the aria-label or aria-labelledby properties; or the title attribute are used.
            
+      
            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.
            
+      
            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>
            
+				
            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>
            
+				
            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>
            
 			
            
 		
            
 		
            
@@ -47,63 +47,63 @@ 
            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>
            
+				
            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"> 
+				
            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">
            
+				
            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.
            
+				
            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".
            
+				
            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.
            
+				
            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.
            
+         
            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.
            
+         
            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>
+				
            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">
@@ -122,9 +122,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".
            
+					
            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>
@@ -133,9 +133,9 @@ 
            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.
            
+					
            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>
@@ -147,16 +147,16 @@ 
            Select Element example B
            
 					
            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".
            
+						
            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.
            
+						
            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>
            
 					
            
 				
            
 			
            
@@ -188,7 +188,7 @@ 
            Resources
            
 						HTML - Forms
 					
            • 
 					
          • 
-						HTML - The a element
+						HTML - The a element
 					
            • 
             
          • 
 							MDN - The Input (Form Input) element
diff --git a/techniques/html/H93.html b/techniques/html/H93.html
index 31a5432b5b..b4960358dd 100644
--- a/techniques/html/H93.html
+++ b/techniques/html/H93.html
@@ -10,7 +10,7 @@
 		
 	
 	
-		
            Ensuring that id attributes are unique on a web page
            
+		
            Ensuring that id attributes are unique on a web page
            
 		
            
 			
            ID: H93
            
 			
            Technology: html
            
@@ -22,21 +22,21 @@ 
            When to Use
            
 		
            
 		
            
 			
            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. 
            
+      
            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>
+			
            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.
            
+			
            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.
            
 		
            
 	
            
 	
            
@@ -44,7 +44,7 @@ 
            Tests
            
 		
            
 			
            Procedure
            
 			
              
-				
            1. Check that all id attribute values are unique on the page.
              2. 
+				
            2. Check that all id attribute values are unique on the page.
              3. 
 			
            
 		
            
 		
            
@@ -58,7 +58,7 @@ 
            Expected Results
            
 		
            Resources
            
 		
              
 			
            • 
-				HTML - id attribute
+				HTML - id attribute
 			
              • 
 			
            • 
 				Nu HTML Checker
diff --git a/techniques/html/H94.html b/techniques/html/H94.html
index 156b1b3cd9..e97b2f7284 100644
--- a/techniques/html/H94.html
+++ b/techniques/html/H94.html
@@ -37,7 +37,7 @@ 
              Description
              
 		
              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.
              
+      
              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.
              
 		
              
 	
            
 	
            
diff --git a/techniques/html/H95.html b/techniques/html/H95.html
index cd24194b0b..4be769255e 100644
--- a/techniques/html/H95.html
+++ b/techniques/html/H95.html
@@ -5,7 +5,7 @@
       
    
    
-      
            Using the track element to provide captions
            
+      
            Using the track element to provide captions
            
       
            
          
            ID: H95
            
          
            Technology: html
            
@@ -17,9 +17,9 @@ 
            When to Use
            
       
            
       
            
          
            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.
            
+      
            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.
            
       
            
@@ -28,8 +28,8 @@ 
            Description
            
       
            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>
+         
            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>
            
@@ -37,9 +37,9 @@ 
            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>
+
            <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">
@@ -53,7 +53,7 @@ 
            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.
              2. 
+            
            2. Check that the video contains a track element of kind captions in the language of the video.
              3. 
          
            
       
            
       
            
@@ -73,7 +73,7 @@ 
            Related Techniques
            
       
            Resources
            
       
              
          
            • 
-            HTML track element
+            HTML track element
          
              • 
          
            • 
             Timed Text Markup Language
diff --git a/techniques/html/H96.html b/techniques/html/H96.html
index 7f4763bcc3..e9fb9f47dd 100644
--- a/techniques/html/H96.html
+++ b/techniques/html/H96.html
@@ -5,7 +5,7 @@
       
    
    
-      
              Using the track element to provide audio descriptions
              
+      
              Using the track element to provide audio descriptions
              
       
              
          
              ID: H96
              
          
              Technology: html
              
@@ -17,8 +17,8 @@ 
              When to Use
              
       
              
       
              
          
              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 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.
              
          
              
@@ -29,16 +29,16 @@ 
              Description
              
          
              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>
+            
              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 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 file format.
              
-
              <video poster="myvideo.png" controls>
+         
              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">
@@ -50,9 +50,9 @@ 
              Audio description 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. 
          
              
       
              
       
              
@@ -75,7 +75,7 @@ 
              Resources
              
          
            • 
             Video.js, a free and open source HTML5 video player
              • 
          
            • 
-            HTML - the track element
+            HTML - the track element
          
              • 
          
            • 
             WebVTT: The Web Video Text Tracks Format
diff --git a/techniques/html/H97.html b/techniques/html/H97.html
index 50e4ba0322..9c134ec657 100644
--- a/techniques/html/H97.html
+++ b/techniques/html/H97.html
@@ -5,7 +5,7 @@
       
    
    
-      
              Grouping related links using the nav element
              
+      
              Grouping related links using the nav element
              
       
              
          
              ID: H97
              
          
              Technology: html
              
@@ -17,15 +17,15 @@ 
              When to Use
              
    
              
    
              
       
              Description
              
-      
              The objective of this technique is to group navigation links using the HTML nav element. The nav element is one of several sectioning elements in HTML. Use of this markup can make groups of links easier to locate and skip past by users of assistive technology such as screen readers. Using semantic structures allow custom style sheets to be used to change the presentation of groups of links while preserving their relationship. When the nav element is employed more than once on a page, distinguish the navigation groups by using an aria-labelledby or aria-label attribute.
              
-      
              Not all groups of links need to use the nav element for markup. For instance, links may be grouped in other structure such as lists or may use ARIA markup if they do not represent a discrete section of the page.
              
+      
              The objective of this technique is to group navigation links using the HTML nav element. The nav element is one of several sectioning elements in HTML. Use of this markup can make groups of links easier to locate and skip past by users of assistive technology such as screen readers. Using semantic structures allow custom style sheets to be used to change the presentation of groups of links while preserving their relationship. When the nav element is employed more than once on a page, distinguish the navigation groups by using an aria-labelledby or aria-label attribute.
              
+      
              Not all groups of links need to use the nav element for markup. For instance, links may be grouped in other structure such as lists or may use ARIA markup if they do not represent a discrete section of the page.
              
    
              
    
              
       
              Examples
              
       
              
          
              Navigation links enclosed in a nav element
              
-         
              This example uses a nav element to group navigation links in an accessibility curriculum.
              
-
              <nav>
+         
              This example uses a nav element to group navigation links in an accessibility curriculum.
              
+
              <nav>
   <ul>
     <li><a href="/web-accessibility.html">Web Accessibility</a></li>
     <li><a href="/doc-accessibility.html">Document Accessibility</a></li>
@@ -34,9 +34,9 @@ 
              Navigation links enclosed in a nav element
              
 </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">
+        
              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">
   <h2 id="site-nav-heading">Site</h2>
     <ul>
       <li><a href="...">nav link 1</a></li>  
@@ -54,9 +54,9 @@ 
              Multiple nav elements and 
-         
              Multiple nav elements and aria-label
              
+         
              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><a href="...">nav link 1</a></li>
     <li><a href="...">nav link 2</a></li>
@@ -77,7 +77,7 @@ 
              Tests
              
       
              
          
              Procedure
              
          
                
-            
              1. Check that links that are visually grouped and represent a section of the page are enclosed in a nav element.
                2. 
+            
              2. Check that links that are visually grouped and represent a section of the page are enclosed in a nav element.
                3. 
          
              
       
              
       
              
@@ -100,7 +100,7 @@ 
              Related Techniques
              
       
              Resources
              
       
    
              
diff --git a/techniques/html/H98.html b/techniques/html/H98.html
index 2f052bcf9d..3383da6741 100644
--- a/techniques/html/H98.html
+++ b/techniques/html/H98.html
@@ -5,7 +5,7 @@
 		
 	
 	
-		
              Using HTML autocomplete attributes
              
+		
              Using HTML autocomplete attributes
              
 		
              
 			
              ID: H98
              
 			
              Technology: html
              
@@ -18,28 +18,28 @@ 
              When to Use
              
 		
              
 			
              Description
              
 			
              The objective of this technique is to programmatically link a pre-defined and published taxonomic term to the input, so that the inputs can also be machine-interpreted. This way the input will always have a common, referable and identifiable value associated to it, no matter what language is used, or what visible on-screen term is used to label the input. Then it can be further customized or otherwise machine-manipulated to help users.
              
-			
              The technique works by adding the appropriate autocomplete token to each form field on the form to make the identified inputs Programmatically Determinable. This will help people with cognitive disabilities who may not immediately know the purpose of the field because the label used by the author is not familiar to them. When inputs have been programmatically assigned, third party plugins and software can manipulate these form fields to make them more accessible to people with cognitive disabilities. For instance, a plugin could detect an autocomplete token with the text string "tel" and insert a telephone icon. It will further enable third party software to swap out the existing labels for text labels that the user finds more familiar. For instance, it could change "Given Name" to "First Name".
              
-      
              The autocomplete attribute also improves the browser's ability to pre-populate form fields with user-preferred values. When the input has been properly "tagged" with the known token value, the value entered by the user is stored locally on the host machine and associated with the token value for reuse. It helps those with dexterity disabilities who have trouble typing, those who may need more time, and anyone who wishes to reduce effort to fill out a form.
              
+			
              The technique works by adding the appropriate autocomplete token to each form field on the form to make the identified inputs Programmatically Determinable. This will help people with cognitive disabilities who may not immediately know the purpose of the field because the label used by the author is not familiar to them. When inputs have been programmatically assigned, third party plugins and software can manipulate these form fields to make them more accessible to people with cognitive disabilities. For instance, a plugin could detect an autocomplete token with the text string "tel" and insert a telephone icon. It will further enable third party software to swap out the existing labels for text labels that the user finds more familiar. For instance, it could change "Given Name" to "First Name".
              
+      
              The autocomplete attribute also improves the browser's ability to pre-populate form fields with user-preferred values. When the input has been properly "tagged" with the known token value, the value entered by the user is stored locally on the host machine and associated with the token value for reuse. It helps those with dexterity disabilities who have trouble typing, those who may need more time, and anyone who wishes to reduce effort to fill out a form.
              
         
-   		
              The autocomplete attribute allows the browser to do a pattern match against a list of values locally stored with the browser, and supplies the appropriate corresponding value when the input is programmatically tagged. This is a user setting that can be turned on or off, or modified by the end user. This reduces typing and reliance on memory because it uses stored values to fill in the fields.
              
+   		
              The autocomplete attribute allows the browser to do a pattern match against a list of values locally stored with the browser, and supplies the appropriate corresponding value when the input is programmatically tagged. This is a user setting that can be turned on or off, or modified by the end user. This reduces typing and reliance on memory because it uses stored values to fill in the fields.
              
       
-			
              It's important to note the Success Criterion Identify Input Purpose and autocomplete attribute only place requirements on input fields collecting information about the user.
              
+			
              It's important to note the Success Criterion Identify Input Purpose and autocomplete attribute only place requirements on input fields collecting information about the user.
              
 
-	  
              For the Success Criterion, it is assumed that the autocomplete attribute is not used on form fields that do not correspond to an autocomplete field described in the HTML autocomplete attribute specification. If the autocomplete field is used to describe a "custom" taxonomy, rather than that described in the specification, this rule may produce incorrect results.
              
+	  
              For the Success Criterion, it is assumed that the autocomplete attribute is not used on form fields that do not correspond to an autocomplete field described in the HTML autocomplete attribute specification. If the autocomplete field is used to describe a "custom" taxonomy, rather than that described in the specification, this rule may produce incorrect results.
              
 			
              
 				
              Security considerations
              
 				
              Organizations can be concerned about allowing input fields to be automatically filled-in. There is sometimes confusion about how browsers save information and the security implications.
              
-				
              For the autocomplete attribute:
              
+				
              For the autocomplete attribute:
              
 				
                
 					
              • This technique should only be used when asking for data about the user who is filling the form in, not for other people.
                • 
-					
              • It only works if you are on the same computer, using the same user-account, and using the same browser. Any multi-login scenario does not save autocomplete data between different accounts. (Users can setup syncing of data across computers, but that is not the default.)
                • 
-					
              • Saving information with autocomplete is opt-in by the user, usually at the point of saving data the first time.
                • 
+					
              • It only works if you are on the same computer, using the same user-account, and using the same browser. Any multi-login scenario does not save autocomplete data between different accounts. (Users can setup syncing of data across computers, but that is not the default.)
                • 
+					
              • Saving information with autocomplete is opt-in by the user, usually at the point of saving data the first time.
                • 
 					
              • The form is not auto-submitted, the user can see the data before it is submitted.
                • 
 					
              • It is easy to wipe both history and form data in the browser settings.
                • 
 					
              • It is easy to engage a privacy mode, such as private browsing.
                • 
-					
              • Even without autocomplete set in the web page, browsers can save data, and some plugins (such as password managers) will aggressively use heuristics to guess what fields are for and fill them in. Using the autocomplete attribute makes those guesses accurate.
                • 
+					
              • Even without autocomplete set in the web page, browsers can save data, and some plugins (such as password managers) will aggressively use heuristics to guess what fields are for and fill them in. Using the autocomplete attribute makes those guesses accurate.
                • 
 				
              
-				
              The browser history provides far more detail about what people have done, and is just as available as autocomplete data. The solutions/mitigations for browser-history are similar to autocomplete.
              
+				
              The browser history provides far more detail about what people have done, and is just as available as autocomplete data. The solutions/mitigations for browser-history are similar to autocomplete.
              
 			
              
 		
              
 		
              
@@ -47,7 +47,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">
@@ -75,10 +75,10 @@ 
              A user's credit card information
              
 			
              Tests
              
 			
              
 				
              Procedure
              
-			
              For each form field that collects information about the user and corresponds to an autocomplete field described in WCAG 2.1 7. Section 7: Input Purposes for User Interface Components, check the following:
              
+			
              For each form field that collects information about the user and corresponds to an autocomplete field described in WCAG 2.1 7. Section 7: Input Purposes for User Interface Components, check the following:
              
         
                
-					
              1. The form field has a valid and well-formed autocomplete attribute and value pair.
                2. 
-          
              2. The purpose of the form field indicated by the label corresponds with the autocomplete token on the input.
                3. 
+					
              3. The form field has a valid and well-formed autocomplete attribute and value pair.
                4. 
+          
              4. The purpose of the form field indicated by the label corresponds with the autocomplete token on the input.
                5. 
 				
              
 			
              
 			
              
diff --git a/techniques/html/H99.html b/techniques/html/H99.html
index d97d535216..47761db438 100644
--- a/techniques/html/H99.html
+++ b/techniques/html/H99.html
@@ -26,7 +26,7 @@ 
              Description
              
 
 			
              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.
              
 
@@ -35,8 +35,8 @@ 
              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">
+				
              To add a page list to a web-based document, 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>
@@ -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">
+				
              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>
@@ -62,8 +62,8 @@ 
              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/"
+				
              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">
   ...
@@ -87,7 +87,7 @@ 
              Go to page mechanism
              
 		
              
 			
              Resources
              
 			
diff --git a/techniques/pdf/PDF1.html b/techniques/pdf/PDF1.html
index 01fb20bf9d..723ee8cb15 100644
--- a/techniques/pdf/PDF1.html
+++ b/techniques/pdf/PDF1.html
@@ -82,11 +82,11 @@ 
              Adding alt text to an image in OpenOffice with the Writer add-on
              
 				
              
 					
              Adding a text alternative to an image in a PDF document using an /Alt entry
              
 					
              The /Alt property used on an image of mountains with a moon and trees typically would be used like this (typically accomplished by an authoring tool):
              
-
              /Figure <</Alt (Sketch of Mountains with moon rising over trees)>>
              
+
              /Figure <</Alt (Sketch of Mountains with moon rising over trees)>>
              
 					
              The image might also be represented by a tag with a different name. A different name might be used because the tag name is written in a language other than English or because a specific tool uses a different name for some other reason. In this situation, it is also necessary that the RoleMap contained within the StructTreeRoot for the PDF document contain an entry which explicitly maps the name of the tag used for the image with the standard structure type used in PDF documents (in this case, Figure). If the RoleMap contains only an entry mapping Shape tags to Figure tags, the rolemap information would appear as follows:
              
-
              /RoleMap << /Shape /Figure >>
              
+
              /RoleMap << /Shape /Figure >>
              
 					
              In this case, the usage of the /Alt entry as follows would also be correct:
              
-
              /Shape <</Alt (Crater Lake in the summer, with the blue sky, clouds and
+
              /Shape <</Alt (Crater Lake in the summer, with the blue sky, clouds and
  crater walls perfectly reflected in the lake) >>
              
 					
              Note that the /Alt entry in property lists can be combined with other entries.
              
 				
              
diff --git a/techniques/pdf/PDF10.html b/techniques/pdf/PDF10.html
index 4e8de9b4d6..721cbcd90e 100644
--- a/techniques/pdf/PDF10.html
+++ b/techniques/pdf/PDF10.html
@@ -69,7 +69,7 @@ 
              Adding a tooltip to interactive form controls
              
             
              The following code fragment illustrates the use of the TU entry to
     						provide a tooltip (or programmatically associated text label) for a
     						form field. This is typically accomplished by an authoring tool. 
              
-            
              << /AP -dict-                                                   
+            
              << /AP -dict-                                                   
    /DA /Helv  0 Tf 0 g
    /DR -dict-
    /F 0x4
diff --git a/techniques/pdf/PDF11.html b/techniques/pdf/PDF11.html
index 8d79742d32..b68386be54 100644
--- a/techniques/pdf/PDF11.html
+++ b/techniques/pdf/PDF11.html
@@ -116,14 +116,14 @@ 
              Marking up link text using a /Link structure element
              
     						the association between content items and link annotations, providing
     						functionality comparable to HTML hypertext links.
              
         
              In HTML, the following example produces text containing a hypertext link: 
              
-            
              <p>Here is some text <a href="https://www.w3.org/WAI/">with a link</a> inside.</p>
              
+            
              <p>Here is some text <a href="https://www.w3.org/WAI/">with a link</a> inside.</p>
              
             
              In PDF the page must be painted first and then a link annotation
     						placed over the area where the object action will occur. 
              
             
              The following code fragment shows PDF equivalent to the HTML above;
     						it uses link text displayed in blue and underlined. A second code fragment
     						follows, indicating the associated logical structure hierarchy. This
     						is typically accomplished by an authoring tool. 
              
-            
              /P <</MCID 0>>                                                %Marked Content Sequence 0 (paragraph)
+            
              /P <</MCID 0>>                                                %Marked Content Sequence 0 (paragraph)
   BDC                                                          %Begin marked content sequence
    BT                                                          %Begin text object
     /F1 11.04 Tf                                               %set text font and size
@@ -168,7 +168,7 @@ 
              Marking up link text using a /Link structure element
              
             
               The following code fragment is an excerpt from the logical structure
     						that establishes the association between the content items and the
     						link annotation: 
              
-            
               11 0 obj                                              %Object ID 11, generation   0, obj keyword
+            
               11 0 obj                                              %Object ID 11, generation   0, obj keyword
   <</K[1                                               %immediate child of the structure tree root
    <<
     /Obj 26 0 R                                        %reference to Object 26
diff --git a/techniques/pdf/PDF12.html b/techniques/pdf/PDF12.html
index 3b2a191f26..11eedffc66 100644
--- a/techniques/pdf/PDF12.html
+++ b/techniques/pdf/PDF12.html
@@ -177,7 +177,7 @@ 
              Specifying name, role, value and/or state for a form field using Adobe Acrob
     
              
       
              Adding a checkbox in a PDF document using the /Btn field type
                 
       
              The following code fragment illustrates code that is typical for a simple check box field such as shown in Examples 1 and 2. This is typically accomplished by an authoring tool.
              
-            
              1 0 obj
+            
              1 0 obj
   << /FT /Btn     % Role
      /TU Retiree  % Name
      /V /Yes      % Value
diff --git a/techniques/pdf/PDF13.html b/techniques/pdf/PDF13.html
index da101e5c20..afe15b1d98 100644
--- a/techniques/pdf/PDF13.html
+++ b/techniques/pdf/PDF13.html
@@ -65,14 +65,14 @@ 
              Adding alternate link text using Adobe Acrobat 9 Pro
              
 		
              
 			
              Adding alternate link text in a PDF document using the /Alt entry
              
 			
              The following code fragment illustrates code that is typical for alternative text for a link. This is typically accomplished by an authoring tool.
              
-            
              32 0 obj
+            
              32 0 obj
 <<
   /S/URI                                       %Action type (required), must be URI for a URI action
   /URI(http://www.boston.com/business/technology/)  %Uniform resource identifier(required), the URI to be resolved
 >>
 endobj
              
       
              The following illustrates how to specify alternate text for the URL in the above link:
              
-            
              11 0 obj
+            
              11 0 obj
 <<
   /Alt(Boston Globe technology page)    %Alternate text entry
   /K [ 1                                                      
diff --git a/techniques/pdf/PDF16.html b/techniques/pdf/PDF16.html
index 576a34ec3f..d63a74a932 100644
--- a/techniques/pdf/PDF16.html
+++ b/techniques/pdf/PDF16.html
@@ -46,7 +46,7 @@ 
              Adding a /Lang entry to specify the default document language u
 				
              Specifying the default document language in a PDF document using a /Lang entry
              
         
              The natural language used for text in a document is determined in a hierarchical fashion, based on whether an optional /Lang entry is present in any of several possible locations. At the highest level, the document's default language may be specified by a /Lang entry in the document catalog.
              
             
              The following code fragment illustrates code that is typical for using the /Lang entry in the document catalog for a document's default language (in this case English). (This is typically accomplished by an authoring tool.)
              
-            
              1 0 obj
+            
              1 0 obj
    << /Type /Catalog
       ...
       /Lang (en)
diff --git a/techniques/pdf/PDF17.html b/techniques/pdf/PDF17.html
index 4c82e9a94d..8e58701ebb 100644
--- a/techniques/pdf/PDF17.html
+++ b/techniques/pdf/PDF17.html
@@ -77,7 +77,7 @@ 
              Specifying page numbers using the /PageLabels entry
              
 				
              The following code fragment illustrates code that is typical for specifying multiple page numbering schemes in a document.
              
 				
              The example below is for a document with pages labeled: i, ii, iii, iv, 1, 2, 3, A-8, A-9, ...
              
 				
              This numbering scheme requires 3 page-label dictionaries (for lowercase Roman, Arabic, and prefixed numbers) 
              
-            
              1 0 obj
+            
              1 0 obj
     << /Type /Catalog
        /PageLabels << /Nums [ 0 << /S /r >>  % lowercase Roman numerals
                               4 << /S /D >>  % Arabic numerals
diff --git a/techniques/pdf/PDF18.html b/techniques/pdf/PDF18.html
index b616e5d0e0..ee653c5978 100644
--- a/techniques/pdf/PDF18.html
+++ b/techniques/pdf/PDF18.html
@@ -58,7 +58,7 @@ 
              Setting the document title in the metadata and specifying that the title be
       
              
 				
              A /Title entry in the document information dictionary of a PDF document
              
 				
              The following code fragment illustrates code that is typical for providing a /Title entry in a document information dictionary that contains a document title.
              
-				
              1 0 obj   
+				
              1 0 obj   
   << /Title (Applying Guerrilla Tactics to Usability Testing by People with Disabilities)    
     /Author (Mary Smith) 
     /CreationDate (D:19970915110347-08'00')    
diff --git a/techniques/pdf/PDF19.html b/techniques/pdf/PDF19.html
index f7701707dc..a98a9b9db8 100644
--- a/techniques/pdf/PDF19.html
+++ b/techniques/pdf/PDF19.html
@@ -74,7 +74,7 @@ 
              Specifying the language for a word or phrase in a PDF document using a Structure elements of any type, through a /Lang entry in the structure element dictionary.
              • 
 				
            
         
            The following code fragment illustrates code that is typical for using the /Lang entry to override the default document language by specifying a marked-content sequence within a page's content stream:
            
-            
            /P % Start of marked-content sequence
+            
            /P % Start of marked-content sequence
    BDC
       (See you later, or in Spanish you would say, ) Tj
       /Span << /Lang (es-MX) >>% Start of nested marked-content sequence
@@ -84,7 +84,7 @@ 
            Specifying the language for a word or phrase in a PDF document using a 
            
       
 	 
            The following code fragment illustrates code that is typical for using the /Lang entry in the structure element dictionary. In this case, the /Lang entry applies to the marked-content sequence having an MCID (marked-content identifier) value of 0 within the indicated page's content stream.
            
-            
            1 0 obj% Structure element
+            
            1 0 obj% Structure element
   << /Type /StructElem
     /S /Span% Structure type
     /P /P% Parent in structure hierarchy
diff --git a/techniques/pdf/PDF2.html b/techniques/pdf/PDF2.html
index 6c16959837..bf05579b33 100644
--- a/techniques/pdf/PDF2.html
+++ b/techniques/pdf/PDF2.html
@@ -76,7 +76,7 @@ 
            Adding bookmarks using Adobe Acrobat Pro after conversion
            
 			
            
 				
            Creating bookmarks with the outline hierarchy
             
 				
            The following code fragment illustrates part of an outline hierarchy used to create bookmarks This is typically accomplished by an authoring tool.
            
-
            121 0 obj
+
            121 0 obj
   << /Type /Outlines
     /First 22 0 R
     /Last 29 0 R
diff --git a/techniques/pdf/PDF20.html b/techniques/pdf/PDF20.html
index 4084c89a3c..bb8a3db91c 100644
--- a/techniques/pdf/PDF20.html
+++ b/techniques/pdf/PDF20.html
@@ -77,7 +77,7 @@ 
            Repairing table cells using the table editor in the Reading Order tool in Ad
       
            
          
            Marking up a table using table structure elements
            
 				 
            The following code fragment illustrates code that is typical for a simple table (header row and data row) such as shown in Examples 1-3:
            
-            
            95 0 obj                %Structure element for a table
+            
            95 0 obj                %Structure element for a table
  << 
   /A 39 0 R
   /K[96 0 R 101 0 R 106 0 R 111 0 R]
diff --git a/techniques/pdf/PDF22.html b/techniques/pdf/PDF22.html
index 760e3288b0..1ca210e377 100644
--- a/techniques/pdf/PDF22.html
+++ b/techniques/pdf/PDF22.html
@@ -55,7 +55,7 @@ 
            Providing validation for an input field format using Adobe Acrobat Pro
            
 			
            Validating a required date format in a PDF form using JavaScript using Adobe Acrobat Pro
            
 			
            This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions.
            
 			
            The following JavaScript illustrates the use of a script to validate form fields, in this case, a date field. To add this script to the form field, open the Text Field Properties dialog and select Edit in the Validate tab.
            
-            
            // JavaScript code for date mask format MM/DD/YYYY
+            
            // JavaScript code for date mask format MM/DD/YYYY
 var re = /^[mdy0-9]{2}\/[mdy0-9]{2}\/[mdy0-9]{4}$/
 //Allow blank space in field
 if (event.value !="") {
diff --git a/techniques/pdf/PDF23.html b/techniques/pdf/PDF23.html
index ea9ffdfa2a..98fb038c00 100644
--- a/techniques/pdf/PDF23.html
+++ b/techniques/pdf/PDF23.html
@@ -66,7 +66,7 @@ 
            Adding form controls in PDF documents using Adobe Acrobat Pro
            
 			
            
         
            Adding a text field in a PDF document using the /Tx field type
            
         
            The following code fragment illustrates code that is typical for a simple text field such as shown in Examples 1 and 2. This is typically accomplished by an authoring tool. 
            
-            
            << /AP -dict-                                                   
+            
            << /AP -dict-                                                   
    /DA /Helv  0 Tf 0 g
    /DR -dict-
    /F 0x4
diff --git a/techniques/pdf/PDF4.html b/techniques/pdf/PDF4.html
index 25bf431fd2..a3f7b2fcd6 100644
--- a/techniques/pdf/PDF4.html
+++ b/techniques/pdf/PDF4.html
@@ -39,10 +39,10 @@ 
            Marking an image as an artifact in a PDF document using an /Artifact tag or
 				
 				
            
 					
            /Artifact
            
-            
            BMC  ...  EMC
            
+            
            BMC  ...  EMC
            
             
            or
            
             
            /Artifact propertyList
            
-            
            BDC  ...  EMC
            
+            
            BDC  ...  EMC
            
             
            The first is used to identify a generic artifact; the second is used for artifacts that have an associated property list. Note, to aid in text reflow, artifacts should be defined with property lists whenever possible. Artifacts lacking a specified bounding box are likely to be discarded during reflow.
            
             
            Property list entries for artifacts include Type, BBox, Attached, and Subtype.
            
 					
            
diff --git a/techniques/pdf/PDF5.html b/techniques/pdf/PDF5.html
index e17a9f2b65..c5f2e8bd98 100644
--- a/techniques/pdf/PDF5.html
+++ b/techniques/pdf/PDF5.html
@@ -42,7 +42,7 @@ 
            Creating a required field in a PDF form using Acrobat Pro
            
 				
            
 					
            Adding a required text field in a PDF form using the /Tx field type and Ff flag
            
           
            The following code fragment illustrates code that is typical for the object definitions for a typical text field. Note that the text field is required, using the Ff flag. This is typically accomplished by an authoring tool.
            
-
            << /AP -dict-                                                   
+
            << /AP -dict-                                                   
    /DA /Helv  0 Tf 0 g
    /DR -dict-
    /F 0x4
diff --git a/techniques/pdf/PDF6.html b/techniques/pdf/PDF6.html
index 5f9a3621cf..5868408608 100644
--- a/techniques/pdf/PDF6.html
+++ b/techniques/pdf/PDF6.html
@@ -87,7 +87,7 @@ 
            Modifying table tags using the Tags tab in Adobe Acrobat Pro
            
       
            
 				
            Marking up a table using table structure elements
             
 				
            The following code fragment illustrates code that is typical for a simple table (header row and data row):
            
-
            95 0 obj                %Structure element for a table
+
            95 0 obj                %Structure element for a table
   << 
     /A 39 0 R
     /K[96 0 R 101 0 R 106 0 R 111 0 R]
diff --git a/techniques/pdf/PDF8.html b/techniques/pdf/PDF8.html
index 479b30a1eb..10b54a4433 100644
--- a/techniques/pdf/PDF8.html
+++ b/techniques/pdf/PDF8.html
@@ -49,7 +49,7 @@ 
            Adding an /E entry to an abbreviation using Adobe Acrobat Pro's
 				
            Using a /Span structure element with an /E entry to define an abbreviation
            
 				
            The following code fragment illustrates code that is typical for using the /Span structure element to define an abbreviation.
            
 				
            This example uses the sentence "Sugar is commonly sold in 5 lb bags." The abbreviation "lb" is tagged as a /Span structure element with an /E entry (typically accomplished by an authoring tool).
            
-
            1 0 obj                                  % structure element
+
            1 0 obj                                  % structure element
   << /Type /StructElemen
            /S /Span                      % element type
            /P ...                        % Parent in structure hierarchy
@@ -66,7 +66,7 @@ 
            Using a /TH structure element with an /E entry to
 				
            As noted in the Description, the /E entry is valid with any structure element.
            
 				
            The following code fragment illustrates code that is typical for using an /E entry to define an abbreviation.
            
 				
            A table that contains columns for each month uses abbreviations as the values of column headers. The expansion for each abbreviation is provided as the /E entry of the /TH structure element (typically accomplished by an authoring tool).
            
-
            1 0 obj                                  % structure element
+
            1 0 obj                                  % structure element
   << /Type /StructElemen
           /S /TH                        % element type
           /P ...                        % Parent in structure hierarchy
diff --git a/techniques/pdf/PDF9.html b/techniques/pdf/PDF9.html
index 8471128f84..5894a2d683 100644
--- a/techniques/pdf/PDF9.html
+++ b/techniques/pdf/PDF9.html
@@ -72,7 +72,7 @@ 
            Creating documents in OpenOffice Writer that have correctly tagged headings
 						
            Marking up headings using /Hn elements
            
             
            Headings within PDF documents can be marked up using /Hn elements in the structure tree, where n is numeral 1 through 6 (for example /H1, /H2, etc.). 
            
             
            The following code fragment illustrates code that is typical for using the /Hn elements to mark content. Note that /H1 has been role-mapped to /Head1 in this example. This is typically accomplished by an authoring tool.
            
-            
            0 obj% Document catalog
+            
            0 obj% Document catalog
   << /Type /Catalog
      /Pages 100 0 R                  % Page tree
      /StructTreeRoot 300 0 R         % Structure tree root
@@ -122,7 +122,7 @@ 
            Marking up headings using /Hn elements
            
 endobj
 ...
            
             
            Within marked content containers, headings can be marked up using /Headn elements as follows for a first-level heading in a PDF document:
            
-
            BT		 		% Start of text object
+
            BT		 		% Start of text object
   /Head1 <</MCID 0 >>   	% Start of marked-content sequence
      BDC
         ...
diff --git a/techniques/server-side-script/SVR1.html b/techniques/server-side-script/SVR1.html
index 98b1fb0ad2..4c74ba7aa0 100644
--- a/techniques/server-side-script/SVR1.html
+++ b/techniques/server-side-script/SVR1.html
@@ -26,53 +26,53 @@ 
            Examples
            
 		
            
 			
            JSP/Servlets
            
 			
            In Java Servlets or JavaServer Pages (JSP), developers can use
-				HttpServletResponse.sendRedirect(String url). 
            
-
            ...
+				HttpServletResponse.sendRedirect(String url). 
            
+
            ...
 public void doGet(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {
   ...
   response.sendRedirect("/newUserLogin.do");
-}
            
+}
            
 			
-			
            This sends a response with a 302 status code ("Found") and a Location header with the new URL to the user agent. It is also possible to set another status code with response.sendError(int code, String message) with one of the constants defined in the interface javax.servlet.http.HttpServletResponse as status code.
            
+			
            This sends a response with a 302 status code ("Found") and a Location header with the new URL to the user agent. It is also possible to set another status code with response.sendError(int code, String message) with one of the constants defined in the interface javax.servlet.http.HttpServletResponse as status code.
            
 			
-
            ...
+
            ...
 public void doGet(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {
   ...
   response.sendError(response.SC_MOVED_PERMANENTLY, "/newUserLogin.do");
-}
            
+}
            
 				
-				
             If an application uses HttpServletResponse.encodeURL(String
+				
             If an application uses HttpServletResponse.encodeURL(String
 					url) for URL rewriting because the application depends on
-					sessions, the method HttpServletResponse.encodeRedirectURL(String url) should be used instead of
-					HttpServletResponse.sendRedirect(String url). It is
-					also possible to rewrite a URL with HttpServletResponse.encodeURL(String url) and then pass this URL to HttpServletResponse.sendRedirect(String url). 
            
+					sessions, the method HttpServletResponse.encodeRedirectURL(String url) should be used instead of
+					HttpServletResponse.sendRedirect(String url). It is
+					also possible to rewrite a URL with HttpServletResponse.encodeURL(String url) and then pass this URL to HttpServletResponse.sendRedirect(String url). 
            
 			
            
 			
            
 			 
            ASP
            
 			 
-			 
            In Active Server Page (ASP) with VBScript, developers can use Response.Redirect.
            
+			 
            In Active Server Page (ASP) with VBScript, developers can use Response.Redirect.
            
 			 
-
            Response.Redirect "newUserLogin.asp"
            
+
            Response.Redirect "newUserLogin.asp"
            
 			 
 			 
            or
            
-
            Response.Redirect("newUserLogin.asp")
            
+
            Response.Redirect("newUserLogin.asp")
            
 			 
 			 
            The code below is a more complete example with a specific HTTP status code.
            
 			 
-
            Response.Clear
+
            Response.Clear
 Response.Status = 301
 Response.AddHeader "Location", "newUserLogin.asp"
 Response.Flush
-Response.End
            
+Response.End
            
 		
            
 		
            
 		 
            PHP
            
 		 
 		 
            In PHP, developers can send a raw HTTP header with the header method. The code below sends a 301 status code and a new location. If the status is not explicitly set, the redirect response sends an HTTP status code 302.
            
 		
-
            <?php
+
            <?php
 header("HTTP/1.1 301 Moved Permanently");
 header("Location: https://www.example.com/newUserLogin.php");
 ?>
            
@@ -82,7 +82,7 @@ 
            Apache
            
 	 
 	 
            Developers can configure the Apache web server to handle redirects, as in the following example.
            
 	 
-
            redirect 301 /oldUserLogin.jsp http://www.example.com/newUserLogin.do
            
+
            redirect 301 /oldUserLogin.jsp http://www.example.com/newUserLogin.do
            
 	
            
 	
            
 	
            
@@ -92,7 +92,7 @@ 
            Procedure
            
 			
              
 				
            1. Find each link or programmatic reference to another page or web page.
              2. 
 				
            2. For each link or programmatic reference to a URI in the set of web pages being evaluated, check if the referenced web page contains code (e.g., meta element or script) that causes a client-side redirect.
              3. 
-				
            3. For each link or programmatic reference to a URI in the set of web pages being evaluated, check if the referenced URI does not cause a redirect OR causes a server-side redirect without a time-out.
              4. 
+				
            4. For each link or programmatic reference to a URI in the set of web pages being evaluated, check if the referenced URI does not cause a redirect OR causes a server-side redirect without a time-out.
              5. 
 			
            
 		
            
 		
            
diff --git a/techniques/server-side-script/SVR2.html b/techniques/server-side-script/SVR2.html
index 8ff2668b0e..0d9ed3f033 100644
--- a/techniques/server-side-script/SVR2.html
+++ b/techniques/server-side-script/SVR2.html
@@ -17,16 +17,16 @@ 
            When to Use
            
 		
            
 		
            
 			
            Description
            
-			
            The objective of this technique is to ensure that users can always access an accessible version of the content when non-conforming versions are also available. Whenever content is provided in a format that does not conform to WCAG, the site as a whole can still conform if alternate versions of the inaccessible content are provided. Conformance Requirement 4 requires that alternate versions can be derived from the nonconforming content or from its URI.
            
+			
            The objective of this technique is to ensure that users can always access an accessible version of the content when non-conforming versions are also available. Whenever content is provided in a format that does not conform to WCAG, the site as a whole can still conform if alternate versions of the inaccessible content are provided. Conformance Requirement 4 requires that alternate versions can be derived from the nonconforming content or from its URI.
            
 			
            Since it is not always possible to provide an accessible link from within non-conforming content, this technique describes how authors can use Apache's Module "mod_access" to ensure that non-conforming content can only be accessed from URIs that serve as alternate versions to the non-conforming content or from pages that include links to both the non-conforming version and the alternative version.
            
 		
            
 		
            
 			
            Examples
            
 			
            
-				
            Using Apache's mod_redirect module to redirect requests
            
-				
            The following .htaccess file uses Apache's mod_redirect module to redirect requests for "inaccessible.html" to "accessible.html" unless the request comes from "accessible.html".
            
+				
            Using Apache's mod_redirect module to redirect requests
            
+				
            The following .htaccess file uses Apache's mod_redirect module to redirect requests for "inaccessible.html" to "accessible.html" unless the request comes from "accessible.html".
            
      
-
            # If the request for inaccessible content comes from a file 
+
            # If the request for inaccessible content comes from a file 
 # called accessible.html, then set an environment variable that 
 # allows the inaccessible version to be displayed.
 SetEnvIf Referer .*(accessible.html)$ let_me_in
@@ -39,13 +39,13 @@ 
            Using Apache's mod_redirect module to r
 # If the request comes from anyplace but accessible.html, then 
 # redirect the error condition to a location where the accessible 
 # version resides
-ErrorDocument 403 /example_directory/accessible.html
            
+ErrorDocument 403 /example_directory/accessible.html
            
      
            
 		 
            
 			
            Redirecting direct requests for files
            
      
            This example assumes a directory structure where documents are available in multiple formats. One of the formats does not meet WCAG at the level claimed and uses the file extension "jna" (Just Not Accessible). All of these files are stored in a folder called "jna" with an .htaccess file which ensures that any direct request for a file with the .jna extension from pages where inaccessible versions are not already available is redirected to an index page that lists all of the available formats.
            
      
-
            # If the request for inaccessible content comes from a file at 
+
            # If the request for inaccessible content comes from a file at 
 # https://example.com/documents/index.html, then set an environment 
 # variable that allows the inaccessible version to be displayed.
 SetEnvIf Referer ^https://example.com/documents/index.html$ let_me_in
@@ -58,7 +58,7 @@ 
            Redirecting direct requests for files
            
 # If the request comes from anyplace but https://example.com/documents/index.html, then 
 # redirect the error condition to a location where a link the accessible 
 # version resides
-ErrorDocument 403 https://example.com/documents/index.html
            
+ErrorDocument 403 https://example.com/documents/index.html
            
    
            
  
            Tests
            
    
            Procedure
            
diff --git a/techniques/server-side-script/SVR3.html b/techniques/server-side-script/SVR3.html
index e64ea5d1b6..84d063670e 100644
--- a/techniques/server-side-script/SVR3.html
+++ b/techniques/server-side-script/SVR3.html
@@ -33,7 +33,7 @@ 
            Using HTTP referer in PHP
            
             
              
            
                
            Conforming PHP
            
-
            <!DOCTYPE html>
+
            <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
@@ -51,7 +51,7 @@ 
            Conforming PHP
            
          
                
            Non-conforming PHP
            
          
-
            <?php 
+
            <?php 
 // if the request comes from a file that contains the string "conforming.php" 
 // then render the page
   if(stristr($_SERVER['HTTP_REFERER'], "conforming.php")) {
diff --git a/techniques/server-side-script/SVR4.html b/techniques/server-side-script/SVR4.html
index 5ecb4bc7ac..8e3681e7ee 100644
--- a/techniques/server-side-script/SVR4.html
+++ b/techniques/server-side-script/SVR4.html
@@ -29,7 +29,7 @@ 
            Setting a session or persistent cookie to store a user preference
            
 				
            A web page author may choose to handle this preference via a cookie, which may be handled via a server-side scripting language such as PHP.
            
 				
            The preferences page may be offered as follows:
            
     
-
            <!DOCTYPE html>
+
            <!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Site Preferences</title>
@@ -52,7 +52,7 @@ 
            Setting a session or persistent cookie to store a user preference
            
    
            
 		
            pref.php
            
    
-
            <?php
+
            <?php
 if(isset($site_pref)) {
 setcookie("site_pref",$site_pref, time() + (86400 * 30)); //set for 30 days
 header("location: http://www.example.com"); //redirects to home page
@@ -65,7 +65,7 @@ 
            pref.php
            
 	
            
 		
            index.php
            
 
-
            <?
+
            <?
 if(isset($site_pref)) {
   if($site_pref="axx") {
     header("location: ./accessible/index.php");
diff --git a/techniques/server-side-script/SVR5.html b/techniques/server-side-script/SVR5.html
index dbf2eba626..bdc9dea80b 100644
--- a/techniques/server-side-script/SVR5.html
+++ b/techniques/server-side-script/SVR5.html
@@ -18,30 +18,30 @@ 
            When to Use
            
 		
            
 			
            Description
            
 			
            The objective of this technique is to provide information on the  primary language or languages in a web page, in order to identify the  audience of the content. The Content-Language HTTP header can contain a  list of one or more language codes, which can be used for language  negotiation between a user agent and a server. If the language  preferences in a user agent are set correctly, language negotiation can  help the user to find a language version of the content that suits their preferences.
            
-			
            Note that the Content-Language HTTP header does not serve to  identify the language used for processing the content. The content  processing language can be identified by means of other techniques, such as the attributes lang and xml:lang in markup languages.
            
-			
            This technique ensures that the primary language of the  document, as specified for example in the lang or xml:lang attribute, is listed in the Content-Language HTTP header.
            
+			
            Note that the Content-Language HTTP header does not serve to  identify the language used for processing the content. The content  processing language can be identified by means of other techniques, such as the attributes lang and xml:lang in markup languages.
            
+			
            This technique ensures that the primary language of the  document, as specified for example in the lang or xml:lang attribute, is listed in the Content-Language HTTP header.
            
 		
            
 		
            
 			
            Examples
            
 			
            
 				
            Setting content language in Java Servlet and JSP
            
-				
            In Java Servlet or JavaServer Pages (JSP), developers can use response.setHeader("Content-Language", lang), in which "lang" stands for a language tag (for example, "en" for English): 
            
+				
            In Java Servlet or JavaServer Pages (JSP), developers can use response.setHeader("Content-Language", lang), in which "lang" stands for a language tag (for example, "en" for English): 
            
 
-
            ...
+
            ...
 public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
    ...
    response.setHeader("Content-Language", "en");
    PrintWriter out = response.getWriter();
    ...
-}
            
+}
            
    
            
    
            
     
            Setting content language in PHP
            
     
     
            In PHP, developers can send a raw HTTP header with the header method. The following example sets the language to French: 
            
     
-
            <?php header('Content-language: fr'); ... ?>
            
+
            <?php header('Content-language: fr'); ... ?>
            
   
            
  
            Tests
            
    
            Procedure
            
diff --git a/techniques/silverlight/SL1.html b/techniques/silverlight/SL1.html
index ee982e7848..1e7e7c5278 100644
--- a/techniques/silverlight/SL1.html
+++ b/techniques/silverlight/SL1.html
@@ -5,11 +5,11 @@
       
          
    
          Description
          
       
          The objective of this technique is to show how to access an alternate
-    				audio channel in a prepared media file that is played in a Silverlight MediaElement. 
          
+    				audio channel in a prepared media file that is played in a Silverlight MediaElement. 
          
       
          Silverlight supports media file formats that contains additional audio
     				channels in synchronization, beyond the two tracks for stereo audio
     				that are used by typical media player defaults. Silverlight provides
-    				a dedicated AudioStreamIndex API on MediaElement,
+    				a dedicated AudioStreamIndex API on MediaElement,
     				so that the Silverlight application author can use Silverlight programming
     				techniques to select which audio channel to play for the user. Silverlight
     				control authors might label a UI control with text such as "Activate
@@ -48,9 +48,9 @@ 
          Changing AudioStreamIndex 
          
     						invokes a function that swaps the audio channels and plays an alternative
     						synchronized audio channel that contains a composite full-description audio track. 
          
             
          The following is the basic UI in XAML. This example is deliberately
-    						simple and does not include AutomationProperties.
+    						simple and does not include AutomationProperties.
     						Audio streams are identified by an index in a collection. 
          
-            
                <Grid x:Name="LayoutRoot" Background="White">
+            
                <Grid x:Name="LayoutRoot" Background="White">
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="*" />
             <ColumnDefinition Width="*" />
@@ -77,7 +77,7 @@ 
          Changing AudioStreamIndex 
          
     </Grid>
 
          
             
          The following is the C# logic. 
          
-            
                  private void AltAudioBtn_Click(object sender, RoutedEventArgs e)
+            
                  private void AltAudioBtn_Click(object sender, RoutedEventArgs e)
         {
             if (media.AudioStreamCount > 1)
             {
diff --git a/techniques/silverlight/SL10.html b/techniques/silverlight/SL10.html
index 16cc8df0c2..3d09201b98 100644
--- a/techniques/silverlight/SL10.html
+++ b/techniques/silverlight/SL10.html
@@ -15,7 +15,7 @@
     				to a data input scenario. The key to doing this in Silverlight is to
     				use a data binding mode that sets UpdateSourceTrigger of
     				all individual databound fields in that form or transaction. For any
-    				data binding where the UpdateSourceTrigger is Explicit,
+    				data binding where the UpdateSourceTrigger is Explicit,
     				no real-time change is made to the data, until the UpdateSource method
     				is called on each of these bindings. The application-specific Submit
     				button is connected to an event handler that calls UpdateSource on
@@ -24,7 +24,7 @@
          
           Validation of data 
          
          
          The Submit button itself can also be the UI element that provides
     					warnings, instructions, etc. in a way that assistive technologies can
-    					report to users, through the AutomationProperties techniques.
+    					report to users, through the AutomationProperties techniques.
     					Using a Submit model for Silverlight form input to databound data sources
     					relies on a particular data binding mode. The Submit model can be used
     					either along with client-side or server-side validation techniques.
@@ -42,7 +42,7 @@ 
          Two form fields with Submit
          
     						UI , which also includes the binding definitions. Note the Mode=TwoWay,
     						UpdateSourceTrigger=Explicit attributes in the bindings. This is the
     						binding mode to use for the Submit button scenario. 
          
-            
          <UserControl x:Class="BasicSubmitButton.MainPage"
+            
          <UserControl x:Class="BasicSubmitButton.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
@@ -95,7 +95,7 @@ 
          Two form fields with Submit
          
     						A full implementation might replace this with a server side data
     						object infrastructure. A full implementation might also provide a "Reset" or "Edit" button
     						to enable form submission again if there were issues. 
          
-            
          private void SubmitButton_Click(object sender, RoutedEventArgs e)
+            
          private void SubmitButton_Click(object sender, RoutedEventArgs e)
 {
    (sender as Button).IsEnabled = false;
    NameTextBox.GetBindingExpression(TextBox.TextProperty).UpdateSource();
diff --git a/techniques/silverlight/SL11.html b/techniques/silverlight/SL11.html
index 0bf91d792c..cccfae3f7c 100644
--- a/techniques/silverlight/SL11.html
+++ b/techniques/silverlight/SL11.html
@@ -8,7 +8,7 @@
     				for a Silverlight animation with a user interface control. This enables
     				a user to pause or stop an animation in Silverlight content. 
          
       
          The Silverlight animation system is generalized such that nearly any
-    				Silverlight property of type Double, Point or Color can
+    				Silverlight property of type Double, Point or Color can
     				be animated, or a property can cycle through discrete object values.
     				Thus the possibilities for which properties in the user interface can
     				be animated are quite broad. The general technique shown can be used
@@ -40,7 +40,7 @@ 
          Pausing a decorative animation
          
             
          The following is the XAML UI. The animated object and the animation
     						behavior are both described in XAML, as is the control that users can
     						activate to pause the animation. 
          
-            
          <UserControl x:Class="PauseBouncyBall.MainPage"
+            
          <UserControl x:Class="PauseBouncyBall.MainPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 >
@@ -74,7 +74,7 @@ 
          Pausing a decorative animation
          
     						is the event handler for the UI control (a button). The event handler
     						retrieves the animation definition from the page resources, and calls
     						the Pause method on the animation. 
          
-            
                 public MainPage()
+            
                 public MainPage()
        {
            InitializeComponent();
            (this.Resources["anim"] as Storyboard).Begin();
diff --git a/techniques/silverlight/SL12.html b/techniques/silverlight/SL12.html
index 2fa921e4be..172a4e62d2 100644
--- a/techniques/silverlight/SL12.html
+++ b/techniques/silverlight/SL12.html
@@ -5,11 +5,11 @@
       
        
    
        Description
        
       
        The objective of this technique is to create a control user interface
-    				for the Silverlight MediaElement object. The controls
+    				for the Silverlight MediaElement object. The controls
     				enable users to pause or stop the video to prevent the video images
-    				on the MediaElement surface from moving, and stop
+    				on the MediaElement surface from moving, and stop
     				video-associated audio. These UI controls enable an interaction defined
-    				in code event handlers. Each handler calls one of the following MediaElement methods: 
        
+    				in code event handlers. Each handler calls one of the following MediaElement methods: 
        
       
-      
        Note that by default, a MediaElement will start playing
+      
        Note that by default, a MediaElement will start playing
     				its media as soon as the UI loads completely AND the media source file
     				is downloaded (or a certain buffer size is reached, in the case of
-    				streaming media). Use the AutoPlay property to change
+    				streaming media). Use the AutoPlay property to change
     				this default. 
        
    
        Examples
        
       
        
@@ -32,7 +32,7 @@ 
        Providing MediaElement controls in the UI
        
          
             
        This example has a UI definition in XAML and interaction logic in
     					C#. 
        
-            
        <UserControl x:Class="MediaElementControls.MainPage"
+            
        <UserControl x:Class="MediaElementControls.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  >
@@ -108,7 +108,7 @@ 
        Providing MediaElement controls in the UI
        
          
          
             
        1.  Using a browser that supports Silverlight, open an HTML page that
     					references a Silverlight application through an object tag. The application
-    					is expected to incorporate a MediaElement in the
+    					is expected to incorporate a MediaElement in the
     					user interface. 
          2. 
             
        2.  Check that interactive controls are available so that users can
     						pause or stop the media. 
          3. 
@@ -135,7 +135,7 @@ 
          Providing MediaElement controls in the UI
          
             
        3. 
                   Silverlight
     						Media Framework - a framework and a media player control implementation
-    						that incorporates many of the Silverlight techniques related to MediaElement 
+    						that incorporates many of the Silverlight techniques related to MediaElement 
                
          4. 
          
      
       
diff --git a/techniques/silverlight/SL13.html b/techniques/silverlight/SL13.html
index c36aacf3db..5111882328 100644
--- a/techniques/silverlight/SL13.html
+++ b/techniques/silverlight/SL13.html
@@ -49,14 +49,14 @@ 
       Silverlight Toolkit themes and System Colors 
      
    	
      
          
       Real-time changes not supported 
      
          
      
-            SystemParameters.HighContrast is an adequate trigger
+            SystemParameters.HighContrast is an adequate trigger
     					for cases where high contrast is already engaged before the Silverlight
-    					plugin is loaded into a host. However, a limitation of using SystemParameters.HighContrast as
+    					plugin is loaded into a host. However, a limitation of using SystemParameters.HighContrast as
     					a trigger mechanism is that Silverlight does not detect the change
     					if it happens after the Silverlight plugin is loaded by the host HTML.
     					If Silverlight authors want to support real-time changes, they should provide a user-initiated
     					control option for changing to high contrast in Silverlight UI rather
-    					than solely relying on SystemParameters.HighContrast. 
      
+    					than solely relying on SystemParameters.HighContrast. 
      
    	
      
    	
      
          
       Silverlight and CSS 
      
@@ -89,7 +89,7 @@ 
      Silverlight application designed with brush resources
     						Only the base appearance is changed. The example also shows a technique
     						of storing original theme information and restoring it in response
     						to user request. 
      
-            
      <UserControl x:Class="HighContrast.MainPage"
+            
      <UserControl x:Class="HighContrast.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
@@ -151,7 +151,7 @@ 
      Silverlight application designed with brush resources
 </UserControl>
 
      
             
      The second listing is the C# code for the event handlers. 
      
-            
             private void Switcher_Click(object sender, RoutedEventArgs e)
+            
             private void Switcher_Click(object sender, RoutedEventArgs e)
        {
            ChangeToHighCon();
        }
@@ -211,7 +211,7 @@ 
      Use SystemParameters.HighContrast to detect system high
     						infrastructure). Note that the added code calls a user-defined function
     						ChangeToHighCon(), which is the same function and behavior as shown
     						in Example 1 for the user-initiated high contrast switch. 
      
-            
             public MainPage()
+            
             public MainPage()
        {
            InitializeComponent();
            if (SystemParameters.HighContrast)
diff --git a/techniques/silverlight/SL14.html b/techniques/silverlight/SL14.html
index e47ba3edf3..8518eb34c5 100644
--- a/techniques/silverlight/SL14.html
+++ b/techniques/silverlight/SL14.html
@@ -56,7 +56,7 @@ 
       Informing users of which keys to use for keyboard equivalence 
      
          
      If a control supports user interaction, which key to use to engage
     					the keyboard equivalent behavior is not always obvious. One way to
     					inform users of the possible key options that a control supports is
-    					to author an AutomationProperties.HelpText value in
+    					to author an AutomationProperties.HelpText value in
     					the application UI that gives instructions such as "Press the
     					plus key to increment value". This is up to the application author
     					to do; the control definitions do not provide a means to set HelpText
@@ -103,9 +103,9 @@ 
      KeyNumericUpDown Control That Handles Arrow Key Equivalence
     						helper functions (Increment() and Decrement()). 
      
             
      Handling the + and - keys as alternate or additional keyboard equivalents
     						for the actions is also possible (if that is desired, handler would
-    						check for Key.Add or Key.Subtract values). 
      
+    						check for Key.Add or Key.Subtract values). 
      
             
      The following is the XAML-defined control template for this control.
      
-            
         <Style TargetType="local:KeysNumericUpDown">
+            
         <Style TargetType="local:KeysNumericUpDown">
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Height" Value="22"/>
        <Setter Property="BorderBrush">
@@ -159,7 +159,7 @@ 
      KeyNumericUpDown Control That Handles Arrow Key Equivalence
     						of the base class are omitted for clarity, as is automation support.
     						Note the event wiring in OnApplyTemplate; this is
     						a common pattern for custom control definitions. 
      
-            
         public class KeysNumericUpDown : UpDownBase<double>
+            
         public class KeysNumericUpDown : UpDownBase<double>
    {
        Grid root;
        Button plusButton;
@@ -230,7 +230,7 @@ 
      KeyNumericUpDown Control That Handles Arrow Key Equivalence
     						simple. Note that there are no key handlers on this instance; the
     						necessary key handling to wire up the increment/decrement logic is
     						already built-in to all instances of the control. 
      
-            
      <local:KeysNumericUpDown Width="100" Height="45"/>
+            
      <local:KeysNumericUpDown Width="100" Height="45"/>
 
      
             
      This example is shown in operation in the working example of Numeric Up / Down control.
      
          
diff --git a/techniques/silverlight/SL15.html b/techniques/silverlight/SL15.html
index 1654a01c49..af0676f166 100644
--- a/techniques/silverlight/SL15.html
+++ b/techniques/silverlight/SL15.html
@@ -39,7 +39,7 @@
     				This is shown in the examples. 
      
       
      If an application does handle keys at top level, care should be taken
     				to not interfere with specific text entry control behavior, such as
-    				typing into a TextBox. To avoid interactions, the
+    				typing into a TextBox. To avoid interactions, the
     				design of key equivalence at the top level of an application typically
     				relies on combinations with key modifiers. The Control/CTRL key is
     				a key that is often used for this purpose. Application authors should
@@ -54,11 +54,11 @@
     				a variety of techniques for documenting user interface actions that
     				are not described here. One possible suggestion is to include a generalized "Help" button
     				that appears early in the application's reading order, which is focusable
-    				and has an AutomationProperties.Name value available as the text content
+    				and has an AutomationProperties.Name value available as the text content
     				or equivalent. Such a button can be activated without knowing any of
     				the application's accelerator keys, and the activation result could
     				be a new text element that enumerates the possible keys. For example,
-    				the application could display a Silverlight Popup with
+    				the application could display a Silverlight Popup with
     				the following content: 
      
       
      
          
@@ -73,16 +73,16 @@ 
      Key handling by application root UserControl
      
             
      This example has only one interactive control for simplicity, but
     						with two possible key combinations for that control being handled as
     						actions. The purpose and explanation of the control is reported through
-    						a TextBlock that is associated with the labeled control
+    						a TextBlock that is associated with the labeled control
     						through use of AutomationProperties.LabeledBy in
-    						XAML. The control being illustrated is MultiScaleImage,
+    						XAML. The control being illustrated is MultiScaleImage,
     						which supports a zoom-in metaphor for examining an image that redraws
-    						at increasingly fine resolutions. For more information on MultiScaleImage,
+    						at increasingly fine resolutions. For more information on MultiScaleImage,
     						see Deep
     							Zoom on MSDN. 
      
             
      The following is the startup logic at application level that sends
     					focus to Silverlight in the HTML DOM. 
      
-            
             private void Application_Startup(object sender, StartupEventArgs e)
+            
             private void Application_Startup(object sender, StartupEventArgs e)
        {
            this.RootVisual = new MainPage();
            //bring overall DOM focus to Silverlight area, so that keys are captured by Silverlight
@@ -90,7 +90,7 @@ 
      Key handling by application root UserControl
      
        }
        
      
             
      The following is XAML UI for the main page. 
      
-            
       <UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
+            
       <UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
     x:Class="ApplicationLevelKeyHandling.MainPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -131,7 +131,7 @@ 
      Key handling by application root UserControl
      
  </UserControl>
      
             
      The following is the C# logic. Note how the key handlers and mouse
     					handlers reference the same logic function. 
      
-            
              private void UserControl_KeyUp(object sender, KeyEventArgs e)
+            
              private void UserControl_KeyUp(object sender, KeyEventArgs e)
         {
             if ((Keyboard.Modifiers & ModifierKeys.Control) == ModifierKeys.Control &&
                 (Keyboard.Modifiers & ModifierKeys.Alt) == ModifierKeys.Alt &&
diff --git a/techniques/silverlight/SL16.html b/techniques/silverlight/SL16.html
index ba8bd6ec0b..f78e7dd036 100644
--- a/techniques/silverlight/SL16.html
+++ b/techniques/silverlight/SL16.html
@@ -5,30 +5,30 @@
       
    
    
    Description
    
       
    The objective of this technique is to use text captioning that is
-    				embedded in the stream with media displayed in a Silverlight MediaElement,
+    				embedded in the stream with media displayed in a Silverlight MediaElement,
     				and present that text captioning in a separate Silverlight control
     				or text element. 
    
-      
    This particular technique uses scripting files with a TimelineMarkers collection
+      
    This particular technique uses scripting files with a TimelineMarkers collection
     				that are embedded directly within the media file. When text captioning
     				is embedded directly in the streams, synchonization of the scripting
-    				stream versus the video content stream is done automatically by the MediaElement component.
+    				stream versus the video content stream is done automatically by the MediaElement component.
     				Each time the MarkerReached event fires, that is an
     				indication that a synch point in the video that corresponds to a script
     				marker entry has been reached. Silverlight application authors can
     				obtain the text from the relevant timeline marker entry through their
     				event handler implementations, and can display captions in the user
     				interface area where the text captions are displayed. Typical Silverlight
-    				controls that can be used for displaying text captions include TextBlock (nonfocusable), TextBox,
-    				or RichTextBox. A typical interface design would place
-    				the caption-display control in close proximity to the MediaElement control
+    				controls that can be used for displaying text captions include TextBlock (nonfocusable), TextBox,
+    				or RichTextBox. A typical interface design would place
+    				the caption-display control in close proximity to the MediaElement control
     				that is being captioned, for example might place the captions directly
-    				underneath the MediaElement "screen". 
    
+    				underneath the MediaElement "screen". 
    
       
    Script-embedded captions are captions that are stored directly in
     				the media file as metadata, rather than as a separate file. For information
     				about techniques for captions in separate files, see . 
    
    	
    
          
     Tools 
    
-         
    Producing the media file with TimelineMarkers captions
+         
    Producing the media file with TimelineMarkers captions
     					directly in embedded scripting can be accomplished using the Microsoft
     					Expression Encoder tool. Online help for the procedure of encoding
     					scripting with text captions in the stream are available in the offline
@@ -38,10 +38,10 @@ 
     Tools 
    
          
    There is a public
     					API for introducing Markers into a WMV file, as part of the Windows
     					Media Format SDK. Using Expression Encoder is the way that the task
-    					of directly embedding TimelineMarkers is presented
+    					of directly embedding TimelineMarkers is presented
     					and taught in Microsoft's available instructional material on Silverlight.
     					However, because the mechanism is public, it is possible that other
-    					tools exist or will exist that can also produce media with script-encoded TimelineMarkers. 
    
+    					tools exist or will exist that can also produce media with script-encoded TimelineMarkers. 
    
    	
    
    
    Examples
    
       
    
@@ -50,14 +50,14 @@ 
    MediaElement handles MarkerReached, displays marker text
          
             
    This example has a UI definition in XAML and interaction logic in
     						C#. The following is the basic UI in XAML. This example is deliberately
-    						simple and does not include AutomationProperties for
+    						simple and does not include AutomationProperties for
     						identification or user instructions. The most relevant part of this
     						example is that the Silverlight author declares a handler for the event MarkerReached.
     						This event fires potentially hundreds of times, once for each caption
     						in the stream. Each time the event fires, the event handler runs and
-    						adds the text to the dedicated TextBox in the user
+    						adds the text to the dedicated TextBox in the user
     						interface. 
    
-            
    <UserControl x:Class="MediaTimelineMarkers.MainPage"
+            
    <UserControl x:Class="MediaTimelineMarkers.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 >
diff --git a/techniques/silverlight/SL17.html b/techniques/silverlight/SL17.html
index 5c175beb14..c9d97f6dc7 100644
--- a/techniques/silverlight/SL17.html
+++ b/techniques/silverlight/SL17.html
@@ -6,7 +6,7 @@
          
  •  Silverlight managed programming model and Silverlight XAML 
    • 
       
    
    Description
    
-      
    The objective of this technique is to replace a Silverlight MediaElement with
+      
    The objective of this technique is to replace a Silverlight MediaElement with
     				static alternative non-media content that is not time-based. The static
     				alternative content replaces the media in the same or a nearby user
     				interface region of the Silverlight application. 
    
@@ -31,12 +31,12 @@
       
    
          
    MediaElement playing audio, replace with transcript
    
          
-            
    This example has a UI definition in XAML and interaction logic in C#. In this case the MediaElement 
+            
    This example has a UI definition in XAML and interaction logic in C#. In this case the MediaElement 
               has no visual representation itself and is 0x0 size because it plays audio only. As a simple placeholder, this 
               example displays the text "Library of Congress Audio" to represent the media element as something visible in the 
               UI. In addition to Play/Stop controls, this interface includes a Display Transcript button. Activating the 
               button displays static text that represents the transcript of the audio. The following is the basic UI in XAML.
    
-            
    <UserControl x:Class="ReplaceAudioWithTranscriptText.MainPage"
+            
    <UserControl x:Class="ReplaceAudioWithTranscriptText.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sys="clr-namespace:System;assembly=mscorlib">
@@ -60,7 +60,7 @@ 
    MediaElement playing audio, replace with transcript
    
 </UserControl>
 
    
             
    The following is the C# logic. 
    
-            
       public partial class MainPage : UserControl
+            
       public partial class MainPage : UserControl
    {
        RichTextBox rtb;
        bool transDisplayed=false;
diff --git a/techniques/silverlight/SL18.html b/techniques/silverlight/SL18.html
index f7b6b38019..014ac7ef0a 100644
--- a/techniques/silverlight/SL18.html
+++ b/techniques/silverlight/SL18.html
@@ -4,13 +4,13 @@
          
  •  Silverlight managed programming model and Silverlight XAML 
    • 
       
    
    Description
    
-      
    The objective of this technique is to use the Silverlight AutomationProperties.Name property
+      
    The objective of this technique is to use the Silverlight AutomationProperties.Name property
     				to provide a short text alternative for controls that do not otherwise
     				contain text. The text is intended to provide human-readable identifiers
     				and short-descriptions or user instructions for accessibility frameworks,
     				which can then be reported to assistive technologies. 
    
       
    "Control" in this technique refers to any element that is
-    				based on the Silverlight Control class, and is keyboard-focusable
+    				based on the Silverlight Control class, and is keyboard-focusable
     				either by user action or calling focus to the control programmatically.
     				The non-text control in question might be something like a button that
     				communicates information using only an icon or image. For example,
@@ -26,12 +26,12 @@
       
    For cases of controls such as buttons that invoke actions, the text
     				alternative also identifies link purpose. 
    
       
    In Silverlight, a text-only identifier for any control can be set
-    				specifically as AutomationProperties.Name on the parent
+    				specifically as AutomationProperties.Name on the parent
     				control. Silverlight control compositing techniques enable either per-control
     				images that are specified by the application author, or a general-purpose
     				image/icon for a control that is part of the control's template and
-    				displays that way by default. The Silverlight API AutomationProperties.Name directly
-    				sets Name in the UI Automation tree. The properties
+    				displays that way by default. The Silverlight API AutomationProperties.Name directly
+    				sets Name in the UI Automation tree. The properties
     				in the UI Automation tree are reported to assistive technologies, when
     				the assistive technology implements behavior that acts as a UI Automation
     				client (or as an MSAA client, which relies on the UIA-MSAA bridge). 
    
@@ -40,16 +40,16 @@
          
    Applying a text alternative for an icon Button with
     					XAML
    
          
-            
    Application authors can specify the AutomationProperties.Name attribute
-    						on the Button element, and leave accessibility information
-    						for the composited Image content unspecified. It is
-    						the button and its action that is relevant to users, not the non-interactive Image component.
-    						The value provided for AutomationProperties.Name is
+            
    Application authors can specify the AutomationProperties.Name attribute
+    						on the Button element, and leave accessibility information
+    						for the composited Image content unspecified. It is
+    						the button and its action that is relevant to users, not the non-interactive Image component.
+    						The value provided for AutomationProperties.Name is
     						a meaningful text alternative for the action conveyed by the button's
     						icon/image, but where the functionality is conceptually embodied in
     						the button and not its images or other constituent parts in compositing
     						or visual design. 
    
-            
     <Button
+            
     <Button
    Height="20" Width="50"
    AutomationProperties.Name="Pause Media">
    <Image Height="12" Width="12" Source="/icon_pause.png"/>
@@ -83,7 +83,7 @@ 
    Screen Reader
    
     					references a Silverlight application through an object tag. 
             
  •  Engage the screen reader. Press TAB to traverse the tab sequence
     						inside the Silverlight content area to focus to a composite control
-    						that has no visible text, but has an AutomationProperties.Name applied. 
    • 
+    						that has no visible text, but has an AutomationProperties.Name applied. 
             
  •  Check that the "Name" as applied to the control instance,
     							along with the class name of the named control, is read by the screen
     							reader. 
    • 
diff --git a/techniques/silverlight/SL19.html b/techniques/silverlight/SL19.html
index 1b2c023633..1305dc0a5e 100644
--- a/techniques/silverlight/SL19.html
+++ b/techniques/silverlight/SL19.html
@@ -11,26 +11,26 @@
     				original non-text content when a short text alternative is not sufficient,
     				and to show the practice of storing that information in a dedicated
     				property of the Silverlight-supported UI Automation support system.
-    				The technique can also be used on text controls (such as TextBox),
+    				The technique can also be used on text controls (such as TextBox),
     				for cases where the control text itself does not provide enough context
     				to suggest an appropriate user action. 
    
-      
    The relevant UI Automation property is named HelpText,
+      
    The relevant UI Automation property is named HelpText,
     				to connote its possible usage to provide imperative instructions for
     				interactive elements. However, the same property can instead be used
-    				for long text alternatives for nontext objects. The Silverlight API AutomationProperties.HelpText directly
-    				sets HelpText in the UI Automation tree. The properties
+    				for long text alternatives for nontext objects. The Silverlight API AutomationProperties.HelpText directly
+    				sets HelpText in the UI Automation tree. The properties
     				in the UI Automation tree are reported to assistive technologies, when
     				the assistive technology implements behavior that acts as a UI Automation
     				client. 
    
       
    
-         AutomationProperties.HelpText can be set in code,
+         AutomationProperties.HelpText can be set in code,
     				but is most typically set as an attribute in XAML that defines a Silverlight
     				UI. 
    
-      
    The same information as is present in AutomationProperties.HelpText could
+      
    The same information as is present in AutomationProperties.HelpText could
     				also be useful to sighted users. In this case, the same text could
     				be displayed in a Silverlight ToolTip control.
-    				The reason that application authors should use both AutomationProperties.HelpText AND Tooltip in
-    				conjunction is because the Tooltip information is
+    				The reason that application authors should use both AutomationProperties.HelpText AND Tooltip in
+    				conjunction is because the Tooltip information is
     				not introduced into the runtime accessibility framework information
     				set. This is because a tooltip is transient and not conventionally
     				focusable. In Silverlight programming, a useful technique for sharing
@@ -44,13 +44,13 @@
          
    Applying a long text alternative for an Image with XAML
    
          
             
    To introduce the necessary information to Silverlight XAML for an
-    						application UI definition, specify the AutomationProperties.HelpText attribute
-    						on the Image element. The value provided for the attribute
+    						application UI definition, specify the AutomationProperties.HelpText attribute
+    						on the Image element. The value provided for the attribute
     						is a meaningful long text alternative for the image content. The value
-    						of AutomationProperties.HelpText should augment rather
-    						than duplicate AutomationProperties.Name, which is
+    						of AutomationProperties.HelpText should augment rather
+    						than duplicate AutomationProperties.Name, which is
     						also typically specified to provide accessibility support for an image. 
    
-            
     <Image
+            
     <Image
    Height="400" Width="600"
    Source="/office.png"
    AutomationProperties.Name="Diagram of standard office layout"
@@ -63,13 +63,13 @@ 
    Applying a long text alternative for an Image with XAML
    
       
    
          
    Using HelpText as form instructions
    
          
-            
    This example provides instructions for two form fields by using both Tooltip and AutomationProperties.HelpText.
+            
    This example provides instructions for two form fields by using both Tooltip and AutomationProperties.HelpText.
     						The strings used for these purposes are shared to both methodologies
     						by defining the strings as resources and binding to them. In this example,
     						the form submission does not perform client-side validation (although
     						server-side validation following a data round trip might still exist). 
    
             
    The following is the XAML UI: 
    
-            
    <UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" 
+            
    <UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" 
    x:Class="HelpTextAndToolTip.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -118,7 +118,7 @@ 
    Using HelpText as form instructions
    
 </UserControl>
 
    
             
    The following is the resource definition in app.xaml: 
    
-            
           <ResourceDictionary>
+            
           <ResourceDictionary>
            <resources:Resource1 x:Key="TooltipStrings"/>
        </ResourceDictionary>
        
    
@@ -148,8 +148,8 @@ 
    Using HelpText as form instructions
    
     						tree, and an object’s long text alternative as part of the tree.
     						(For example, use UIAVerify or Silverlight Spy; see Resources links.) 
             
  •  Focus an element that is known to have a long text alternative.
-    							Check that the AutomationProperties.HelpText as applied to
-    							individual UI elements appears as the HelpText or acc_Help value
+    							Check that the AutomationProperties.HelpText as applied to
+    							individual UI elements appears as the HelpText or acc_Help value
     							in the automation tree. 
    • 
          
       
    
diff --git a/techniques/silverlight/SL2.html b/techniques/silverlight/SL2.html
index a6acd20c6a..3d94ed3767 100644
--- a/techniques/silverlight/SL2.html
+++ b/techniques/silverlight/SL2.html
@@ -23,7 +23,7 @@
     				is largely written in XAML. The logic is largely written in code (for
     				example C#) and is left unaffected when a Silverlight application author
     				provides a new control template "skin". The hooks that connect
-    				the appearance and the logic are a Style property of the control (which
+    				the appearance and the logic are a Style property of the control (which
     				the author changes the value of, to refer to their new XAML resource)
     				and a contract of expected named entities in the XAML. The control
     				logic invokes the names of the entities/parts whenever control state
@@ -50,7 +50,7 @@ 
     Focus in Silverlight 
    
     					application concept of keyboard focus. The element that has focus is
     					the element within the Silverlight object tree and programming model
     					that has first chance to process the Silverlight key events. As a more
-    					tangible example that is user-centric, if a TextBox has
+    					tangible example that is user-centric, if a TextBox has
     					keyboard focus, then when the user presses keys on the keyboard, the
     					characters associated with the user's pressed keys will appear in the
     					TextBox. A user interface element in Silverlight can obtain keyboard
@@ -77,7 +77,7 @@ 
    Two Button elements, one reskinned to provide new visible
             
    XAML templates can be verbose; for clarity, only the parts of the
 					template that were changed or useful for showing the structure are
 					shown. Omitted portions are shown as ellipsis (...). 
    
-            
    <UserControl x:Class="VisibleFocusTemplate.MainPage"
+            
    <UserControl x:Class="VisibleFocusTemplate.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 >
@@ -129,11 +129,11 @@ 
    Two Button elements, one reskinned to provide new visible
             
    The most interesting aspect of this example is the change made to
 						the FocusVisualElement part. Here is the original (default template)
 						FocusVisualElement: 
    
-            
    <Rectangle x:Name="FocusVisualElement" RadiusX="2" RadiusY="2" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" 
+            
    <Rectangle x:Name="FocusVisualElement" RadiusX="2" RadiusY="2" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" 
  Opacity="0" IsHitTestVisible="false" />
 
    
             
    Here is the changed FocusVisualElement: 
    
-            
    <Border x:Name="FocusVisualElement" IsHitTestVisible="false"
+            
    <Border x:Name="FocusVisualElement" IsHitTestVisible="false"
  Opacity="0" CornerRadius="2"
  BorderBrush="#D0FF0000" BorderThickness="4">
  <Rectangle x:Name="rectangle" IsHitTestVisible="false"
diff --git a/techniques/silverlight/SL20.html b/techniques/silverlight/SL20.html
index 769ea54218..ff3a82b8b7 100644
--- a/techniques/silverlight/SL20.html
+++ b/techniques/silverlight/SL20.html
@@ -6,10 +6,10 @@
    
    Description
    
       
    The objective of this technique is to illustrate how in certain cases,
     				the Silverlight automation peer system can provide an accessibility
-    				framework Name based on any simple text strings that
+    				framework Name based on any simple text strings that
     				are also presented in the visible user interface as control content. 
    
       
    The applicability of this technique to SC 1.3.1 is that once promoted,
-    				the Name becomes the primary information item that
+    				the Name becomes the primary information item that
     				describes the user interface element to accessibiity frameworks and
     				assistive technologies, and the information is thus immune to any further
     				applications of the Silverlight style system that might change the
@@ -19,28 +19,28 @@
     				peer promotion behavior provides the Name component of Name, Role,
     				Value. This is related to the description of the term label in
     				SC4.1.2. 
    
-      
    A default behavior for generating Name for accessibility
+      
    A default behavior for generating Name for accessibility
     				frameworks is possible for certain peers of content controls. The content
     				controls that might support a default automation peer behavior include: 
    
       
      
          
    •  
-               TextBlock 
+               TextBlock 
             
      • 
          
    •  
-               ButtonBase derived classes that do not change
-    				the GetNameCore implementation. This includes the Button class.
-    				In order for the default promotion to work, the Content of
-    				the button must be set as a plain string or must contain only a TextBlock;
-    				any compositing such as wrapping in a Border or
+               ButtonBase derived classes that do not change
+    				the GetNameCore implementation. This includes the Button class.
+    				In order for the default promotion to work, the Content of
+    				the button must be set as a plain string or must contain only a TextBlock;
+    				any compositing such as wrapping in a Border or
     				other container will disable the default promotion. 
      • 
-         
    •  Any other ContentControl derived class where
-    					the Content property contains either TextBlock or
-    					a text-content-only ButtonBase implementation as
+         
    •  Any other ContentControl derived class where
+    					the Content property contains either TextBlock or
+    					a text-content-only ButtonBase implementation as
     					sole content. 
      • 
       
    
-      
    In these cases the string that sets either Content (for ContentControl and ButtonBase)
-    				or Text (for TextBlock) is promoted
-    				as the AutomationProperties.Name for the control in
+      
    In these cases the string that sets either Content (for ContentControl and ButtonBase)
+    				or Text (for TextBlock) is promoted
+    				as the AutomationProperties.Name for the control in
     				UI Automation, without any further attribution. The properties in the
     				UI Automation tree are reported to accessibility frameworks (UI Automation,
     				and MSAA through the bridge). The accessibility frameworks reports
@@ -56,7 +56,7 @@
       
    For cases where there is control compositing in a control rather than
     				simple text, the automation peer typically cannot provide a default
     				simple string, and it may be the application author's responsibility
-    				to set AutomationProperties.Name explicitly as an
+    				to set AutomationProperties.Name explicitly as an
     				attribute in XAML, or as a property in runtime code. For details, see . 
    
    	
    
          
     Test-based methodology 
    
@@ -88,14 +88,14 @@ 
    Button is composed with direct text content only
    
             
    The following example shows XAML UI only. Logic is not shown, but
     						would typically be added by referencing a Click handler
     						from the XAML. 
    
-            
     <Button Height="20" Width="200">Fire photon torpedoes!</Button>
+            
     <Button Height="20" Width="200">Fire photon torpedoes!</Button>
 
    
             
    The following illustration shows the UIAVerify tree view of this
     						simple interface. Note that the internal string "Fire photon
     						torpedoes!"   is being peer-forwarded. This is verified by the
     						Properties view on the right side: the Name property value is "Fire
     						Photon Torpedoes", even though no programmatic Name property
-    						or AutomationProperties.Name has been applied to
+    						or AutomationProperties.Name has been applied to
     						that button that would otherwise have supplied an acccessibility
     						framework "Name". 
    
             
    
diff --git a/techniques/silverlight/SL21.html b/techniques/silverlight/SL21.html
index c68ac203ab..fdf15cda9d 100644
--- a/techniques/silverlight/SL21.html
+++ b/techniques/silverlight/SL21.html
@@ -12,7 +12,7 @@
     				The animated version of information in the user interface element can
     				instead be swapped out for an equivalent static element. 
    
       
    The Silverlight animation system is generalized such that nearly any
-    				Silverlight property of type Double, Point or Color can
+    				Silverlight property of type Double, Point or Color can
     				be animated, or a property can cycle through discrete object values.
     				Thus the possibilities for which properties in the user interface can
     				be animated are quite broad. The general technique shown can be used
@@ -22,7 +22,7 @@
          
    Stopping an animation that is scrolling text, replacing the animation with a full text alternative 
    
          
             
    This example has a UI definition in XAML and interaction logic in C#. The following is the basic UI in XAML. 
    
-            
    <UserControl x:Class="StopAnimation.MainPage"
+            
    <UserControl x:Class="StopAnimation.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:sys="clr-namespace:System;assembly=mscorlib">
@@ -62,13 +62,13 @@ 
    Stopping an animation that is scrolling text, replacing the animation with a
 </UserControl>
 
    
             
    The following is the C# logic. In this example, the animation starts
-    						automatically. When the user activates the control (the Button),
+    						automatically. When the user activates the control (the Button),
     						the event handler stops the animation, removes the animated element
     						from the visual tree, and replaces it with a fixed text element that
-    						presents all text at once. Because it is a TextBox,
+    						presents all text at once. Because it is a TextBox,
     						assistive technologies could identify the newly introduced text element
     						and present it, for example read the text in a screen reader. 
    
-            
           public MainPage()
+            
           public MainPage()
        {
            InitializeComponent();
            (this.Resources["crawl"] as Storyboard).Begin();
diff --git a/techniques/silverlight/SL22.html b/techniques/silverlight/SL22.html
index 0323d460af..849226d9dc 100644
--- a/techniques/silverlight/SL22.html
+++ b/techniques/silverlight/SL22.html
@@ -26,7 +26,7 @@ 
     Legacy behavior in Silverlight version 2 
    
     					version 3. Older documents on the web might describe techniques that
     					were relevant for Silverlight version 2, where dealing with browser
     					zoom required JavaScript handling of the Resized event,
-    					and developers manually applied a ScaleTransform to Silverlight
+    					and developers manually applied a ScaleTransform to Silverlight
     					content to scale it up. Silverlight has a "quirks mode"   that
     					detects existing handlers that might still use the older techniques.
     					Built-in zoom not active in these cases, so that applications can avoid
@@ -55,7 +55,7 @@ 
    Verifying browser zoom, and checking the zoom factor
    
     						factor as reported by the API is still retained even when Silverlight
     						built-in zoom scaling is disabled deliberately. The following is the
     						XAML UI: 
    
-            
    <UserControl x:Class="BrowserZoom.MainPage"
+            
    <UserControl x:Class="BrowserZoom.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 >
@@ -71,7 +71,7 @@ 
    Verifying browser zoom, and checking the zoom factor
    
 </UserControl>
 
    
             
    The following is the C# logic: 
    
-            
       public partial class MainPage : UserControl
+            
       public partial class MainPage : UserControl
    {
        public MainPage()
        {
diff --git a/techniques/silverlight/SL23.html b/techniques/silverlight/SL23.html
index 5bb695a42d..b6dc53b211 100644
--- a/techniques/silverlight/SL23.html
+++ b/techniques/silverlight/SL23.html
@@ -11,12 +11,12 @@
     				to change the font size of text elements. This technique could be used
     				only for specific elements, or could also be applied to the entire
     				Silverlight content area and all text elements therein (including elements
-    				such as TextBlock that are technically not controls).
+    				such as TextBlock that are technically not controls).
     				Examples are provided for these two cases. 
    
-      
    The property to style or otherwise change is the FontSize property.
+      
    The property to style or otherwise change is the FontSize property.
     				Primarily, this is done using the API Control.FontSize,
     				but developers can also use similar properties on other objects that do not
-    				derive from Control (examples: TextBlock; DataGridTextColumn). 
    
+    				derive from Control (examples: TextBlock; DataGridTextColumn). 
    
       
    Silverlight uses a style system whereby many properties that affect
     				UI appearance can be referred to and changed through a style resource.
     				The style resource overrides the default code implementation and the
@@ -53,7 +53,7 @@ 
     Using this technique versus relying on browser zoom 
    
    	
    
    	
    
          
     Sizing by percent 
    
-         
    Generally, sizing Silverlight FontSize values by
+         
    Generally, sizing Silverlight FontSize values by
     					percentages is not recommended. Sizing by percentage produces non-integer
     					font size values, which in turn produce aliasing artifacts. The Silverlight
     					rendering routines for text work best when dealing with integer numbers.
@@ -83,7 +83,7 @@ 
    Style applied to all text elements within a RichTextBox
             
    Variations of this example could be employed to offer more choices.
     						For example, multiple style switchers could be provided that gave three
     						or more fontsize choices. 
    
-            
    <UserControl x:Class="StyleSwitcherFontSize.MainPage"
+            
    <UserControl x:Class="StyleSwitcherFontSize.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 >
@@ -114,7 +114,7 @@ 
    Style applied to all text elements within a RichTextBox
     						all it does is change a style property, using a value that keys into
     						the .Resources collection from XAML where the Style is defined. Another
     						event handler nulls out the style and returns values to defaults. 
    
-            
    private void Button_Click(object sender, RoutedEventArgs e)
+            
    private void Button_Click(object sender, RoutedEventArgs e)
 {
   rtb1.Style = this.Resources["BiggerRTBFonts"] as Style;
 }
@@ -143,14 +143,14 @@ 
    Style applied to all text elements within a RichTextBox
          
    Font size increase applied to all text content by applying
     				at UserControl level, and by percent increase logic
    
          
-            
    This example uses the inheritance characteristics of the FontSize
+            
    This example uses the inheritance characteristics of the FontSize
     						property that is available to all Silverlight controls. Rather than
-    						using a style, this example uses a HoldEnd animation, to take advantage
+    						using a style, this example uses a HoldEnd animation, to take advantage
     						of the "By" behavior of the animation system that can increment
     						an existing value by 2 (pixels) rather than replacing the value with
     						a fixed pixel value. 
    
             
    The following is the XAML UI: 
    
-            
    <UserControl x:Class="StyleSwitcherFontSize.MainPage"
+            
    <UserControl x:Class="StyleSwitcherFontSize.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Name="rootcontrol">
@@ -170,7 +170,7 @@ 
    Font size increase applied to all text content by applying
 </UserControl>
 
    
             
    The following are the C# event handlers. 
    
-            
    private void Button_Click(object sender, RoutedEventArgs e)
+            
    private void Button_Click(object sender, RoutedEventArgs e)
 {
    (this.Resources["BySize"] as Storyboard).Begin();
 }
diff --git a/techniques/silverlight/SL24.html b/techniques/silverlight/SL24.html
index 17b6ba263e..1d8d1d999d 100644
--- a/techniques/silverlight/SL24.html
+++ b/techniques/silverlight/SL24.html
@@ -4,21 +4,21 @@
          
  •  Silverlight managed programming model and Silverlight XAML 
    • 
       
    
    Description
    
-      
    The objective of this technique is to use the AutoPlay property
-    				of MediaElement object, which prevents the MediaElement from
+      
    The objective of this technique is to use the AutoPlay property
+    				of MediaElement object, which prevents the MediaElement from
     				playing its media source automatically. 
    
-      
    By default the value of AutoPlay is true, which causes
-    				any media that is the Source of the MediaElement to
+      
    By default the value of AutoPlay is true, which causes
+    				any media that is the Source of the MediaElement to
     				play as soon as either the entire source file is loaded (for nonstreaming
     				media) or an initial buffer is loaded (for streaming media). To prevent
-    				the possible accessibility issues, developers can instead specifically set AutoPlay to
+    				the possible accessibility issues, developers can instead specifically set AutoPlay to
     				false, so that the user always controls whether the media plays. This
     				technique would thus be used in combination with providing user interface
-    				controls that go along with the MediaElement, and
+    				controls that go along with the MediaElement, and
     				that enable the user to control the media. In particular, the user
     				interface controls enable the media to play, pause or stop, with event
     				wiring for those controls associated with the Play, Pause or Stop methods
-    				of the MediaElement object. 
    
+    				of the MediaElement object. 
    
       
      
          
    •  
                Pause 
@@ -37,7 +37,7 @@ 
      Setting AutoPlay to false, and providing the typical MediaElement controls i
             
      This example has a UI definition in XAML and interaction logic in
     						C#. 
      
             
      The following is the basic UI in XAML. Note the AutoPlay="false" setting. 
      
-            
      <UserControl x:Class="MediaElementControlsAutoPlay.MainPage"
+            
      <UserControl x:Class="MediaElementControlsAutoPlay.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   >
@@ -67,7 +67,7 @@ 
      Setting AutoPlay to false, and providing the typical MediaElement controls i
 </UserControl>
 
      
             
      The following is the C# logic. 
      
-            
       private void StopMedia(object sender, RoutedEventArgs e)
+            
       private void StopMedia(object sender, RoutedEventArgs e)
  {
      media.Stop();
  }
@@ -89,7 +89,7 @@ 
      Setting AutoPlay to false, and providing the typical MediaElement controls i
          
        
             
      1.  Using a browser that supports Silverlight, open an HTML page that
     					references a Silverlight application through an object tag. The application
-    					is expected to use a MediaElement object to play
+    					is expected to use a MediaElement object to play
     					prerecorded media. 
        2. 
             
      2.  Check that the media does not play automatically as soon as the
     						application loads and displays. Rather, the user is presented with
@@ -115,7 +115,7 @@ 
        Setting AutoPlay to false, and providing the typical MediaElement controls i
             
      3. 
                   Silverlight
     						Media Framework - a framework and a media player control implementation
-    						that incorporates many of the Silverlight techniques related to MediaElement 
+    						that incorporates many of the Silverlight techniques related to MediaElement 
                
        4. 
          
    
       
diff --git a/techniques/silverlight/SL25.html b/techniques/silverlight/SL25.html
index 899f22f378..7d838061f7 100644
--- a/techniques/silverlight/SL25.html
+++ b/techniques/silverlight/SL25.html
@@ -13,18 +13,18 @@
     				purpose is to skip content, so that the resulting programmatic focus
     				shift is not interpreted as an undesired change of context. 
    
       
    The object to call focus to (the receiver of focus after the user-initiated
-    				action is triggered) has to be a Control in the Silverlight
+    				action is triggered) has to be a Control in the Silverlight
     				programming model. This is because the Focus method
     				must be called on the target, and therefore the target must inherit
-    				the Control class. So, an application author might
-    				call focus to a read-only TextBox, or perhaps a RichTextBox,
+    				the Control class. So, an application author might
+    				call focus to a read-only TextBox, or perhaps a RichTextBox,
     				depending on the purpose of the Silverlight application and its user
-    				interface design. You can also focus a UserControl,
+    				interface design. You can also focus a UserControl,
     				for cases where the area to call focus to represents a custom control
     				implementation. 
    
       
    
          
     Setting TabIndex (not recommended) 
    
-         
    Silverlight provides a TabIndex attribute that can
+         
    Silverlight provides a TabIndex attribute that can
     					be used to override the default-generated tab sequence. Do not attempt
     					to adjust tab index as a technique for getting past content blocks.
     					Doing so will create a focus order that does not match the apparent
@@ -36,7 +36,7 @@ 
     Setting TabIndex (not recommended) 
    
          
    User-enabled control that programmatically sets focus
    
          
             
    The following is the XAML for the user interface. 
    
-            
       <StackPanel Name="LayoutRoot">
+            
       <StackPanel Name="LayoutRoot">
        <Button Name="bypassbtn1" Click="bypassbtn1_Click">Skip menus, go to main page content</Button>
        <!intervening content-->
        <StackPanel>
@@ -47,7 +47,7 @@ 
    User-enabled control that programmatically sets focus
    
    </StackPanel>
    
    
             
    The following is the event handler that forces focus. 
    
-            
           private void bypassbtn1_Click(object sender, RoutedEventArgs e)
+            
           private void bypassbtn1_Click(object sender, RoutedEventArgs e)
        {
            rtb_MainContent.Focus();
        }
diff --git a/techniques/silverlight/SL26.html b/techniques/silverlight/SL26.html
index 322bf1b139..1b4fb73e77 100644
--- a/techniques/silverlight/SL26.html
+++ b/techniques/silverlight/SL26.html
@@ -4,16 +4,16 @@
          
  •  Silverlight managed programming model and Silverlight XAML 
    • 
       
    
    Description
    
-      
    The objective of this technique is to use the AutomationProperties.LabeledBy property
+      
    The objective of this technique is to use the AutomationProperties.LabeledBy property
     				to associate a non-interactive text label with an interactive field
-    				such as a Silverlight TextBox or RichTextBox.
+    				such as a Silverlight TextBox or RichTextBox.
     				By using this technique, application authors can use the label text
-    				as the default source for AutomationProperties.Name on
-    				the target, and do not need to specify an explicit AutomationProperties.Name. 
    
-      
    This technique relies on several Silverlight features: the Name property
-    				for identifying specific UI elements, the AutomationProperties API,
-    				and the ElementName variation of Silverlight data binding. AutomationProperties.Name can
-    				be set on and can target any Silverlight UIElement.
+    				as the default source for AutomationProperties.Name on
+    				the target, and do not need to specify an explicit AutomationProperties.Name. 
    
+      
    This technique relies on several Silverlight features: the Name property
+    				for identifying specific UI elements, the AutomationProperties API,
+    				and the ElementName variation of Silverlight data binding. AutomationProperties.Name can
+    				be set on and can target any Silverlight UIElement.
     				The two most common uses of this labeling technique are for labeling
     				a form field, and for associating an image caption with an image. 
    
    
    Examples
    
@@ -25,7 +25,7 @@ 
    Two TextBox form fields, each with a LabeledBy reference
     						XAML root or elsewhere). No code-behind is necessary for this example;
     						the element relationships are established by the {Binding} values in
     						the XAML and interpreted appropriately by the Silverlight run time. 
    
-            
       <StackPanel x:Name="LayoutRoot" Background="White">
+            
       <StackPanel x:Name="LayoutRoot" Background="White">
        <StackPanel Orientation="Horizontal">
            <TextBlock Name="lbl_FirstName">First name</TextBlock>
            <TextBox AutomationProperties.LabeledBy="{Binding ElementName=lbl_FirstName}" Name="tbFirstName" Width="100"/>
@@ -42,7 +42,7 @@ 
    Two TextBox form fields, each with a LabeledBy reference
       
    
          
    Labeling / captioning an image 
    
          
-            
           <Image HorizontalAlignment="Left" Width="480" Name="img_MyPix"
+            
           <Image HorizontalAlignment="Left" Width="480" Name="img_MyPix"
                 Source="snoqualmie-NF.jpg"
                 AutomationProperties.LabeledBy="{Binding ElementName=caption_MyPix}"/>
        <TextBlock Name="caption_MyPix">Mount Snoqualmie North Bowl Skiing</TextBlock>
@@ -62,10 +62,10 @@ 
    Labeling / captioning an image 
    
             
  •  Use a verification tool that is capable of showing the full automation
     						tree. (For example, use UIAVerify or Silverlight Spy; see Resources
     						links.) 
    • 
-            
  •  Verify that any element that has a LabeledBy value
+            
  •  Verify that any element that has a LabeledBy value
     							has an associated visible label. 
    • 
-            
  •  Verify that any element that has a LabeledBy value
-    								uses the Name value from that label. 
    • 
+            
  •  Verify that any element that has a LabeledBy value
+    								uses the Name value from that label. 
    • 
          
       
    
       
    Expected Results
    
diff --git a/techniques/silverlight/SL27.html b/techniques/silverlight/SL27.html
index 0ecf3828c1..a59413e236 100644
--- a/techniques/silverlight/SL27.html
+++ b/techniques/silverlight/SL27.html
@@ -7,14 +7,14 @@
       
    
    Description
    
       
    The objective of this technique is to use the combination of HTML
-    				Lang attribute, CultureInfo and Language to
+    				Lang attribute, CultureInfo and Language to
     				correctly specify the language of the entirety of Silverlight content,
     				or of parts within the Silverlight content. 
    
       
    In general, Silverlight does not attempt to repurpose HTML Lang, because
     				Silverlight is not HTML. Instead, internally within the Silverlight
     				content area, Silverlight uses language definition concepts that relate
-    				to XML (Language is a remapping of xml:lang) or .NET
-    				Framework programming (CultureInfo). For these reasons,
+    				to XML (Language is a remapping of xml:lang) or .NET
+    				Framework programming (CultureInfo). For these reasons,
     				HTML Lang techniques as described in [H58]
     				are not useful for Silverlight programming of Silverlight-specific "parts". 
    
       
    What becomes important in Silverlight application programming then
@@ -62,7 +62,7 @@
    	
    
          
     HTML Lang 
    
          
    When Silverlight is embedded in an HTML document with the   <object> element,
-    					the value of the HTML Lang attribute of the surrounding HTML becomes
+    					the value of the HTML Lang attribute of the surrounding HTML becomes
     					a factor. Browsers process the outer HTML, and the browser's processing
     					has possible influence over values reported to any DOM script that
     					acts, or to any accessibility framework that is reporting the browser
@@ -75,17 +75,17 @@ 
     HTML Lang 
    
     					content to match will assist authors in meeting SC 3.1.2. 
    
          
    The Silverlight runtime itself does not attempt to inherit language
     					settings that come from markup that is outside the Silverlight-specific
-    					content. In particular, the HTML Lang attribute applied to the html
+    					content. In particular, the HTML Lang attribute applied to the html
     					tag, Lang on host object tag, specific parameters of the Silverlight
-    					object tag, all have no affect on the value of any Silverlight Language attribute.
-    					Instead, the Silverlight Language defaults to the CultureInfo of
+    					object tag, all have no affect on the value of any Silverlight Language attribute.
+    					Instead, the Silverlight Language defaults to the CultureInfo of
     					the Silverlight runtime as instantiated by HTML object tag invocation.
     					It is expected that if a Silverlight application contains extensive
     					text where language of text is a factor for assistive technology purposes,
-    					developers will manually set the HTML Lang tag to match the Language value
+    					developers will manually set the HTML Lang tag to match the Language value
     					on the Silverlight root element in XAML. Development tools might or
     					might not enforce or inform the relationship between HTML Lang and
-    					Silverlight Language; that consideration is outside
+    					Silverlight Language; that consideration is outside
     					the scope of Silverlight as a technology. If language is not a major
     					factor in the application, application authors should consider leaving
     					HTML Lang blank on the hosting HTML page. 
    
@@ -97,32 +97,32 @@ 
     HTML Lang 
    
    	
    
          
     Silverlight Language property 
    
          
    
-            Language is an attribute that is available on all
+            Language is an attribute that is available on all
     					Silverlight objects that directly represent a UI element. Language
     					can be queried (or set) by Silverlight managed code run time, such
-    					that the Language value can be programatically determined
+    					that the Language value can be programatically determined
     					within the Silverlight programming model. 
    
-         
    The format of the value that is used to set Language is
+         
    The format of the value that is used to set Language is
     					based on ISO-639-1, and is thus compatible with http://www.rfc-editor.org/rfc/bcp/bcp47.txt. 
    
          
    
-            Language has a behavior that parallels the behavior
-    					of xml:lang in an XML document: if Language is set on
-    					a parent element, all child elements inherit that Language value.
-    					An actual xml:lang attribute in XAML is also valid for this purpose. 
    
+            Language has a behavior that parallels the behavior
+    					of xml:lang in an XML document: if Language is set on
+    					a parent element, all child elements inherit that Language value.
+    					An actual xml:lang attribute in XAML is also valid for this purpose. 
    
          
    
-            Language can be set at the root of a XAML document,
-    					so that the entire UI shares the same language setting. If Language is
-    					not explicitly set at the root by application markup, Language is
-    					inferred per running instance, based on processing the acting CultureInfo at
+            Language can be set at the root of a XAML document,
+    					so that the entire UI shares the same language setting. If Language is
+    					not explicitly set at the root by application markup, Language is
+    					inferred per running instance, based on processing the acting CultureInfo at
     					run time. 
    
-         
    However, another usage is for application authors to set Language on
-    					a specific child element, to override the root-level or client-environment-inferred Language value.
+         
    However, another usage is for application authors to set Language on
+    					a specific child element, to override the root-level or client-environment-inferred Language value.
     					This enables consciously embedding a content part that is deliberately
     					in a different language than the remainder of the Silverlight content. 
    
-         
    Exactly what happens when a Language is set on a
+         
    Exactly what happens when a Language is set on a
     					part is not always specified, and is largely a matter of implementation
     					detail of the individual Silverlight classes that might be a "part".
-    					However, as an informative generalization, the value of Language might
+    					However, as an informative generalization, the value of Language might
     					affect considerations such as: how white space is processed (in particular
     					CR or LF); character sets for fonts; string formatting when using APIs
     					specifically on that part. 
    
@@ -130,10 +130,10 @@ 
     Silverlight Language property 
    
    	
    
          
     CultureInfo 
    
          
    
-            CultureInfo is a concept that is relevant to .NET
+            CultureInfo is a concept that is relevant to .NET
     					Framework programming. This concept applies to Silverlight because
     					Silverlight uses a specific implementation of a CLR runtime that uses
-    					.NET Framework principles. CultureInfo potentially
+    					.NET Framework principles. CultureInfo potentially
     					specifies both a language and a culture. This distinction becomes relevant
     					for advanced string formatting concepts that are provided in the .NET
     					Framework, such as decimal separators, dates, and currency. For example,
@@ -142,12 +142,12 @@ 
     CultureInfo 
    
     					the application was using string formatting for currency values with
     					the intention of displaying Pounds Sterling as currency unit in string
     					formatting. 
    
-         
    Silverlight applications often run using an inferred CultureInfo based
+         
    Silverlight applications often run using an inferred CultureInfo based
     					on the operating system where the user agent browser host exists (in
     					other words, the culture of the client computer where the Silverlight
-    					application is run). This CultureInfo can be queried
+    					application is run). This CultureInfo can be queried
     					by applications at run time; see CultureInfo.CurrentCulture.
-    					Application authors can deliberately constrain the set of CultureInfo cases
+    					Application authors can deliberately constrain the set of CultureInfo cases
     					that a Silverlight application can be run under, in order to verify
     					that necessary string resources for that culture are available in that
     					application. This is done by setting <SupportedCultures> in the
@@ -169,18 +169,18 @@ 
     CultureInfo 
    
          
    For more information, see How
     					to: Create a Build that Targets a Specific Culture. 
    
          
    
-            CultureInfo generally applies to the Silverlight
+            CultureInfo generally applies to the Silverlight
     					application as a whole. There are advanced techniques whereby worker
     					threads can be run as separate cultures, but that is not discussed
     					here and is not relevant because only the main UI thread has relevance
     					to web content accessibility. So, if an application author wants to
     					declare specific language settings for a part (component, region or
     					control) of the Silverlight application, a different Silverlight-specific
-    					property Language is used. 
    
+    					property Language is used. 
    
    	
    
    
    Examples
    
       
    These examples show Silverlight behaviors that are based on interpreting
-    				the Language property value, as a way of illustrating
+    				the Language property value, as a way of illustrating
     				the programmatic determination of language values specifically in the
     				Silverlight application framework. To determine HTML Lang, application
     				authors should use the HTML DOM as enabled by browser host scripting,
@@ -193,7 +193,7 @@ 
    Language set at root-level of Silverlight content, inherits
    
             
    This example features a XAML UI and logic that reports information
     						to demonstrate that the information is programmatically determinable.
     						This example shows determination of the Language property. 
    
-            
    <UserControl x:Class="LangProperties.MainPage" 
+            
    <UserControl x:Class="LangProperties.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Language="en-gb">
@@ -230,7 +230,7 @@ 
    Determine CurrentCulture; runtime verification that CurrentCulture and the s
     						string. To apply this test, the hosting HTML page may need to be altered
     						to declare a specific HTML Lang; default Silverlight aspx or html test
     						pages do not declare HTML Lang. 
    
-            
           private void RunLanguageDetectLogic(object sender, RoutedEventArgs e)
+            
           private void RunLanguageDetectLogic(object sender, RoutedEventArgs e)
        {
            CultureInfo thisAppCC = CultureInfo.CurrentCulture;
            CultureInfo thisAppCUIC = CultureInfo.CurrentUICulture;
diff --git a/techniques/silverlight/SL28.html b/techniques/silverlight/SL28.html
index fb4fdd625c..5542ff5607 100644
--- a/techniques/silverlight/SL28.html
+++ b/techniques/silverlight/SL28.html
@@ -6,20 +6,20 @@
    
    Description
    
       
    The objective of this technique is to use text captioning that comes
     				from a separate text file, synchronize the captions with the media
-    				in a Silverlight MediaElement, and display the captions
+    				in a Silverlight MediaElement, and display the captions
     				in Silverlight. 
    
       
    There are two variations of the general theme of implementing Silverlight
     				media player controls to work with external timed text: using built-in
     				capabilities of the Microsoft Expression Encoder tool, and using parsing
     				code that consumes caption as a raw file format and converts that format
-    				into the Silverlight API's TimelineMarkers representation.
+    				into the Silverlight API's TimelineMarkers representation.
     				This technique primarily addresses how to use the Expression Encoder
     				technique, along with media player templates that are also provided
     				by Expression Encoder or related Silverlight SDKs such as the Smooth
     				Streaming SDK. 
    
-      
    At a pure architecture level, Silverlight uses the TimelineMarkers API
+      
    At a pure architecture level, Silverlight uses the TimelineMarkers API
     				to display caption text at synchronized times. The Expression Encoder
-    				and Expression Blend tools provide a front end to drive the TimelineMarkers API
+    				and Expression Blend tools provide a front end to drive the TimelineMarkers API
     				for the supported formats. The intention of the architecture is so
     				that Silverlight as a run-time has a base architecture that could potentially
     				use any existing or future timed text format, but the tools for Silverlight
@@ -39,13 +39,13 @@
          
  •  Parsing the format into general information items like timings,
     				text, format etc. that are either consumable directly in a Silverlight
     				API, or useful as intermediates 
    • 
-         
  •  Using the timecode information to create TimelineMarker representations
+         
  •  Using the timecode information to create TimelineMarker representations
     					for each timed text entity 
    • 
-         
  •  Associating the TimelineMarkers with media loaded
+         
  •  Associating the TimelineMarkers with media loaded
     						by the player 
    • 
          
  •  Finding a place to store the additional formatting that is conveyed,
     							including the text and any formatting 
    • 
-         
  •  Handling events from TimelineMarkers in the media
+         
  •  Handling events from TimelineMarkers in the media
     								player, in such a way that text and formatting behavior can be retrieved
     								and presented in the Text part of the player UI 
    • 
       
@@ -85,13 +85,13 @@ 
     Text Captioning Formats 
    
          
    Rather than build the parsing logic for all these formats into the
     					Silverlight runtime, or choosing just one of these formats to support,
     					the Silverlight design for text captioning at the core level instead
-    					makes the TimelineMarkers property of a MediaElement writeable,
-    					independently of the value of Source. The format of
-    					each TimelineMarker in the collection is very simple:
+    					makes the TimelineMarkers property of a MediaElement writeable,
+    					independently of the value of Source. The format of
+    					each TimelineMarker in the collection is very simple:
     					a time value expressed in the format, and the text value of the text
-    					for that synchronized caption. The time format for TimelineMarkers is
+    					for that synchronized caption. The time format for TimelineMarkers is
     					documented as TimelineMarker
-    						reference on MSDN. Converting timed text formats to TimelineMarkers form
+    						reference on MSDN. Converting timed text formats to TimelineMarkers form
     					as consumed by the Silverlight core can be done by following any of
     					the following application design patterns: 
    
          
      
@@ -110,7 +110,7 @@ 
       Text Captioning Formats 
      
     							it is possible to adapt the code to support timed text formats that
     							are not directly supported in the Expression Encoder project UI. 
             
    •  Using a 3rd party media player implementation that also includes
-    								a codebase for processing timed text formats, producing TimelineMarkers,
+    								a codebase for processing timed text formats, producing TimelineMarkers,
     								and displaying the captions in the player-specific UI. 
      • 
             
    •  Including a library that handles just the format parsing, and
     									using APIs of this library as part of the Silverlight application
@@ -146,7 +146,7 @@ 
      Using Expression Encoder and Expression Blend to produce
     						output of a sample Expression Encoder project. Note the CaptionSources
     						node in the initparams; that is the information item that informs the
     						Expression Encoder templates where to find the timed text file. 
      
-            
           <object data="data:application/x-silverlight," type="application/x-silverlight" width="100%" height="100%">
+            
           <object data="data:application/x-silverlight," type="application/x-silverlight" width="100%" height="100%">
        <param name="source" value="MediaPlayerTemplate.xap"/>
        <param name="onerror" value="onSilverlightError" />
        <param name="autoUpgrade" value="true" />
@@ -191,8 +191,8 @@ 
      Using Expression Encoder and Expression Blend to produce
    
      
             
      The templates include a library that handles any parsing requirements
     						for the chosen timed text format, both at the level of getting the
-    						basic text and timing into the TimelineMarkers used
-    						by the run-time MediaElement, and for preserving
+    						basic text and timing into the TimelineMarkers used
+    						by the run-time MediaElement, and for preserving
     						a subset of format information that can reasonably be crossmapped
     						from the formatting paradigm of the source (typically HTML/CSS) into
     						the Silverlight text object model of the text element that displays
@@ -247,7 +247,7 @@ 
      Code parses timed text; MediaElement handles MarkerReached,
     						is present in the definition of the media player class. 
      
             
      
     					The following is example usage XAML: 
      
-            
       <local:SimpleMediaPlayerWithTT Width="480" Height="360" CaptionUri="testttml.xml" MediaSourceUri="/xbox.wmv" />
+            
       <local:SimpleMediaPlayerWithTT Width="480" Height="360" CaptionUri="testttml.xml" MediaSourceUri="/xbox.wmv" />
     					
      
             
      Note the attributes CaptionUri and SimpleMediaPlayerWithTT. Each
     						of these is a custom property of the media control class TTReader.
@@ -258,7 +258,7 @@ 
      Code parses timed text; MediaElement handles MarkerReached,
             
      The following is the generic.xaml default template for the media player
     						control. The template is mainly relevant for showing the named elements
     						that are shown in the initialization code. 
      
-            
                     <ControlTemplate TargetType="local:SimpleMediaPlayerWithTT">
+            
                     <ControlTemplate TargetType="local:SimpleMediaPlayerWithTT">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
@@ -283,7 +283,7 @@ 
      Code parses timed text; MediaElement handles MarkerReached,
                
      
             
      The following is the initialization code that is for general infrastructure. OnApplyTemplate represents
     					the code wiring to the template-generated UI. 
      
-            
         public class SimpleMediaPlayerWithTT : Control
+            
         public class SimpleMediaPlayerWithTT : Control
    {
        MediaElement player;
        TextBox captions;
@@ -350,12 +350,12 @@ 
      Code parses timed text; MediaElement handles MarkerReached,
        
      
             
      The following is the logic that is particular to obtaining the separate
     						caption file. Some of this logic is referenced in the preceding template-specific
-    						event handlers. This example uses the asynchronous WebClient technique
-    						to request the file result of the CaptionUri. Make
-    						sure to use AutoPlay=false or some other means to allow
+    						event handlers. This example uses the asynchronous WebClient technique
+    						to request the file result of the CaptionUri. Make
+    						sure to use AutoPlay=false or some other means to allow
     						time for the caption file to download before attempting to play the
     						media file. 
      
-            
             private void LoadCaptions(Uri captionURL)
+            
             private void LoadCaptions(Uri captionURL)
        {
            WebClient wc = new WebClient();   // Web Client to download data files
            if (captionURL != null)
@@ -382,10 +382,10 @@ 
      Code parses timed text; MediaElement handles MarkerReached,
     						to follow in the implementation is to obtain the necessary text and
     						timing information, and to pass it to a function that might resemble
     						the following code template. This code template takes the raw information,
-    						generates a new TimelineMarker, and adds it to the
-    						collection assigned to the active MediaElement as
+    						generates a new TimelineMarker, and adds it to the
+    						collection assigned to the active MediaElement as
     						identified by "player" in the application. 
      
-            
             public void AddMediaMarker(string time, string type, string data)
+            
             public void AddMediaMarker(string time, string type, string data)
        {
            TimelineMarker marker = new TimelineMarker();
            marker.Time = new TimeSpan(0,0,(Convert.ToInt32(time.Trim())/1000));
diff --git a/techniques/silverlight/SL29.html b/techniques/silverlight/SL29.html
index 28fcbd7f21..9c4504168e 100644
--- a/techniques/silverlight/SL29.html
+++ b/techniques/silverlight/SL29.html
@@ -18,8 +18,8 @@
     				is on a List, the focus goes to the next element after the List. To
     				focus the items of the list, the user would press the Arrow keys rather
     				than TAB. In the Silverlight programming model for controls, this tab
-    				sequence behavior is expressed by the TabNavigation property
-    				holding the value of Once. The Silverlight ListBox is
+    				sequence behavior is expressed by the TabNavigation property
+    				holding the value of Once. The Silverlight ListBox is
     				a control that reports itself as "List" role, and that has
     				a default TabNavigation.Once value.
     				Thus ListBox as
@@ -31,7 +31,7 @@
     				bypass blocks that are based on common user interface features such
     				as menus or toolbars. However, using toolbars in Silverlight is inherently
     				not as lightweight because the Silverlight core libraries themselves
-    				do not include a ready-made toolbar. Silverlight provides a ContextMenu as
+    				do not include a ready-made toolbar. Silverlight provides a ContextMenu as
     				part of the Silverlight Toolkit extensions, but the behavior of this
     				particular menu does not easily address the bypass block scenario.
     				Silverlight includes all the infrastructure and necessary base classes
@@ -53,7 +53,7 @@
       
    
       
    If application authors use a built-in control such as ListBox where
     				the accessibility framework reported role is not traditionally associated
-    				with a navigation role, it is a best practice to set AutomationProperties.Name such
+    				with a navigation role, it is a best practice to set AutomationProperties.Name such
     				that the name informs the user of the purpose of the list control.
     				Otherwise, the role alone leaves this ambiguous. For example, an author
     				might name the list control "Navigation control". 
    
@@ -67,7 +67,7 @@
     				false on the List control. The List itself still provides the intended
     				tab navigation behavior, and is still reported and identified to accessibility
     				frameworks and assistive technologies, even when the List container
-    				is not focusable. This is shown in Example 1, by setting IsTabStop as
+    				is not focusable. This is shown in Example 1, by setting IsTabStop as
     				part of a Style. 
    
       
    When an accessibility framework presents a List, assistive technologies
     				are generally expected to continue to support use of the same key behavior
@@ -83,15 +83,15 @@ 
    Customize the behavior and appearance of a ListBox to
     					construct a navigation control that can be bypassed
    
          
             
    In this example, several properties that influence the items presentation
-    						behavior of the Silverlight core control ListBox are
+    						behavior of the Silverlight core control ListBox are
     						adjusted to make it suitable for a navigation control. The behavior
     						of this control is that when the tab sequence reaches the control,   "next" or
     						spatial navigation continues on to other controls, rather than through
     						the child controls of the list's items/options. This is enabled and
-    						properly reported because ListBox reports its accessibility
-    						framework role as "List", uses TabNavigation = Once as
-    						default (because it is the default, TabNavigation does not have to
-    						be set explicitly in the markup). ListBox has default
+    						properly reported because ListBox reports its accessibility
+    						framework role as "List", uses TabNavigation = Once as
+    						default (because it is the default, TabNavigation does not have to
+    						be set explicitly in the markup). ListBox has default
     						key handling for the arrow keys (to enable traversing the choices in
     						the menu by keyboard-only). The control could also be visually a menu
     						or perhaps other user interface control metaphors, depending on how
@@ -99,10 +99,10 @@ 
    Customize the behavior and appearance of a ListBox to
     						the accessibility framework and any assistive technologies based on
     						that framework will treat the control as a "List". This example
     						is templated as a horizontally oriented toolbar-type control. The items
-    						in this example are Button controls, but could be
+    						in this example are Button controls, but could be
     						templated to not appear quite as button-like, or could instead use
-    						another focusable control for the items such as a read-only TextBox. 
    
-            
    <UserControl x:Class="TabNavigation.MainPage"
+    						another focusable control for the items such as a read-only TextBox. 
    
+            
    <UserControl x:Class="TabNavigation.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 >
diff --git a/techniques/silverlight/SL3.html b/techniques/silverlight/SL3.html
index 1685602762..5dbf66e8c8 100644
--- a/techniques/silverlight/SL3.html
+++ b/techniques/silverlight/SL3.html
@@ -6,18 +6,18 @@
    
    Description
    
       
    The objective of this technique is to adjust the volume for media
     				that is played in Silverlight applications, as implemented through
-    				incorporating the Silverlight MediaElement object.
-    				By default, a MediaElement will start playing its
+    				incorporating the Silverlight MediaElement object.
+    				By default, a MediaElement will start playing its
     				media as soon as the UI loads completely AND the media source file
     				is downloaded. For details, see . 
    
-      
    At any given time, a Silverlight MediaElement is associated
-    				with exactly one media source as specified by the Source property
+      
    At any given time, a Silverlight MediaElement is associated
+    				with exactly one media source as specified by the Source property
     				URI value. That source might be audio-only, or audio-video. The Volume property
-    				of MediaElement affects the audio playback volume
+    				of MediaElement affects the audio playback volume
     				of that particular source when it is playing. The Silverlight plug-in
     				does not have a user option that adjusts the volume of ALL Silverlight
     				applications as run within it, or a standardized user interface that
-    				is always present for all uses of MediaElement. Therefore
+    				is always present for all uses of MediaElement. Therefore
     				it is the responsibility of Silverlight application authors to provide
     				an adequate set of user interface controls, including volume adjustment,
     				whenever the Silverlight application plays media that has an audio
@@ -28,25 +28,25 @@ 
    Providing a volume control and a Mute control as part
     					of a set of user interface controls that go with a MediaElement
    
          
             
    In addition to the Play Pause Stop controls, application authors can
-    						also provide a dedicated control that changes the Volume property
-    						of the MediaElement. The typical control for setting
-    						a discrete volume is Slider, because Slider is
-    						designed for input of discrete values from a range. Adjusting Volume with
-    						a data bound Slider changes the volume of any actively
+    						also provide a dedicated control that changes the Volume property
+    						of the MediaElement. The typical control for setting
+    						a discrete volume is Slider, because Slider is
+    						designed for input of discrete values from a range. Adjusting Volume with
+    						a data bound Slider changes the volume of any actively
     						playing media, independent of the system volume or of any other audio
-    						source controlled by Silverlight. For Volume as set with the Slider,
-    						the Binding in XAML declares the interaction between
-    						the control and the MediaElement, without requiring
+    						source controlled by Silverlight. For Volume as set with the Slider,
+    						the Binding in XAML declares the interaction between
+    						the control and the MediaElement, without requiring
     						an event handler. However, not all users will be able to interact quickly
-    						with a Slider, particularly if they are not using
+    						with a Slider, particularly if they are not using
     						a mouse. To help these users, application authors should also include
-    						a "Mute" control. Rather than setting Volume to
-    						0, application authors should instead set IsMuted to
-    						true. Note that Volume and IsMuted values
-    						are not directly related; if IsMuted is set to true,
-    						that does not set Volume to 0, nor does setting Volume to
-    						zero cause IsMuted to be set true. 
    
-            
    <UserControl x:Class="MediaElementControls.MainPage"
+    						a "Mute" control. Rather than setting Volume to
+    						0, application authors should instead set IsMuted to
+    						true. Note that Volume and IsMuted values
+    						are not directly related; if IsMuted is set to true,
+    						that does not set Volume to 0, nor does setting Volume to
+    						zero cause IsMuted to be set true. 
    
+            
    <UserControl x:Class="MediaElementControls.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   >
@@ -87,7 +87,7 @@ 
    Providing a volume control and a Mute control as part
 </UserControl>
 
    
             
    The following is the C# logic. 
    
-            
     private void StopMedia(object sender, RoutedEventArgs e)
+            
     private void StopMedia(object sender, RoutedEventArgs e)
  {
      media.Stop();
  }
@@ -123,7 +123,7 @@ 
    Providing a volume control and a Mute control as part
          
      
             
    1.  Using a browser that supports Silverlight, open an HTML page that
     					references a Silverlight application through an object tag. It is
-    					expected that the application incorporates a MediaElement. 
      2. 
+    					expected that the application incorporates a MediaElement. 
             
    2.  Check that a control is available for controlling volume and that
     						the Volume control controls the volume of the playing media, independently
     						from system volume. 
      3. 
@@ -151,7 +151,7 @@ 
      Providing a volume control and a Mute control as part
             
    3. 
                   Silverlight
     						Media Framework - a framework and a media player control implementation
-    						that incorporates many of the Silverlight techniques related to MediaElement 
+    						that incorporates many of the Silverlight techniques related to MediaElement 
                
      4. 
          
       
diff --git a/techniques/silverlight/SL30.html b/techniques/silverlight/SL30.html
index b93209729c..45e7690fd6 100644
--- a/techniques/silverlight/SL30.html
+++ b/techniques/silverlight/SL30.html
@@ -22,7 +22,7 @@
     				provide any text alternative for purposes other than the accessibility
     				framework. However, Silverlight authors should declare alternative
     				text on the control that is specifically consumed by accessibility
-    				frameworks, by setting AutomationProperties.Name as
+    				frameworks, by setting AutomationProperties.Name as
     				an attribute in XAML. In most cases, this text can be the same as the
     				visible text in the control composition, per the definition of 'label'
     				in SC 4.1.2. 
      
@@ -35,14 +35,14 @@
     				of an application-specific UI Automation tree, so that control composition
     				as an implementation detail does not interfere with the usage of controls
     				by Silverlight application authors. The primary source of accessibility-related
-    				information is the specific AutomationProperties.Name property
+    				information is the specific AutomationProperties.Name property
     				as set on the parent control in the composition, which is set by the
     				application author rather than the control author. 
      
       
      The control author does specify the information that is reported to
     				accessibility frameworks as the "ClassName", which is often
     				used by assistive technologies for identification purposes and is appended
     				to any "Name" value. For example, if an application author
-    				includes a   "Widget" control, and gives it an AutomationProperties.Name value
+    				includes a   "Widget" control, and gives it an AutomationProperties.Name value
     				of "Show Map", an assistive technology might identify the
     				element as   "Show Map widget". The "Show Map" part
     				comes from the application author code, and the "widget" part
@@ -52,19 +52,19 @@
          
      Button is composed with a StackPanel that contains nontext
     					and text content
      
          
-            
      In this example the TextBlock that goes with the
+            
      In this example the TextBlock that goes with the
     						graphic image conveys the text information for non-accessibility purposes.
-    						The Button has internal composition that combines
-    						text from a non-focusable TextBlock part and an image
+    						The Button has internal composition that combines
+    						text from a non-focusable TextBlock part and an image
     						part. Therefore the "Pause" Text is not promoted to serve
-    						as "Name" through built-in Button automation
+    						as "Name" through built-in Button automation
     						peer logic. The Silverlight application author is responsible for explicitly
-    						setting AutomationProperties.Name on the Button so
+    						setting AutomationProperties.Name on the Button so
     						that the text equivalent is available to the accessibility framework.
     						This example shows the XAML UI. The logic, which might be attached
-    						to Button with a Click handler, is
+    						to Button with a Click handler, is
     						not shown. 
      
-            
       <Button
+            
       <Button
    Height="20" Width="50" AutomationProperties.Name="Pause" 
  >
    <StackPanel Orientation="Horizontal" >
@@ -88,7 +88,7 @@ 
      Button composed, using binding and resource references
     						or edit. For more information on using resource strings through binding,
     						see Localizing
     						XAML topic on MSDN. 
      
-            
       <Application.Resources>
+            
       <Application.Resources>
   <resx:Resources x:Key="UIResourceStrings" />
  </Application.Resources>
   ...
@@ -115,8 +115,8 @@ 
      Automation tree verifier
      
             
    4.  Use a verification tool that is capable of showing the full automation
     						tree, and an object’s name text alternative as part of the tree.
     						(For example, use UIAVerify or Silverlight Spy; see Resources links.) 
      5. 
-            
    5.  Check that the AutomationProperties.Name appears
-    							as the Name value for identification in the automation
+            
    6.  Check that the AutomationProperties.Name appears
+    							as the Name value for identification in the automation
     							tree, whenever a composite control that has both text and non-text
     							elements is encountered. 
      7. 
          
    
@@ -133,7 +133,7 @@ 
    Screen reader
    
             
  •  Engage the screen reader. With focus inside the Silverlight content
     						area, press TAB to focus to a composite control where both text and
     						non-text elements are present. 
    • 
-            
  •  Check that the Name as applied to the control
+            
  •  Check that the Name as applied to the control
     							instance, along with the class name of the control, is read by the
     							screen reader. 
    • 
          
diff --git a/techniques/silverlight/SL31.html b/techniques/silverlight/SL31.html
index fc608f88fd..e25daa3d95 100644
--- a/techniques/silverlight/SL31.html
+++ b/techniques/silverlight/SL31.html
@@ -23,20 +23,20 @@
     				properties, it is possible to adjust presentation of font features
     				without changing the structural connotation of that control, or the
     				value of any control-specific property that contains plain-text. For
-    				example, the FontSize property can be set on a Paragraph (not
-    				a control) or on a Button (a control, and in this
+    				example, the FontSize property can be set on a Paragraph (not
+    				a control) or on a Button (a control, and in this
     				case the font size changes apply to any text displayed in the button
     				content area). Font properties are also inheriting properties, meaning
     				that if applying a font property value to a container in a relationship,
     				those font property values can apply to child elements in the relationship.
-    				For example, if a FontSize is applied to a RichTextBox,
-    				that FontSize value is used by default by all the Paragraph items
-    				displayed in the RichTextBox. 
    
-      
    Similar to CSS, Silverlight font properties can be grouped as a Style.
-    				That Style can be applied to all instances of a text
-    				element type (for example to all cases of Paragraph)
+    				For example, if a FontSize is applied to a RichTextBox,
+    				that FontSize value is used by default by all the Paragraph items
+    				displayed in the RichTextBox. 
    
+      
    Similar to CSS, Silverlight font properties can be grouped as a Style.
+    				That Style can be applied to all instances of a text
+    				element type (for example to all cases of Paragraph)
     				or specifically referenced as a resource that is only used by certain
-    				instances of a text element type. Either way, the Style feature
+    				instances of a text element type. Either way, the Style feature
     				enables the separation of presentation from semantics for text elements,
     				and enables workflows where content authors supply the semantic text
     				and design-oriented authors adjust the related Silverlight styles.
@@ -44,7 +44,7 @@
     					Customization on MSDN. 
    
       
    The following Silverlight font properties are useful to style text
     				and avoid the need for text in images. Links in this list refer to
-    				the Control class version of these properties. 
    
+    				the Control class version of these properties. 
    
       
      
          
    •  The FontFamily property
     				is used to display the code aspect in a monospace font family (specifically,
@@ -68,7 +68,7 @@
     				text content as is used for semantic text display in the UI. In other
     				words, exposing that text to assistive technologies that use UIA as
     				a framework does not require the Silverlight application author to
-    				resort to automation-specific override properties such as AutomationProperties.HelpText;
+    				resort to automation-specific override properties such as AutomationProperties.HelpText;
     				the automation peers for text elements report all necessary text content
     				to automation as a built-in behavior of the text element controls.
     				For more information on UI Automation and text containers, see . 
      
@@ -88,16 +88,16 @@ 
       CSS versus Silverlight font properties 
      
    	
    
    	
    
          
     Glyphs 
    
-         
    Silverlight API includes a related text presentation API Glyphs. Glyphs is
+         
    Silverlight API includes a related text presentation API Glyphs. Glyphs is
     					intended for specific decorative or niche language-support scenarios.
-    					The Glyphs API does not offer as much UIA exposure
+    					The Glyphs API does not offer as much UIA exposure
     					or the ability to programmatically change typical font properties;
-    					the main scenarios for Glyphs are to package migrated
+    					the main scenarios for Glyphs are to package migrated
     					text content from document formats, or for purely decorative text in
     					a font that is not commonly found on a user system and only the glyphs
-    					actually used in the Unicode string are subsetted into the Glyphs font
-    					payload. If addressing the WCAG criteria, authors should avoid using Glyphs API
-    					and instead use other text containers such as TextBox,
+    					actually used in the Unicode string are subsetted into the Glyphs font
+    					payload. If addressing the WCAG criteria, authors should avoid using Glyphs API
+    					and instead use other text containers such as TextBox,
     					along with a font that is supplied in the application package or known
     					to exist on the end user system. 
    
    	
    
@@ -108,7 +108,7 @@ 
    Run time applied font properties, style, and template
    
             
    This example illustrates applying runtime changes to a font property. 
    
             
    This example has UI in XAML, and logic in C#. The following is the
     					XAML. 
    
-            
    <UserControl x:Class="DocumentStructure.MainPage"
+            
    <UserControl x:Class="DocumentStructure.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 >
@@ -158,7 +158,7 @@ 
    Run time applied font properties, style, and template
    
 </UserControl>
 
    
             
    The following is C# code: 
    
-            
           private void swapper_Click(object sender, RoutedEventArgs e)
+            
           private void swapper_Click(object sender, RoutedEventArgs e)
        {
            rtb.Style = this.Resources["NewStyle"] as Style;
        }
diff --git a/techniques/silverlight/SL32.html b/techniques/silverlight/SL32.html
index 516f89dcfe..16266a7777 100644
--- a/techniques/silverlight/SL32.html
+++ b/techniques/silverlight/SL32.html
@@ -50,7 +50,7 @@ 
     UI Automation programmatic access 
    
    	
    
    	
    
          
     TextBox 
    
-         
    A TextBox within the Silverlight content area is
+         
    A TextBox within the Silverlight content area is
     					reported to UI Automation as an Edit role (through MSAA, as Editable
     					Text). 
    
          
    Edit controls are expected to implement the Value
@@ -62,22 +62,22 @@ 
     TextBox 
    
     					to the input field. In order to maintain proper reading order, the
     					label should typically appear immediately before the input field. This
     					general model should also be used for Silverlight user interface design.
-    					For more information on labeling for TextBox controls,
+    					For more information on labeling for TextBox controls,
     					see . 
    
    	
    
    	
    
          
     RichTextBox 
    
-         
    A RichTextBox within the Silverlight content area
+         
    A RichTextBox within the Silverlight content area
     					is reported to UI Automation and MSAA as a Document role. 
    
-         
    A RichTextBox can either be set to be a read-only
+         
    A RichTextBox can either be set to be a read-only
     					control, or left as a read-write control. In the latter case, users
     					can insert a text cursor and make changes to the text. It is more common
-    					in Silverlight programming to set the RichTextBox to
-    					be read-only; in this scenario the reason for using RichTextBox is
-    					because TextBlock did not offer the range of text
-    					formatting options that are possible from a RichTextBox. 
    
+    					in Silverlight programming to set the RichTextBox to
+    					be read-only; in this scenario the reason for using RichTextBox is
+    					because TextBlock did not offer the range of text
+    					formatting options that are possible from a RichTextBox. 
    
          
    In UIA, a document is generally expected to support the Text
-    					pattern for UI Automation. However, to read the text from a RichTextBox,
+    					pattern for UI Automation. However, to read the text from a RichTextBox,
     					the assistive technology does not necessarily have to implement code
     					that handles the entirety of the information that the Text pattern
     					reports. 
    
@@ -87,7 +87,7 @@ 
     More about the Text pattern 
    
          
    The Text pattern provides APIs to iterate over the internal structure
     					of a document and return text ranges. Each such text range can be queried
     					for specific properties, and can return its plain text string value
-    					to UI Automation. Ranges can also be programmatically adjusted by the TextPattern/TextRange APIs.
+    					to UI Automation. Ranges can also be programmatically adjusted by the TextPattern/TextRange APIs.
     					The following is a snippet of a Silverlight-specific UI Automation
     					tree utility to give a general idea of the APIs involved. Note that
     					these are not specifically Silverlight APIs; they are .NET Framework
@@ -97,7 +97,7 @@ 
     More about the Text pattern 
    
     					is generally what is necessary in order for an assistive technology
     					to obtain a comprehensive view of the "value" for a document
     					role object. 
    
-         
    private void FindTheTextPatterns_Click(object sender, RoutedEventArgs e)
+         
    private void FindTheTextPatterns_Click(object sender, RoutedEventArgs e)
 {
    if (allSilverlight != null && allSilverlight.Count>0)
    {
@@ -127,43 +127,43 @@ 
     More about the Text pattern 
    
    	
    
          
     TextBlock 
    
          
    
-            TextBlock is reported as a Text role in UI Automation. TextBlock has
+            TextBlock is reported as a Text role in UI Automation. TextBlock has
     					several important characteristics: 
    
          
      
-            
    •  A TextBlock is always read-only; only the application
+            
    •  A TextBlock is always read-only; only the application
     					author can declare the text, users cannot change it. 
      • 
-            
    •  A TextBlock is not considered to be a true control
-    						in the Silverlight object model (it is not a class derived from Control).
+            
    •  A TextBlock is not considered to be a true control
+    						in the Silverlight object model (it is not a class derived from Control).
     						The practical implications of this to accessibility scenarios is
-    						that a TextBlock is not in the default tab sequence,
+    						that a TextBlock is not in the default tab sequence,
     						cannot be manually added to any tab sequence, and cannot be keyboard-focused
     						either programatically or by the user. 
      • 
             
    •  
-                  TextBlock has a deliberately limited range of
+                  TextBlock has a deliberately limited range of
     							block / span formatting options. If the application author desires
     							a wider range of formatting options, for example supporting a "Paragraph" metaphor
-    							for blocks of text, a read-only RichTextBox should
+    							for blocks of text, a read-only RichTextBox should
     							be used instead. 
      • 
          
    
          
    If the user relies solely on navigating a Silverlight application
-    					using the TAB sequence, such navigation will skip over any TextBlock in
+    					using the TAB sequence, such navigation will skip over any TextBlock in
     					the interface. This could have implications for how users who use screen
     					readers can interact with the Silverlight content. Screen readers typically
     					read text only from the currently focused element in cases where the
     					user is moving through the TAB sequence or changing focus within the
-    					application, and thus cannot read the text from a TextBlock in
+    					application, and thus cannot read the text from a TextBlock in
     					such a mode. However, most screen readers also have modes for reading
     					text that is not necessarily focusable. These are generally the same
     					modes that screen readers use for a conventional non-interactive HTML
     					document text. For example, some screen readers support a mode that
-    					reads text by line, or by word. These modes can read text from a TextBlock. 
    
+    					reads text by line, or by word. These modes can read text from a TextBlock. 
    
    	
    
    
    Examples
    
       
    
          
    Structure from a container that has non-semantic role
     					in UI Automation, and TextBlock for text
    
          
-            
    If viewed as a UI Automation tree, the StackPanel and Grid do
+            
    If viewed as a UI Automation tree, the StackPanel and Grid do
     						not exist explicitly in the tree view, because they do not serve a
     						semantic role (only a presentation role). Rather, the tree consists
     						of the items that report some kind of semantic control type. The semantic
@@ -172,10 +172,10 @@ 
    Structure from a container that has non-semantic role
     						upwards in the tree, and despite the containers themselves being abstracted
     						out of the tree. This defines the reading order. This example is a
     						large block of text with intentionally simple formatting, where the
-    						only formatting is to represent paragraphs as separate TextBlock elements
-    						to support an adaptive layout, but no Run blocks within. 
    
+    						only formatting is to represent paragraphs as separate TextBlock elements
+    						to support an adaptive layout, but no Run blocks within. 
    
             
    When viewed with assistive technologies that represent the contents,
-    						each TextBlock is a control type of Text. Screen readers
+    						each TextBlock is a control type of Text. Screen readers
     						can use document reading modes such as virtual cursor modes to read
     						the content from each element and each element's content, following
     						the same reading order as is declared in the XAML. For example, in
@@ -183,7 +183,7 @@ 
    Structure from a container that has non-semantic role
     						(Jaws Key)+DownArrow. It is actually JAWS that determines the line
     						length, because the line length otherwise is defined only by the adaptive
     						layout at runtime, which is not reported to UIA. 
    
-            
      <StackPanel x:Name="LayoutRoot" Background="White">
+            
      <StackPanel x:Name="LayoutRoot" Background="White">
           <TextBlock>Call me Ishmael. Some years ago--never mind how long precisely--
 having little or no money in my purse, and
 nothing particular to interest me on shore, I thought I would sail about a little 
@@ -230,7 +230,7 @@ 
    Text containers and their UIA representation
    
             
    The following example is intended as sample XAML to view in an accessibility
     						framework viewer, to see the various names, roles, and patterns for
     						obtaining value. 
    
-            
       <StackPanel x:Name="LayoutRoot">
+            
       <StackPanel x:Name="LayoutRoot">
        <TextBox Text="This is a TextBox"/>
        <RichTextBox>
            <Paragraph>This is a RichTextBox.</Paragraph>
@@ -249,9 +249,9 @@ 
    Text containers and their UIA representation
    
             
  •  Use a verification tool that is capable of showing the full automation
     						tree. (For example, use UIAVerify or Silverlight Spy; see Resources
     						links.) 
    • 
-            
  •  Verify that TextBox elements in the Silverlight
-    							user interface have the Edit role, that RichTextBox elements
-    							have the Document role, and TextBlock has Text role
+            
  •  Verify that TextBox elements in the Silverlight
+    							user interface have the Edit role, that RichTextBox elements
+    							have the Document role, and TextBlock has Text role
     							in UI Automation. 
    • 
             
  •  Verify that the text content can be programmatically determined
     								by techniques that are appropriate for that role. 
    • 
diff --git a/techniques/silverlight/SL33.html b/techniques/silverlight/SL33.html
index 299a55e86b..062ac63334 100644
--- a/techniques/silverlight/SL33.html
+++ b/techniques/silverlight/SL33.html
@@ -49,12 +49,12 @@ 
     XAML and XML 
    
          
    Some XAML language features that are analogous to XML but have some
     					technology-specific differences include: 
    
          
      
-            
    •  Identifiers: XAML defines a Name directive, which
-    					is analogous to xml:id in that Name serves
+            
    •  Identifiers: XAML defines a Name directive, which
+    					is analogous to xml:id in that Name serves
     					as the unique identifier of an element. However, XAML defines an
     					additional concept of a XAML namescope, which permits a XAML document
     					to contain multiple XAML namescopes as a factoring technique. Thus,
-    					identical Name values are permitted in a XAML document
+    					identical Name values are permitted in a XAML document
     					so long as each is defined in a separate XAML namescope. XAML namescopes
     					are associated with elements, such that the extent of each XAML namescope
     					is understood by XAML processors. 
      • 
@@ -160,7 +160,7 @@ 
      Silverlight application consumer
      
                
    •  XAML Names are unique in namescope 
      • 
                
    •  XAML has no duplicate attributes 
      • 
                
    •  XAML-defined properties that are relevant for assistive technology
-    							(for example AutomationProperties.Name as described
+    							(for example AutomationProperties.Name as described
     							by other Silverlight techniques) are available 
      • 
             
    
          
diff --git a/techniques/silverlight/SL34.html b/techniques/silverlight/SL34.html
index 1867a271f0..2028146810 100644
--- a/techniques/silverlight/SL34.html
+++ b/techniques/silverlight/SL34.html
@@ -39,10 +39,10 @@
     				Overview on MSDN. 
    
    	
    
          
     How Silverlight implements tab sequence concepts 
    
-         
    The Silverlight programming model defines a Control class
+         
    The Silverlight programming model defines a Control class
     					that is a base class of many of the practical controls that produce
-    					a Silverlight application user interface. One of the behaviors of the Control class
-    					is that only a Control can receive keyboard focus
+    					a Silverlight application user interface. One of the behaviors of the Control class
+    					is that only a Control can receive keyboard focus
     					as a discrete element within the Silverlight content area. 
    
          
    When a Silverlight application user interface is constructed from
     					the visual tree, a default tab sequence for all Silverlight content
@@ -65,11 +65,11 @@ 
     How Silverlight implements tab sequence concepts 
    
    	
    
          
     Changing control properties 
    
          
      
-            
    •  Setting the Visibility property of a control
-    					to Collapsed causes the control to no longer render
+            
    •  Setting the Visibility property of a control
+    					to Collapsed causes the control to no longer render
     					in the UI. As a secondary effect, that control is removed from the
     					tab sequence. 
      • 
-            
    •  Setting the IsEnabled property of a control to
+            
    •  Setting the IsEnabled property of a control to
     						false causes the control to no longer be focusable by keyboard or
     						clickable by the mouse. In many cases, the visual appearance of the
     						control changes also, through a theme style. For example, the control
@@ -80,15 +80,15 @@ 
       Changing control properties 
      
    	
      
          
       Changing specific tab properties 
      
          
        
-            
      •  Setting the IsTabStop property of a control to
+            
      •  Setting the IsTabStop property of a control to
     					false causes the control to no longer be focusable by keyboard or
     					programmatic focus, and that control is removed from the tab sequence. 
        • 
-            
      •  Setting the TabIndex property of a control to
+            
      •  Setting the TabIndex property of a control to
     						a specific index causes the control to be inserted at that position
-    						in the tab sequence. The default value of TabIndex is
+    						in the tab sequence. The default value of TabIndex is
     						Single.MaxValue, therefore any non-default value promotes that control
     						to be first in an otherwise default tab sequence. More typically,
-    						authors would specify a TabIndex for any controls
+    						authors would specify a TabIndex for any controls
     						that are involved in a deliberate segment of tab order re-ordering. 
        • 
          
      
    	
      
@@ -97,17 +97,17 @@ 
       Tab order and language 
      
          
      Left-to-right is the default only for languages that use left-to-right
     					reading order. For languages that use right-to-left reading order,
     					right-to-left is also the default tab order as implemented by Silverlight
-    					runtime behavior. That language preference is declared by the acting CultureInfo.
-    					For more information on CultureInfo, see . 
      
+    					runtime behavior. That language preference is declared by the acting CultureInfo.
+    					For more information on CultureInfo, see . 
      
    	
    
    
    Examples
    
       
    
          
    Default tab order, based on ordering in the StackPanel
    
          
-            
    In this example, a StackPanel has a natural layout
-    						order of top-to-bottom, and that will also be the tab order of each StackPanel child
+            
    In this example, a StackPanel has a natural layout
+    						order of top-to-bottom, and that will also be the tab order of each StackPanel child
     						element (FirstName, then LastName). 
    
-            
       <StackPanel x:Name="LayoutRoot" Background="White">
+            
       <StackPanel x:Name="LayoutRoot" Background="White">
        <StackPanel Orientation="Horizontal">
            <TextBlock Name="lbl_FirstName">First name</TextBlock>
            <TextBox AutomationProperties.LabeledBy="{Binding ElementName=lbl_FirstName}" Name="tbFirstName" Width="100"/>
@@ -129,11 +129,11 @@ 
    Tab order, modified by TabIndex
    
     						column. The order in the content is row by row but the author feels
     						it is more logical for users to navigate the form column by column.
     						This way, all the groom's criteria can be filled in before moving on
-    						to the bride's criteria. The TabIndex attributes of
+    						to the bride's criteria. The TabIndex attributes of
     						the Silverlight elements are used to specify a tab order that navigates
     						column by column. This example specifically illustrates how changing
     						tab order can change the meaningful sequence. 
    
-            
     <UserControl x:Class="TabSequence.MainPage"
+            
     <UserControl x:Class="TabSequence.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  >
@@ -177,12 +177,12 @@ 
    Tab order, modified by changing runtime Control properties
    
          
             
    In this example, a radio button choice in a form controls whether
     						certain other fields in the form are relevant or not relevant. The
-    						current radio button selection toggles the IsEnabled property
+    						current radio button selection toggles the IsEnabled property
     						in such fields to enable or disable them based on how the user selected
     						the preceding logical element, which also affects whether the fields
     						appear in the further tab sequence. The following is UI definition
     						in XAML. 
    
-            
    <UserControl x:Class="TabSequence.MainPage"
+            
    <UserControl x:Class="TabSequence.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 >
@@ -213,7 +213,7 @@ 
    Tab order, modified by changing runtime Control properties
    
 </UserControl>
 
    
             
    The following is event handler code. 
    
-            
           private void RadioButton_CheckedC(object sender, RoutedEventArgs e)
+            
           private void RadioButton_CheckedC(object sender, RoutedEventArgs e)
        {
            tb_fn.IsEnabled = true;
            tb_ln.IsEnabled = true;
diff --git a/techniques/silverlight/SL35.html b/techniques/silverlight/SL35.html
index 1d565bed4d..fb428441d9 100644
--- a/techniques/silverlight/SL35.html
+++ b/techniques/silverlight/SL35.html
@@ -6,37 +6,37 @@
          
  •  Silverlight managed programming model and Silverlight XAML 
    • 
       
    
    Description
    
-      
    The objective of this technique is to use the Silverlight Validation API.
-    				The Validation API associates the validation logic with form input
+      
    The objective of this technique is to use the Silverlight Validation API.
+    				The Validation API associates the validation logic with form input
     				elements that properly support accessible text both for the initial
     				entry and for any error identification and suggestion that is displayed
     				in the user interface. 
    
-      
    Application authors can either associate Validation.Errors output
-    				with specific UI elements, include an initially hidden ValidationSummary user
+      
    Application authors can either associate Validation.Errors output
+    				with specific UI elements, include an initially hidden ValidationSummary user
     				interface element, or both. The example shown in this technique uses
-    				both ValidationSummary and Validation.Errors.
-    				The ValidationSummary is the most appropriate technique
+    				both ValidationSummary and Validation.Errors.
+    				The ValidationSummary is the most appropriate technique
     				for providing text feedback after a form submission attempt, because
     				assistive technologies pick it up as a discrete focusable element in
-    				the interface representation. The Validation.Errors technique
+    				the interface representation. The Validation.Errors technique
     				is perhaps a better cognitive user experience for sighted users, because
     				it presents the specific error suggestions in closer proximity to the
     				input items that are in error. 
    
-      
    This technique relies on several Silverlight features: AutomationProperties,
-    				the Name property for identifying specific UI elements,
-    				the Validation and ValidationSummary API,
+      
    This technique relies on several Silverlight features: AutomationProperties,
+    				the Name property for identifying specific UI elements,
+    				the Validation and ValidationSummary API,
     				the ElementName variation of Silverlight data binding, and the general
-    				behavior of TextBox elements. 
    
+    				behavior of TextBox elements. 
    
    	
    
          
     Contrast for validation states of the Label control 
    
          
    Silverlight version 4's default visual styles have a bug where the
     					colors used to indicate an invalid field entry by changing the color
     					of the foreground text do not satisfy the 4.5:1 contrast ratio per
     					SC 1.4.1. To correct for this visual bug, application authors should
-    					copy the control template for the Label control, and
+    					copy the control template for the Label control, and
     					adjust the color used for the validation state. This is shown in Example
     					1; the resource   "LabelStyle1" was generated by copying
-    					the default Label style using Microsoft Expression
+    					the default Label style using Microsoft Expression
     					Blend. Then, the value was changed in the copied template, and the
     					changed template was referenced and included in the application. The
     					specific changed line is indicated by a comment in the Example 1 sample
@@ -50,12 +50,12 @@ 
    Two form fields with validation on Submit, and an error
             
    In this example, the form fields correspond to a data object that
     						implements a view model. Silverlight uses the view model and data annotations
     						to generate some of its UI, notably the names of the fields are bound
-    						to the original view model names from the data. The ValidationSummary 
+    						to the original view model names from the data. The ValidationSummary 
     							API is defined in a "Client SDK" library System.Windows.Controls.Data.Input.dll,
     						which is included as part of the project and the distributable. 
    
             
    This example has a UI defined in XAML and logic defined in C#. The
     					following is the XAML UI. 
    
-            
    <UserControl x:Class="AccessibleValidation.MainPage"
+            
    <UserControl x:Class="AccessibleValidation.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
@@ -160,7 +160,7 @@ 
    Two form fields with validation on Submit, and an error
     						what area of the interface to report to the user. If code calls Focus
     						to reference the error summary once it is completed, the assistive
     						technology can report the error summary immediately. 
    
-            
           public MainPage()
+            
           public MainPage()
        {
            InitializeComponent();
            LayoutRoot.DataContext = new Product();
@@ -181,7 +181,7 @@ 
    Two form fields with validation on Submit, and an error
             
    The following is the data class. Note how much of the validation
     						logic is defined within this view model, rather than as part of Silverlight
     						UI logic. 
    
-            
      public class Product 
+            
      public class Product 
    {
        private string nameValue;
        private const string nameMessage = "Must be 10 characters or less.";
@@ -250,8 +250,8 @@ 
    Two form fields with validation on Submit, and an error
             
    This example is shown in operation in the working example of Accessible Validation.
    
             
    
                
     Validation style for Label controls 
    
-               
    The default validation style for the Invalid state of Label does
-    							not have adequate contrast by default. Application authors can restyle Label with
+               
    The default validation style for the Invalid state of Label does
+    							not have adequate contrast by default. Application authors can restyle Label with
     							a new template that has a 4.5:1 contrast. 
    
             
    
             
diff --git a/techniques/silverlight/SL4.html b/techniques/silverlight/SL4.html
index 3d90e3606e..5caf00fc6c 100644
--- a/techniques/silverlight/SL4.html
+++ b/techniques/silverlight/SL4.html
@@ -6,7 +6,7 @@
          
  •  Silverlight managed programming model and Silverlight XAML 
    • 
       
    
    Description
    
-      
    The objective of this technique is use the HTML Lang attribute on
+      
    The objective of this technique is use the HTML Lang attribute on
     				the object tag to describe each Silverlight plug-in instance on the
     				HTML hosting page as a "part" that has a different language.
     				Assistive technologies that use HTML Lang as a determinant of language
@@ -27,7 +27,7 @@
     				a simplication of HTML markup for a page that contains two Silverlight
     				content areas, the first declaring Lang as English (en), the second
     				declaring Lang as German (de): 
    
-      
         <body>
+      
         <body>
        <object type="application/x-silverlight-2" lang="en">
        </object>
        <object type="application/x-silverlight-2" lang="de">
@@ -68,8 +68,8 @@ 
    Two Silverlight object tags, each with different HTML
                
  •  The web project that declares the HTML or ASP page that shows
     						the framework of how the two Silverlight object tags exist on a page.
     						This is where the HTML Lang is actually set. 
    • 
-               
  •  A project for the English user control, a simple TextBox. 
    • 
-               
  •  A project for a German user control, also a simple TextBox. 
    • 
+               
  •  A project for the English user control, a simple TextBox. 
    • 
+               
  •  A project for a German user control, also a simple TextBox. 
    • 
                
  •  A library with a static translation function 
    • 
             
             
    In this example, the English user control implements a LocalMessageSender,
@@ -80,7 +80,7 @@ 
    Two Silverlight object tags, each with different HTML
     						translated text. 
    
             
    The following is the HTML page (some infrastructure and parameters
     					omitted for clarity): 
    
-            
    <html xmlns="http://www.w3.org/1999/xhtml" >
+            
    <html xmlns="http://www.w3.org/1999/xhtml" >
 <body>
 
     <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="25px" lang="en">
@@ -95,7 +95,7 @@ 
    Two Silverlight object tags, each with different HTML
 </html>
 
    
             
    The following is the XAML for the English user control: 
    
-            
    <UserControl x:Class="SilverFish.MainPage"
+            
    <UserControl x:Class="SilverFish.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Height="20" 
 >
@@ -107,7 +107,7 @@ 
    Two Silverlight object tags, each with different HTML
 </UserControl>
 
    
             
    The following is the code-behind for the English user control: 
    
-            
       public partial class MainPage : UserControl
+            
       public partial class MainPage : UserControl
    {
        private LocalMessageSender messagesender;
        public MainPage()
@@ -122,11 +122,11 @@ 
    Two Silverlight object tags, each with different HTML
    }
    
    
             
    The following is the code-behind for the German user control (the
-    						XAML is minimal; the main relevant point is that it contains a TextBox target
+    						XAML is minimal; the main relevant point is that it contains a TextBox target
     						named GermanTranslationBox). The code invokes the translation function
     						found in a separate library. The translation function is not shown,
     						it simply takes an English string and returns a German translation. 
    
-            
       public partial class MainPage : UserControl
+            
       public partial class MainPage : UserControl
    {
        public MainPage()
        {
diff --git a/techniques/silverlight/SL5.html b/techniques/silverlight/SL5.html
index cf24f9cb2c..506736310b 100644
--- a/techniques/silverlight/SL5.html
+++ b/techniques/silverlight/SL5.html
@@ -4,7 +4,7 @@
          
  •  Silverlight managed programming model and Silverlight XAML 
    • 
       
    
    Description
    
-      
    The objective of this technique is to wrap the Silverlight Image class
+      
    The objective of this technique is to wrap the Silverlight Image class
     				inside a UI container class that is focusable. If the image is focusable,
     				users who use the TAB sequence to navigate content while the assistive
     				technology is active, and/or assistive technologies that construct
@@ -23,24 +23,24 @@
          Image is
     				an example of a Silverlight element that is not focusable. This technique
     				and the example therein are intended to circumvent the possible omission
-    				of a nonfocusable Silverlight Image element from certain
+    				of a nonfocusable Silverlight Image element from certain
     				navigation views in existing assistive technology implementations.
-    				The Silverlight Image is wrapped with a display/viewer
+    				The Silverlight Image is wrapped with a display/viewer
     				control class that is focusable. This image-wrapping control is initially
     				presented in assistive technology representations of a Silverlight
     				user interface that use only focusable elements when constructing the
     				assistive technology's representation of the application. 
    
-      
    The image wrapper class uses the AutomationProperties.Name property
-    				to provide a short text alternative for the contained Image,
+      
    The image wrapper class uses the AutomationProperties.Name property
+    				to provide a short text alternative for the contained Image,
     				so that the alternative text can be read or otherwise presented by
-    				assistive technologies. The Silverlight API AutomationProperties.Name directly
-    				sets Name in the UI Automation tree. The properties
+    				assistive technologies. The Silverlight API AutomationProperties.Name directly
+    				sets Name in the UI Automation tree. The properties
     				in the UI Automation tree are reported to assistive technologies, when
     				the assistive technology implements behavior that acts as a UI Automation
-    				client. Name is one of the accessibility framework
+    				client. Name is one of the accessibility framework
     				properties that most assistive technologies present in some way, for
-    				purposes of both name and value information, and setting Name is
-    				the common technique for exposing text alternatives for any other Control class
+    				purposes of both name and value information, and setting Name is
+    				the common technique for exposing text alternatives for any other Control class
     				(for example, for a button with an image, as shown in the technique ). 
    
       
    This technique is intended for cases where application authors deliberately
     				do not want a visible image caption for the image to be part of the
@@ -60,7 +60,7 @@ 
    Defining the FocusableImage XAML template and C# code
     						implemented in a managed code language such as C#. The following is
     						the XAML template, which includes a visual state that shows visually
     						when the control is focused in UI. 
    
-            
    <ResourceDictionary
+            
    <ResourceDictionary
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="clr-namespace:ImageEquivalent">
@@ -101,7 +101,7 @@ 
    Defining the FocusableImage XAML template and C# code
     						invoking a default automation peer on creation, and loading the template
     						as defined in the previous XAML example through the Silverlight "generic.xaml" resource
     						convention for custom controls. 
    
-            
    namespace ImageEquivalent
+            
    namespace ImageEquivalent
 {
    public class FocusableImage : Control
    {
@@ -158,10 +158,10 @@ 
    Using the FocusableImage class in UI and applying AutomationProperties.Name<
          
             
    Now that the image is wrapped by a focusable control, you can instantiate
     						an instance of the wrapper UI inside a Silverlight layout container,
-    						specify AutomationProperties.Name at the level of
+    						specify AutomationProperties.Name at the level of
     						the wrapper control’s tag, and have that text serve as the alternative
     						text for the referenced source image file. 
    
-            
       <StackPanel
+            
       <StackPanel
    xmlns:local="clr-namespace:ImageEquivalent;assembly=FocusableImage"
    >
    <local:FocusableImage
@@ -182,7 +182,7 @@ 
    Automation Tree
    
             
  •  Use the tab sequence inside the Silverlight content area to focus
     						the control. 
    • 
             
  •  Using an accessibility framework verification tool, check that
-    							the string content is promoted as the default Name applied
+    							the string content is promoted as the default Name applied
     							to the control. 
    • 
          
          
    
@@ -210,7 +210,7 @@ 
    Screen Reader
    
     					UI Automation, use Microsoft Windows as platform. 
             
  •  Engage the screen reader. Move focus to the control (for example,
     						use the tab sequence). 
    • 
-            
  •  Check that the Name applied to the image is read
+            
  •  Check that the Name applied to the image is read
     							by the screen reader. 
    • 
          
       
    
diff --git a/techniques/silverlight/SL6.html b/techniques/silverlight/SL6.html
index 4f1dae0c03..8cf22b6979 100644
--- a/techniques/silverlight/SL6.html
+++ b/techniques/silverlight/SL6.html
@@ -4,8 +4,8 @@
          
  •  Silverlight managed programming model and Silverlight XAML 
    • 
       
    
    Description
    
-      
    The objective of this technique is to create an AutomationPeer class
-    				for a custom Silverlight control. The AutomationPeer exposes
+      
    The objective of this technique is to create an AutomationPeer class
+    				for a custom Silverlight control. The AutomationPeer exposes
     				accessibility properties of the control in a way that abstracts the
     				Silverlight technology specifics of the control model and maps information
     				to UI Automation concepts, so that these properties can be consumed
@@ -44,8 +44,8 @@
     				method Invoke, which would activate the button without
     				any device input events being produced or required. 
    
       
    By convention, controls and their automation peers share a naming
-    				pattern. For example, if a control is named Spinner, its automation
-    				peer is named SpinnerPeer. However, the actual wiring for the class-peer
+    				pattern. For example, if a control is named Spinner, its automation
+    				peer is named SpinnerPeer. However, the actual wiring for the class-peer
     				association is made in the control code by overriding OnCreateAutomationPeer.
     				Thus it is necessary to have access to the control code in order to
     				associate a new peer class implementation with that control. 
    
@@ -78,7 +78,7 @@ 
    SimpleNumericUpDown control and its peer
    
     						supports a Value pattern. 
             
             
    Control definition class: 
    
-            
       public class SimpleNumericUpDown : Control
+            
       public class SimpleNumericUpDown : Control
    {
        public SimpleNumericUpDown()
        {
@@ -102,7 +102,7 @@ 
    SimpleNumericUpDown control and its peer
    
    }
    
    
             
    Automation peer definition: 
    
-            
       public class SimpleNumericUpDownAutomationPeer : FrameworkElementAutomationPeer, IValueProvider
+            
       public class SimpleNumericUpDownAutomationPeer : FrameworkElementAutomationPeer, IValueProvider
    {
        private SimpleNumericUpDown OwnerControl { get { return (SimpleNumericUpDown)Owner; } }
        public SimpleNumericUpDownAutomationPeer(SimpleNumericUpDown owner)
diff --git a/techniques/silverlight/SL7.html b/techniques/silverlight/SL7.html
index 5c4b67c400..1d31c2db1d 100644
--- a/techniques/silverlight/SL7.html
+++ b/techniques/silverlight/SL7.html
@@ -70,11 +70,11 @@ 
    Design for Focus Indicators
    
     					state that indicates that the mouse is over the control (this is termed
     					either MouseOver or Hover state). Controls that support activation
     					also have a visual state that provides feedback for activation. For
-    					example, the default Silverlight RepeatButton changes
-    					its Background gradient on the button field to be
+    					example, the default Silverlight RepeatButton changes
+    					its Background gradient on the button field to be
     					darker blue value when the mouse is over the button, and changes to
     					an even darker value blue when the button is activated (either by clicking
-    					the mouse or by pressing SPACE or ENTER with keyboard focus on the RepeatButton).
+    					the mouse or by pressing SPACE or ENTER with keyboard focus on the RepeatButton).
     					To see this behavior in a live sample, see RepeatButton
     						sample on MSDN. 
    
    	
    
@@ -124,11 +124,11 @@ 
    Focus in Silverlight
    
     					application concept of keyboard focus. The element that has focus is
     					the element within the Silverlight object tree and programming model
     					that has first chance to process the Silverlight key events. As a more
-    					tangible example that is user-centric, if a TextBox has
+    					tangible example that is user-centric, if a TextBox has
     					keyboard focus, then when the user presses keys on the keyboard, the
     					characters associated with the user's pressed keys (or possibly input
     					that is enabled by an assistive technology that can substitute for
-    					key strokes) will appear in the TextBox. A user interface
+    					key strokes) will appear in the TextBox. A user interface
     					element in Silverlight can obtain keyboard focus in one of three ways: 
    
          
      
             
    1.  The user uses the Silverlight tab sequence to traverse into the
@@ -154,7 +154,7 @@ 
      Visible focus indicator as a style and state
      
     						edge is defined by the "FocusVisual" element in the composition,
     						and is initially Visibility=Collapsed (the expected visual state prior
     						to being focused). 
      
-            
      <ResourceDictionary
+            
      <ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:FocusVisualCustomControl"
@@ -184,11 +184,11 @@ 
      Visible focus indicator as a style and state
      
 </ResourceDictionary>
 
      
             
      The following is the specific visual state portion. Note how the
-    						visual state includes an ObjectAnimation with discrete
+    						visual state includes an ObjectAnimation with discrete
     						keyframes for hard transition between Visible and Collapsed, targeting
     						the element "FocusVisual" in the composition shown in the
     						previous XAML. 
      
-            
                             <VisualStateManager.VisualStateGroups>
+            
                             <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Unfocused"/>
                                <VisualState x:Name="Focused">
@@ -214,7 +214,7 @@ 
      Visible focus indicator as a style and state
      
     						of reverting to the default state, which in the case of this design
     						is intentional. Alternatively, authors could make specific template
     						changes that revert any animation that applied to the focused state. 
      
-            
             protected override void OnGotFocus(RoutedEventArgs e)
+            
             protected override void OnGotFocus(RoutedEventArgs e)
        {
            base.OnGotFocus(e);
            VisualStateManager.GoToState(this, "Focused", false);
diff --git a/techniques/silverlight/SL8.html b/techniques/silverlight/SL8.html
index 61b146b0fa..71806f18f7 100644
--- a/techniques/silverlight/SL8.html
+++ b/techniques/silverlight/SL8.html
@@ -12,43 +12,43 @@
     				text alternative for a nontext object, for example for an image that
     				contains a level of detail that is difficult to capture in a standard
     				visible-in-UI image caption. 
      
-      
      Silverlight supports a UI Automation property named HelpText,
+      
      Silverlight supports a UI Automation property named HelpText,
     				to connote its possible usage to provide imperative instructions for
-    				interactive elements. HelpText is not always forwarded
+    				interactive elements. HelpText is not always forwarded
     				to users by existing assistive technologies, which is an issue discussed
     				in the technique .
     				Rather than relying on a particular assistive technology's support
-    				for enabling users to access the UIA HelpText, application
+    				for enabling users to access the UIA HelpText, application
     				authors can introduce user interface elements into their design that
-    				databind directly to the HelpText property, but where
+    				databind directly to the HelpText property, but where
     				the interface element is not necessarily displayed by default. An interface
     				update might be designed to occur if the application user specifically
     				activates a "Get Help" action that is presented in the initial
     				user interface. 
      
       
      This technique emphasises a "HelpText" model as a factoring
-    				practice. Silverlight application authors can use the HelpText as
+    				practice. Silverlight application authors can use the HelpText as
     				a data source that centralizes such information, because it already
     				exists and has that intended purpose in accessibility frameworks. For
-    				example, the HelpText could be shown in a tooltip,
+    				example, the HelpText could be shown in a tooltip,
     				a popup, a separate user interface element that is deliberately rendered
     				in close proximity, etc. For accessibility support, a recommended display
-    				option for HelpText is to add or dynamically alter
+    				option for HelpText is to add or dynamically alter
     				a Silverlight text element in the primary user interface. Silverlight
     				supports an adaptive layout metaphor. Adding text to the runtime elements
     				in the application generally causes an interface redraw, which in turn
     				informs assistive technologies (through UIA properties and events)
     				that content might have changed. 
      
-      
      To set the UIA HelpText in Silverlight, you set the
-    				attached property AutomationProperties.HelpText. AutomationProperties.HelpText can
+      
      To set the UIA HelpText in Silverlight, you set the
+    				attached property AutomationProperties.HelpText. AutomationProperties.HelpText can
     				be set in code, but is typically set in XAML that defines a Silverlight
     				UI. 
      
    	
      
          
      HelpText and Tooltip
      
-         
      The same information that is used for AutomationProperties.HelpText long
+         
      The same information that is used for AutomationProperties.HelpText long
     					text alternatives could also be useful to sighted users. In this case,
     					the same text could be displayed in a Silverlight ToolTip control.
-    					The reason that application authors should use both AutomationProperties.HelpText AND Tooltip in
-    					conjunction is because the Tooltip information is
+    					The reason that application authors should use both AutomationProperties.HelpText AND Tooltip in
+    					conjunction is because the Tooltip information is
     					not introduced into the runtime accessibility framework information
     					set by UI Automation, because that information set does not anticipate
     					the mouse action triggers that cause tooltips to display. In Silverlight
@@ -63,15 +63,15 @@ 
      HelpText and Tooltip
      
          
      Displaying a long text alternative for an Image with
     					XAML
      
          
-            
      Application authors can specify the AutomationProperties.HelpText attribute
-    						on the Image element. The value provided for the attribute
+            
      Application authors can specify the AutomationProperties.HelpText attribute
+    						on the Image element. The value provided for the attribute
     						should be a meaningful long text alternative for the image content.
-    						The value of AutomationProperties.HelpText should
-    						augment rather than duplicate any AutomationProperties.Name or
-    						an associated Label or LabeledBy caption.
+    						The value of AutomationProperties.HelpText should
+    						augment rather than duplicate any AutomationProperties.Name or
+    						an associated Label or LabeledBy caption.
     						One or both of these is also typically specified to provide the basic
     						(short-text) accessibility support for an image. 
      
-            
      <StackPanel x:Name="imgContainer">
+            
      <StackPanel x:Name="imgContainer">
  <Image
    Height="400" Width="600"
    Source="/office.png"
@@ -84,9 +84,9 @@ 
      Displaying a long text alternative for an Image with
 </StackPanel>
 
      
             
      The following event handler removes the Help button and replaces
-    						it in UI with a TextBox that displays the long text
+    						it in UI with a TextBox that displays the long text
     						alternative. 
      
-            
             private void HelpButton_Click(object sender, RoutedEventArgs e)
+            
             private void HelpButton_Click(object sender, RoutedEventArgs e)
        {
            imgContainer.Children.Remove(HelpButton);
            TextBox tb = new TextBox();
@@ -103,14 +103,14 @@ 
      Using HelpText to augment existing form labels, to provide
     				long text instructions
      
          
             
      This example provides instructions for two form fields. The same text
-    						is also displayed for mouse users as a Tooltip and
-    						the AutomationProperties.HelpText string is used as
+    						is also displayed for mouse users as a Tooltip and
+    						the AutomationProperties.HelpText string is used as
     						a common source for both display options. In this example, the form
     						submission does not perform client-side validation (although server-side
     						validation following a data round trip might still exist, or validation
     						could be added similar to the technique shown in ). 
      
             
      The following is the XAML UI: 
      
-            
      <UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" 
+            
      <UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" 
    x:Class="HelpTextAndToolTip.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -160,7 +160,7 @@ 
      Using HelpText to augment existing form labels, to provide
 </UserControl>
 
      
             
      The following is the resource definition in app.xaml: 
      
-            
             <ResourceDictionary>
+            
             <ResourceDictionary>
            <resources:Resource1 x:Key="TooltipStrings"/>
        </ResourceDictionary>
        
      
@@ -174,7 +174,7 @@ 
      Using HelpText to augment existing form labels, to provide
                
    2.  AgeTextBoxToolTipString Must be a value between 0 and 120. Required. 
      3. 
             
             
      The following is the event handler code, which changes the interface. 
      
-            
             private void HelpButton_Click(object sender, RoutedEventArgs e)
+            
             private void HelpButton_Click(object sender, RoutedEventArgs e)
        {
            AgeLabel.Content = AgeLabel.Content + ": " + AutomationProperties.GetHelpText(AgeTextBox);
            NameLabel.Content = NameLabel.Content + ": " + AutomationProperties.GetHelpText(NameTextBox);
@@ -183,8 +183,8 @@ 
      Using HelpText to augment existing form labels, to provide
        
      
             
      Note the call to Focus() - this puts the screen reader focus on
     						the first form element so that the added text can be read. The very
-    						same text source as used for the Tooltip is added
-    						programmatically to the existing Label controls. 
      
+    						same text source as used for the Tooltip is added
+    						programmatically to the existing Label controls. 
      
             
      After the Get Help button is clicked, the visual appearance of the
     						application is modified: 
      
             
      
diff --git a/techniques/silverlight/SL9.html b/techniques/silverlight/SL9.html
index 5a3bf17917..6b005558d4 100644
--- a/techniques/silverlight/SL9.html
+++ b/techniques/silverlight/SL9.html
@@ -67,25 +67,25 @@ 
      Silverlight core control built-in keyboard functionality
      
     					can handle the event and/or rely on the built-in key handling as listed. 
      
          
        
             
      •  
-                  Button (SPACE and ENTER) - raises Click event. 
        • 
-            
      •  Other ButtonBase classes eg RepeatButton, HyperlinkButton (SPACE
+                  Button (SPACE and ENTER) - raises Click event. 
        • 
+            
      •  Other ButtonBase classes eg RepeatButton, HyperlinkButton (SPACE
     					and ENTER) - raises Click event. 
        • 
             
      •  
-                  TextBox (ENTER, unless in a mode where the TextBox 
+                  TextBox (ENTER, unless in a mode where the TextBox 
     						accepts multiple lines) - moves focus to next control, treated like
     						a TAB 
        • 
             
      •  
-                  ListBox (various keys) - see OnKeyDown
+                  ListBox (various keys) - see OnKeyDown
     							Method. 
        • 
             
      •  
-                  ComboBox (arrow keys ) - traverse list choices
+                  ComboBox (arrow keys ) - traverse list choices
     								as control UI if popup area displayed. 
        • 
             
      •  
-                  RichTextBox (various keys ) - enable edit mode
+                  RichTextBox (various keys ) - enable edit mode
     									operations; see RichTextBox
     										Overview. 
        • 
             
      •  
-                  Slider (arrow keys ) - increment/decrement values. 
        • 
+                  Slider (arrow keys ) - increment/decrement values. 
          
      
    	
      
    	
      
@@ -140,26 +140,26 @@ 
      Built-in keyboard equivalence for core Silverlight controls
      
             
      This example pertains to cases where the control that handles key
     						events is focusable (through the tab sequence, etc.) and where an existing
     						Silverlight control behavior provides the keyboard equivalence In this
-    						example, a Silverlight UI includes a Button element.
+    						example, a Silverlight UI includes a Button element.
     						For sighted users, or users that generally use the mouse to interact
     						with UI, a typical way to interact with the button is to position the
     						mouse pointer over the element, and click the left mouse button. However,
-    						the Button also supports a built-in key handling behavior,
+    						the Button also supports a built-in key handling behavior,
     						whereby either the SPACE or ENTER keys are treated as an equivalent
     						action to clicking the button with a mouse. The requirement for this
-    						interaction is that the Button must have keyboard
-    						focus at the point in time that SPACE or ENTER are pressed. The Button might
+    						interaction is that the Button must have keyboard
+    						focus at the point in time that SPACE or ENTER are pressed. The Button might
     						gain focus because the user pressed the TAB key to move through the
     						tab sequence, or some equivalent action enabled by assistive technology.
     						In terms of the programming experience, the Silverlight application
     						author does not have to separately handle KeyDown for
-    						this case. Within the Button control built-in code,
-    						the special case of SPACE or ENTER keys pressed while a Button has
+    						this case. Within the Button control built-in code,
+    						the special case of SPACE or ENTER keys pressed while a Button has
     						focus invokes the button’s Click event. Then the Silverlight
     						application author can simply handle Click without
     						differentiating whether the input action was a mouse click or a keyboard
     						equivalent. The following is the entire XAML UI. 
      
-            
      <UserControl x:Class="BuiltInKeyEquivalence.MainPage"
+            
      <UserControl x:Class="BuiltInKeyEquivalence.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 >
@@ -172,7 +172,7 @@ 
      Built-in keyboard equivalence for core Silverlight controls
      
 </UserControl>
 
      
             
      The following is the C# logic. 
      
-            
         private void button1_Click(object sender, RoutedEventArgs e)
+            
         private void button1_Click(object sender, RoutedEventArgs e)
    {
        MessageBox.Show("You clicked a button ... or maybe you hit the space bar ... or ENTER ... it's all the same to me.");
    }
@@ -194,7 +194,7 @@ 
      Keyboard events for a custom control, keyboard equivalence
      
     						accelerator keys, where these actions are equivalent to clicking the
     						button composition parts of the control with a mouse. The following
     						is the default XAML template. 
      
-            
      <ControlTemplate TargetType="local:SimpleNumericUpDown">
+            
      <ControlTemplate TargetType="local:SimpleNumericUpDown">
   <Border Background="{TemplateBinding Background}"
           BorderBrush="{TemplateBinding BorderBrush}"
           BorderThickness="{TemplateBinding BorderThickness}" Name="controlFrame">
@@ -218,7 +218,7 @@ 
      Keyboard events for a custom control, keyboard equivalence
      
     						the separation of UI appearance (which can be overridden) from the
     						input event-handling behavior (which is implemented by the control
     						author). 
      
-            
         public class SimpleNumericUpDown : Control
+            
         public class SimpleNumericUpDown : Control
    {
        public SimpleNumericUpDown()
        {
diff --git a/techniques/smil/SM1.html b/techniques/smil/SM1.html
index a643431d33..415270c6fc 100644
--- a/techniques/smil/SM1.html
+++ b/techniques/smil/SM1.html
@@ -27,7 +27,7 @@ 
      Description
      
 		
      Examples
      
 		
      
 			
      SMIL 1.0 Video with audio descriptions that pause the main media in 4 locations to allow extended audio description
      
-
      <?xml version="1.0" encoding="UTF-8"?>
+
      <?xml version="1.0" encoding="UTF-8"?>
 <smil xmlns:qt="http://www.apple.com/quicktime/resources/smilextensions" 
  xmlns="https://www.w3.org/TR/REC-smil" qt:time-slider="true">
   <head>
@@ -68,8 +68,8 @@ 
      SMIL 1.0 Video with audio descriptions that pause the main media in 4 locati
   </body>
 </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.
         
       
      
 		
      
 		
      
diff --git a/techniques/smil/SM11.html b/techniques/smil/SM11.html
index 9855dbf9c7..a51023f773 100644
--- a/techniques/smil/SM11.html
+++ b/techniques/smil/SM11.html
@@ -24,7 +24,7 @@ 
      Description
      
 		
      Examples
      
 		
      
 			
      SMIL 1.0 caption sample for QuickTime player
      
-
      <?xml version="1.0" encoding="UTF-8"?>
+
      <?xml version="1.0" encoding="UTF-8"?>
 <smil xmlns:qt="http://www.apple.com/quicktime/resources/smilextensions" 
      xmlns="https://www.w3.org/TR/REC-smil" qt:time-slider="true">
 <head>
@@ -48,7 +48,7 @@ 
      SMIL 1.0 caption sample for QuickTime player
      
       
      
 			
      
 				
      SMIL 1.0 caption sample with internal text streams 
      
-
      <?xml version="1.0" encoding="UTF-8"?>
+
      <?xml version="1.0" encoding="UTF-8"?>
 <smil xmlns="https://www.w3.org/TR/REC-smil">
 <head>
   <layout>
@@ -74,7 +74,7 @@ 
      SMIL 1.0 caption sample with internal text streams 
      
 </body>
 </smil>
      
     
-		
       This example shows a text element that includes synchronized text streams within the SMIL file.
      
+		
       This example shows a text element that includes synchronized text streams within the SMIL file.
      
       
      
 		
      
 		
      
diff --git a/techniques/smil/SM12.html b/techniques/smil/SM12.html
index d0a7a6c36a..4d1054a157 100644
--- a/techniques/smil/SM12.html
+++ b/techniques/smil/SM12.html
@@ -24,7 +24,7 @@ 
      Description
      
 		
      Examples
      
 		
      
 			
      SMIL 2.0 caption sample with internal text streams for RealMedia player
      
-
      <?xml version="1.0" encoding="UTF-8"?>
+
      <?xml version="1.0" encoding="UTF-8"?>
 <smil xmlns="https://www.w3.org/2001/SMIL20/Language">
 <head>
   <layout>
@@ -57,7 +57,7 @@ 
      SMIL 2.0 caption sample with internal text streams for RealMedia player
      
 </body>
 </smil>
      
          
-			
      This example shows a text element that includes synchronized text streams within the SMIL file.
      
+			
      This example shows a text element that includes synchronized text streams within the SMIL file.
      
       
      
 		
      
 		
      
diff --git a/techniques/smil/SM13.html b/techniques/smil/SM13.html
index 764100a2e9..34d351f076 100644
--- a/techniques/smil/SM13.html
+++ b/techniques/smil/SM13.html
@@ -30,7 +30,7 @@ 
      Description
      
      
      
       
      SMIL 1.0 sign-language interpretation sample for QuickTime
       player 
      
-
      <?xml version="1.0" encoding="UTF-8"?>
+
      <?xml version="1.0" encoding="UTF-8"?>
 <smil xmlns:qt="http://www.apple.com/quicktime/resources/smilextensions" 
    xmlns="https://www.w3.org/TR/REC-smil" qt:time-slider="true">
 <head>
diff --git a/techniques/smil/SM14.html b/techniques/smil/SM14.html
index eedab69ff2..72f150cd4b 100644
--- a/techniques/smil/SM14.html
+++ b/techniques/smil/SM14.html
@@ -32,7 +32,7 @@ 
      Description
      
 		
      Examples
      
      
      
       
      SMIL 2.0 sign-language video sample for RealMedia player
      
-
      <smil xmlns="https://www.w3.org/2001/SMIL20/Language">
+
      <smil xmlns="https://www.w3.org/2001/SMIL20/Language">
 <head>
   <layout>
     <root-layout backgroundColor="black" height="310" width="330"/>
@@ -54,8 +54,8 @@ 
      SMIL 2.0 sign-language video sample for RealMedia player
      
 </body>
 </smil>
      
      
-     
      The example shows a par segment containing
-       two video tags. The systemCaptions attribute indicates that the sign language video should be displayed when the user's player setting for captions indicates the preference for captions to be displayed. The layout section defines the regions used for the main video and the sign language interpretation video.
      
+     
      The example shows a par segment containing
+       two video tags. The systemCaptions attribute indicates that the sign language video should be displayed when the user's player setting for captions indicates the preference for captions to be displayed. The layout section defines the regions used for the main video and the sign language interpretation video.
      
    
      
    
      Tests
      
      
      Procedure
      
diff --git a/techniques/smil/SM2.html b/techniques/smil/SM2.html
index 297cd2b8e0..81a5120bc7 100644
--- a/techniques/smil/SM2.html
+++ b/techniques/smil/SM2.html
@@ -26,7 +26,7 @@ 
      Description
      
 		
      Examples
      
 		
      
 			
      Video with extended audio description
      
-
      <smil xmlns="https://www.w3.org/2001/SMIL20/Language"> 
+
      <smil xmlns="https://www.w3.org/2001/SMIL20/Language"> 
 <head>
   <layout> 
     <root-layout backgroundColor="black" height="266" width="320"/> 
diff --git a/techniques/smil/SM6.html b/techniques/smil/SM6.html
index e7eb1a2f8b..ce007be8a6 100644
--- a/techniques/smil/SM6.html
+++ b/techniques/smil/SM6.html
@@ -27,7 +27,7 @@ 
      Description
      
 				
      Examples
      
 				
      
 					
      SMIL 1.0 audio description sample for QuickTime player
      
-
      <?xml version="1.0" encoding="UTF-8"?>
+
      <?xml version="1.0" encoding="UTF-8"?>
 <smil xmlns:qt="http://www.apple.com/quicktime/resources/smilextensions" 
       xmlns="https://www.w3.org/TR/REC-smil" qt:time-slider="true">
 <head>
diff --git a/techniques/smil/SM7.html b/techniques/smil/SM7.html
index 4b74767310..352540bff9 100644
--- a/techniques/smil/SM7.html
+++ b/techniques/smil/SM7.html
@@ -25,7 +25,7 @@ 
      Description
      
 			
      Examples
      
       
      
 				
      SMIL 2.0 audio description sample for RealMedia player
      
-
      <smil xmlns="https://www.w3.org/2001/SMIL20/Language">
+
      <smil xmlns="https://www.w3.org/2001/SMIL20/Language">
 <head>
   <layout>
     <root-layout backgroundColor="black" height="266" width="320"/>
@@ -43,7 +43,7 @@ 
      SMIL 2.0 audio description sample for RealMedia player
      
   </body>
 </smil>
      
          
-
      The example shows a par segment containing an audio and a video tag. The audio stream is not started immediately.
      
+
      The example shows a par segment containing an audio and a video tag. The audio stream is not started immediately.
      
       
      
 		
      
 		
      
diff --git a/understanding/20/bypass-blocks.html b/understanding/20/bypass-blocks.html
index 4376c9a5e1..942c32a963 100644
--- a/understanding/20/bypass-blocks.html
+++ b/understanding/20/bypass-blocks.html
@@ -215,7 +215,7 @@ 
      Sufficient Techniques for Bypass Blocks
      
                   
                   
    3. 
                      											             
-                     Using the title attribute of the iframe element
+                     Using the title attribute of the iframe element
                      										           
                   
      4. 
                   
diff --git a/understanding/20/focus-order.html b/understanding/20/focus-order.html
index 227f36d75b..2662051635 100644
--- a/understanding/20/focus-order.html
+++ b/understanding/20/focus-order.html
@@ -33,8 +33,8 @@ 
      Intent of Focus Order
      
       
      The way that sequential navigation order is determined in web content is defined by
          the technology of the content. For example, simple HTML defines sequential navigation
          via the notion of tabbing order. Dynamic HTML may modify the navigation sequence using
-         scripting along with the addition of a tabindex attribute to allow focus to additional
-         elements. If no scripting or tabindex attributes are used, the navigation order is
+         scripting along with the addition of a tabindex attribute to allow focus to additional
+         elements. If no scripting or tabindex attributes are used, the navigation order is
          the order that components appear in the content stream. (See Focus in the HTML Living Standard).
       
      
       
@@ -145,7 +145,7 @@ 
      Examples of Focus Order
      
             
      An HTML web page is created with the left hand navigation occurring in the HTML after
                the main body content, and styled with CSS to appear on the left hand side of the
                page. This is done to allow focus to move to the main body content first without requiring
-               tabindex attributes or JavaScript.
+               tabindex attributes or JavaScript.
             
      
             
             
      
@@ -232,7 +232,7 @@ 
      Failures for Focus Order
      
          
          
        
             
      • 								         
-               Failure of 2.4.3 due to using tabindex to create a tab order that does not preserve meaning and operability
+               Failure of 2.4.3 due to using tabindex to create a tab order that does not preserve meaning and operability
                
             
        • 
             
      • 								         
diff --git a/understanding/20/language-of-parts.html b/understanding/20/language-of-parts.html
index 19312aef8c..2c94d66f7c 100644
--- a/understanding/20/language-of-parts.html
+++ b/understanding/20/language-of-parts.html
@@ -119,8 +119,8 @@ 
        A German phrase in an English sentence
        
 
       
        Alternative language links
        
       
        An HTML web page includes links to versions of the page in other languages (e.g.,
-         Deutsch, Français, Nederlands, Catalan, etc.). The text of each link is the name of the language, in that language. The language of each link is indicated via a lang attribute.
        
-
        <ul>
+         Deutsch, Français, Nederlands, Catalan, etc.). The text of each link is the name of the language, in that language. The language of each link is indicated via a lang attribute.
        
+
        <ul>
   <li><a href="..." lang="de">Deutsch</a></li>
   <li><a href="..." lang="it">Italiano</a></li>
   <li><a href="..." lang="fr">Français</a></li>
@@ -132,9 +132,9 @@ 
        "Podcast" used in a French sentence
        
          
        Because "podcast" is part of the vernacular of the immediately surrounding text in the following excerpt, "À l'occasion de l'exposition "Energie éternelle. 1500 ans d'art indien", le Palais des Beaux-Arts de Bruxelles a lancé son premier podcast. Vous pouvez télécharger ce podcast au format M4A et MP3", no indication of language change is required.
        
 
          
        The element's content and attribute values are in different languages
        
-         
        This example assumes that the page's default content is in English. The link's title attribute is in English, but the nested span element that contains the word Español has a lang="es" attribute.
        
+         
        This example assumes that the page's default content is in English. The link's title attribute is in English, but the nested span element that contains the word Español has a lang="es" attribute.
        
 
-         
        <a title="Spanish" href="qa-html-language-declarations-es.html"><span lang="es">Español</span></a>
        
+         
        <a title="Spanish" href="qa-html-language-declarations-es.html"><span lang="es">Español</span></a>
        
    
      
 
    
      
@@ -142,7 +142,7 @@ 
      Resources for Language of Parts
      
 
       
        
          
      • 
-            HTML - The lang and xml:lang attributes.
+            HTML - The lang and xml:lang attributes.
             
        • 
          
      • 
             Language tags in HTML and XML.
diff --git a/working-examples/aria-alert-identify-errors/index.html b/working-examples/aria-alert-identify-errors/index.html
index 8a8bd92df3..9ce260d29b 100644
--- a/working-examples/aria-alert-identify-errors/index.html
+++ b/working-examples/aria-alert-identify-errors/index.html
@@ -69,7 +69,7 @@
 
 
 
-
        Using ARIA live regions or role=alert to identify errors
        
+
        Using ARIA live regions or role=alert to identify errors
        
 
        
   
   
        
diff --git a/working-examples/aria-labelledby-time-out-input-concatenated-label/index.html b/working-examples/aria-labelledby-time-out-input-concatenated-label/index.html
index a8fa8223b7..342e9172eb 100644
--- a/working-examples/aria-labelledby-time-out-input-concatenated-label/index.html
+++ b/working-examples/aria-labelledby-time-out-input-concatenated-label/index.html
@@ -14,7 +14,7 @@
 
 
 
-
        aria-labelledby example 1: Extend time-out
        
+
        aria-labelledby example 1: Extend time-out
        
 
 
 
        
diff --git a/working-examples/css-focus-visible/index.html b/working-examples/css-focus-visible/index.html
index 69f1a86b62..45250fce67 100644
--- a/working-examples/css-focus-visible/index.html
+++ b/working-examples/css-focus-visible/index.html
@@ -32,13 +32,13 @@
   
 
   
-    
        Using CSS :focus-visible to provide keyboard focus indication
        
+    
        Using CSS :focus-visible to provide keyboard focus indication
        
     
        In this example, we have a standard <button> control in the HTML.
        
 
     
 
     
        By default, in all modern browsers, this button does not show any focus indication when activated using a mouse/pointer. Browsers show their default focus outline/indication when a user sets focus on the button using Tab.
        
-    
        In order to make this focus indication more prominent, we use the :focus-visible pseudo-class selector to define a more intentional and pronounced focus style.
        
+    
        In order to make this focus indication more prominent, we use the :focus-visible pseudo-class selector to define a more intentional and pronounced focus style.
        
     
        :focus-visible { outline: 5px solid red; }
        
   
 
diff --git a/working-examples/css-pointer-spacing/index.html b/working-examples/css-pointer-spacing/index.html
index f4cf5d0e84..bbc207f8ec 100644
--- a/working-examples/css-pointer-spacing/index.html
+++ b/working-examples/css-pointer-spacing/index.html
@@ -100,7 +100,7 @@ 
        Working example of using min-height and min-width to ensure sufficient targe
 
 	
        This example relates to technique C42.
        
 
-	
        Example 1 (display: inline-block, min-height:44px and min-width:44px set on list items inside pagination menu)
        
+	
        Example 1 (display: inline-block, min-height:44px and min-width:44px set on list items inside pagination menu)
        
 	
        The first example shows a situation where the targets (in this case, the linked numbers in the pagination menu) are smaller than 44 × 44 CSS pixels. However, the list items that contain them have a minimum height and width of 44px, so that sufficient target spacing is assured.
        
 	
        Search results (invented):
        
 	
    
 
 
-	
    Example 2 (display: flex, min-height:44px and min-width:44px set on links inside pagination menu)
    
-	
    The second example uses min-width and min-height on the targets (the linked numbers in the pagination menu) and not on the parent container, thereby meeting this target spacing Success Criterion and the AAA Success Criterion 2.5.5 Target Size.
    
+	
    Example 2 (display: flex, min-height:44px and min-width:44px set on links inside pagination menu)
    
+	
    The second example uses min-width and min-height on the targets (the linked numbers in the pagination menu) and not on the parent container, thereby meeting this target spacing Success Criterion and the AAA Success Criterion 2.5.5 Target Size.
    
 	
    Search results (invented):