Web Standards

Web Standards Analyzer

Static accessibility analysis of HTML, CSS, and ARIA without browser execution.

Analysis Categories

Work through each category, noting any issues found.

1. Semantic HTML

Check for proper semantic element usage:

2. ARIA Validity

Query aria-mcp for authoritative ARIA rules:

• get-role("button") → Returns role requirements
• validate-role-attributes("button", ["aria-pressed"]) → Validates ARIA usage
• get-prohibited-attributes("button") → Returns disallowed attributes

Check for:

Invalid ARIA on semantic elements:

• <button role="button"> — redundant
• <a role="link"> — redundant
• <a role="button"> — misuse (use <button> instead)

Missing required ARIA:

• Custom widgets without appropriate roles
• Interactive elements without accessible names
• Dynamic content without live regions

Invalid ARIA combinations:

• aria-checked on non-checkbox/switch roles
• aria-expanded on elements without expandable content
• aria-selected outside selection contexts

Query aria-mcp for role-specific requirements when custom widgets are found:

• get-required-attributes("tabpanel") → Returns required attributes
• get-required-context("tab") → Returns required parent context
• suggest-role("dropdown menu") → Suggests appropriate role

3. Landmark Structure

Check page has appropriate landmarks:

Watch for:

• Multiple <main> elements
• Landmarks inside landmarks of same type
• Overuse of landmarks (every section doesn't need one)

3.5 Document & Metadata (Static)

Quick static checks that frequently correlate with accessibility failures:

Notes:

• Static analysis can flag missing/invalid lang, missing <title>, duplicate IDs, and common invalid nesting patterns with high confidence.
• If the snippet is partial (component-only), note “document-level checks not applicable” rather than failing.

4. Heading Hierarchy

Verify heading structure:

1. Page should have exactly one <h1>
2. Headings should not skip levels (h1→h2→h3, not h1→h3)
3. Headings should reflect content hierarchy
4. Visual headings should be semantic headings

Query wcag-mcp: get-criterion("1.3.1") for Info and Relationships

5. Form Accessibility

Check all form controls:

Invalid patterns:

• Placeholder as only label
• Label not programmatically associated
• Hidden label without accessible alternative

5.5 Accessible Name, Role, Value (ANRV)

Static heuristics for “can a user perceive/operate this control with AT?”

Implementation note:

• Prefer visible text + semantic HTML.
• Use aria-mcp when a custom widget is detected to confirm required attributes/required context for the chosen role.

6. Image Accessibility

Check all images and graphics:

Query wcag-mcp: get-criterion("1.1.1") for Non-text Content

7. Keyboard Accessibility

Static checks for keyboard support:

Additional static red flags:

• onmousedown, onmouseup, onpointerdown handlers without equivalent keyboard activation
• Click handlers attached to non-interactive elements without:
  • role, keyboard handlers, and focusability (tabindex="0")
• CSS removing focus indicators (also see Text and Contrast):
  • :focus { outline: none; }
  • :focus-visible { outline: none; }

When present, capture:

• The exact element snippet
• The event handler pattern
• Whether a semantic element (<button>, <a href>) would remove the need for scripting

Query wcag-mcp: get-criterion("2.1.1") for Keyboard

8. Text and Contrast (CSS)

Check CSS for potential issues:

Query wcag-mcp: get-criterion("2.4.7") for Focus Visible, get-criterion("1.4.4") for Resize Text

Output Format

Report issues in this structure:

## Static Analysis Results

Found X accessibility issues:

### Issue 1: [Brief description]

- **Location:** [file:line or element path]
- **Category:** [Semantic HTML/ARIA/Landmarks/etc.]
- **Severity:** [Critical/Serious/Moderate/Minor]
- **WCAG:** [Success criterion from wcag-mcp]
- **Confidence:** [High/Medium/Low] (Static-only signal strength)
- **Instances:** [count + brief list of selectors/paths]
- **Evidence:** [snippet(s), selector(s), relevant attribute values, and why it fails]
- **Recommended Verification:** [manual check(s) needed in browser/AT, if any]
- **Code:**
  ```html
  [problematic code]

• Problem: [What's wrong]

---

## Severity Guidelines

| Severity | Criteria                                             |
| -------- | ---------------------------------------------------- |
| Critical | Blocks access entirely (no keyboard, no name)        |
| Serious  | Major barrier (skipped headings, no labels)          |
| Moderate | Degrades experience (redundant ARIA, poor semantics) |
| Minor    | Best practice violation (optimization opportunities) |

## Static Analysis Limitations (Important)

Static analysis is best at detecting:
- Missing semantics (wrong element choice, missing labels, missing landmarks/headings)
- Invalid/unsupported ARIA usage and broken ARIA references
- Focus indicator removal in CSS

Static analysis is limited for:
- Color contrast (needs computed colors)
- Keyboard operability of scripted widgets (needs runtime behavior)
- Screen reader output, focus order, and dynamic announcements (needs browser + AT)

When an issue depends on runtime behavior, still file it, but mark **Confidence: Medium/Low** and add **Recommended Verification** steps.

## MCP Server Queries

When you encounter these situations, query the referenced MCP server:

| Situation              | Query MCP         | Example Tool                             |
| ---------------------- | ----------------- | ---------------------------------------- |
| Custom ARIA widget     | `aria-mcp`        | `get-required-attributes("dialog")`      |
| WCAG criterion details | `wcag-mcp`        | `get-techniques-for-criterion("1.3.1")`  |
| Correct implementation | `magentaa11y-mcp` | `get_component_developer_notes("modal")` |