Merge pr3381 and pr3738

techniques/about.html

@@ -52,178 +52,25 @@ <h3>Updated periodically</h3>
               <h3>Techniques are not required</h3>
               <p>Techniques are informative—that means they are not required. The basis for determining conformance to WCAG 2 is the success criteria from the WCAG 2 standard—not the techniques.</p>
               <div class="note">
-                <p>W3C cautions against requiring W3C's sufficient techniques. The only thing that should be required is meeting the WCAG 2 success criteria. To learn more, see: <a href="https://www.w3.org/WAI/WCAG20/wcag2faq.html#techsnot">What would be the negative consequences of allowing <em>only</em> W3C's published techniques to be used for conformance to WCAG 2?</a> in the WCAG 2 FAQ        </p>
+                <p>W3C cautions against requiring W3C's sufficient techniques. The only thing that should be required is meeting the WCAG 2 success criteria. To learn more, see: <a href="https://www.w3.org/WAI/standards-guidelines/wcag/faq/#techsnot">What would be the negative consequences of allowing <em>only</em> W3C's published techniques to be used for conformance to WCAG 2?</a> in the WCAG 2 FAQ</p>
               </div>
           	</section>
               <section id="quickref">
-              <h3>WCAG Quick Reference</h3>  
-              <p><em>Techniques for WCAG 2</em> is not intended to be used as a stand-alone document. Instead, it is expected that content authors will usually use <a href="https://www.w3.org/WAI/WCAG21/quickref/">How to Meet WCAG 2: A customizable quick reference</a> to read the WCAG success criteria, and follow links from there to specific topics in Understanding WCAG 2 and to specific techniques.</p>
+              <h3>WCAG Quick Reference</h3>
+              <p><em>Techniques for WCAG 2</em> is not intended to be used as a stand-alone document. Instead, it is expected that content authors will usually use <a href="../quickref/">How to Meet WCAG 2: A customizable quick reference</a> to read the WCAG success criteria, and follow links from there to specific topics in Understanding WCAG 2 and to specific techniques.</p>
               </section>
               <section id="specifictech">
-          	<h3>Techniques for specific technologies</h3>  
+          	<h3>Techniques for specific technologies</h3>
               <p>Publication of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2 success criteria and conformance requirements. Developers need to be aware of the limitations of specific technologies and provide content in a way that is accessible to people with disabilities. </p>
               </section>
             </section>
             <section id="important">
-          	  <h2>Important Additional Information</h2>  
+          	  <h2>Important Additional Information</h2>
               <p><strong>For important information about techniques, please see the <a class="understanding" href="../Understanding/understanding-techniques">Understanding Techniques for WCAG Success Criteria</a> section of Understanding WCAG 2.</strong></p>
             </section>
             <section id="changelog">
-                <details>
-                    <summary>
-                        <h2>Change Log</h2>
-                    </summary>
-                    <p>A list of new, removed or significantly updated techniques:</p>
-
-                    <ol>
-
-                        <li>
-
-                            <time datetime="2020-07-15">July 15th 2020</time>: Removed Flash techniques.
-
-                        </li>
-
-                        <li>
-
-                            <time datetime="2019-09-12">Sept 12th 2019</time>: Added <a href="./techniques/failures/F105">Failure of Success Criterion 2.5.1 due to providing functionality via a path-based
-                       gesture without simple pointer alternative</a></li>
-
-                        <li>
-
-                            <time datetime="2019-09-12">Sept 12th 2019</time>: Added <a href="./techniques/failures/F106">Failure due to inability to deactivate motion actuation</a></li>
-
-                        <li>
-
-                            <time datetime="2019-09-03">Sept 3rd 2019</time>: Added <a href="./techniques/failures/F104">Failure of Success Criterion 1.4.12 due to clipped or overlapped content when text
-                       spacing is adjusted</a></li>
-
-                        <li>
-
-                            <time datetime="2019-09-03">Sept 3rd 2019</time>: Added <a href="./techniques/failures/F103">Failure of Success Criterion 4.1.3 due to providing status messages that cannot be
-                       programmatically determined through role or properties</a></li>
-
-                        <li>
-
-                            <time datetime="2019-08-06">Aug 6th 2019</time>: Added <a href="./techniques/failures/F102">Failure of Success Criterion 1.4.10 due to content disappearing and not being available
-                       when content has reflowed</a></li>
-
-                        <li>
-
-                            <time datetime="2019-07-16">Jul 16th 2019</time>: Added <a href="./techniques/general/G216">Providing single point activation for a control slider</a></li>
-
-                        <li>
-
-                            <time datetime="2019-07-16">Jul 16th 2019</time>: Added <a href="./techniques/general/G215">Providing controls to achieve the same result as path based or multipoint gestures</a></li>
-
-                        <li>
-
-                            <time datetime="2019-07-16">Jul 16th 2019</time>: Added <a href="./techniques/failures/F100">Failure of Success Criterion 1.3.4 due to showing a message asking to reorient device</a></li>
-
-                        <li>
-
-                            <time datetime="2019-07-16">Jul 16th 2019</time>: Added <a href="./techniques/general/G214">Using a control to allow access to content in different orientations which is otherwise
-                       restricted</a></li>
-
-                        <li>
-
-                            <time datetime="2019-07-10">Jul 10th 2019</time>: Added <a href="./techniques/css/C40">Creating a two-color focus indicator to ensure sufficient contrast</a></li>
-
-                        <li>
-
-                            <time datetime="2019-07-10">Jul 10th 2019</time>: Added <a href="./techniques/failures/F99">Failure of Success Criterion 2.1.4 due to implementing character key shortcuts that
-                       cannot be turned off or remapped</a></li>
-
-                        <li>
-
-                            <time datetime="2019-07-10">Jul 10th 2019</time>: Added <a href="./client-side-script/SCR39">Making content on focus or hover hoverable, dismissible, and persistent</a></li>
-
-                        <li>
-
-                            <time datetime="2019-06-18">Jun 18th 2019</time>: Added <a href="./general/G212">Using native controls to ensure functionality is triggered on the up-event</a></li>
-
-                        <li>
-
-                            <time datetime="2019-06-11">Jun 11 2019</time>: Added <a href="./failures/F98">Failure of Success Criterion 2.5.6 due to interactions being limited to touch-only
-                       on touchscreen devices</a></li>
-
-                        <li>
-
-                            <time datetime="2019-06-18">Jun 18th 2019</time>: Added <a href="./general/G213">Provide conventional controls and an application setting for motion activated input</a></li>
-
-                        <li>
-
-                            <time datetime="2019-05-25">May 25th 2019</time>: Added <a href="./aria/ARIA24">Semantically identifying a font icon with role="img"</a></li>
-
-                        <li>
-
-                            <time datetime="2019-04-20">Apr 26th 2019</time>: Added <a href="./failures/F97">Failure due to locking the orientation to landscape or portrait view</a></li>
-
-                        <li>
-
-                            <time datetime="2019-02-26">Feb 26th 2019</time>: Removed <a href="./failures/F52">F52</a> from SC 3.2.1 (still attached to SC 3.2.5)
-
-                        </li>
-
-                        <li>
-
-                            <time datetime="2019-02-26">Feb 26th 2019</time>: Added <a href="./general/G209">Provide sufficient contrast at the boundaries between adjoining colors</a></li>
-
-                        <li>
-
-                            <time datetime="2019-01-10">Jan 10th 2019</time>: Added <a href="./css/C39">Using the CSS reduce-motion query to prevent motion</a></li>
-
-                        <li>
-
-                            <time datetime="2018-12-14">Dec 14th 2018</time>: Added <a href="./general/G207">Ensuring that a contrast ratio of 3:1 is provided for icons</a></li>
-
-                        <li>
-
-                            <time datetime="2018-11-13">Nov 30th 2018</time>: Added <a href="./css/C38">Using CSS width, max-width and flexbox to fit labels and inputs</a></li>
-
-                        <li>
-
-                            <time datetime="2018-11-30">Nov 30th 2018</time>: Added <a href="./failures/F95">F95 of 1.4.13 due to content shown on hover not being hoverable</a></li>
-
-                        <li>
-
-                            <time datetime="2018-11-13">Nov 13th 2018</time>: Added <a href="./css/C34">C34 Using media queries to un-fixing sticky headers / footers</a></li>
-
-                        <li>
-
-                            <time datetime="2018-11-13">Nov 13th 2018</time>: Added <a href="./css/C36">C36 Allowing for text spacing override</a></li>
-
-                        <li>
-
-                            <time datetime="2018-11-13">Nov 13th 2018</time>: Added <a href="./css/C37">C37 Using CSS max-width and height to fit images</a></li>
-
-                        <li>
-
-                            <time datetime="2018-11-30">Nov 30th 2018</time>: Added <a href="./general/G207">G207 Ensuring that drag-and-drop actions can be cancelled</a></li>
-
-                        <li>
-
-                            <time datetime="2018-11-30">Nov 30th 2018</time>: Added <a href="./failures/F95">F95 Failure of Success Criterion 1.4.13 due to content shown on hover not being hoverable</a></li>
-
-                        <li>
-
-                            <time datetime="2018-11-30">Nov 30th 2018</time>: Added <a href="./failures/F96">F96 Failure of Success Criterion 2.5.3 due to "accessible name" not containing the
-                       visible label text</a></li>
-
-                        <li>
-
-                            <time datetime="2018-11-30">Nov 30th 2018</time>: Added <a href="./css/C38">C38 Using CSS width, max-width and flexbox to fit labels and inputs</a></li>
-
-                        <li>
-
-                            <time datetime="2018-12-14">Dec 14th 2018</time>: Added <a href="./general/G207">G207 Ensuring that a contrast ratio of 3:1 is provided for icons</a></li>
-
-                    </ol>
-
-                    <p>For a more detailed view of recent changes to the informative documents see the <a href="https://github.com/w3c/wcag/commits/master">github updates</a>.
-
-                    </p>
-
-                </details>
+                <h2>Change Log</h2>
+                <p>For a detailed view of recent changes to the informative documents see the <a href="https://github.com/w3c/wcag/commits/">GitHub updates</a>.</p>
             </section>
 
         	<section id="acknowledgements">

techniques/aria/ARIA20.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using the region role to identify a region of the page</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Using the region role to identify a region of the page</h1><section class="meta"><p class="id">ID: ARIA20</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications</a>.</p>
    </section><section id="description"><h2>Description</h2>
-<p>This technique demonstrates how to assign a generic <code class="language-html">region</code> role to a section of a page so that user agents and assistive technologies may be able to programmatically identify it. The <code class="language-html">region</code> 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 <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA11">ARIA11</a>).</p>
+<p>This technique demonstrates how to assign a generic <code class="language-html">region</code> role to a section of a page so that user agents and assistive technologies may be able to programmatically identify it. The <code class="language-html">region</code> 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 <a href="../aria/ARIA11">ARIA11</a>).</p>
 <p>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 <code class="language-html">aria-labelledby</code>, <code class="language-html">aria-label</code>, or another technique. Doing so helps to better expose content and information relationships on the page. The role of <code class="language-html">region</code> should be used prudently, because if overused they can make the page overly verbose for screen reader users.</p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
@@ -92,16 +92,22 @@ <h3>Identifying a portlet with a generic region</h3>
             <li>Checks #1-3 are true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../aria/ARIA11">ARIA11</a></li>
-      <li><a href="../aria/ARIA12">ARIA12</a></li>
-      <li><a href="../aria/ARIA13">ARIA13</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-
-         <ul>
-            <li>
-                  <a href="https://www.w3.org/TR/wai-aria/#region">The Roles Model (role=region)</a>
-               </li>
-         </ul>
    </section>
-</body></html>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../aria/ARIA11">ARIA11</a></li>
+         <li><a href="../aria/ARIA12">ARIA12</a></li>
+         <li><a href="../aria/ARIA13">ARIA13</a></li>
+      </ul>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
+      <ul>
+         <li>
+            <a href="https://www.w3.org/TR/wai-aria/#region">The Roles Model (role=region)</a>
+         </li>
+      </ul>
+   </section>
+</body>
+</html>

techniques/aria/ARIA22.html

@@ -18,9 +18,7 @@ <h2>When to Use</h2>
 		<section id="description">
 			<h2>Description</h2>
 			<p>
-				This technique uses the <code>status</code> role from the ARIA specification to notify Assistive Technologies (AT) when content has been updated with information about the user's or application's status. This is done by adding <code>role="status"</code> to the element that contains the <a href="https://www.w3.org/TR/WCAG21/#dfn-status-messages">status message</a>. The aria live region role of <code>status</code> has an implicit <code>aria-live</code> value of <code>polite</code>, which allows a user to be notified via AT (such as a screen reader) when status messages are added. The role of <code>status</code> also has a default <code>aria-atomic</code> value of <code>true</code>, so that updates to the container marked with a role of <code>status</code> will result in the AT presenting the entire contents of the container to the user, including any author-defined labels (or additional nested elements). Such additional context can be critical where the status message text alone will not provide an equivalent to the visual experience. The content of the aria-live container is automatically read by the AT, without the AT having to focus on the place where the text is displayed. See <a href="https://www.w3.org/TR/wai-aria-1.1/#status">WAI-ARIA 1.1 status (role)</a> for more details.
-
-</p>
+				This technique uses the <code>status</code> role from the ARIA specification to notify Assistive Technologies (AT) when content has been updated with information about the user's or application's status. This is done by adding <code>role="status"</code> to the element that contains the <a href="/TR/WCAG/#dfn-status-messages">status message</a>. The aria live region role of <code>status</code> has an implicit <code>aria-live</code> value of <code>polite</code>, which allows a user to be notified via AT (such as a screen reader) when status messages are added. The role of <code>status</code> also has a default <code>aria-atomic</code> value of <code>true</code>, so that updates to the container marked with a role of <code>status</code> will result in the AT presenting the entire contents of the container to the user, including any author-defined labels (or additional nested elements). Such additional context can be critical where the status message text alone will not provide an equivalent to the visual experience. The content of the aria-live container is automatically read by the AT, without the AT having to focus on the place where the text is displayed. See <a href="https://www.w3.org/TR/wai-aria/#status">WAI-ARIA status (role)</a> for more details.</p>
 
 		</section>
 		<section id="examples">
@@ -47,7 +45,7 @@ <h3>Updating the shopping cart status</h3>
 			<h2>Tests</h2>
 			<section class="test-procedure">
 				<h3>Procedure</h3>
-				<p>For each <a href="https://www.w3.org/TR/WCAG21/#dfn-status-messages">status message</a>:</p>
+				<p>For each <a href="/TR/WCAG/#dfn-status-messages">status message</a>:</p>
 				<ol>
 					<li>Check that the container destined to hold the status message has a <code class="language-html">role</code> attribute with a value of <code class="language-html">status</code> <em>before</em> the status message occurs.</li>
 					<li>Check that when the status message is triggered, it is inside the container.</li>

techniques/client-side-script/SCR19.html

@@ -119,7 +119,7 @@
                   <a href="http://usability.com.au/2008/09/accessible-forms-using-wcag-2-0/">Accessible Forms using WCAG 2.0</a>
                </li>
              <li>
-                  <a href="https://www.w3.org/TR/WCAG21/#dfn-change-of-context">Change of context definition</a>
+                  <a href="/TR/WCAG/#dfn-change-of-context">Change of context definition</a>
                </li>
          </ul>