🟠 [RGAA] - Outside criteria scope findings

[jbpenrath]

Bug Report

Problematic behavior
Additional issues not directly tied to the 25 RGAA criteria in scope has been found:

Global / main page:

• Skip link is present but focus is not correctly moved on activation
• Some texts are wrapped only in <div>/<span> instead of semantic HTML (<p>, <hn>, <li>)
• Services dropdown <svg> is not hidden from assistive technologies
• Selected label color border has contrast ratio 2.32:1 (minimum: 3:1)
• Landmark semantics missing or incorrect (role="main", role="navigation", role="banner")
• At 200% zoom, search filter area is clipped; panel navigation is confusing

Inbox:

• Thread list should use <ol><li>; label tags should use <ul><li>

Signature management:

• "Empty table illustration" image is decorative but has a non-empty alt

Expected behavior/code
All content must use semantic HTML. Landmarks must be properly identified. Decorative images must have alt="". Skip links must correctly move focus. All features must work at 200% zoom.

Steps to Reproduce

1. Activate the skip link — focus does not move to content area
2. Inspect DOM — multiple text nodes wrapped in unsemantic <div>/<span>
3. Zoom to 200% — search filters are partially clipped

Environment

• Severity: 🟠 Major

Possible Solution

Global / main page:

• Fix skip link focus target
• Replace <div>/<span> text wrappers with <p>, <hn>, <li>
• Add aria-hidden="true" on services dropdown <svg>
• Update selected color border to meet 3:1 contrast ratio
• Add role="main" on <main>, role="navigation" + aria-label on <nav>, role="banner" on header
• Clean up label area: remove unexpected <header> and <nav>, use <hn> and <ul><li>
• Fix CSS for 200% zoom; close panel and move focus on template/signature/integration navigation

Inbox:

• Message list → <ol><li>
• Label tags → <ul><li>

Signature management:

• Decorative image → alt=""
• Replace <div>/<span> wrappers with <p> or headings

Additional context/Screenshots
N/A