🧪 Chapter 45: Accessibility Auditing, Testing & Compliance

Screen Reader Testing with JAWS

**Enterprise Assistive Technology Auditing, the Virtual PC Cursor, Forms Mode, and 2D Table Navigation**

LEARNING OBJECTIVES ⌵

Understand the enterprise prominence and architectural mechanics of JAWS (Job Access With Speech) by Freedom Scientific.
Master the operational dynamics of the Virtual PC Cursor versus Forms Mode.
Execute single-key navigation audits using JAWS Quick Keys (H, T, F, B, R, G).
Perform advanced 2D data table navigation using Alt + Control + Arrow Keys.
Utilize JAWS dialogue lists (Insert + F5, Insert + F6, Insert + F7) to audit enterprise compliance.

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story (Intuitive Foundation)

In Fortune 500 enterprises, banking institutions, healthcare networks, and government agencies, JAWS (Job Access With Speech) is the gold standard screen reader. Introduced in 1989 by Ted Henter and developed by Freedom Scientific, JAWS is a sophisticated, feature-dense assistive workstation engine.

+-------------------------------------------------------------------------------+
|                            JAWS CURSOR ARCHITECTURE                           |
+-------------------------------------------------------------------------------+
|                                                                               |
|   1. VIRTUAL PC CURSOR (Web & Document Navigation)                            |
|      - Creates a linearized textual representation of the browser DOM.        |
|      - Allows non-sighted users to read non-focusable static text, headings,  |
|        paragraphs, and data tables with standard reading keys.                |
|                                                                               |
|   2. FORMS MODE (Input & Interaction)                                         |
|      - Automatically engages when the Virtual Cursor encounters an input,     |
|        textarea, select box, or custom ARIA widget.                           |
|      - Unlocks direct keyboard entry into the active DOM element.             |
|                                                                               |
|   3. JAWS CURSOR (System Pointer Mirror)                                      |
|      - Direct programmatic mouse cursor emulation for legacy windows.         |
|                                                                               |
+-------------------------------------------------------------------------------+

Because JAWS is widely deployed in professional workplace environments where Section 508 and ADA Title III compliance are legally enforced, your web applications must undergo rigorous verification against the Virtual PC Cursor and Forms Mode state machines.

Technical Deep Dive & Specifications

The JAWS Modifier Key

The JAWS Key is the primary control key:

Desktop Layout: Insert key (on the primary keyboard cluster or numeric keypad).
Laptop Layout: Caps Lock key.

Virtual PC Cursor vs Forms Mode

                               +-----------------------------+
                               |     JAWS Operational State  |
                               +-----------------------------+
                                              |
               +------------------------------+------------------------------+
               |                                                             |
               v                                                             v
    [ VIRTUAL PC CURSOR ]                                             [ FORMS MODE ]
- Active on static content & text.                              - Active inside inputs, comboboxes.
- Quick navigation keys active (H, T, F).                       - All keys type into web inputs.
- Enter on form control enters Forms Mode.                      - Escape exits to Virtual PC Cursor.
               |                                                             |
               +-------------> Auto-Switches on Focus <----------------------+

Feature	Virtual PC Cursor	Forms Mode (Auto & Manual)
Primary Function	Reading, navigating layout structure	Typing characters, selecting radio buttons/options
Quick Keys (`H`, `F`, `T`)	Active (jumps between semantic elements)	Inactive (types characters into input fields)
Audio Notification	Low-tone 'pop' sound upon exit	High-tone 'chirp' sound upon entry
Manual Activation	Press `Numpad Plus` or `Escape`	Press `Enter` on an edit box / control

JAWS Navigation Quick Keys (Virtual PC Cursor)

When reading web pages in the Virtual PC Cursor, single-letter Quick Keys provide immediate navigation:

Key	Navigation Target	Audit Inspection Focus
`H` / `Shift + H`	Next / Previous Heading	Validates document outline and heading depth (`1`–`6`).
`T`	Next Table	Audits data grids and financial tables.
`F`	Next Form Field	Jumps through textboxes, checkboxes, and buttons.
`B`	Next Button	Verifies `<button>` and `role="button"` elements.
`R`	Next Region / Landmark	Audits `<main>`, `<nav>`, `<header>`, `<footer>`, `<aside>`.
`G`	Next Graphic	Validates image `alt` text quality.
`C`	Next Combo Box	Checks `<select>` dropdowns and ARIA comboboxes.
`A`	Next Radio Button	Checks `<input type="radio">` grouping and legends.
`V` / `U`	Next Visited / Unvisited Link	Verifies hyperlink states and accessible names.

Advanced 2D Table Navigation in JAWS

JAWS provides an industry-leading 2D table navigation model. When the Virtual PC Cursor is inside a <table>, auditors use the following key combinations:

                  +-----------------------------------------------------+
                  |   JAWS Table Navigation: [ Alt ] + [ Control ]      |
                  +-----------------------------------------------------+
                                            |
        +-------------------+---------------+-------------------+-------------------+
        |                   |                                   |                   |
        v                   v                                   v                   v
[ + Up Arrow ]      [ + Down Arrow ]                    [ + Left Arrow ]    [ + Right Arrow ]
Move Cell Above     Move Cell Below                     Move Cell Left      Move Cell Right

Alt + Control + Numpad 5: Speaks current cell coordinates along with both row and column headers.
Alt + Control + Home: Jump to the first cell of the current table.
Alt + Control + End: Jump to the last cell of the current table.

JAWS Modal Inspector Dialogs

Auditors can pull up complete document indices using built-in JAWS dialog shortcuts:

Shortcut	Dialog Window	Purpose
`Insert + F6`	Headings List	Lists all headings hierarchically (`H1`–`H6`).
`Insert + F7`	Links List	Lists all links; allows sorting by alphabetical order or URL.
`Insert + F5`	Form Fields List	Lists all inputs, buttons, checkboxes with their associated labels.
`Insert + Control + R`	Regions / Landmarks List	Lists all structural ARIA landmarks.

Auditing Without an Enterprise License: JAWS 40-Minute Demo Mode

Freedom Scientific allows developers to download the full version of JAWS and run it in 40-Minute Demo Mode. Once the 40-minute timer expires, a simple system reboot resets the timer, providing an enterprise-grade testing environment at zero software cost.

💻 Interactive Code Playground

Enterprise Payroll & Compensation Form

The snippet below demonstrates a fully accessible enterprise form and multi-column compensation table engineered to satisfy JAWS Virtual Cursor and Forms Mode auditing.

Line-by-Line Code Breakdown

Lines 23–36: The <fieldset> and <legend> structure is essential for JAWS. When an employee tabs into the radio buttons, JAWS announces both the group context ("Filing Status Selection, group") and the individual radio label ("Single or Married Filing Separately, radio button checked 1 of 3").
Lines 38–49: The <input type="number"> uses aria-describedby="allowance-hint". In Forms Mode, JAWS automatically speaks the input label, followed by the description hint string ("Enter 0 if no qualifying dependents...").
Lines 57–80: The <table> leverages explicit scope="col" and scope="row". When navigating cells with Alt + Control + Right Arrow, JAWS speaks the column header and cell amount: "Tax Deductions: $1,120.00".

Expected JAWS Spoken Transcript

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Enterprise Payroll Management</title>
  <style>
    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; padding: 24px; line-height: 1.5; }
    fieldset { border: 1px solid #94a3b8; border-radius: 6px; padding: 16px; margin-bottom: 20px; }
    legend { font-weight: bold; padding: 0 6px; color: #0f172a; }
    .form-group { margin-bottom: 12px; }
    table { width: 100%; border-collapse: collapse; margin-top: 16px; }
    th, td { border: 1px solid #cbd5e1; padding: 10px; text-align: left; }
    th { background: #f1f5f9; }
  </style>
</head>
<body>

<header>
    <h1>Enterprise Human Resources Portal</h1>
  </header>

<main>
    
    <section aria-labelledby="payroll-config-title">
      <h2 id="payroll-config-title">Employee Tax Withholding Configuration</h2>

<form action="/update-tax" method="POST">
        <fieldset>
          <legend>Filing Status Selection</legend>
          <div class="form-group">
            <input type="radio" id="status-single" name="filingStatus" value="single" checked>
            <label for="status-single">Single or Married Filing Separately</label>
          </div>
          <div class="form-group">
            <input type="radio" id="status-joint" name="filingStatus" value="joint">
            <label for="status-joint">Married Filing Jointly</label>
          </div>
          <div class="form-group">
            <input type="radio" id="status-head" name="filingStatus" value="head">
            <label for="status-head">Head of Household</label>
          </div>
        </fieldset>

<div class="form-group">
          <label for="allowance-count">Claimed Dependents (Allowances):</label>
          <input 
            type="number" 
            id="allowance-count" 
            name="allowances" 
            min="0" 
            max="10" 
            value="0" 
            aria-describedby="allowance-hint"
          />
          <small id="allowance-hint" style="display: block; color: #475569;">
            Enter 0 if no qualifying dependents reside at your primary address.
          </small>
        </div>

<button type="submit">Save Withholding Preferences</button>
      </form>
    </section>

<section aria-labelledby="payroll-history-title" style="margin-top: 32px;">
      <h2 id="payroll-history-title">Recent Paystub Summaries</h2>

<table>
        <caption>Historical Earnings and Deductions (2026 Fiscal Year)</caption>
        <thead>
          <tr>
            <th scope="col">Pay Period Ending</th>
            <th scope="col">Gross Wages</th>
            <th scope="col">Tax Deductions</th>
            <th scope="col">Net Pay Deposited</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">Feb 15, 2026</th>
            <td>$4,800.00</td>
            <td>$1,120.00</td>
            <td>$3,680.00</td>
          </tr>
          <tr>
            <th scope="row">Jan 31, 2026</th>
            <td>$4,800.00</td>
            <td>$1,120.00</td>
            <td>$3,680.00</td>
          </tr>
        </tbody>
      </table>
    </section>
  </main>

<footer>
    <p>&copy; 2026 Enterprise Global Payroll Systems. All rights reserved.</p>
  </footer>

</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

Enterprise Human Resources Portal  Heading Level 1
Employee Tax Withholding Configuration  Heading Level 2
Filing Status Selection  Group  Single or Married Filing Separately  Radio button checked  1 of 3
Claimed Dependents (Allowances):  Edit  0
Enter 0 if no qualifying dependents reside at your primary address.
Historical Earnings and Deductions (2026 Fiscal Year)  Table with 4 columns and 3 rows.
[Table Nav: Alt + Control + Right]
Gross Wages: $4,800.00  Column 2, Row 2
[Table Nav: Alt + Control + Right]
Tax Deductions: $1,120.00  Column 3, Row 2

🏋️ Hands-On Exercise

🎯 The Challenge: Fix the Broken Enterprise Expense Dashboard

An internal enterprise expense tool has failed a third-party JAWS accessibility audit.

Radio Group without Grouping: 3 radio buttons for "Expense Category" sit in raw <div> tags without a <fieldset> or <legend>, causing JAWS to read options without indicating what category they belong to.
Missing aria-describedby: An input requires a strict currency format (USD 00.00), but the format hint is not linked to the input.
Table Lacking Scope & Caption: The table uses non-scoped <td> tags for headers, causing Alt + Control + Arrow table navigation to fail.

🏁 Starter Code Sandbox

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

STARTER CODE SANDBOX exercise.html

<section class="expense-panel">
  <h2>Submit Travel Expense</h2>

<form id="expense-form">
    
    <div>
      <p>Expense Category:</p>
      <input type="radio" name="cat" id="cat-air" value="air" checked> Airfare
      <input type="radio" name="cat" id="cat-hotel" value="hotel"> Lodging
      <input type="radio" name="cat" id="cat-meals" value="meals"> Meals
    </div>

<div style="margin-top: 16px;">
      <label for="amount">Total Expense Amount:</label>
      <input type="text" id="amount" placeholder="150.00" />
      <span class="hint">Format must be numeric without currency symbols (e.g. 150.00)</span>
    </div>

<button type="submit">Submit Expense</button>
  </form>

<table border="1" style="margin-top: 24px;">
    <tr>
      <td>Report ID</td>
      <td>Description</td>
      <td>Amount</td>
    </tr>
    <tr>
      <td>EXP-889</td>
      <td>Client Dinner</td>
      <td>$210.50</td>
    </tr>
  </table>
</section>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<section class="expense-panel">
  <h2>Submit Travel Expense</h2>

  <form id="expense-form">
    <!-- Fix 1: Accessible Fieldset & Legend for Radio Group -->
    <fieldset>
      <legend>Expense Category</legend>
      <div>
        <input type="radio" name="cat" id="cat-air" value="air" checked>
        <label for="cat-air">Airfare</label>
      </div>
      <div>
        <input type="radio" name="cat" id="cat-hotel" value="hotel">
        <label for="cat-hotel">Lodging</label>
      </div>
      <div>
        <input type="radio" name="cat" id="cat-meals" value="meals">
        <label for="cat-meals">Meals</label>
      </div>
    </fieldset>

    <!-- Fix 2: Linked Accessible Description Hint -->
    <div style="margin-top: 16px;">
      <label for="amount">Total Expense Amount:</label>
      <input 
        type="text" 
        id="amount" 
        name="amount" 
        placeholder="150.00" 
        aria-describedby="amount-format-hint"
        required 
      />
      <span id="amount-format-hint" class="hint" style="display: block; color: #475569; font-size: 13px;">
        Format must be numeric without currency symbols (e.g. 150.00)
      </span>
    </div>

    <button type="submit" style="margin-top: 16px;">Submit Expense</button>
  </form>

  <!-- Fix 3: Standard Compliant Data Table with Caption & Headers -->
  <table border="1" style="margin-top: 24px; border-collapse: collapse; width: 100%;">
    <caption>Pending Expense Claims</caption>
    <thead>
      <tr>
        <th scope="col">Report ID</th>
        <th scope="col">Description</th>
        <th scope="col">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">EXP-889</th>
        <td>Client Dinner</td>
        <td>$210.50</td>
      </tr>
    </tbody>
  </table>
</section>

Why this works:

JAWS announces the <legend> whenever focus enters any radio button in the group, ensuring users never lose context.
aria-describedby guarantees that JAWS reads the format instructions immediately when entering Forms Mode on the #amount text field.
<caption> and <th scope="col/row"> enable JAWS 2D table traversal (Alt + Control + Arrow keys) to announce coordinate relationships accurately.

⚠️ Common Pitfalls

The JAWS "Smart Heuristics" Trap: JAWS is notoriously lenient with broken markup; it will often attempt to guess an unassociated label from nearby text. Relying solely on JAWS can lead to false confidence when the page remains completely broken in NVDA or VoiceOver. Always verify with multiple screen readers.
Using Layout Tables without role="presentation": If a <table> is used for visual layout, JAWS will treat it as tabular data, announcing "Table with 4 columns and 2 rows". Always add role="presentation" or role="none" to layout tables, or convert to CSS Flexbox/Grid.
Unlabelled Icons in Enterprise Toolbars: Enterprise SaaS applications often feature toolbars with SVG icons. Without aria-label or visually hidden text, JAWS will announce "Graphic" or "Button" with no clue as to its action.

💡 Pro Tips

Leverage the JAWS Dialog Windows for VPAT Auditing: Use Insert + F5 (Forms List) and Insert + F6 (Headings List) to extract complete inventories of your application for inclusion in Voluntary Product Accessibility Templates (VPATs).
Test 2D Table Traversal (Alt + Control + Arrow Keys): Ensure every header is vocalized properly as you move horizontally and vertically through complex multi-column reports.
Use the Freedom Scientific 40-Minute Demo Mode in CI Workstations: Install JAWS in a Windows VM to test enterprise pull requests without purchasing multiple commercial licenses.

📌 Key Takeaways

JAWS is the dominant commercial enterprise screen reader in corporate, financial, and government environments.
The Virtual PC Cursor handles document reading, while Forms Mode handles direct text entry and form interaction.
JAWS Quick Keys (H, T, F, B, R, G) allow rapid scanning across structural elements.
Complex data tables require <caption>, <thead>, and <th scope="col/row"> to support JAWS 2D cell navigation (Alt + Control + Arrow Keys).
Multi-option form controls (radios and checkboxes) must be grouped within <fieldset> and <legend> containers.
--

⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE

? Question 1 / 3

What keyboard combination allows a JAWS user to navigate between adjacent cells in a data table while hearing row and column headers?

Topic: HTML Fundamentals

? Question 2 / 3

What is the purpose of pressing `Insert + F6` in JAWS?

Topic: HTML Fundamentals

? Question 3 / 3

Why is it important to group related radio buttons inside `<fieldset>` and `<legend>` tags when auditing for JAWS?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

The JAWS Modifier Key

Virtual PC Cursor vs Forms Mode

JAWS Navigation Quick Keys (Virtual PC Cursor)

Advanced 2D Table Navigation in JAWS

JAWS Modal Inspector Dialogs

Auditing Without an Enterprise License: JAWS 40-Minute Demo Mode

💻 Interactive Code Playground

Enterprise Payroll & Compensation Form

Line-by-Line Code Breakdown

Expected JAWS Spoken Transcript

🏋️ Hands-On Exercise

🎯 The Challenge: Fix the Broken Enterprise Expense Dashboard

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

What keyboard combination allows a JAWS user to navigate between adjacent cells in a data table while hearing row and column headers?

What is the purpose of pressing Insert + F6 in JAWS?

Why is it important to group related radio buttons inside <fieldset> and <legend> tags when auditing for JAWS?

What is the purpose of pressing `Insert + F6` in JAWS?

Why is it important to group related radio buttons inside `<fieldset>` and `<legend>` tags when auditing for JAWS?