### Install NPM Dependencies

Source: https://github.com/w3c/wai-aria-practices/blob/main/README.md

Install Node.js dependencies for the pre-build script.

```bash
npm install -C scripts/pre-build
```

--------------------------------

### Register Source Code Example

Source: https://github.com/w3c/wai-aria-practices/blob/main/ARIA/apg/patterns/grid/examples/layout-grids.md

Registers a new source code example with the global sourceCode object.

```javascript
sourceCode.add('sc1', 'ex1', 'ex1_label', 'css_js_files', 'sc1_description');
```

```javascript
sourceCode.add('sc2', 'ex2', 'ex2_label', 'css_js_files', 'sc2_description');
```

```javascript
sourceCode.add('sc3', 'ex3', 'ex3_label', 'css_js_files', 'sc3_description');
```

--------------------------------

### Meter Example JavaScript

Source: https://github.com/w3c/wai-aria-practices/blob/main/ARIA/apg/patterns/meter/examples/meter.md

This JavaScript file contains the logic for the meter example, including handling dynamic updates and user interactions like pausing the updates.

```javascript
/* JavaScript for meter.js is not provided in the source */
```

--------------------------------

### Initialize Source Code Rendering

Source: https://github.com/w3c/wai-aria-practices/blob/main/ARIA/apg/patterns/grid/examples/layout-grids.md

Triggers the rendering process for all registered source code examples.

```javascript
sourceCode.make();
```

--------------------------------

### HTML Source Code for Menu Button Example

Source: https://github.com/w3c/wai-aria-practices/blob/main/ARIA/apg/patterns/menu-button/examples/menu-button-links.md

This is the complete HTML source code for the menu button example. It is recommended to open this code in CodePen for copying.

```html
<!-- The following code is not provided in the source. -->
<!-- It is referenced by a script tag that dynamically adds source code. -->
```

--------------------------------

### Listbox Examples

Source: https://github.com/w3c/wai-aria-practices/blob/main/ARIA/apg/about/coverage-and-quality/coverage-and-quality-report.md

Showcases various listbox implementations, including grouped, rearrangeable, and scrollable options. Note the deprecated collapsible listbox example.

```html
<a href="../../patterns/listbox/examples/listbox-collapsible/">(Deprecated) Collapsible Dropdown Listbox</a>
```

```html
<a href="../../patterns/listbox/examples/listbox-grouped/">Listbox  with Grouped Options</a>
```

```html
<a href="../../patterns/listbox/examples/listbox-rearrangeable/">Listboxes with Rearrangeable Options</a>
```

```html
<a href="../../patterns/listbox/examples/listbox-scrollable/">Scrollable Listbox</a>
```

--------------------------------

### Initialize Source Code Display

Source: https://github.com/w3c/wai-aria-practices/blob/main/ARIA/apg/patterns/menubar/examples/menubar-editor.md

Initializes the source code display component for the HTML example.

```javascript
sourceCode.add('sc1', 'ex1', 'ex1_label', 'css_js_files', 'sc1_description');
          sourceCode.make();
```

--------------------------------

### Print Action Button Example

Source: https://github.com/w3c/wai-aria-practices/blob/main/ARIA/apg/patterns/button/examples/button_idl.md

Demonstrates a 'Print' action button using a div element with ARIA 1.2 IDL syntax for attribute reflection. This example is illustrative and not for production.

```html
<div tabindex="0" id="action">Print Page</div>
```

--------------------------------

### Initialize Source Code Display

Source: https://github.com/w3c/wai-aria-practices/blob/main/ARIA/apg/patterns/button/examples/button_idl.md

Initializes the source code display component for the HTML example.

```javascript
sourceCode.add('sc1', 'example', 'ex_label', 'css_js_files', 'sc1_description');
sourceCode.make();
```

--------------------------------

### Initialize Source Code Display

Source: https://github.com/w3c/wai-aria-practices/blob/main/ARIA/apg/patterns/treeview/examples/treeview-1b.md

Initializes the source code display for the HTML example using the sourceCode utility.

```javascript
sourceCode.add('sc1', 'ex1', 'start', 'css_js_files', 'sc1_description');
          sourceCode.make();
```

--------------------------------

### Alert Pattern Example HTML Structure

Source: https://github.com/w3c/wai-aria-practices/blob/main/ARIA/apg/patterns/alert/examples/alert.md

This HTML sets up the alert pattern example. It includes a button to trigger the alert and a div with the 'alert' role where messages will be displayed. A hidden template provides the content for the alert.

```html
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
<div id="ex1">
  <button type="button" id="alert-trigger">Trigger Alert</button>

  <div id="example" role="alert"></div>

  
  <script type="text/template" id="alert-template">
    <p>Hello</p>
  </script>
</div>
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
```

--------------------------------

### Link CSS Files for Treeview Example

Source: https://github.com/w3c/wai-aria-practices/blob/main/ARIA/apg/patterns/treeview/examples/treeview-1b.md

These link tags include necessary CSS files for styling the treeview example, including Font Awesome for icons and custom tree styles.

```html
<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
  integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
  crossorigin="anonymous"
/>
<link
  href="../../../../../../content-assets/wai-aria-practices/patterns/treeview/examples/css/tree.css"
  rel="stylesheet"
/>

<link 
  rel="stylesheet"
  href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
>
<!-- Code highlighting styles -->
<link 
  rel="stylesheet"
  href="{{ '/content-assets/wai-aria-practices/shared/css/github.css' | relative_url }}"
>
```

--------------------------------

### Include JavaScript Files for Treeview Example

Source: https://github.com/w3c/wai-aria-practices/blob/main/ARIA/apg/patterns/treeview/examples/treeview-1b.md

These script tags include necessary JavaScript files for the treeview example functionality, including utilities, highlighting, and specific treeview logic.

```html
<script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
<script src="../../../../../../content-assets/wai-aria-practices/shared/js/utils.js"></script>
<script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
<script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>

<script src="../../../../../../content-assets/wai-aria-practices/patterns/treeview/examples/js/tree.js"></script>
<script src="../../../../../../content-assets/wai-aria-practices/patterns/treeview/examples/js/treeitem.js"></script>
<script src="../../../../../../content-assets/wai-aria-practices/patterns/treeview/examples/js/treeitemClick.js"></script>
```

--------------------------------

### HTML Navigation Landmark Implementation

Source: https://github.com/w3c/wai-aria-practices/blob/main/content-assets/wai-aria-practices/patterns/landmarks/examples/navigation.html

Examples of using the <nav> element for single and multiple navigation landmarks.

```html
<nav>  
  
  <h2>_title for navigation area_<h2>  
  
  <ul>  
    <li><a href="page1.html">Link 1</a></li>  
    <li><a href="page2.html">Link 2</a></li>  
    <li><a href="page3.html">Link 3</a></li>  
    <li><a href="page4.html">Link 4</a></li>  
    .....  
  </ul>  
</nav>
```

```html
<nav aria-labelledby="_nav1_">  
  
  <h2 id="_nav1_">_title for navigation 1_<h2>  
  
  <ul>  
    <li><a href="page11.html">Link 1</a></li>  
    <li><a href="page12.html">Link 2</a></li>  
    <li><a href="page13.html">Link 3</a></li>  
    <li><a href="page14.html">Link 4</a></li>  
    .....  
  </ul>  
</nav>  
  
....  
  
<nav aria-labelledby="_nav2_">  
  
  <h2 id="_nav2_">_title for navigation 2_<h2>  
  
  <ul>  
    <li><a href="page21.html">Link 5</a></li>  
    <li><a href="page22.html">Link 6</a></li>  
    <li><a href="page23.html">Link 7</a></li>  
    <li><a href="page24.html">Link 8</a></li>  
    .....  
  </ul>  
</nav>
```

--------------------------------

### Alert Dialog Pattern Example Description

Source: https://github.com/w3c/wai-aria-practices/blob/main/ARIA/apg/patterns/alertdialog/examples/alertdialog.md

This section describes the Alert Dialog Pattern example, explaining its purpose, how to interact with the confirmation and alert dialogs, and the conditions under which buttons are enabled or disabled.

```html


      <section>
        <h2>About This Example</h2>
        <img alt class="example-page-example-icon" src="../../../../../../content-images/wai-aria-practices/images/pattern-alertdialog.svg">
        <p>
          The below example of a confirmation prompt demonstrates the <a href="../../">Alert Dialog Pattern</a>.
          It also includes an example of the <a href="../../../alert/">Alert Pattern</a> to make comparing the experiences provided by the two patterns easy.
        </p>
        <p>To use this example:</p>
        <ul>
          <li>
            Activate the "discard" button to trigger a confirmation dialog that has the <code>alertdialog</code> role.
            <ul>
              <li>Activating the "yes" button in the confirmation dialog removes the contents of both the "Notes" text area and local storage of the notes.</li>
              <li data-test-id="save-button">Activating the "no" button or pressing <kbd>escape</kbd> closes the dialog.</li>
              <li>The "discard" button is disabled if the notes text area does not contain any text.</li>
            </ul>
          </li>
          <li>
            Activate the "save" button to trigger an alert when the contents of the "Notes" text area is saved to
            <a href="https://html.spec.whatwg.org/multipage/webstorage.html#the-localstorage-attribute">local storage</a>.
            <ul>
              <li>A successful save triggers a short alert to notify the user that the notes have been saved.</li>
              <li>The "save" button is disabled if the user's local storage value is the same as the "Notes" field.</li>
            </ul>
          </li>
          <li>Modify the "notes" text area as needed to enable and disable the discard and save functions.</li>
        </ul>
        <p>Similar examples include:</p>
        <ul>
          <li><a href="../../../alert/examples/alert/">Alert</a>: a basic alert.</li>

```

--------------------------------

### Initialize Source Code Display

Source: https://github.com/w3c/wai-aria-practices/blob/main/ARIA/apg/patterns/alert/examples/alert.md

Initializes the source code display component for the alert pattern example.

```javascript
sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
          sourceCode.make();
```

--------------------------------

### Initialize WAI-ARIA source code utility

Source: https://github.com/w3c/wai-aria-practices/blob/main/ARIA/apg/patterns/alertdialog/examples/alertdialog.md

Initializes the source code display for a specific example identifier.

```javascript
sourceCode.add('sc1', 'ex_alertdialog', 'ex_label', 'css_js_files', 'sc1_description');
          sourceCode.make();
```

--------------------------------

### Install Jekyll Dependencies

Source: https://github.com/w3c/wai-aria-practices/blob/main/README.md

Install the necessary Ruby gems for Jekyll.

```bash
bundle install
```

--------------------------------

### Run Pre-build Script

Source: https://github.com/w3c/wai-aria-practices/blob/main/README.md

Execute the Node.js pre-build script.

```bash
node ./scripts/pre-build
```

--------------------------------

### ARIA Separator Role Example

Source: https://github.com/w3c/wai-aria-practices/blob/main/ARIA/apg/patterns/switch/examples/switch-button.md

Example of a separator element with ARIA attributes for accessibility.

```html
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
```

--------------------------------

### SkipTo Configuration Example

Source: https://github.com/w3c/wai-aria-practices/blob/main/content-assets/wai-aria-practices/patterns/landmarks/examples/search.html

This JavaScript configuration object demonstrates how to customize the SkipTo plugin's settings, including specifying which headings to skip to and the color theme.

```javascript
var SkipToConfig = {
  settings: {
    skipTo: {
      headings: 'h1, h2',
      attachElement: '#skip-to-attach',
      colorTheme: 'aria',
    },
  },
};
```

--------------------------------

### Select-Only Combobox Example

Source: https://github.com/w3c/wai-aria-practices/blob/main/ARIA/apg/about/coverage-and-quality/coverage-and-quality-report.md

Provides an example of a select-only combobox, which functions similarly to a native select element but with ARIA for enhanced accessibility.

```html
<a href="../../patterns/combobox/examples/combobox-select-only/">Select-Only Combobox</a>
```

--------------------------------

### Meter with aria-valuetext Example

Source: https://github.com/w3c/wai-aria-practices/blob/main/ARIA/apg/practices/range-related-properties/range-related-properties-practice.md

Use aria-valuetext when numeric values are not sufficiently meaningful. This example shows a battery indicator with both percentage and remaining time.

```html
<span id="battery-label">Battery</span>
<span role="meter" aria-labelledby="battery-label"
  aria-valuenow="5"
  aria-valuetext="5%, 18 minutes remaining.">&lt;/span&gt;
```

--------------------------------

### Tabs with Manual Activation Example

Source: https://github.com/w3c/wai-aria-practices/blob/main/ARIA/apg/patterns/tabs/examples/tabs-actions.md

Demonstrates a tabs widget where users activate tabs using Space or Enter keys. Includes tab buttons, associated panels, and action menus for each tab.

```html
<div id="ex1">
          <div class="tabs">
            <h3 id="tablist-1">Interesting Sharks</h3>
            <div role="tablist" aria-labelledby="tablist-1" class="manual">
              <div class="tab-wrapper">
                <button id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-1" aria-actions="tab-1-action">
                  <span class="focus">Nurse shark</span>
                </button>
                <div class="menu-button-actions">
                  <button type="button" id="tab-1-action" tabindex="-1" aria-label="Actions for Nurse shark tab" aria-haspopup="true" aria-expanded="false" aria-controls="menu1">
                    <svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <circle cx="8" cy="13" r="2" fill="black"></circle>
                      <circle cx="8" cy="3" r="2" fill="black"></circle>
                      <circle cx="8" cy="8" r="2" fill="black"></circle>
                    </svg>
                  </button>
                  <ul id="menu1" role="menu" aria-labelledby="tab-1-action">
                    <li role="menuitem" data-action="tab-1-action" data-operation="move-forward">Move tab forward</li>
                    <li role="menuitem" data-action="tab-1-action" data-operation="move-backward">Move tab backward</li>
                    <li role="menuitem" data-action="tab-1-action" data-operation="clipboard-copy">Copy tab contents to clipboard</li>
                    <li role="menuitem" data-action="tab-1-action" data-operation="close">Close tab</li>
                  </ul>
                </div>
              </div>
              <div class="tab-wrapper">
                <button id="tab-2" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-2" tabindex="-1" aria-actions="tab-2-action">
                  <span class="focus">Basking shark</span>
                </button>
                <div class="menu-button-actions">
                  <button type="button" id="tab-2-action" tabindex="-1" aria-label="Actions for Basking shark tab" aria-haspopup="true" aria-expanded="false" aria-controls="menu2">
                    <svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <circle cx="8" cy="13" r="2" fill="black"></circle>
                      <circle cx="8" cy="3" r="2" fill="black"></circle>
                      <circle cx="8" cy="8" r="2" fill="black"></circle>
                    </svg>
                  </button>
                  <ul id="menu2" role="menu" aria-labelledby="tab-2-action">
                    <li role="menuitem" data-action="tab-2-action" data-operation="move-forward">Move tab forward</li>
                    <li role="menuitem" data-action="tab-2-action" data-operation="move-backward">Move tab backward</li>
                    <li role="menuitem" data-action="tab-2-action" data-operation="clipboard-copy">Copy tab contents to clipboard</li>
                    <li role="menuitem" data-action="tab-2-action" data-operation="close">Close tab</li>
                  </ul>
                </div>
              </div>
              <div class="tab-wrapper">
                <button id="tab-3" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-3" tabindex="-1" aria-actions="tab-3-action">
                  <span class="focus">Whale shark</span>
                </button>
                <div class="menu-button-actions">
                  <button type="button" id="tab-3-action" tabindex="-1" aria-label="Actions for Whale shark tab" aria-haspopup="true" aria-expanded="false" aria-controls="menu3">
                    <svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <circle cx="8" cy="13" r="2" fill="black"></circle>
                      <circle cx="8" cy="3" r="2" fill="black"></circle>
                      <circle cx="8" cy="8" r="2" fill="black"></circle>
                    </svg>
                  </button>
                  <ul id="menu3" role="menu" aria-labelledby="tab-3-action">

```

--------------------------------

### Initialize Source Code Display

Source: https://github.com/w3c/wai-aria-practices/blob/main/ARIA/apg/patterns/spinbutton/examples/quantity-spinbutton.md

Initializes the source code display for the spinbutton example using the sourceCode utility.

```javascript
sourceCode.add('sc1', 'example', 'ex_label', 'css_js_files', 'sc1_description');
          sourceCode.make();
```

--------------------------------

### Initialize Source Code Display

Source: https://github.com/w3c/wai-aria-practices/blob/main/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md

Initializes the source code display for the combobox example using the sourceCode utility.

```javascript
sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
sourceCode.make();
```

--------------------------------

### Treegrid Email Inbox Example CSS

Source: https://github.com/w3c/wai-aria-practices/blob/main/ARIA/apg/patterns/treegrid/examples/treegrid-1.md

This CSS file styles the Treegrid Email Inbox example, ensuring visual presentation aligns with ARIA best practices for interactive elements.

```css
/* Styles for the treegrid component */
.treegrid-container {
  /* Container styles */
}

.treegrid-row {
  /* Row styles */
}

.treegrid-cell {
  /* Cell styles */
}
```

--------------------------------

### Initialize source code display

Source: https://github.com/w3c/wai-aria-practices/blob/main/ARIA/apg/patterns/listbox/examples/listbox-scrollable.md

JavaScript used to dynamically inject and display source code examples on the page.

```javascript
sourceCode.add('sc1', 'ex', 'ex_label', 'css_js_files', 'sc1_description');
sourceCode.make();
```

--------------------------------

### Treegrid Email Inbox Example JavaScript

Source: https://github.com/w3c/wai-aria-practices/blob/main/ARIA/apg/patterns/treegrid/examples/treegrid-1.md

This JavaScript file implements the behavior for the Treegrid Email Inbox example, handling keyboard navigation and focus management according to the ARIA Treegrid pattern.

```javascript
const treegridExample = {
  // Example code for treegrid behavior
};

window.addEventListener('load', () => {
  // Initialization logic for the treegrid
});
```

--------------------------------

### HTML Source Code for Radio Button Example

Source: https://github.com/w3c/wai-aria-practices/blob/main/ARIA/apg/patterns/radio/examples/radio-activedescendant.md

This is the HTML structure for the radio button example. It uses ARIA attributes to ensure accessibility. The description notes that the code is best viewed in CodePen.

```html
<!--
  Copyright 2019 Google LLC

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

    https://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<div class="radio-group" role="radiogroup" aria-labelledby="ex1-label">
  <div id="ex1-label" class="label">Choose a fruit:</div>
  <div class="radio" id="ex1-radio1" role="radio" tabindex="-1" aria-checked="false">
    Apples
  </div>
  <div class="radio" id="ex1-radio2" role="radio" tabindex="-1" aria-checked="false">
    Oranges
  </div>
  <div class="radio" id="ex1-radio3" role="radio" tabindex="0" aria-checked="true">
    Bananas
  </div>
</div>
```

--------------------------------

### Mute Toggle Button Example

Source: https://github.com/w3c/wai-aria-practices/blob/main/ARIA/apg/patterns/button/examples/button_idl.md

Demonstrates a 'Mute' toggle button using an anchor (a) element with ARIA 1.2 IDL syntax for attribute reflection. Includes an SVG icon. This example is illustrative and not for production.

```html
<a tabindex="0" id="toggle">
  Mute
  <svg aria-hidden="true" focusable="false">
    <use xlink:href="#icon-sound"></use>
  </svg>
</a>
```

--------------------------------

### Serve Jekyll Site Locally

Source: https://github.com/w3c/wai-aria-practices/blob/main/README.md

Run the Jekyll development server with watch and live reload enabled. Note: -w --livereload may not work on native Windows; use WSL if needed.

```bash
bundle exec jekyll serve -w --livereload
```