w3c · mcking65 · Dec 7, 2022 · Jul 24, 2022 · Jul 24, 2022 · Jul 24, 2022
diff --git a/...ltipleImplementationExample-Template.html → ...ltipleImplementationExample-Template.html b/...ltipleImplementationExample-Template.html → ...ltipleImplementationExample-Template.html
diff --git a/...les/coding-template/Example-Template.html → content-templates/Example-Template.html b/...les/coding-template/Example-Template.html → content-templates/Example-Template.html
diff --git a/...ples/coding-template/css/example_name.css → content-templates/css/example_name.css b/...ples/coding-template/css/example_name.css → content-templates/css/example_name.css
diff --git a/examples/coding-template/js/example_name.js → content-templates/js/example_name.js b/examples/coding-template/js/example_name.js → content-templates/js/example_name.js
diff --git a/index.html → content/index.html b/index.html → content/index.html
diff --git a/examples/index.html → content/index/index.html b/examples/index.html → content/index/index.html
diff --git a/content/patterns/accordion/accordion-pattern.html b/content/patterns/accordion/accordion-pattern.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta content="width=device-width, initial-scale=1.0" name="viewport">
+<title>Accordion Pattern</title>
+</head>
+<body>
+  <h1>Accordion Pattern (Sections With Show/Hide Functionality)</h1>
+
+  <section>
+    <h2>About This Pattern</h2>
+    <p>
+      An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content.
+      The headings function as controls that enable users to reveal or hide their associated sections of content.
+      Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.
+    </p>
+    <p>Terms for understanding accordions include:</p>
+    <dl>
+      <dt>Accordion Header:</dt>
+      <dd>Label for or thumbnail representing a section of content that also serves as a control for showing, and in some implementations, hiding  the section of content. </dd>
+      <dt>Accordion Panel:</dt>
+      <dd>Section of content associated with an accordion header.</dd>
+    </dl>
+    <p>
+      In some accordions, there are additional elements that are always visible adjacent to the accordion header.
+      For instance, a menubutton may accompany each accordion header to provide access to actions that apply to that section.
+      And, in some cases, a snippet of the hidden content may also be visually persistent.
+    </p>
+  </section>
+
+  <section>
+    <h2>Example</h2>
+    <p><a href="examples/accordion.html">Accordion Example</a>: demonstrates a form divided into three sections using an accordion to show one section at a time. </p>
+  </section>
+
+  <section>
+    <h2>Keyboard Interaction</h2>
+    <ul>
+      <li>
+        <kbd>Enter</kbd> or <kbd>Space</kbd>:
+        <ul>
+          <li>
+            When focus is on the accordion header for a collapsed panel, expands the associated panel.
+            If the implementation allows only one panel to be expanded, and if another panel is expanded, collapses that panel.
+          </li>
+          <li>
+            When focus is on the accordion header for an expanded panel, collapses the panel if the implementation supports collapsing.
+            Some implementations require one panel to be expanded at all times and allow only one panel to be expanded; so, they do not support a collapse function.
+          </li>
+        </ul>
+      </li>
+      <li><kbd>Tab</kbd>: Moves focus to the next focusable element; all focusable elements in the accordion are included in the page <kbd>Tab</kbd> sequence.</li>
+      <li><kbd>Shift + Tab</kbd>: Moves focus to the previous focusable element; all focusable elements in the accordion are included in the page <kbd>Tab</kbd> sequence.</li>
+      <li>
+        <kbd>Down Arrow</kbd> (Optional): If focus is on an accordion header, moves focus to the next accordion header.
+        If focus is on the last accordion header, either does nothing or moves focus to the first accordion header.
+      </li>
+      <li>
+        <kbd>Up Arrow</kbd> (Optional): If focus is on an accordion header, moves focus to the previous accordion header.
+        If focus is on the first accordion header, either does nothing or moves focus to the last accordion header.
+      </li>
+      <li>
+        <kbd>Home</kbd> (Optional): When focus is on an accordion header, moves focus to the first accordion header.
+      </li>
+      <li>
+        <kbd>End</kbd> (Optional): When focus is on an accordion header, moves focus to the last accordion header.
+      </li>
+    </ul>
+  </section>
+
+  <section>
+    <h2>WAI-ARIA Roles, States, and Properties:</h2>
+    <ul>
+      <li>
+        The title of each accordion header is contained in an element with role <a href="#button" class="role-reference">button</a>.
+      </li>
+      <li>
+        Each accordion header <code>button</code> is wrapped in an element with role <a href="#heading" class="role-reference">heading</a> that has a value set for <a href="#aria-level" class="property-reference">aria-level</a> that is appropriate for the information architecture of the page.
+        <ul>
+          <li>If the native host language has an element with an implicit <code>heading</code> and <code>aria-level</code>, such as an HTML heading tag, a native host language element may be used.</li>
+          <li>
+            The <code>button</code> element is the only element inside the <code>heading</code> element.
+            That is, if there are other visually persistent elements, they are not included inside the <code>heading</code> element.
+          </li>
+        </ul>
+      </li>
+      <li>
+        If the accordion panel associated with an accordion header is visible, the header <code>button</code> element has <a href="#aria-expanded" class="state-reference">aria-expanded</a> set to <code>true</code>.
+        If the panel is not visible, <a href="#aria-expanded" class="state-reference">aria-expanded</a> is set to <code>false</code>.
+      </li>
+      <li>
+        The accordion header <code>button</code> element has <a href="#aria-controls" class="property-reference">aria-controls</a> set to the ID of the element containing the accordion panel content.
+      </li>
+      <li>
+        If the accordion panel associated with an accordion header is visible, and if the accordion does not permit the panel to be collapsed, the header <code>button</code> element has <a href="#aria-disabled" class="state-reference">aria-disabled</a> set to <code>true</code>.
+      </li>
+      <li>
+        Optionally, each element that serves as a container for panel content has role
+        <a href="#region" class="role-reference">region</a> and
+        <a href="#aria-labelledby" class="property-reference">aria-labelledby</a>
+        with a value that refers to the button that controls display of the panel.
+        <ul>
+          <li>
+            Avoid using the <code>region</code> role in circumstances that create landmark region proliferation,
+            e.g., in an accordion that contains more than approximately 6 panels that can be expanded at the same time.
+          </li>
+          <li>
+            Role <code>region</code> is especially helpful to the perception of structure by screen reader users when panels contain heading elements or a nested accordion.
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </section>
+
+
+</body>
+</html>
diff --git a/examples/accordion/accordion.html → ...atterns/accordion/examples/accordion.html b/examples/accordion/accordion.html → ...atterns/accordion/examples/accordion.html
@@ -3,13 +3,13 @@
 <head>
 <meta charset="UTF-8">
 <meta content="width=device-width, initial-scale=1.0" name="viewport">
-<title>Accordion Example | WAI-ARIA Authoring Practices 1.2</title>
+<title>Accordion Example</title>
 <!--  Core js and css shared by all examples; do not modify when using this template. -->
 <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
-<link rel="stylesheet" href="../css/core.css">
-<script src="../js/examples.js"></script>
-<script src="../js/highlight.pack.js"></script>
-<script src="../js/app.js"></script>
+<link rel="stylesheet" href="../../../shared/css/core.css">
+<script src="../../../shared/js/examples.js"></script>
+<script src="../../../shared/js/highlight.pack.js"></script>
+<script src="../../../shared/js/app.js"></script>
 
 <!--  js and css for this example. -->
 <link rel="stylesheet" type="text/css" href="css/accordion.css">
@@ -18,19 +18,22 @@
 <body>
   <nav aria-label="Related Links" class="feedback">
     <ul>
-      <li><a href="../../#browser_and_AT_support">Browser and Assistive Technology Support</a></li>
-      <li><a href="https://github.com/w3c/aria-practices/issues/new">Report Issue</a></li>
       <li><a href="https://github.com/w3c/aria-practices/projects/8">Related Issues</a></li>
-      <li><a href="../../#accordion">Design Pattern</a></li>
+      <li><a href="../accordion-pattern.html">Design Pattern</a></li>
     </ul>
   </nav>
   <main>
   <h1>Accordion Example</h1>
-  <p>
-    The below example section contains a simple personal information input form divided into 3 sections
-    that demonstrates the
-    <a href="../../#accordion">design pattern for accordion</a>.
-  </p>
+
+  <section>
+    <h2>About This Example</h2>
+    <p>
+      The below example section contains a simple personal information input form divided into 3 sections
+      that demonstrates the
+      <a href="../accordion-pattern.html">design pattern for accordion</a>.
+    </p>
+  </section>
+
   <section>
     <div class="example-header">
       <h2 id="ex_label">Example</h2>
@@ -276,9 +279,6 @@ <h2 id="sc1_label">HTML Source Code</h2>
   </section>
 
   </main>
-  <nav>
-    <a href="../../#accordion">Accordion Design Pattern in WAI-ARIA Authoring Practices 1.2</a>
-  </nav>
   <script src="js/accordion.js"></script>
 </body>
 </html>
diff --git a/examples/accordion/css/accordion.css → ...erns/accordion/examples/css/accordion.css b/examples/accordion/css/accordion.css → ...erns/accordion/examples/css/accordion.css
diff --git a/examples/accordion/js/accordion.js → ...tterns/accordion/examples/js/accordion.js b/examples/accordion/js/accordion.js → ...tterns/accordion/examples/js/accordion.js
diff --git a/content/patterns/alert-dialog/alert-dialog-pattern.html b/content/patterns/alert-dialog/alert-dialog-pattern.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta content="width=device-width, initial-scale=1.0" name="viewport">
+<title>Alert and Message Dialogs Pattern</title>
+</head>
+<body>
+  <h1>Alert and Message Dialogs Pattern</h1>
+
+  <section>
+    <h2>About This Pattern</h2>
+    <p>
+      An alert dialog  is a <a href="../dialog-modal/dialog-modal-pattern.html">modal dialog</a> that interrupts the user's workflow to communicate an important message and acquire a response.
+      Examples include action confirmation prompts and error message confirmations.
+      The <a href="#alertdialog" class="role-reference">alertdialog</a> role
+      enables assistive technologies and browsers to distinguish alert dialogs from other dialogs
+      so they have the option of giving alert dialogs special treatment, such as playing a system alert sound.
+    </p>
+  </section>
+
+  <section>
+    <h2>Example</h2>
+    <p><a href="../dialog-modal/examples/alertdialog.html">Alert Dialog Example</a>: A confirmation prompt that demonstrates an alert dialog.</p>
+  </section>
+
+  <section>
+    <h2>Keyboard Interaction</h2>
+    <p>See the keyboard interaction section for the <a href="../dialog-modal/dialog-modal-pattern.html">modal dialog pattern</a>.</p>
+  </section>
+
+  <section>
+      <h2>WAI-ARIA Roles, States, and Properties</h2>
+      <ul>
+          <li>
+              The element that contains all elements of the dialog, including the alert
+              message and any dialog buttons, has role
+              <a class="role-reference" href="#alertdialog">alertdialog</a>.
+          </li>
+          <li>
+              The element with role <code>alertdialog</code> has either:
+              <ul>
+                  <li>
+                      A value for
+                      <a href="#aria-labelledby" class="property-reference">aria-labelledby</a>
+                      that refers to the element containing the title of the dialog if the
+                      dialog has a visible label.
+                  </li>
+                  <li>
+                      A value for
+                      <a href="#aria-label" class="property-reference">aria-label</a>
+                      if the dialog does not have a visible label.
+                  </li>
+              </ul>
+          </li>
+          <li>
+              The element with role <code>alertdialog</code> has a value set for
+              <a href="#aria-describedby" class="property-reference">aria-describedby</a>
+              that refers to the element containing the alert message.
+          </li>
+      </ul>
+  </section>
+
+</body>
+</html>
diff --git a/content/patterns/alert/alert-pattern.html b/content/patterns/alert/alert-pattern.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta content="width=device-width, initial-scale=1.0" name="viewport">
+<title>Alert Pattern</title>
+</head>
+<body>
+  <h1>Alert Pattern</h1>
+
+  <section>
+    <h2>About This Pattern</h2>
+    <p>
+      An <a class="role-reference" href="#alert">alert</a> is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.
+      Dynamically rendered alerts are automatically announced by most screen readers, and in some operating systems, they may trigger an alert sound.
+      It is important to note that, at this time, screen readers do not inform users of alerts that are present on the page before page load completes.
+    </p>
+    <p>
+      Because alerts are intended to provide important and potentially time-sensitive information without interfering with the user's ability to continue working,
+      it is crucial they do not affect keyboard focus.
+      The <a href="../alert-dialog/pattern-alert-dialog.html">alert dialog</a> is designed for situations where interrupting work flow is necessary.
+    </p>
+    <p>
+      It is also important to avoid designing alerts that disappear automatically.
+      An alert that disappears too quickly can lead to failure to meet
+      <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-no-exceptions.html">WCAG 2.0 success criterion 2.2.3</a>.
+      Another critical design consideration is the frequency of interruption caused by alerts.
+      Frequent interruptions inhibit usability for people with visual and cognitive disabilities, which makes meeting the requirements of
+      <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html">WCAG 2.0 success criterion 2.2.4</a>
+      more difficult.
+    </p>
+  </section>
+
+  <section>
+    <h2>Example</h2>
+    <p><a href="examples/alert.html">Alert Example</a></p>
+  </section>
+
+  <section>
+    <h2>Keyboard Interaction</h2>
+    <p>Not applicable.</p>
+  </section>
+
+  <section>
+    <h2>WAI-ARIA Roles, States, and Properties</h2>
+    <p>The widget has a role of <a class="role-reference" href="#alert">alert</a>.</p>
+  </section>
+
+</body>
+</html>
diff --git a/examples/alert/alert.html → content/patterns/alert/examples/alert.html b/examples/alert/alert.html → content/patterns/alert/examples/alert.html
@@ -2,38 +2,41 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>Alert Example | WAI-ARIA Authoring Practices 1.2</title>
+    <title>Alert Example</title>
 
     <!--  Core js and css shared by all examples; do not modify when using this template. -->
     <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
-    <link rel="stylesheet" href="../css/core.css">
-    <script src="../js/examples.js"></script>
-    <script src="../js/highlight.pack.js"></script>
-    <script src="../js/app.js"></script>
+    <link rel="stylesheet" href="../../../shared/css/core.css">
+    <script src="../../../shared/js/examples.js"></script>
+    <script src="../../../shared/js/highlight.pack.js"></script>
+    <script src="../../../shared/js/app.js"></script>
 
     <!--  js and css for this example. -->
     <link href="css/alert.css" rel="stylesheet">
     <script src="js/alert.js" type="text/javascript"></script>
   </head>
   <body>
-  <nav aria-label="Related Links" class="feedback">
-    <ul>
-      <li><a href="../../#browser_and_AT_support">Browser and Assistive Technology Support</a></li>
-      <li><a href="https://github.com/w3c/aria-practices/issues/new">Report Issue</a></li>
-      <li><a href="https://github.com/w3c/aria-practices/projects/20">Related Issues</a></li>
-      <li><a href="../../#alert">Design Pattern</a></li>
-    </ul>
-  </nav>
+    <nav aria-label="Related Links" class="feedback">
+      <ul>
+        <li><a href="https://github.com/w3c/aria-practices/projects/20">Related Issues</a></li>
+        <li><a href="../alert-pattern.html">Design Pattern</a></li>
+      </ul>
+    </nav>
     <main>
     <h1>Alert Example</h1>
-    <p>
-      The below example demonstrates the <a href="../../#alert">design pattern for alert</a>.
-      Activating the <q>Trigger Alert</q> button causes a message to be inserted into the example alert element.
-    </p>
-    <p>Similar examples include:</p>
-    <ul>
-      <li><a href="../dialog-modal/alertdialog.html">Alert Dialog Example</a>: A confirmation prompt that demonstrates an alert dialog.</li>
-    </ul>
+
+    <section>
+      <h2>About This Example</h2>
+      <p>
+        The below example demonstrates the <a href="../alert-pattern.html">design pattern for alert</a>.
+        Activating the <q>Trigger Alert</q> button causes a message to be inserted into the example alert element.
+      </p>
+      <p>Similar examples include:</p>
+      <ul>
+        <li><a href="../../dialog-modal/examples/alertdialog.html">Alert Dialog Example</a>: A confirmation prompt that demonstrates an alert dialog.</li>
+      </ul>
+    </section>
+
     <section>
       <div class="example-header">
         <h2 id="ex_label">Example</h2>
@@ -138,8 +141,5 @@ <h2 id="sc1_label">HTML Source Code</h2>
       </script>
     </section>
     </main>
-    <nav>
-      <a href="../../#alert">Alert Design Pattern in WAI-ARIA Authoring Practices 1.2</a>
-    </nav>
   </body>
-</html>
+</html>
diff --git a/examples/alert/css/alert.css → ...ent/patterns/alert/examples/css/alert.css b/examples/alert/css/alert.css → ...ent/patterns/alert/examples/css/alert.css
diff --git a/examples/alert/js/alert.js → content/patterns/alert/examples/js/alert.js b/examples/alert/js/alert.js → content/patterns/alert/examples/js/alert.js