### Start Testcase Server Locally

Source: https://github.com/ibma/equal-access/blob/main-4.x/karma-accessibility-checker/README.md

In the karma-accessibility-checker directory, install dependencies and start the testcase server.

```bash
npm install
node RuleServerLocal
```

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

### Start Rule Server Locally

Source: https://github.com/ibma/equal-access/blob/main-4.x/karma-accessibility-checker/README.md

Navigate to the rule-server directory, install dependencies, and start the server to run tests locally.

```bash
cd ../rule-server
npm install
npm start
```

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

### Quick Start: Initialize Checker and Run Check

Source: https://github.com/ibma/equal-access/blob/main-4.x/accessibility-checker-engine/README-NPM.md

Initialize the Checker and perform an accessibility check on the document using the IBM_Accessibility ruleset. This example uses Promises.

```javascript
const checker = new ace.Checker();
const report = await checker.check(document, ["IBM_Accessibility"]);
```

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

### Initial Feature Flag Setup

Source: https://github.com/ibma/equal-access/blob/main-4.x/common/module/test/report/report1_expected.html

Initializes the feature flag system by creating a manager instance and adding predefined flags. This setup ensures that all flags are available and configured at the start of the application.

```javascript
var g = [{
    name: "enable-css-custom-properties",
    description: "Describe what the flag does",
    enabled: v.enableCssCustomProperties
}, {
    name: "enable-use-controlled-state-with-value",
    description: "Enable components to be created in either a controlled or uncontrolled mode\n",
    enabled: v.enableUseControlledStateWithValue
}, {
    name: "enable-css-grid",
    description: "Enable CSS Grid Layout in the Grid and Column React components\n",
    enabled: v.enableCssGrid
}, {
    name: "enable-v11-release",
    description: "Enable the features and functionality for the v11 Release\n",
    enabled: v.enableV11Release
}];

for (var T = M(), C = 0; C < g.length; C++) {
    var H = g[C];
    T.add(H.name, H.enabled)
}
```

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

### Install Dependencies with npm

Source: https://github.com/ibma/equal-access/blob/main-4.x/accessibility-checker/boilerplates/jest/README.md

Run this command to install all project dependencies.

```bash
npm install
```

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

### Start Karma Tests

Source: https://github.com/ibma/equal-access/blob/main-4.x/karma-accessibility-checker/README.md

Run the karma start command to initiate the testing process.

```bash
karma start
```

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

### Install Karma Plugin

Source: https://github.com/ibma/equal-access/blob/main-4.x/karma-accessibility-checker/README.md

Run the installPlugin script to install the packaged files into the local node_modules.

```bash
npm run installPlugin
```

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

### Install accessibility-checker-engine (npm)

Source: https://github.com/ibma/equal-access/blob/main-4.x/accessibility-checker-engine/README-NPM.md

Install the engine as a development dependency in a Node.js environment.

```bash
$ npm install --save-dev accessibility-checker-engine
```

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

### Install vitest-accessibility-checker

Source: https://github.com/ibma/equal-access/blob/main-4.x/vitest-accessibility-checker/src/README.md

Install the accessibility checker package as a development dependency.

```bash
npm install --save-dev vitest-accessibility-checker
```

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

### Install accessibility-checker globally

Source: https://github.com/ibma/equal-access/blob/main-4.x/accessibility-checker/src/README.md

Install the accessibility-checker command-line tool globally using npm for system-wide access.

```bash
$ npm install -g accessibility-checker
```

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

### Run Development Server

Source: https://github.com/ibma/equal-access/blob/main-4.x/vitest-accessibility-checker/boilerplates/vitest/README.md

Start the development server for the React application.

```bash
npm run dev
```

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

### Setup Custom Matcher for Accessibility

Source: https://github.com/ibma/equal-access/blob/main-4.x/vitest-accessibility-checker/src/README.md

Extend Vitest's expect with the toBeAccessible matcher by creating a setup file and referencing it in your vitest config. This provides a cleaner testing syntax.

```javascript
// setupMatchers.js
import { expect } from 'vitest'
import { toBeAccessible } from 'vitest-accessibility-checker/matchers'

expect.extend({
  toBeAccessible
})
```

```javascript
export default defineConfig({
  test: {
    setupFiles: ['./setupMatchers.js'],
    browser: {
      enabled: true,
      name: 'chromium',
      provider: 'playwright'
    }
  }
})
```

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

### Install Playwright Browsers

Source: https://github.com/ibma/equal-access/blob/main-4.x/vitest-accessibility-checker/README.md

Installs the necessary Playwright browsers to resolve 'Executable doesn't exist' errors.

```bash
npx playwright install chromium
```

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

### Install cypress-accessibility-checker

Source: https://github.com/ibma/equal-access/blob/main-4.x/cypress-accessibility-checker/README.md

Install the cypress-accessibility-checker package as a development dependency using npm.

```bash
npm install cypress-accessibility-checker --save-dev
```

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

### HTML Document Write Example

Source: https://github.com/ibma/equal-access/blob/main-4.x/accessibility-checker-engine/test/v2/checker/accessibility/rules/RPT_Media_ImgColorUsage_ruleunit/Color-usage.html

Demonstrates the use of `document.write` to insert content into an HTML document. This is a basic example of dynamic content generation.

```html
document.write("Hello World!")
```

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

### Build All Tools

Source: https://github.com/ibma/equal-access/blob/main-4.x/README.md

Build all tools and components within the repository. Ensure you have run 'npm install' first.

```bash
npm run build
```

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

### Run All Tests

Source: https://github.com/ibma/equal-access/blob/main-4.x/karma-accessibility-checker/README.md

Execute the npm test command to build, install the plugin, and run Karma tests.

```bash
npm test
```

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

### Example Rule Object Implementation

Source: https://github.com/ibma/equal-access/blob/main-4.x/accessibility-checker-engine/README-RULES.md

This example demonstrates the structure of a rule object, including its ID, context, refactoring, help messages, ruleset mappings, and the run function that executes the rule logic. It shows how to return a manual rule result.

```javascript
{
    id: "body_all_trigger",
    context: "dom:body",
    refactor: {
        "OLDID_Trigger": {
            "Manual_0": "manual_always"
        }
    },
    help: {
        "en-US": {
            0: `body_all_trigger.html`,
            "manual_always": `body_all_trigger.html`
        }
    },
    messages: {
        "en-US": {
            "group": "Grouping label for the rule",
            "manual_always": "Check the body element for something"
        }
    },
    rulesets: [{
        id: [ "IBM_Accessibility", "WCAG_2_0", "WCAG_2_1"],
        num: "2.1.1", // num: [ "2.4.4", "x.y.z" ] also allowed
        level: eRulePolicy.RECOMMENDATION,
        toolkitLevel: eToolkitLevel.LEVEL_FOUR
    }],
    act: {},
    run: (context: RuleContext, options?: {}, contextHierarchies?: RuleContextHierarchy): RuleResult | RuleResult[] => {
        const ruleContext = context["dom"].node as Element;
        const domAttrs = context["dom"].attributes;

        return RuleManual("manual_always");
    }
}
```

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

### Install karma-accessibility-checker with npm

Source: https://github.com/ibma/equal-access/blob/main-4.x/karma-accessibility-checker/src/README.md

Install the karma-accessibility-checker plugin as a development dependency using npm.

```sh
npm install --save-dev karma-accessibility-checker
```

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

### Ordered List Example

Source: https://github.com/ibma/equal-access/blob/main-4.x/accessibility-checker-engine/test/v2/checker/accessibility/rules/list_structure_proper_ruleunit/Lists-withLiAndTemplate.html

Demonstrates a basic ordered list structure in HTML.

```html
1.  text 1
2.  text 2
3.  text 3
```

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

### Screen Reader Simulation Test Example

Source: https://github.com/ibma/equal-access/blob/main-4.x/accessibility-checker/boilerplates/jest-puppeteer-ts/README.md

This example demonstrates using the experimental `getSimulation` API to test screen reader output. It allows for regression testing of the screen reader experience.

```typescript
import { getSimulation } from "accessibility-checker";

test('SR simulation has not regressed', async() => {
    const simulation = await getSimulation(page, 'test_name');
    expect(simulation).toEqual([
        { "region": "", "heading": "", "item": "[Start of document: ..."", ... },
        // ... more simulation output
    ]);
})
```

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

### Example 2: Flexbox links with min-height/min-width

Source: https://github.com/ibma/equal-access/blob/main-4.x/accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/w3c_pass_example.html

This example utilizes `display: flex` for the pagination menu and applies `min-height` and `min-width` directly to the anchor tags (links). This approach ensures the targets meet the minimum size requirements for WCAG 2.5.5 Target Size (AAA).

```css
ol.pagination-2 {
  display:flex;
  flex-wrap: wrap;
}

ol.pagination-2 a{
  display: block;
  line-height:44px;
  text-align: center;
  min-height:44px;
  min-width: 44px;
  padding: 0 0.2em;
}

ol.pagination-2 li {
  color:black;
  background-color:#fed;
  margin:0.1rem;
}
```

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

### Run Cypress Interactive

Source: https://github.com/ibma/equal-access/blob/main-4.x/cypress-accessibility-checker/boilerplates/README.md

Start the HTTP server and open Cypress in interactive mode for development and debugging.

```bash
npm run test-start-http

# Open Cypress
npm run cypress:open
```

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

### Unordered List Example

Source: https://github.com/ibma/equal-access/blob/main-4.x/accessibility-checker-engine/test/v2/checker/accessibility/rules/list_structure_proper_ruleunit/Lists-withLiAndTemplate.html

Demonstrates a basic unordered list structure in HTML.

```html
Unordered List table { border: solid gray 1px; width: 100% }
td, th { border-style: inset; border-width: 1px; padding: 10px; }

#### An Unordered List:

*   text 1
*   text 2
*   text 3
```

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

### Run Vitest Tests in Test Directory

Source: https://github.com/ibma/equal-access/blob/main-4.x/vitest-accessibility-checker/README.md

Navigates to the test directory, installs dependencies, and runs Vitest tests.

```bash
cd test
npm install
npx vitest run
```

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

### ARIA 1.2 Combobox Pattern Example

Source: https://github.com/ibma/equal-access/blob/main-4.x/accessibility-checker-engine/help-v4/en-US/combobox_haspopup_valid.html

This example demonstrates the recommended ARIA 1.2 combobox pattern, including label, input with appropriate ARIA attributes, and a listbox with options.

```html
<label for="tag_combo">Tag</label>
<input type="text" id="tag_combo" role="combobox" aria-autocomplete="list" aria-haspopup="listbox" aria-expanded="true" aria-controls="popup_listbox" aria-activedescendant="selected_option">
<ul role="listbox" id="popup_listbox">
  <li role="option">Zebra</li>
  <li role="option" id="selected_option">Zoom</li>
</ul>
```

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

### Run accessibility-checker command-line tool

Source: https://github.com/ibma/equal-access/blob/main-4.x/accessibility-checker/src/README.md

Execute the accessibility-checker command-line tool after it has been globally installed.

```bash
$ achecker
```

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

### Example 1: Inline-block list items with min-height/min-width

Source: https://github.com/ibma/equal-access/blob/main-4.x/accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/w3c_pass_example.html

This example uses `display: inline-block` on list items within a pagination menu. `min-height` and `min-width` are applied to the list items to ensure sufficient spacing around the links, even if the links themselves are smaller.

```css
ol.pagination-1 li {
  display: inline-block;
  min-width: 44px;
  min-height: 44px;
  text-align: center;
  color:black;
  background-color:#fed;
  /* just to indicate the target spacing area adjacent to the heading below */
}

ol.pagination-1 li a {
  display: block;
  margin: 12px;
  padding:4px 8px;
}

a:hover, a:focus {
  outline: 3px solid #c04;
}
```

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

### Skip to main content example

Source: https://github.com/ibma/equal-access/blob/main-4.x/accessibility-checker-engine/help-v4/en-US/element_tabbable_visible.html

This example demonstrates how to use CSS positioning to make a 'skip to main content' link visible when it receives keyboard focus. It uses absolute positioning to hide the element off-screen and then reveals it when focused.

```html
<style>
  .skip {
    position: absolute;
    background-color: white;
    padding: 0.5rem;
    left: -1000px;
  }
  .skip:focus {
    left: 1rem;
  }
</style>
<a class="skip" href="#main">Skip to main content</a>
```

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

### CSS Background Property Example

Source: https://github.com/ibma/equal-access/blob/main-4.x/accessibility-checker-engine/test/v2/checker/accessibility/rules/RPT_Style_ExternalStyleSheet_ruleunit/CSS-styleBackground.html

Demonstrates the syntax for defining a background property with an image, color, and positioning in CSS.

```css
background: url("/pix/smile.gif") #ff9900 90% 30% no-repeat fixed;
```

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

### Run Boilerplate Browser Tests

Source: https://github.com/ibma/equal-access/blob/main-4.x/vitest-accessibility-checker/README.md

Navigates to the boilerplate Vitest directory, installs dependencies, and runs browser tests.

```bash
cd boilerplates/vitest
npm install
npm run test:browser
```

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

### Package for NPM

Source: https://github.com/ibma/equal-access/blob/main-4.x/cypress-accessibility-checker/README.md

Scripts to package the plugin for distribution via NPM. Run these after installing dependencies.

```bash
npm install
npm run package:npm  or  npm run package:zip
```

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

### License Header Example (Apache 2.0)

Source: https://github.com/ibma/equal-access/blob/main-4.x/CONTRIBUTING.md

Include this license header at the beginning of each source file using the SPDX format.

```text
/*
Copyright <holder> All Rights Reserved.

SPDX-License-Identifier: Apache-2.0
*/
```

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

### Get Property Names and Symbols of an Object

Source: https://github.com/ibma/equal-access/blob/main-4.x/common/module/test/report/report2_expected.html

Gets the own enumerable property names and symbols of `object`.

```javascript
function Ne(e,t){for(var n=0,r=(t=qe(t,e)?[t]:De(t)).length;null!=e&&n<r;)e=e[Ge(t[n++])];return n&&n==r?e:void 0}
```

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

### Get Property Names and Symbols of an Object

Source: https://github.com/ibma/equal-access/blob/main-4.x/common/module/test/report/report2_expected.html

Gets the own enumerable property names and symbols of `object`.

```javascript
function Ne(e,t){for(var n=e.length;n--;)if(nt(e[n][0],t))return n;return-1}
```

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

### Build and Package Project

Source: https://github.com/ibma/equal-access/blob/main-4.x/vitest-accessibility-checker/README.md

Builds the common project and packages it for distribution.

```bash
$ npm install
$ npm run build:common
$ npm run package
```

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

### Get Property Names and Symbols of an Object

Source: https://github.com/ibma/equal-access/blob/main-4.x/common/module/test/report/report2_expected.html

Gets the own enumerable property names and symbols of `object`.

```javascript
function fe(e){var t=-1,n=Array(e.size);return e.forEach((function(e,r){n[++t]=[r,e]})),n}
```

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

### Deploy Artifacts with Maven

Source: https://github.com/ibma/equal-access/blob/main-4.x/java-accessibility-checker/README-DEV.md

Clean the project, deploy artifacts, and sign with a GPG passphrase. Ensure your settings.xml is configured for deployment.

```bash
mvn -s ./settings.xml clean deploy -Dgpg.passphrase=yourpassphrase
```

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

### Get Own Enumerable String-Coded Property Names

Source: https://github.com/ibma/equal-access/blob/main-4.x/common/module/test/report/report2_expected.html

Gets the own enumerable string-coded property names of `object`.

```javascript
function Ne(e,t){for(var n=-1,r=e?e.length:0;++n<r;)if(t(e[n],n,e))return!0;return!1}
```

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

### Build and Package Project

Source: https://github.com/ibma/equal-access/blob/main-4.x/accessibility-checker/README.md

Builds the project and packages it for distribution. Supports both zip and npm package formats.

```bash
$ npm install
$ npm run build
$ npm run package:zip  or  npm run package:npm
```

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

### Install accessibility-checker via npm

Source: https://github.com/ibma/equal-access/blob/main-4.x/accessibility-checker/src/README.md

Install the accessibility-checker module as a development dependency in your project using npm.

```bash
$ npm install --save-dev accessibility-checker
```

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

### Install XLSX Report Dependency

Source: https://github.com/ibma/equal-access/blob/main-4.x/accessibility-checker/README.md

Installs the 'exceljs' package to enable XLSX report generation. This is an optional step.

```bash
$ npm install exceljs
```

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

### HTML Table Example

Source: https://github.com/ibma/equal-access/blob/main-4.x/accessibility-checker-engine/test/v2/checker/accessibility/rules/table_structure_misuse_ruleunit/Table-layoutMultiple2.html.txt

An example of an HTML table used for testing accessibility rules. It contains headers and data rows.

```html
<table>
	<tr>
		<th scope="col">Class</th>
		<th scope="col"># of Boys</th>
		<th scope="col"># of Girls</th>
	</tr>
	<tr>
		<td scope="col">1st Grade</td>
		<td scope="col">11</td>
		<td scope="col">10</td>
	</tr>

	<tr>
		<td>2nd Grade</td>
		<td>7</td>
		<td>12</td>
	</tr>

	<tr>
		<td>3rd Grade</td>
		<td>12</td>
		<td>14</td>
	</tr>

</table>
```

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

### Scheduler Initialization and Fallbacks

Source: https://github.com/ibma/equal-access/blob/main-4.x/common/module/test/report/report2_expected.html

Initializes the scheduler with fallbacks for environments lacking MessageChannel. Sets up timers and frame rate control.

```javascript
if("undefined"===typeof window||"function"!==typeof MessageChannel){var i=null,c=null,u=function e(){if(null!==i)try{var n=t.unstable_now();i(!0,n),i=null}catch(r){throw setTimeout(e,0),r}},s=Date.now();t.unstable_now=function(){return Date.now()-s},n=function(e){null!==i?setTimeout(n,0,e):(i=e,setTimeout(u,0))},r=function(e,t){c=setTimeout(e,t)},o=function(){clearTimeout(c)},l=function(){return!1},a=t.unstable_forceFrameRate=function(){}}
```

```javascript
else{var f=window.performance,d=window.Date,p=window.setTimeout,h=window.clearTimeout;if("undefined"!==typeof console){var m=window.cancelAnimationFrame;"function"!==typeof window.requestAnimationFrame&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"),"function"!==typeof m&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills")}
if("object"===typeof f&&"function"===typeof f.now)t.unstable_now=function(){return f.now()};else{var v=d.now();t.unstable_now=function(){return d.now()-v}}
var g=!1,w=null,y=-1,b=5,x=0;
l=function(){return t.unstable_now()>=x},a=function(){},t.unstable_forceFrameRate=function(e){0>e||125<e?console.error("forceFrameRate takes a positive int between 0 and 125, forcing framerates higher than 125 fps is not unsupported"):b=0<e?Math.floor(1e3/e):5};
var E=new MessageChannel,T=E.port2;E.port1.onmessage=function(){if(null!==w){var e=t.unstable_now();x=e+b;try{w(!0,e)?T.postMessage(null):(g=!1,w=null)}catch(n){throw T.postMessage(null),n}}else g=!1},n=function(e){w=e,g||(g=!0,T.postMessage(null))},r=function(e,n){y=p((function(){e(t.unstable_now())}),n)},o=function(){h(y),y=-1}}function C(e,t){var n=e.length;e.push(t);e:for(;;){var r=n-1>>>1,o=e[r];if(!(void 0!==o&&0<k(o,t)))break e;e[r]=t,e[n]=o,n=r}}function H(e){return void 0===(e=e[0])?null:e}function M(e){var t=e[0];if(void 0!==t){var n=e.pop();if(n!==t){e[0]=n;e:for(var r=0,o=e.length;r<o;){var l=2*(r+1)-1,a=e[l],i=l+1,c=e[i];if(void 0!==a&&0>k(a,n))void 0!==c&&0>k(c,a)?(e[r]=c,e[i]=n,r=i):(e[r]=a,e[l]=n,r=l);else{if(!(void 0!==c&&0>k(c,n)))break e;e[r]=c,e[i]=n,r=i}}}return t}return null}function k(e,t){var n=e.sortIndex-t.sortIndex;return 0!==n?n:e.id-t.id}var z=[],V=[],S=1,_=null,O=3,N=!1,A=!1,R=!1;function P(e){for(var t=H(V);null!==t;){if(null===t.callback)M(V);else{if(!(t.startTime<=e))break;M(V),t.sortIndex=t.expirationTime,C(z,t)}t=H(V)}}function L(e){if(R=!1,P(e),!A)if(null!==H(z))A=!0,n(j);else{var t=H(V);null!==t&&r(L,t.startTime-e)}}function j(e,n){A=!1,R&&(R=!1,o()),N=!0;var a=O;try{for(P(n),_=H(z);null!==_&&(!(_.expirationTime>n)||e&&!l());){var i=_.callback;if(null!==i){_.callback=null,O=_.priorityLevel;var c=i(_.expirationTime<=n);n=t.unstable_now(),
```

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

### Redundant ARIA Role Example

Source: https://github.com/ibma/equal-access/blob/main-4.x/accessibility-checker-engine/help-v4/en-US/aria_role_redundant.html

This example shows HTML elements with explicit ARIA roles that are redundant with their implicit roles. These should be removed to improve accessibility.

```html
<button type="button" role="button">Save</button>
<input type="button" role="button" value="Save">
```

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

### Example of Correct ARIA Attribute Usage

Source: https://github.com/ibma/equal-access/blob/main-4.x/accessibility-checker-engine/help-v4/en-US/aria_attribute_conflict.html

This example demonstrates the correct usage of an ARIA attribute (`aria-required`) on an input element, avoiding conflict with a native HTML attribute.

```html
<label for="phone">
  * Phone number:
</label>
<input type="text" id="phone" name="phone" aria-required="true">
```

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

### Example Meta Refresh Tag

Source: https://github.com/ibma/equal-access/blob/main-4.x/rule-server/src/static/archives/2026.05.19/doc/en-US/meta_refresh_delay.html

This is an example of a meta refresh tag that causes a page to automatically reload after a specified delay. It is important to remove or modify such tags to ensure accessibility.

```html
<META HTTP-EQUIV="Refresh" CONTENT="10">
```

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

### Member-Scope Locking Lockout Report Example

Source: https://github.com/ibma/equal-access/blob/main-4.x/accessibility-checker-engine/test/v2/checker/accessibility/rules/text_whitespace_valid_ruleunit/computerOutput.html

This is an example of a member-scope Locking Lockout report for group DSHGRPXX, showing locking activity for member FIRST. The report is paginated by member.

```text
       LOCATION: SYDNEY                      OMEGAMON XE for DB2 Performance Expert (V5R1M1)                PAGE: 1-1
          GROUP: DSHGRPXX                                                                         REQUESTED FROM: NOT SPECIFIED
         MEMBER: FIRST                                 LOCKING REPORT - LOCKOUT                               TO: NOT SPECIFIED
      SUBSYSTEM: DB22                                   ORDER: DATABASE-PAGESET                      ACTUAL FROM: 05/15/08 12:15:00.21
    DB2 VERSION: V8                                           SCOPE: MEMBER                                   TO: 05/15/08 13:27:56.09
    
    DATABASE           --- L O C K   R E S O U R C E ---                     --------------- A G E N T S ----------------  BLOCKER/
     PAGESET           TYPE      NAME                    TIMEOUTS DEADLOCKS  MEMBER   PLANNAME CONNECT  CORRNAME CORRNMBR  HOLDER WAITER
    ------------------ --------- ----------------------- -------- ---------  -------- -------- -------- -------- --------  ------ ------
    DBASE9             ROW       PAGE=X'000021'                 0         3  FIRST    D3APP01  BATCH    RUNPR01  'BLANK'        2      1
     TSPACEXX                    ROW =X'03'                                  SECOND   D3APPBB  BATCH    RUNPRBB  'BLANK'        1      1
                                                                             SECOND   D3APPDD  BATCH    RUNPRDD  'BLANK'        0      2
                       INDEXPAGE PAGE=X'002393'                 0         1  FIRST    D3APP02  BATCH    RUNPR02  'BLANK'        0      1
                                 SUBP=X'01'
    
                       ** LOCKOUTS FOR TSPACEXX       **        0         4
    
    ** TOTAL - DBASE9 **                                        0         4
    
    DBASE10
     TSPACEZZ          DATAPAGE  PAGE=X'000055'                 0         3  FIRST    D3APP03  BATCH    RUNPR03   'BLANK'       2      1
                                                                             FIRST    D3APP05  BATCH    RUNPR05   'BLANK'       0      3
                       ** LOCKOUTS FOR TSPACEZZ       **        0         3
    
    ** GRAND TOTAL **                                           0         7
    
```

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

### Run Tests

Source: https://github.com/ibma/equal-access/blob/main-4.x/accessibility-checker/README.md

Executes the project's test suite using npm.

```bash
$ npm test
```

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

### Build ace.js for Browser Environment

Source: https://github.com/ibma/equal-access/blob/main-4.x/accessibility-checker-engine/README.md

Installs dependencies and builds the ace.js file for use in a browser. The output is located in the dist directory.

```bash
$ cd accessibility-checker-engine
$ npm install
$ npm run build
```

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

### ARIA Role Assignment Examples

Source: https://github.com/ibma/equal-access/blob/main-4.x/accessibility-checker-engine/test/v2/checker/accessibility/rules/aria_role_allowed_ruleunit/invalidAriaRole2.txt

Demonstrates various ARIA role assignments within HTML elements. These examples are used to test the 'aria_role_allowed' rule, highlighting valid and invalid configurations.

```html
<div id="id0" role="alertMessage">
This is an error message.
</div>
```

```html
<div id="id1" role="" aria-label="labelID">
</div>
```

```html
<div id="id2" role="  " aria-label="labelID">
</div>
```

```html
<div id="id3" role="tree nav" aria-label="labelID">
</div>
```

```html
<div id="id4" role="nav tree" aria-label="labelID">
</div>
```

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

### Example of a tabbable iframe

Source: https://github.com/ibma/equal-access/blob/main-4.x/accessibility-checker-engine/help-v4/en-US/iframe_interactive_tabbable.html

This example demonstrates how to make an iframe tabbable by setting its tabindex attribute to '0'. This ensures that interactive elements within the iframe are included in the keyboard tab order.

```html
<iframe title="Inline example" srcdoc="<a href="http://xyz">link text</a>" tabindex="0" />
```

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

### Build Deployment Package

Source: https://github.com/ibma/equal-access/blob/main-4.x/accessibility-checker-extension/README.md

Cleans all previous builds, installs dependencies, and packages the extension for Chrome and Firefox deployment. Generates a zip file in the 'package' directory.

```bash
npm run clean:all
npm install
npm run package:browser
```

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

### Accessible Name Examples

Source: https://github.com/ibma/equal-access/blob/main-4.x/rule-server/src/static/archives/2026.05.19/doc/en-US/label_name_visible.html

Provides examples of how to set the accessible name using the 'aria-label' attribute to match or contain the visible label text. This is useful for ensuring proper navigation for speech-input users.

```html
<button name="pageLink" aria-label="Next Page in the list">Next Page</button>
<label for="test2">License Number:</label>
<input type="text" id="test2" aria-label="enter driver license number"/>
<button name="lastPageLink" aria-label="last page">Last Page</button>
```

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

### Unique Accesskey Attribute Example

Source: https://github.com/ibma/equal-access/blob/main-4.x/rule-server/src/static/archives/2026.05.19/doc/en-US/element_accesskey_unique.html

Update the 'accesskey' attribute on elements with unique, non-empty values to ensure proper keyboard navigation. This example shows two buttons with distinct access keys.

```html
<button type="button" name="testButton1" id="button1" accesskey="a">Accept</button>
<button type="button" name="testButton2" id="button2" accesskey="r">Reject</button>
```

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

### Scrollable Text Block Example

Source: https://github.com/ibma/equal-access/blob/main-4.x/rule-server/src/static/archives/2026.05.19/doc/en-US/element_tabbable_role_valid.html

This example demonstrates how to make a block of text focusable for scrolling using CSS 'overflow: scroll'. Ensure the element is tabbable via 'tabindex="0"'.

```html
<style>
  div.scroll {
    width: 200px;
    height: 100px;
    border: 2px solid black;
    overflow: scroll;
  }
</style>

...

<div class="scroll" tabindex="0">You can use the CSS overflow property when you want to have better control of the layout. The overflow property specifies horizontal and vertical scroll bars operable with arrow keys if content overflows an element's box.</div>
```

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

### Example of Linking Audio with Transcript

Source: https://github.com/ibma/equal-access/blob/main-4.x/rule-server/src/static/archives/2026.05.19/doc/en-US/media_audio_transcribed.html

Demonstrates how to link an audio file with its corresponding transcript using HTML anchor tags. This pattern is useful for providing alternative text access to audio content.

```html
Jeremy Flint's <a href="bc30.wav">podcast on disability rights</a> and <a href="bc30.txt">transcript</a>
```

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

### CSS Hover Display Example

Source: https://github.com/ibma/equal-access/blob/main-4.x/rule-server/src/static/archives/2026.05.19/doc/en-US/style_hover_persistent.html

This example demonstrates how to use CSS to display content when a user hovers over a trigger element. Ensure the displayed content is a child or adjacent sibling of the trigger and remains visible when the pointer moves.

```html
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.toggledText {
  background-color: yellow;
  padding: 20px;
  display: none;
}
.hoverTarget:hover .toggledText {
  display: block;
}
</style>
</head>
<body>
<div class="hoverTarget">Hover over me2! <div class="toggledText">I will show on hover</div>
</div>
</body>
</html>
```

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

### Radio Group Example Using aria-activedescendant

Source: https://github.com/ibma/equal-access/blob/main-4.x/rule-server/src/static/archives/2026.05.19/doc/en-US/aria_activedescendant_valid.html

This example demonstrates a radio group component where aria-activedescendant is used to indicate the currently active radio button. It shows how to structure the HTML with ARIA roles and attributes for proper accessibility.

```html
<h3 id="group_label_1">Pizza Crust</h3>
<ul id="rg1" class="radiogroup" role="radiogroup" aria-labelledby="group_label_1" aria-activedescendant="rb11" tabindex="0">
  <li id="rb11" role="radio" aria-checked="false">Regular crust</li>
  <li id="rb12" role="radio" aria-checked="false">Deep dish</li>
  <li id="rb13" role="radio" aria-checked="false">Thin crust</li>
</ul>
```