Webpages and Content Accessibility

For Content Management System (CMS) Editors

The Four Requirements of Accessibility

Every webpage must meet these four requirements before publishing. These are the foundations of accessible and inclusive web content.

Action Item Requirement Why It Matters
Proper Headings Use Styles (H1-H6). Never manually bold or enlarge text. Allows screen readers to "jump" to specific sections.
Descriptive Links Avoid "Click Here." Use "View the [Name of Program] PDF." Contextualizes where the user is going before they click.
Alt Text Briefly describe every informative image. Mark logos as "decorative" if needed. Provides a mental picture for users with visual impairments.
Color Contrast Ensure a 4.5:1 ratio (Black text on Garnet is NOT compliant). Ensures readability for users with low vision or color blindness.

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 (WAI) — ARIA validation errors, unclosed tags, and requirements for iframe titles. To get your accessibility score specific to Title II ADA regulations in Siteimprove, please select Accessibility from the Dashboard, then Compliance, then ADA Title II.

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.

Access Siteimprove Dashboard

How to get access: Visit the FSU ITS Service Catalog to request a dashboard. Please include the website URL and the name(s) and email(s) of FSU employees who need access. 

Reports specific to Title II compliance: To get your accessibility score for Title II ADA regulations in Siteimprove, please select Accessibility from the Dashboard, then Compliance, then ADA Title II.

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.

Embedded iframes

The Critical Role of the title Attribute

Every iframe must have a descriptive title attribute. This is the primary way screen readers identify the content within the frame (e.g., a video, a map, or a form) to the user. Avoid generic titles like "frame" or "widget"; instead, use specific labels such as title="Map of FSU Building Location" or title="Admissions Form". If an iframe is purely functional and contains no user-facing content—such as a tracking pixel—it should be hidden from assistive technology entirely using aria-hidden="true" and tabindex="-1".

Prioritizing Content Accessibility and Navigation

Beyond labeling, the content inside the iframe must also be accessible, as you are responsible for the compliance of anything embedded on your site. Ensure that all interactive elements within the frame are reachable via keyboard (using the Tab key) and that "autoplay" is disabled for any audio or video to prevent interference with screen reader voice-overs. If a descriptive heading for the iframe already exists on your page, you can link it to the frame using aria-labelledby to ensure the name remains consistent and programmatic.