From 6a81160e0ff1919d96ca76a4831a7e1c281b4d73 Mon Sep 17 00:00:00 2001 From: "Kenneth G. Franqueiro" Date: Thu, 18 Sep 2025 10:40:01 -0400 Subject: [PATCH] Remove unnecessary classes from inline code tags --- techniques/aria/ARIA1.html | 16 ++-- techniques/aria/ARIA10.html | 10 +-- techniques/aria/ARIA11.html | 22 ++--- techniques/aria/ARIA12.html | 22 ++--- techniques/aria/ARIA13.html | 6 +- techniques/aria/ARIA14.html | 12 +-- techniques/aria/ARIA15.html | 10 +-- techniques/aria/ARIA16.html | 22 ++--- techniques/aria/ARIA17.html | 22 ++--- techniques/aria/ARIA18.html | 28 +++---- techniques/aria/ARIA19.html | 4 +- techniques/aria/ARIA2.html | 18 ++-- techniques/aria/ARIA20.html | 12 +-- techniques/aria/ARIA21.html | 22 ++--- techniques/aria/ARIA22.html | 8 +- techniques/aria/ARIA23.html | 6 +- techniques/aria/ARIA24.html | 4 +- techniques/aria/ARIA4.html | 6 +- techniques/aria/ARIA5.html | 6 +- techniques/aria/ARIA6.html | 10 +-- techniques/aria/ARIA7.html | 16 ++-- techniques/aria/ARIA8.html | 8 +- techniques/aria/ARIA9.html | 26 +++--- techniques/client-side-script/SCR14.html | 2 +- techniques/client-side-script/SCR16.html | 2 +- techniques/client-side-script/SCR18.html | 4 +- techniques/client-side-script/SCR19.html | 6 +- techniques/client-side-script/SCR2.html | 6 +- techniques/client-side-script/SCR20.html | 22 ++--- techniques/client-side-script/SCR21.html | 8 +- techniques/client-side-script/SCR24.html | 4 +- techniques/client-side-script/SCR26.html | 8 +- techniques/client-side-script/SCR27.html | 4 +- techniques/client-side-script/SCR29.html | 10 +-- techniques/client-side-script/SCR32.html | 2 +- techniques/client-side-script/SCR34.html | 10 +-- techniques/client-side-script/SCR35.html | 34 ++++---- techniques/client-side-script/SCR37.html | 12 +-- techniques/client-side-script/SCR38.html | 2 +- techniques/client-side-script/SCR40.html | 2 +- techniques/css/C12.html | 6 +- techniques/css/C13.html | 8 +- techniques/css/C14.html | 8 +- techniques/css/C17.html | 2 +- techniques/css/C18.html | 6 +- techniques/css/C20.html | 8 +- techniques/css/C21.html | 2 +- techniques/css/C22.html | 50 +++++------ techniques/css/C27.html | 2 +- techniques/css/C28.html | 22 ++--- techniques/css/C33.html | 4 +- techniques/css/C34.html | 8 +- techniques/css/C35.html | 4 +- techniques/css/C36.html | 2 +- techniques/css/C37.html | 10 +-- techniques/css/C38.html | 6 +- techniques/css/C39.html | 2 +- techniques/css/C40.html | 8 +- techniques/css/C41.html | 2 +- techniques/css/C42.html | 8 +- techniques/css/C43.html | 12 +-- techniques/css/C45.html | 18 ++-- techniques/css/C6.html | 2 +- techniques/css/C7.html | 2 +- techniques/css/C8.html | 4 +- techniques/css/C9.html | 10 +-- techniques/failures/F101.html | 6 +- techniques/failures/F103.html | 10 +-- techniques/failures/F104.html | 2 +- techniques/failures/F107.html | 14 ++-- techniques/failures/F109.html | 2 +- techniques/failures/F2.html | 4 +- techniques/failures/F38.html | 12 +-- techniques/failures/F39.html | 2 +- techniques/failures/F40.html | 6 +- techniques/failures/F41.html | 10 +-- techniques/failures/F42.html | 24 +++--- techniques/failures/F43.html | 4 +- techniques/failures/F44.html | 2 +- techniques/failures/F46.html | 4 +- techniques/failures/F49.html | 2 +- techniques/failures/F59.html | 6 +- techniques/failures/F63.html | 4 +- techniques/failures/F65.html | 14 ++-- techniques/failures/F68.html | 38 ++++----- techniques/failures/F77.html | 14 ++-- techniques/failures/F87.html | 6 +- techniques/failures/F88.html | 2 +- techniques/failures/F89.html | 6 +- techniques/failures/F90.html | 4 +- techniques/failures/F91.html | 14 ++-- techniques/failures/F92.html | 8 +- techniques/failures/F93.html | 16 ++-- techniques/failures/F94.html | 4 +- techniques/failures/F99.html | 4 +- techniques/flash/FLASH1.html | 6 +- techniques/flash/FLASH11.html | 2 +- techniques/flash/FLASH12.html | 4 +- techniques/flash/FLASH2.html | 6 +- techniques/flash/FLASH22.html | 6 +- techniques/flash/FLASH25.html | 26 +++--- techniques/flash/FLASH27.html | 2 +- techniques/flash/FLASH28.html | 4 +- techniques/flash/FLASH29.html | 6 +- techniques/flash/FLASH3.html | 4 +- techniques/flash/FLASH31.html | 6 +- techniques/flash/FLASH32.html | 10 +-- techniques/flash/FLASH33.html | 4 +- techniques/flash/FLASH34.html | 12 +-- techniques/flash/FLASH7.html | 2 +- techniques/flash/FLASH8.html | 6 +- techniques/general/G115.html | 14 ++-- techniques/general/G134.html | 4 +- techniques/general/G141.html | 4 +- techniques/general/G178.html | 2 +- techniques/general/G208.html | 8 +- techniques/general/G211.html | 16 ++-- techniques/general/G65.html | 8 +- techniques/general/G83.html | 2 +- techniques/general/G91.html | 2 +- techniques/html/H101.html | 22 ++--- techniques/html/H102.html | 38 ++++----- techniques/html/H2.html | 14 ++-- techniques/html/H24.html | 20 ++--- techniques/html/H25.html | 10 +-- techniques/html/H28.html | 16 ++-- techniques/html/H30.html | 20 ++--- techniques/html/H32.html | 6 +- techniques/html/H33.html | 6 +- techniques/html/H34.html | 4 +- techniques/html/H35.html | 10 +-- techniques/html/H36.html | 12 +-- techniques/html/H37.html | 14 ++-- techniques/html/H39.html | 16 ++-- techniques/html/H4.html | 22 ++--- techniques/html/H40.html | 14 ++-- techniques/html/H42.html | 10 +-- techniques/html/H43.html | 22 ++--- techniques/html/H44.html | 82 +++++++++---------- techniques/html/H45.html | 8 +- techniques/html/H46.html | 20 ++--- techniques/html/H48.html | 14 ++-- techniques/html/H49.html | 26 +++--- techniques/html/H51.html | 18 ++-- techniques/html/H53.html | 14 ++-- techniques/html/H54.html | 10 +-- techniques/html/H56.html | 10 +-- techniques/html/H57.html | 14 ++-- techniques/html/H58.html | 16 ++-- techniques/html/H59.html | 26 +++--- techniques/html/H60.html | 16 ++-- techniques/html/H62.html | 18 ++-- techniques/html/H63.html | 20 ++--- techniques/html/H64.html | 18 ++-- techniques/html/H65.html | 18 ++-- techniques/html/H67.html | 14 ++-- techniques/html/H69.html | 8 +- techniques/html/H70.html | 2 +- techniques/html/H71.html | 26 +++--- techniques/html/H73.html | 48 +++++------ techniques/html/H74.html | 4 +- techniques/html/H76.html | 14 ++-- techniques/html/H81.html | 10 +-- techniques/html/H83.html | 14 ++-- techniques/html/H84.html | 16 ++-- techniques/html/H85.html | 20 ++--- techniques/html/H86.html | 6 +- techniques/html/H89.html | 12 +-- techniques/html/H90.html | 16 ++-- techniques/html/H91.html | 36 ++++---- techniques/html/H93.html | 12 +-- techniques/html/H94.html | 2 +- techniques/html/H95.html | 16 ++-- techniques/html/H96.html | 16 ++-- techniques/html/H97.html | 18 ++-- techniques/html/H98.html | 28 +++---- techniques/html/H99.html | 10 +-- techniques/server-side-script/SVR1.html | 16 ++-- techniques/server-side-script/SVR2.html | 6 +- techniques/server-side-script/SVR5.html | 6 +- techniques/silverlight/SL1.html | 6 +- techniques/silverlight/SL10.html | 4 +- techniques/silverlight/SL11.html | 2 +- techniques/silverlight/SL12.html | 14 ++-- techniques/silverlight/SL13.html | 6 +- techniques/silverlight/SL14.html | 4 +- techniques/silverlight/SL15.html | 12 +-- techniques/silverlight/SL16.html | 24 +++--- techniques/silverlight/SL17.html | 4 +- techniques/silverlight/SL18.html | 22 ++--- techniques/silverlight/SL19.html | 30 +++---- techniques/silverlight/SL2.html | 4 +- techniques/silverlight/SL20.html | 34 ++++---- techniques/silverlight/SL21.html | 6 +- techniques/silverlight/SL22.html | 2 +- techniques/silverlight/SL23.html | 12 +-- techniques/silverlight/SL24.html | 18 ++-- techniques/silverlight/SL25.html | 10 +-- techniques/silverlight/SL26.html | 22 ++--- techniques/silverlight/SL27.html | 64 +++++++-------- techniques/silverlight/SL28.html | 40 ++++----- techniques/silverlight/SL29.html | 24 +++--- techniques/silverlight/SL3.html | 46 +++++------ techniques/silverlight/SL30.html | 24 +++--- techniques/silverlight/SL31.html | 34 ++++---- techniques/silverlight/SL32.html | 54 ++++++------ techniques/silverlight/SL33.html | 8 +- techniques/silverlight/SL34.html | 32 ++++---- techniques/silverlight/SL35.html | 32 ++++---- techniques/silverlight/SL4.html | 8 +- techniques/silverlight/SL5.html | 26 +++--- techniques/silverlight/SL6.html | 8 +- techniques/silverlight/SL7.html | 12 +-- techniques/silverlight/SL8.html | 44 +++++----- techniques/silverlight/SL9.html | 26 +++--- techniques/smil/SM1.html | 4 +- techniques/smil/SM11.html | 2 +- techniques/smil/SM12.html | 2 +- techniques/smil/SM14.html | 4 +- techniques/smil/SM7.html | 2 +- understanding/20/focus-order.html | 6 +- understanding/20/language-of-parts.html | 8 +- .../aria-alert-identify-errors/index.html | 2 +- .../index.html | 2 +- working-examples/css-focus-visible/index.html | 4 +- .../css-pointer-spacing/index.html | 6 +- .../css-reduced-motion-query/index.html | 2 +- working-examples/css-reflow-url/index.html | 2 +- .../script-action-buttons/index.html | 2 +- .../script-action-links/index.html | 2 +- working-examples/semantic-text/index.html | 10 +-- 231 files changed, 1429 insertions(+), 1429 deletions(-) diff --git a/techniques/aria/ARIA1.html b/techniques/aria/ARIA1.html index 9617000eae..830b8110de 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,18 +16,18 @@

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.

+

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">
@@ -36,7 +36,7 @@ 
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>
   <span id="fontDesc">Select the font faces and sizes to be used on this page</span>
@@ -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..2888725b07 100644
--- a/techniques/aria/ARIA10.html
+++ b/techniques/aria/ARIA10.html
@@ -1,12 +1,12 @@
 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.
    
+            
    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="">
@@ -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..2aac643fad 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.
    
@@ -56,7 +56,7 @@ 
    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">
   <h2 id="site-nav-heading">Site</h2>
@@ -97,7 +97,7 @@ 
    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:
    
+      
    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">
@@ -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..16e927b98c 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,15 +18,15 @@ 
    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.
    
+			
    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....
    
@@ -36,7 +36,7 @@ 
    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.
    
+            
    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>
@@ -44,7 +44,7 @@ 
    Additional heading levels
    
 <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..72a99aa245 100644
--- a/techniques/aria/ARIA13.html
+++ b/techniques/aria/ARIA13.html
@@ -1,18 +1,18 @@
 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.
    
+            
    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>
   ...
diff --git a/techniques/aria/ARIA14.html b/techniques/aria/ARIA14.html
index 4bc4484186..68e03b1099 100644
--- a/techniques/aria/ARIA14.html
+++ b/techniques/aria/ARIA14.html
@@ -1,17 +1,17 @@
 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.
    
+            
    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>				
@@ -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..e940da3d76 100644
--- a/techniques/aria/ARIA15.html
+++ b/techniques/aria/ARIA15.html
@@ -3,15 +3,15 @@
    
    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">
 <p id="p1">This painting dates back to 1889 and is oil on canvas. It was created by 
@@ -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 8164affc8e..cd70190248 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 behavior 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 behavior is required then use label or implement this functionality using scripting.
 
        • 
       
      
 
@@ -20,7 +20,7 @@
       
      
          
      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="searchbtn" id="searchbtn" type="submit" value="Search">
      
@@ -29,7 +29,7 @@ 
      Labelling a simple text field
      
       
      
          
      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.
      
+            
      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>
      
          
@@ -37,7 +37,7 @@ 
      Labelling a slider
      
       
      
          
      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>
 <select name="amt" id="f3" aria-labelledby="l1 f3 l2">
@@ -45,16 +45,16 @@ 
      A label from multiple sources
      
   <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..9df42e4977 100644
--- a/techniques/aria/ARIA17.html
+++ b/techniques/aria/ARIA17.html
@@ -8,16 +8,16 @@ 
        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".
        
+         
        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>
@@ -31,7 +31,7 @@ 
        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.
        
+            
        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>
@@ -64,7 +64,7 @@ 
        Identifying radio groups
        
             
        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..1c4779a936 100644
--- a/techniques/aria/ARIA18.html
+++ b/techniques/aria/ARIA18.html
@@ -1,22 +1,22 @@
 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.
        
+            
        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.
@@ -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 0af24250d9..0a0ee0147d 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
        
@@ -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 with role=alert or aria-live=assertive attribute is present in the DOM at page load.
          2. 
+            
        2. Determine that an empty error container with 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..19430cc625 100644
--- a/techniques/aria/ARIA2.html
+++ b/techniques/aria/ARIA2.html
@@ -19,16 +19,16 @@ 
        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>
   <p>Note: * denotes a required field</p>
@@ -48,7 +48,7 @@ 
        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>
   <div>
@@ -78,9 +78,9 @@ 
        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.
        
+        
        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">
@@ -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..f3a4cf5e10 100644
--- a/techniques/aria/ARIA20.html
+++ b/techniques/aria/ARIA20.html
@@ -1,13 +1,13 @@
 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.
        
+            
        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>
@@ -31,7 +31,7 @@ 
        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.
        
+            
        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"
@@ -71,7 +71,7 @@ 
        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"> 
@@ -80,7 +80,7 @@ 
        Identifying a portlet with a generic region
        
       
        
    
        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..0a1d95a257 100644
--- a/techniques/aria/ARIA21.html
+++ b/techniques/aria/ARIA21.html
@@ -1,20 +1,20 @@
-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>
 ...
@@ -64,7 +64,7 @@ 
          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>
@@ -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..6c13da4333 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##
          
@@ -31,7 +31,7 @@ 
          Including a search results message
          
 			
          
 			
          
 				
          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".
          
+				
          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">
   <img src="shopping-cart.png" alt="Shopping Cart">
   <span id="cart">0</span> items
@@ -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..381d072f1f 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##
          
@@ -36,7 +36,7 @@ 
          Updating the contents of a chat 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
        
@@ -47,7 +47,7 @@ 
        Updating the log of a server
        
     <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..bc322a2cb7 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,7 +22,7 @@ 
    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
    
 
diff --git a/techniques/aria/ARIA4.html b/techniques/aria/ARIA4.html
index dbce07bd40..518a73757e 100644
--- a/techniques/aria/ARIA4.html
+++ b/techniques/aria/ARIA4.html
@@ -1,12 +1,12 @@
 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:
    
+            
    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" 
@@ -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..9a6d182271 100644
--- a/techniques/aria/ARIA5.html
+++ b/techniques/aria/ARIA5.html
@@ -7,7 +7,7 @@
    
      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"
   role="button"
@@ -16,7 +16,7 @@ 
      A toggle button
      
   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*.
 *
@@ -33,7 +33,7 @@ 
      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 class="color-slider red"
diff --git a/techniques/aria/ARIA6.html b/techniques/aria/ARIA6.html
index 5d5204c12f..f65d5e9332 100644
--- a/techniques/aria/ARIA6.html
+++ b/techniques/aria/ARIA6.html
@@ -1,13 +1,13 @@
 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.
      
+            
      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>
@@ -23,7 +23,7 @@ 
      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.
      
+            
      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>
      
@@ -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..506a1c7f02 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
      
       
      
@@ -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..cdce6379c1 100644
--- a/techniques/aria/ARIA8.html
+++ b/techniques/aria/ARIA8.html
@@ -1,8 +1,8 @@
 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.
      
@@ -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..09d453480c 100644
--- a/techniques/aria/ARIA9.html
+++ b/techniques/aria/ARIA9.html
@@ -1,21 +1,21 @@
 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
      
+            
      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>
@@ -30,7 +30,7 @@ 
      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.
      
+            
      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>
@@ -54,7 +54,7 @@ 
      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.
      
+            
      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>
@@ -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 dfae38ca1d..e0654bf2ad 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
      
diff --git a/techniques/client-side-script/SCR16.html b/techniques/client-side-script/SCR16.html
index d91ba19fe5..8d77fb9098 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
      
diff --git a/techniques/client-side-script/SCR18.html b/techniques/client-side-script/SCR18.html
index f2a75173d2..52387f0aa5 100644
--- a/techniques/client-side-script/SCR18.html
+++ b/techniques/client-side-script/SCR18.html
@@ -17,10 +17,10 @@ 
      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() {
diff --git a/techniques/client-side-script/SCR19.html b/techniques/client-side-script/SCR19.html
index 29908885ec..142fd2bde4 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,8 +10,8 @@
          
      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.
        • 
             
      
          
diff --git a/techniques/client-side-script/SCR2.html b/techniques/client-side-script/SCR2.html
index 9981e509a0..16862eec85 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.
      
       
      
diff --git a/techniques/client-side-script/SCR20.html b/techniques/client-side-script/SCR20.html
index 3bfe6e89b3..ae736d4849 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
             
          
       
diff --git a/techniques/client-side-script/SCR21.html b/techniques/client-side-script/SCR21.html
index 6015611716..b6324c34d6 100644
--- a/techniques/client-side-script/SCR21.html
+++ b/techniques/client-side-script/SCR21.html
@@ -6,16 +6,16 @@
 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;
 function initialise() {
@@ -24,7 +24,7 @@
   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) {
   // Test whether fields are valid
diff --git a/techniques/client-side-script/SCR24.html b/techniques/client-side-script/SCR24.html
index 84d9e2a7e3..8f9e490ee5 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,7 +25,7 @@ 
      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>
 ...
diff --git a/techniques/client-side-script/SCR26.html b/techniques/client-side-script/SCR26.html
index 8eb593e3c1..94372f5da8 100644
--- a/techniques/client-side-script/SCR26.html
+++ b/techniques/client-side-script/SCR26.html
@@ -2,18 +2,18 @@
       
      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)">
   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){
   var el = document.getElementById(id);
@@ -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..71183ebfba 100644
--- a/techniques/client-side-script/SCR27.html
+++ b/techniques/client-side-script/SCR27.html
@@ -24,7 +24,7 @@ 
      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">
     <li id="black">
@@ -48,7 +48,7 @@ 
      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){
   
diff --git a/techniques/client-side-script/SCR29.html b/techniques/client-side-script/SCR29.html
index a0f09d8266..edcce18e58 100644
--- a/techniques/client-side-script/SCR29.html
+++ b/techniques/client-side-script/SCR29.html
@@ -17,18 +17,18 @@ 
      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>
 // this is the function to perform the action. This simple example toggles a message.
diff --git a/techniques/client-side-script/SCR32.html b/techniques/client-side-script/SCR32.html
index 36ec3cd34b..056b766a4d 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. 
      
    
      
 	 
      
diff --git a/techniques/client-side-script/SCR34.html b/techniques/client-side-script/SCR34.html
index 8db4257582..9494258e86 100644
--- a/techniques/client-side-script/SCR34.html
+++ b/techniques/client-side-script/SCR34.html
@@ -20,12 +20,12 @@ 
      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
      
diff --git a/techniques/client-side-script/SCR35.html b/techniques/client-side-script/SCR35.html
index 41426741dc..373072a009 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,16 +17,16 @@ 
      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 "#" 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> 
   function doStuff() {
@@ -38,7 +38,7 @@ 
      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> 
   function doStuff() {  
@@ -67,8 +67,8 @@ 
      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>
 function doStuff() {
@@ -79,13 +79,13 @@ 
      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">
      
       
      
       
      
-				
      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();">
@@ -95,28 +95,28 @@ 
      Button that runs a script, implemented with butt
       
      
    
      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/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..1cc7cd4595 100644
--- a/techniques/client-side-script/SCR38.html
+++ b/techniques/client-side-script/SCR38.html
@@ -31,7 +31,7 @@ 
      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) {
diff --git a/techniques/client-side-script/SCR40.html b/techniques/client-side-script/SCR40.html
index 0bab651e8b..3462b19bf8 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.
      
diff --git a/techniques/css/C12.html b/techniques/css/C12.html
index 8f35f8f5a6..dc6bf8241f 100644
--- a/techniques/css/C12.html
+++ b/techniques/css/C12.html
@@ -17,13 +17,13 @@ 
      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>
   strong {font-size: 120%}
@@ -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 eb3fb5f272..73d4972a31 100644
--- a/techniques/css/C13.html
+++ b/techniques/css/C13.html
@@ -17,13 +17,13 @@ 
      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>
   strong {font-size: larger}
@@ -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..a770460541 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,12 +17,12 @@ 
      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>
   strong {font-size: 1.6em}
@@ -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/C17.html b/techniques/css/C17.html
index 9f28700ce6..4292fc7839 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
      
diff --git a/techniques/css/C18.html b/techniques/css/C18.html
index 77f65ff949..b4440935f5 100644
--- a/techniques/css/C18.html
+++ b/techniques/css/C18.html
@@ -17,7 +17,7 @@ 
      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 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.
      
 		
      
 		
      
 			
      Examples
      
@@ -53,10 +53,10 @@ 
      Tests
      
 					
      Resources
      
 					
 				
      
diff --git a/techniques/css/C20.html b/techniques/css/C20.html
index 18b52cc8cd..a6624729f3 100644
--- a/techniques/css/C20.html
+++ b/techniques/css/C20.html
@@ -22,19 +22,19 @@ 
      Description
      
 	 
      
 		
      Examples
      
 		
      
-			
      In this example the div width is set in ems in the stylesheet.
      
+			
      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
      
+
      And the text block would be placed inside the div in the 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
      
+        
      And the text block would be placed inside the div in the content
      
          
 
      <div id="main-content"> 
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
diff --git a/techniques/css/C21.html b/techniques/css/C21.html
index ac2f3ab8e4..f2bb1afe70 100644
--- a/techniques/css/C21.html
+++ b/techniques/css/C21.html
@@ -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..5347ffea1e 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.
          • 
       
        
 		
      
 		
      
@@ -141,8 +141,8 @@ 
      The CSS component
      
           
      
       
      
       
      
-				
      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
      
          
@@ -156,7 +156,7 @@ 
      The CSS component
      
           
      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
      
          
@@ -178,8 +178,8 @@ 
      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>
@@ -199,7 +199,7 @@ 
      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
      
@@ -213,9 +213,9 @@ 
      The CSS component
      
         
       
       
      
       
      
-         
      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
      
 
@@ -249,9 +249,9 @@ 
      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
      
@@ -266,9 +266,9 @@ 
      The CSS component
      
           
      
       
      
       
      
-         
      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
      
diff --git a/techniques/css/C27.html b/techniques/css/C27.html
index 8760a53a58..f4f005ea35 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..068b74ca62 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,31 +28,31 @@ 
      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_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 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). 
      
 
 			
      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 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. 
      
 
 			
      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; }
      
 		
      
@@ -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/C33.html b/techniques/css/C33.html
index f01d536ed9..fe439ad608 100644
--- a/techniques/css/C33.html
+++ b/techniques/css/C33.html
@@ -30,8 +30,8 @@ 
      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 {
   overflow-wrap: break-word;
diff --git a/techniques/css/C34.html b/techniques/css/C34.html
index 5b8127580c..7888e75f6e 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,7 +40,7 @@ 
      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">
diff --git a/techniques/css/C35.html b/techniques/css/C35.html
index 5d733d17e2..12ec7659b7 100644
--- a/techniques/css/C35.html
+++ b/techniques/css/C35.html
@@ -24,12 +24,12 @@ 
      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.
      
diff --git a/techniques/css/C36.html b/techniques/css/C36.html
index f8371e1ac9..e43bbf1277 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
      
diff --git a/techniques/css/C37.html b/techniques/css/C37.html
index 677414f4cb..06263240e1 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,7 +35,7 @@ 
      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>
 .img-responsive {
diff --git a/techniques/css/C38.html b/techniques/css/C38.html
index 2ec947ca5e..03fce677e4 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,7 +38,7 @@ 
      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>
 
diff --git a/techniques/css/C39.html b/techniques/css/C39.html
index a37a6117e6..e47ad037f6 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.
      
diff --git a/techniques/css/C40.html b/techniques/css/C40.html
index 674fb0b3ec..9fdc70ce71 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
      
@@ -79,8 +79,8 @@ 
      Related Techniques
      
 		
      
 			
      Resources
      
 			
 		
      
 	
diff --git a/techniques/css/C41.html b/techniques/css/C41.html
index 1a19e6c906..f6fe2b6e2e 100644
--- a/techniques/css/C41.html
+++ b/techniques/css/C41.html
@@ -33,7 +33,7 @@ 
      HTML
      
 				
      
 				
      
 					
      CSS
                      
-					
      CSS to provide the indicator. It narrows the scope to buttons within the main element.
      
+					
      CSS to provide the indicator. It narrows the scope to buttons within the main element.
      
 
      button { 
   background-color: #236AB8; /* medium-dark blue */
   color: white;
diff --git a/techniques/css/C42.html b/techniques/css/C42.html
index 66beab040a..2b39c3a691 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.
@@ -56,8 +56,8 @@ 
      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
      
diff --git a/techniques/css/C43.html b/techniques/css/C43.html
index 4ef4dd0e6c..3c72c24857 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,18 +18,18 @@ 
      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.
      
+				
      Working example: Using CSS scroll-padding to un-obscure content.
      
 
      <!doctype html>
 <html lang="en">
 <head>
@@ -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..c3b0c716c7 100644
--- a/techniques/css/C6.html
+++ b/techniques/css/C6.html
@@ -22,7 +22,7 @@ 
      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">
diff --git a/techniques/css/C7.html b/techniques/css/C7.html
index 16f3879733..0d822158bf 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.
      
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..e1bb9079aa 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.
      
@@ -75,7 +75,7 @@ 
      Related Techniques
      
 	
      
 		
      Resources
      
 		
 	
      
 
diff --git a/techniques/failures/F101.html b/techniques/failures/F101.html
index c66c32a6c6..7f7f2da742 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,7 +37,7 @@ 
    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.
    
+				
    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>
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..c3ab6ae006 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
diff --git a/techniques/failures/F107.html b/techniques/failures/F107.html
index 1e48148a7a..f6ce093c2a 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,7 +28,7 @@ 
      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>
 <label for="uname">Name:</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..af17aae9d7 100644
--- a/techniques/failures/F2.html
+++ b/techniques/failures/F2.html
@@ -4,7 +4,7 @@
       
    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.
    
          
@@ -21,7 +21,7 @@ 
    Using CSS to style the p element to look
 
    
          
             
    
-               
    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.
    
             
    
          
       
    
diff --git a/techniques/failures/F38.html b/techniques/failures/F38.html
index ac63a8a4a1..f217e6dee1 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..25bf156032 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
diff --git a/techniques/failures/F40.html b/techniques/failures/F40.html
index 90cd0e3fe4..9b174febff 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 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
@@ -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..ce9fd7f250 100644
--- a/techniques/failures/F41.html
+++ b/techniques/failures/F41.html
@@ -3,7 +3,7 @@
    
    
    
    
       
    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 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.
    
    
    
    
    
       
    Examples
    
@@ -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 one or greater than 72,000.
      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..0d0ccbc22e 100644
--- a/techniques/failures/F42.html
+++ b/techniques/failures/F42.html
@@ -7,23 +7,23 @@
                         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>
    
       
    
       
    
-         
    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.
    
          
@@ -31,10 +31,10 @@ 
    Scripting an img element
    • -

    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 @@ -62,12 +62,12 @@

    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;
@@ -97,7 +97,7 @@ 
    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>
    diff --git a/techniques/failures/F43.html b/techniques/failures/F43.html index b382c78ab8..d956578c9e 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

    @@ -46,7 +46,7 @@

    Using heading elements for presentational effect

    <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 diff --git a/techniques/failures/F44.html b/techniques/failures/F44.html index b28cb68e32..8e40077650 100644 --- a/techniques/failures/F44.html +++ b/techniques/failures/F44.html @@ -63,7 +63,7 @@

    diff --git a/techniques/failures/F46.html b/techniques/failures/F46.html index 09fcfd63c1..e541bac69d 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 diff --git a/techniques/failures/F49.html b/techniques/failures/F49.html index 364869b9ca..b3d9ef74d4 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 diff --git a/techniques/failures/F59.html b/techniques/failures/F59.html index 2b58b4a030..e5a06b788f 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 @@ -29,7 +29,7 @@ <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.

    +

    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) { 
diff --git a/techniques/failures/F63.html b/techniques/failures/F63.html
index 9086bbac28..9d324512df 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.
    
@@ -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..d8d1c576e7 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

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

    Missing text alternative

    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.

    Expected Results

    diff --git a/techniques/failures/F68.html b/techniques/failures/F68.html index df70356954..c59ffef5f8 100644 --- a/techniques/failures/F68.html +++ b/techniques/failures/F68.html @@ -3,33 +3,33 @@

    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.

    +

    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">
@@ -45,7 +45,7 @@ 
    
       
    
          
    
          
-            
    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.
    
+            
    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>
@@ -66,17 +66,17 @@

    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.
    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

    Expected Results

    diff --git a/techniques/failures/F87.html b/techniques/failures/F87.html index 7d1a1cb1f5..bd6ffee5c7 100644 --- a/techniques/failures/F87.html +++ b/techniques/failures/F87.html @@ -11,7 +11,7 @@

    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: " }
@@ -30,7 +30,7 @@
    -

    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; }
@@ -43,7 +43,7 @@

    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.
    diff --git a/techniques/failures/F88.html b/techniques/failures/F88.html index 9056649111..0723928c06 100644 --- a/techniques/failures/F88.html +++ b/techniques/failures/F88.html @@ -5,7 +5,7 @@

    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">
  Peter Piper picked a peck of pickled peppers
diff --git a/techniques/failures/F89.html b/techniques/failures/F89.html
index 38eee87f45..0e3cd0371c 100644
--- a/techniques/failures/F89.html
+++ b/techniques/failures/F89.html
@@ -7,7 +7,7 @@
       
    
          
    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">
   <img src="football.gif" alt="">
@@ -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..f20cb4dda1 100644
--- a/techniques/failures/F90.html
+++ b/techniques/failures/F90.html
@@ -2,14 +2,14 @@
       
    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>
diff --git a/techniques/failures/F91.html b/techniques/failures/F91.html
index 2ef437b939..0e90aa2d81 100644
--- a/techniques/failures/F91.html
+++ b/techniques/failures/F91.html
@@ -1,12 +1,12 @@
 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>
@@ -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..19394a5184 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 the presentation role for content which should convey semantic information may prevent the user from understanding that content.
 
    
    
    Examples
    
       
    
@@ -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..c8f26a4a2d 100644
--- a/techniques/failures/F93.html
+++ b/techniques/failures/F93.html
@@ -1,17 +1,17 @@
 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>
 
    
@@ -19,10 +19,10 @@ 
    An auto-playing audio track
    
    
    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..630119e0f0 100644
--- a/techniques/failures/F94.html
+++ b/techniques/failures/F94.html
@@ -33,7 +33,7 @@ 
    Failure example 1
    
 }    
 
 <p class="callout">Text that scales by viewport units</p>
    
-				
    Example page with an example of text sized in vh units.
    
+				
    Example page with an example of text sized in vh units.
    
 			
    
 		
    
 		
    
@@ -71,7 +71,7 @@ 
    Related Techniques
    
 		
    
 				
    Related Resources
    
 				
 			
    
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..c9e057d884 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)
    
@@ -38,7 +38,7 @@ 
    Applying textual alternatives programmatically in ActionScript 2.0
    
       
    
          
    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.accessibilityProperties = new AccessibilityProperties();
diff --git a/techniques/flash/FLASH11.html b/techniques/flash/FLASH11.html
index d625fba567..c8b8edcb32 100644
--- a/techniques/flash/FLASH11.html
+++ b/techniques/flash/FLASH11.html
@@ -11,7 +11,7 @@ 
    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. noninstitutionalized 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
diff --git a/techniques/flash/FLASH12.html b/techniques/flash/FLASH12.html
index 0a7ce7166d..2999c10ef8 100644
--- a/techniques/flash/FLASH12.html
+++ b/techniques/flash/FLASH12.html
@@ -10,9 +10,9 @@
       
    
          
    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
    
          
diff --git a/techniques/flash/FLASH2.html b/techniques/flash/FLASH2.html
index 8975a18bd6..5a959943aa 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,7 +31,7 @@ 
    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
@@ -46,7 +46,7 @@ 
    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
diff --git a/techniques/flash/FLASH22.html b/techniques/flash/FLASH22.html
index 23b896cc08..f64469d717 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.
    
@@ -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/FLASH25.html b/techniques/flash/FLASH25.html
index 8c22f47b52..d892cd43ec 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
@@ -137,9 +137,9 @@ 
    Setting the accessible name through ActionScript 3.0
    
             
  •  The selected component's label text is specified in the Accessibility
     					Panel's "name" field. 
    • 
             
  •  In ActionScript 2.0: Scripting is used to dynamically set the
-    					component's _accProps.name property 
    • 
+    					component's _accProps.name property 
             
  •  In ActionScript 3.0: Scripting is used to dynamically set the
-    					component's accessibilityProperties.name property 
    • 
+    					component's accessibilityProperties.name property 
          
       
    
       
    Expected Results
    
diff --git a/techniques/flash/FLASH27.html b/techniques/flash/FLASH27.html
index 3824961882..360da76e88 100644
--- a/techniques/flash/FLASH27.html
+++ b/techniques/flash/FLASH27.html
@@ -30,7 +30,7 @@ 
    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.accessibility.ButtonAccImpl;
diff --git a/techniques/flash/FLASH28.html b/techniques/flash/FLASH28.html
index 9018eb6889..597a0da4a7 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,7 +52,7 @@ 
    Providing a text alternative for ASCII art using ActionScript
    
                
  •  Place the ASCII characters in a MovieClip instance 
    • 
                
  •  Provide an instance name for the MovieClip instance (e.g. myASCII) 
    • 
                
  •  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. 
    • 
             
          
diff --git a/techniques/flash/FLASH29.html b/techniques/flash/FLASH29.html
index 0479b5c001..ee0cafcc63 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
@@ -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 a2e97cc15a..01b7a4d2d1 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,7 +22,7 @@ 
    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
 _root.decorative_mc._accProps = new Object();
diff --git a/techniques/flash/FLASH31.html b/techniques/flash/FLASH31.html
index ca26139950..eee5a242ff 100644
--- a/techniques/flash/FLASH31.html
+++ b/techniques/flash/FLASH31.html
@@ -15,7 +15,7 @@
     				the grid's caption text. 
          
  •  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. 
    • 
       
    
    Examples
    
@@ -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..c2934525f7 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,7 +28,7 @@ 
    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" 
   "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
diff --git a/techniques/flash/FLASH34.html b/techniques/flash/FLASH34.html
index 1a93778f23..020f951cfc 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,15 +26,15 @@
     				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). 
    
diff --git a/techniques/flash/FLASH7.html b/techniques/flash/FLASH7.html
index 8690075ea2..6e1526edb4 100644
--- a/techniques/flash/FLASH7.html
+++ b/techniques/flash/FLASH7.html
@@ -12,7 +12,7 @@
       
    
          
    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;
 ButtonAccImpl.enableAccessibility();
diff --git a/techniques/flash/FLASH8.html b/techniques/flash/FLASH8.html
index b0c6488e05..36ce431d1f 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,7 +38,7 @@ 
    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 {
@@ -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/general/G115.html b/techniques/general/G115.html
index d8844fca48..341f15ba2a 100644
--- a/techniques/general/G115.html
+++ b/techniques/general/G115.html
@@ -18,20 +18,20 @@ 
    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.
       
+			
    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.
    
+				
    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>
@@ -44,14 +44,14 @@ 
    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.
     
+				
    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, 
    <q>This is not ok, it is <strong>excellent</strong>!</q>
diff --git a/techniques/general/G134.html b/techniques/general/G134.html
index d5f3049553..84ebeb9923 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,7 +37,7 @@ 
    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).
    
+      
    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" /> 
diff --git a/techniques/general/G141.html b/techniques/general/G141.html
index d90d6457d8..a28f60288a 100644
--- a/techniques/general/G141.html
+++ b/techniques/general/G141.html
@@ -18,7 +18,7 @@ 
    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
    
@@ -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/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/G208.html b/techniques/general/G208.html
index 635acd7099..5834e04118 100644
--- a/techniques/general/G208.html
+++ b/techniques/general/G208.html
@@ -96,10 +96,10 @@ 
      Expected Results
      
 			
diff --git a/techniques/general/G211.html b/techniques/general/G211.html
index 49526c51c2..fd25dacf48 100644
--- a/techniques/general/G211.html
+++ b/techniques/general/G211.html
@@ -32,7 +32,7 @@ 
      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":
      		
+			
      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
      
@@ -41,8 +41,8 @@ 
      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.
      	
+		
      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>
      
       
      
@@ -54,7 +54,7 @@ 
      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:
      	
+		
      The text inside a button element becomes both its visible label and its accessible name:
      	
 		
      <button>Send</button>
      
     
      
   		
      Non-working sample of button
      
@@ -69,7 +69,7 @@ 
      Simple Radio Button Group
      
 					Call me when balance exceeds $10,000, Yes No
 					
      Figure 1 "Call me when balance exceeds $10,000 radio group, with Yes and No choices
      
 				
-				
      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.
      
+				
      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 />
@@ -103,7 +103,7 @@ 
      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.
      
@@ -129,7 +129,7 @@ 
      Range of inputs with few labels
      
 					
      Figure 5 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.
      
+				
      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>
@@ -146,7 +146,7 @@ 
      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.
      
 			
      
 				Two text inputs: one with a label of 'Name' with an asterisk, one with a label of 'Birth date' and, in parentheses, YYYY-MM-DD
 				
      Figure 6 The "Name" and "Birth date" labels with additional information (and asterisk and an input formatting instruction, respectively)
      
diff --git a/techniques/general/G65.html b/techniques/general/G65.html
index ec2e644b1a..95fb4d8d86 100644
--- a/techniques/general/G65.html
+++ b/techniques/general/G65.html
@@ -29,8 +29,8 @@ 
      Photographer's portfolio
      
 
 
      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 represents 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 represents the current web page. The markup would be styled using CSS to display the breadcrumb trail horizontally.
      
       
 
      <nav aria-label="Breadcrumbs"> 
   <ul>
@@ -50,7 +50,7 @@ 
      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
      
 
@@ -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/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/G91.html b/techniques/general/G91.html
index fc26701ce4..e1d5450785 100644
--- a/techniques/general/G91.html
+++ b/techniques/general/G91.html
@@ -22,7 +22,7 @@ 
        Description
        
 	
        
 		
        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">Current routes at Boulders Climbing Gym</a>
        
 		
        
 	
        
diff --git a/techniques/html/H101.html b/techniques/html/H101.html
index d5aaf42812..947dc2a85e 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.
        
   
      
@@ -50,7 +50,7 @@ 
      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:
      
+    
      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>
@@ -90,7 +90,7 @@ 
      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:
      
+    
      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">
@@ -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..ed515400a9 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,21 +17,21 @@ 
      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>
@@ -151,8 +151,8 @@ 
      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){
   const d = document.querySelector("dialog");
@@ -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..b606c6117b 100644
--- a/techniques/html/H2.html
+++ b/techniques/html/H2.html
@@ -18,23 +18,23 @@ 
        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">
   <img src="icon.gif" alt="">Products page
 </a>
        
       
        
       
        
-         
        A link contains an icon and text, and the site help refers to the icon. The img has a text alternative which is the name used for the icon in the site help, which describes clicking the home page icon.
        
+         
        A link contains an icon and text, and the site help refers to the icon. The img has a text alternative which is the name used for the icon in the site help, which describes clicking the home page icon.
        
          
 
        <a href="home.html">
   <img src="house.gif" alt="home page icon">Go to the home page
@@ -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..44023155af 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,21 +13,21 @@ 
        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" 
      alt="Areas in the library. Select an area for more information on that area."> 
@@ -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..fe0f038417 100644
--- a/techniques/html/H25.html
+++ b/techniques/html/H25.html
@@ -17,8 +17,8 @@ 
        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
        
@@ -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..f9ce123b0d 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,13 +26,13 @@ 
        Description
        
    
        
       
        Examples
        
       
        
-         
        Using abbr element to expand abbreviations
        
+         
        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
        
+         
        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>
@@ -42,12 +42,12 @@ 
        Using dfn and 
 
       
        
-         
        Using the abbr element to expand an acronym
        
+         
        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
        
+         
         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">
   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">
   <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">
   <img src="topo.gif" alt="">
@@ -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..cdf4be594e 100644
--- a/techniques/html/H32.html
+++ b/techniques/html/H32.html
@@ -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..16801094c6 100644
--- a/techniques/html/H33.html
+++ b/techniques/html/H33.html
@@ -17,7 +17,7 @@ 
        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.
        
     
        
 	  
        
@@ -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..c948e78350 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,12 +17,12 @@ 
          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">
   <label for="look-up">Find books<label>
@@ -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..d16abfc257 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
@@ -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..dee5722d82 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,16 +18,16 @@ 
          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
          
+				
          An appointment calendar with a caption
          
 
          <table>
   <caption>Schedule for the week of March 6</caption>
   ...
@@ -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..5328a3f1a9 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
+            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 zero 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..0852679087 100644
--- a/techniques/html/H40.html
+++ b/techniques/html/H40.html
@@ -17,7 +17,7 @@ 
          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.
          
    
          
    
          
@@ -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..3236f127cf 100644
--- a/techniques/html/H42.html
+++ b/techniques/html/H42.html
@@ -24,7 +24,7 @@ 
          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>
 <p>There are an abundant number of plants that humans eat ...</p>
@@ -50,9 +50,9 @@ 
          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>
@@ -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..c87d44f405 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,8 +17,8 @@ 
              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.
              
       
              
       
              
@@ -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 836dcf2924..8202ee90eb 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 either 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,7 +78,7 @@ 
              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> 
 <input id="firstname" name="firstname" type="text">
              
@@ -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..cf53c51aff 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.
              
          
              
@@ -76,7 +76,7 @@ 
              Contact information using a description list
              
       
              
       
              
          
              Using lists to group links
              
-         
              In this example the links are grouped using the ul and li elements.
              
+         
              In this example the links are grouped using the ul and li elements.
              
          
 
              <h2 id="product-categories">Product Categories</h2>
 <nav aria-labelledby="product-categories">
@@ -117,13 +117,13 @@ 
              Related Techniques
              
       
              Resources
              
          
       
diff --git a/techniques/html/H49.html b/techniques/html/H49.html
index 7b5f563313..e444151ee1 100644
--- a/techniques/html/H49.html
+++ b/techniques/html/H49.html
@@ -31,10 +31,10 @@ 
              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.).
              
          
@@ -42,9 +42,9 @@ 
              Using the em and 
-         
              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> 
    by Helen Keller:</p>
@@ -56,7 +56,7 @@ 
              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.
              
          
@@ -64,15 +64,15 @@ 
              Using the q element to mark up a shorter
    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>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>
 .trial {
@@ -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..562aa6a417 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,7 +36,7 @@ 
              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>
@@ -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..bffd0ac961 100644
--- a/techniques/html/H53.html
+++ b/techniques/html/H53.html
@@ -5,17 +5,17 @@
       
    
    
-		
        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
        
@@ -38,7 +38,7 @@ 
        The image object has content that provides a brief description of the functi
 </object>
        
       
        
       
        
-				
        This example takes advantage of the fact the object elements may be nested to provide for alternative representations of information.
        
+				
        This example takes advantage of the fact the object elements may be nested to provide for alternative representations of information.
        
          
          
        <object classid="java:Press.class" width="500" height="500">
   <object data="pressure.mpeg" type="video/mpeg">
@@ -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..4b9572d2bd 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
@@ -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 a1d878ff55..ee9d7c1901 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..c27f16ae02 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.
            • 
@@ -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..16323ddfcd 100644
--- a/techniques/html/H58.html
+++ b/techniques/html/H58.html
@@ -19,14 +19,14 @@ 
              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">
   <p>
@@ -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..80e6794a80 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,7 +29,7 @@ 
                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.) 
                 
+        
                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>
@@ -41,7 +41,7 @@ 
                Ruby markup providing pronunciation information for an initialism
                
       
                
       
                
          
                Ruby annotation for Japanese
                
-         
                The following is an example in Japanese. For Japanese, the Ruby is used to give the reading of Han characters (Kanji). the Ruby parenthesis element rp is used for user agents that do not support Ruby annotations to indicate that the text in the rt element provides the pronunciation information. The pronunciation information is rendered in parentheses immediately following the base text. (User agents that support Ruby do not show the parentheses.)
                
+         
                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>
   <ruby>
@@ -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..40cf5d889b 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,7 +30,7 @@ 
              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>
   <caption>Contact Information</caption>
@@ -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..954681d73a 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,20 +13,20 @@ 
              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>
 <html lang="en">
@@ -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..129c0d0b86 100644
--- a/techniques/html/H65.html
+++ b/techniques/html/H65.html
@@ -5,24 +5,24 @@
     
 	
 	
-		
              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.
                 
+      
              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">
@@ -45,7 +45,7 @@ 
              Input fields for a phone number
              
       
              
       
              
 				
              A Search Function
              
-				
              A web page contains a text field where the user can enter search terms and a button labeled "Search" for performing the search. The title attribute is used to identify the form control and the button is positioned right after the text field so that it is clear to the user that the text field is where the search term should be entered.
               
+				
              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..009f7d66b0 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,9 +18,9 @@ 
              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.
              
       
              
    
              
    
              
@@ -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. 
          
              
       
              
       
              
@@ -57,10 +57,10 @@ 
              Resources
              
             HTML - requirements for providing text to act as an alternative for images.
          
              • 
          
            • 
-            HTML - the title attribute.
+            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..35b325c65a 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,7 +35,7 @@ 
          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>
  <h2>Search</h2>
@@ -125,10 +125,10 @@ 
          Related Techniques
          
 		
          Resources
           
 		
          Examples
          
       
          
          
diff --git a/techniques/html/H71.html b/techniques/html/H71.html
index fb4725aa89..4ef44c3ca6 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,17 +18,17 @@ 
          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>
   <legend>The play <cite>Hamlet</cite> was written by:</legend>
@@ -56,7 +56,7 @@ 
          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>
   <legend>I am interested in the following (check all that apply):</legend>
@@ -77,7 +77,7 @@ 
          A set of checkboxes
          
 
       
          
          
          Logically related controls
          
-         
          In this example, form fields for residential and postal addresses are distinguished by the value of the legend in each fieldset grouping.
          
+         
          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">
   <fieldset>
@@ -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..d227c19062 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..95a8734410 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,7 +18,7 @@ 
          When to Use
          
       
          
          
          Description
          
          
          The objective of this technique is to enable redirects on the client side without confusing the user. Redirects are preferably implemented on the server side (see Implementing automatic redirects on the server side instead of on the client side), but authors do not always have control over server-side technologies.
          
-         
          In HTML, one can use the meta element with the value of the http-equiv attribute set to refresh and the value of the content attribute set to 0 (meaning zero seconds), followed by the URI that the browser should request. It is important that the time-out is set to zero, to avoid that content is displayed before the new page is loaded. The page containing the redirect code should only contain information related to the redirect.
          
+         
          In HTML, one can use the meta element with the value of the http-equiv attribute set to refresh and the value of the content attribute set to 0 (meaning zero seconds), followed by the URI that the browser should request. It is important that the time-out is set to zero, to avoid that content is displayed before the new page is loaded. The page containing the redirect code should only contain information related to the redirect.
          
       
          
       
          
          
          Examples
          
@@ -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/H81.html b/techniques/html/H81.html
index ff7433d77a..bec049120d 100644
--- a/techniques/html/H81.html
+++ b/techniques/html/H81.html
@@ -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..ae307ec555 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,16 +17,16 @@ 
          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
          
+            
          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..61d71ae47b 100644
--- a/techniques/html/H84.html
+++ b/techniques/html/H84.html
@@ -17,8 +17,8 @@ 
          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
          
@@ -38,7 +38,7 @@ 
          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">
   <label for="action">Options:</label>
@@ -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..20b1b8b36e 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,10 +17,10 @@ 
          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
          
@@ -50,7 +50,7 @@ 
          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">
   <label for="animals">Pick your favorite animals:</label>
@@ -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 e71a16f6b8..beb115ef46 100644
--- a/techniques/html/H86.html
+++ b/techniques/html/H86.html
@@ -28,7 +28,7 @@ 
            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.
            
+            
            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>!
@@ -44,8 +44,8 @@ 
            Four options for providing alternatives for an emoticon representing "smile"
 
            
 
          
            
-            
            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.    
diff --git a/techniques/html/H89.html b/techniques/html/H89.html
index 1f8a235821..7e9a043bd8 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,21 +18,21 @@ 
            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.
            
+				
            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>
 <input id="acc-num1" size="10"
@@ -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..0d58570f11 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,13 +17,13 @@ 
            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.
            
+			
            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">
            
       
            
@@ -32,7 +32,7 @@ 
            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%}
            
@@ -60,7 +60,7 @@ 
            Using an image to indicate required state
            
     
            
     
            
 			
            Indicating required state for groups of radio buttons or check box controls
            
-			
            Radio buttons and checkboxes are treated differently than other interactive controls since individual radio buttons and checkboxes are not required but indicates that a response for the group is required. The methods used in examples 1-3 apply to radio buttons and checkboxes, but the indication of the required state should be placed in the legend element instead of the label element. 
            
+			
            Radio buttons and checkboxes are treated differently than other interactive controls since individual radio buttons and checkboxes are not required but indicates that a response for the group is required. The methods used in examples 1-3 apply to radio buttons and checkboxes, but the indication of the required state should be placed in the legend element instead of the label element. 
            
 
 
            <fieldset>
   <legend>I am interested in the following (Required):</legend>
@@ -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..04cee3d3ae 100644
--- a/techniques/html/H91.html
+++ b/techniques/html/H91.html
@@ -19,13 +19,13 @@ 
            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".
            
@@ -33,12 +33,12 @@ 
            Link example A
            
 			
            
 			
            
 				
            Link example B
            
-				
            In example B of an image inside a link, the alt attribute for the image provides the name.
            
+				
            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.
            
+				
            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,24 +47,24 @@ 
            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.
            
+				
            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.
            
+				
            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.
            
+				
            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">
            
 			
            
@@ -73,28 +73,28 @@ 
            Buttons example D
            
          
            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>
 <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">
            
 			
            
 		
            
 		
            
          
            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> 
 <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 id="r2" name="color" type="radio"><label for="r2">Blue</label>
@@ -102,7 +102,7 @@ 
            Radio Buttons
            
       
            
 			
            
 				
            Radio Fieldset
            
-				
            The radio fieldset has a role of "grouping". The name comes from the legend element.
            
+				
            The radio fieldset has a role of "grouping". The name comes from the legend element.
            
 
            <fieldset>
   <legend>Choose a Color:</legend>
   <div>
@@ -122,7 +122,7 @@ 
            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>
 <select id="s1">
@@ -133,7 +133,7 @@ 
            Select element example A
            
 				
            
 				
            
 					
            Select Element example B
            
-					
            Example B has the same name, role, and value as the above, but sets the name with the aria-label property on the select element. This technique can be used when a visible label is not possible.
            
+					
            Example B has the same name, role, and value as the above, but sets the name with the aria-label property on the select element. This technique can be used when a visible label is not possible.
            
          
 
            <select aria-label="Numbers" id="s1">
   <option>One</option>
@@ -147,14 +147,14 @@ 
            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>
 <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>
            
 					
            
@@ -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..fc8c54cfe0 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,13 +22,13 @@ 
            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.
            
+			
            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>
@@ -36,7 +36,7 @@ 
            Duplicate id attributes in form elements
            
 		
            
 		
            
 			
            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..2fc9237a61 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,7 +28,7 @@ 
            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.
            
+         
            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">
@@ -37,7 +37,7 @@ 
            Captions in one language
            
       
            
       
            
          
            Captions in multiple languages
            
-         
            A video element for a video in the English language with an English caption track. The captions are provided in the WebVTT format.
            
+         
            A video element for a video in the English language with an English caption track. The captions are provided in the WebVTT format.
            
          
 
            <video poster="myvideo.png" controls>
   <source src="myvideo.mp4" srclang="en" type="video/mp4">
@@ -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..eeca3c9637 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,7 +29,7 @@ 
              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.
              
+            
              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">
@@ -37,7 +37,7 @@ 
              Audio description in one language
              
       
              
       
              
          
              Audio description in multiple languages
              
-         
              A video element for a video with both an English and French language source element, and with an English and a French audio description track using the WebVTT file format.
              
+         
              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">
@@ -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..4a97b8199f 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,14 +17,14 @@ 
              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.
              
+         
              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>
@@ -34,8 +34,8 @@ 
              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:
              
+        
              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>
@@ -54,7 +54,7 @@ 
              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">
   <ul>
@@ -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..384ffe32cb 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.
              
 			
              
 		
              
 		
              
@@ -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..13ca98d7b3 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,7 +35,7 @@ 
              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.
              
+				
              To add a page list to a web-based document, the role "doc-pagelist" is added to the element (typically a nav element) that encloses the list and its title.
              
 				
              <nav role="doc-pagelist" aria-labelledby="pglist">
  <h2 id="pglist">Page List</h2>
  <ol>
@@ -49,7 +49,7 @@ 
              Page list in HTML publication
 				
              
 				
              
 				
              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.
              
+				
              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>
@@ -62,7 +62,7 @@ 
              Page list in EPUB 3 publications
              
    
              
    
              
 				
              Page list in EPUB 2 and DAISY publications
              
-				
              The EPUB 2 and DAISY 3 formats both use an XML grammar called the NCX for expressing navigation aids. The page list is defined within the ncx element using the pageList tag. Each pageTarget within this element identifies a page break, providing both a label and a destination.
              
+				
              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/server-side-script/SVR1.html b/techniques/server-side-script/SVR1.html
index 98b1fb0ad2..aedcab81de 100644
--- a/techniques/server-side-script/SVR1.html
+++ b/techniques/server-side-script/SVR1.html
@@ -26,7 +26,7 @@ 
              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 {
@@ -34,7 +34,7 @@ 
              JSP/Servlets
              
   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)
@@ -43,16 +43,16 @@ 
              JSP/Servlets
              
   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"
              
 			 
@@ -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..0bdf427c48 100644
--- a/techniques/server-side-script/SVR2.html
+++ b/techniques/server-side-script/SVR2.html
@@ -17,14 +17,14 @@ 
              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 
 # called accessible.html, then set an environment variable that 
diff --git a/techniques/server-side-script/SVR5.html b/techniques/server-side-script/SVR5.html
index dbf2eba626..e188996569 100644
--- a/techniques/server-side-script/SVR5.html
+++ b/techniques/server-side-script/SVR5.html
@@ -18,14 +18,14 @@ 
              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)
diff --git a/techniques/silverlight/SL1.html b/techniques/silverlight/SL1.html
index ee982e7848..147c610d56 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,7 +48,7 @@ 
            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.ColumnDefinitions>
diff --git a/techniques/silverlight/SL10.html b/techniques/silverlight/SL10.html
index 16cc8df0c2..9536c355a3 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.
diff --git a/techniques/silverlight/SL11.html b/techniques/silverlight/SL11.html
index 640439c65b..64522c1f1a 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
diff --git a/techniques/silverlight/SL12.html b/techniques/silverlight/SL12.html
index 2fa921e4be..06c728cd29 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
          
       
          
@@ -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..b032e876b0 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 
        
diff --git a/techniques/silverlight/SL14.html b/techniques/silverlight/SL14.html
index e47ba3edf3..dfbfa4834b 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,7 +103,7 @@ 
        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">
        <Setter Property="BorderThickness" Value="1"/>
diff --git a/techniques/silverlight/SL15.html b/techniques/silverlight/SL15.html
index 1654a01c49..a11fa4d09f 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,11 +73,11 @@ 
        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
diff --git a/techniques/silverlight/SL16.html b/techniques/silverlight/SL16.html
index a337fa9f43..ae696db85d 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, synchronization 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,12 +50,12 @@ 
      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"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
diff --git a/techniques/silverlight/SL17.html b/techniques/silverlight/SL17.html
index 5c175beb14..2cc091c4d8 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,7 +31,7 @@
       
    
          
    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 
diff --git a/techniques/silverlight/SL18.html b/techniques/silverlight/SL18.html
index f7b6b38019..e472cbe807 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,11 +40,11 @@
          
    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
@@ -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..abae0174a1 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,11 +44,11 @@
          
    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
    Height="400" Width="600"
@@ -63,7 +63,7 @@ 
    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
@@ -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 f28c193866..84d10b880d 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
diff --git a/techniques/silverlight/SL20.html b/techniques/silverlight/SL20.html
index bf2ca1b292..22d8131c4f 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 accessibility 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 
    
@@ -95,7 +95,7 @@ 
    Button is composed with direct text content only
    
     						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 accessibility
     						framework "Name". 
    
             
    
diff --git a/techniques/silverlight/SL21.html b/techniques/silverlight/SL21.html
index c68ac203ab..758d4d408b 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
@@ -62,10 +62,10 @@ 
    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()
diff --git a/techniques/silverlight/SL22.html b/techniques/silverlight/SL22.html
index 0323d460af..66821874bb 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
diff --git a/techniques/silverlight/SL23.html b/techniques/silverlight/SL23.html
index 5bb695a42d..350b6fb7ac 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.
@@ -143,9 +143,9 @@ 
    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. 
    
diff --git a/techniques/silverlight/SL24.html b/techniques/silverlight/SL24.html
index 17b6ba263e..7ae79d1d4b 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 
@@ -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..036ff404eb 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
diff --git a/techniques/silverlight/SL26.html b/techniques/silverlight/SL26.html
index 322bf1b139..819d69330a 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
    
@@ -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..b99cb5098d 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,
diff --git a/techniques/silverlight/SL28.html b/techniques/silverlight/SL28.html
index fb4fdd625c..257cecf30a 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
@@ -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
@@ -350,9 +350,9 @@ 
    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)
@@ -382,8 +382,8 @@ 
    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)
        {
diff --git a/techniques/silverlight/SL29.html b/techniques/silverlight/SL29.html
index 3ace748ce0..0cb7ae949e 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,9 +99,9 @@ 
    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. 
    
+    						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..24459b99da 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,24 +28,24 @@ 
    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. 
    
+    						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"
@@ -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..8180f116d2 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,17 +52,17 @@
          
      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
    Height="20" Width="50" AutomationProperties.Name="Pause" 
@@ -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..ebdb865d3c 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. 
    
    	
    
diff --git a/techniques/silverlight/SL32.html b/techniques/silverlight/SL32.html
index 516f89dcfe..1434a8de65 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
@@ -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
@@ -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..ae8e2fde0a 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,15 +97,15 @@ 
       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 Orientation="Horizontal">
@@ -129,7 +129,7 @@ 
    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. 
    
@@ -177,7 +177,7 @@ 
    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
diff --git a/techniques/silverlight/SL35.html b/techniques/silverlight/SL35.html
index 1d565bed4d..fc337d1e7d 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,7 +50,7 @@ 
    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
@@ -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..5d5f67d6af 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
@@ -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,
@@ -122,7 +122,7 @@ 
    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.

    diff --git a/techniques/silverlight/SL5.html b/techniques/silverlight/SL5.html index cf24f9cb2c..76f302a18b 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 @@ -158,7 +158,7 @@

    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
@@ -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 f7bf169c3f..4c41c9ba21 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.

    diff --git a/techniques/silverlight/SL7.html b/techniques/silverlight/SL7.html index 48902a5c9b..dd29426ada 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 @@ -184,7 +184,7 @@

      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.

      diff --git a/techniques/silverlight/SL8.html b/techniques/silverlight/SL8.html index 39ed7ca39a..1570ffe89b 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 emphasizes 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,12 +63,12 @@

      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">
@@ -84,7 +84,7 @@ 
      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)
        {
@@ -103,8 +103,8 @@ 
      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
@@ -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..c81917cbcb 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,21 +140,21 @@

      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 diff --git a/techniques/smil/SM1.html b/techniques/smil/SM1.html index a643431d33..da3dbc759a 100644 --- a/techniques/smil/SM1.html +++ b/techniques/smil/SM1.html @@ -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..6170522a88 100644 --- a/techniques/smil/SM11.html +++ b/techniques/smil/SM11.html @@ -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..a383fa3193 100644 --- a/techniques/smil/SM12.html +++ b/techniques/smil/SM12.html @@ -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/SM14.html b/techniques/smil/SM14.html index eedab69ff2..5f3ee30de4 100644 --- a/techniques/smil/SM14.html +++ b/techniques/smil/SM14.html @@ -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/SM7.html b/techniques/smil/SM7.html index 4b74767310..287825763e 100644 --- a/techniques/smil/SM7.html +++ b/techniques/smil/SM7.html @@ -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/focus-order.html b/understanding/20/focus-order.html index 2c3664caac..89eab2684b 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.

    diff --git a/understanding/20/language-of-parts.html b/understanding/20/language-of-parts.html index b99bbeffe1..c1c44d7737 100644 --- a/understanding/20/language-of-parts.html +++ b/understanding/20/language-of-parts.html @@ -119,7 +119,7 @@

    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.

    + 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>
@@ -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):