Webpages and Content Accessibility

Siteimprove: The Developer's Command Center

While content editors check for typos, developers use Siteimprove for Structural Integrity. It identifies issues hidden in the Document Object Model (DOM), such as Web Accessibility Initiative - ARIA validation errors, unclosed tags, and iframe title requirements.

Automated Auditing

Crawls source code to identify WCAG failures (A, AA, AAA) that manual editors may miss.

Prioritized Remediation

Categorizes issues by "Criticality" and "Difficulty" to focus on high-impact global template fixes.

How to get access: Visit the FSU ITS Service Catalog to request a dashboard.

Global Technical Requirements

1. Skip Navigation Links

Every FSU site must include a "Skip to Main Content" link. This allows keyboard-only users to bypass global navigation headers. It should be the first focusable element in the DOM and remain hidden until focused via the Tab key.

<a href="#content" class="sr-only sr-only-focusable btn btn-tab">Skip to main content</a>

2. Semantic Structure & Landmarks

Do not use <div> for buttons or navigation. Use HTML5 landmarks correctly so screen readers can jump to navigational areas.

<header>...</header>
<nav aria-label="Main Menu">...</nav>
<main id="content">...</main>

3. Form Labels & Input Validation

Every <input> must have a programmatic label. Use aria-describedby to link error messages or formatting instructions to their specific input fields.

<label for="fsu-email">Email Address</label>
<input id="fsu-email" type="email" aria-required="true">

Interactive Components & Testing

Visible Focus & ARIA States

  • Never use outline: 0: CSS focus rings are mandatory. Use :focus-visible to provide high-contrast styling for keyboard users.
  • Dynamic Content: Use aria-live="polite" for status updates or search result counts that change without a page reload.
  • Modals/Dialogs: Must trap focus inside the modal until it is closed. Use role="dialog" and ensure the Esc key closes the component.

Beyond Automation: Manual Testing

Siteimprove may not catch all accessibility issues. Developers are responsible for manual validation:

  • Keyboard Crawl: Can you reach every link, button, and menu using only Tab and Enter/Space?
  • Tab Order: Ensure the visual reading order matches the DOM order.
  • Screen Reader Check: Use NVDA (Windows) or VoiceOver (Mac) to ensure complex widgets (accordions, tabs) are announced correctly.