Brief:

Projects

Projects >> History Colorado Informational Page Audit

History Colorado Informational Page Accessibility Audit

My Role:

WCAG Accessibility Tester

Context:

History Colorado’s informational page about current exhibits and how to buy tickets had several WCAG failures.

Tools:

WAVE, WebAim, VoiceOver, NVDA, manual accessibility testing,

Goals:

-Improve accessibility

-Increase the amount of potential users by including people with visual impairment by addressing screen readers and contrast issues

Problem:

The problem addressed in this website update is the lack of accessibility. Online content that meets accessibility requirements is likely to be more user-friendly for everyone.

Accessibility Audit Findings

WCAG Violations (Critical Priority: Level A/AA Failures)

1.4.3 Contrast (Minimum) Contrast Issues:
- The "Lets Go" text fails to meet the required contrast ratio between foreground and background colors.
- Zoom Impact: When the page is zoomed to 200%, the header shifts, creating further color contrast issues. (Also associated with 1.4.4 Resize Text).
1.3.1 Info and Relationships / 2.4.1 Bypass Blocks / 2.4.6 Headings and Labels
- Heading Hierarchy: Heading levels are skipped (jumping from <h2> to <h5>), which violates the requirement for headings to be in a logical, sequential order.
2.4.7 Focus Visible
- Visual Indicators: Tabbable items are missing borders to indicate focus.
- Missing Focus: A specific photo link at the bottom of the page (linking to the History Colorado Center) does not receive focus when tabbing.
2.1.1 Keyboard
- Tabbing Issues: Under the "Location" section, the map link is skipped during keyboard navigation, making it inaccessible to keyboard-only users.
2.4.4 Link Purpose (In Context)
- Descriptive Links: The link text "Here's" is not descriptive enough. It is recommended to use clearer language like "Click Here to Open the Application" or "Learn More About the Application."
4.1.2 Name, Role, Value
- This criterion has the most extensive feedback, primarily focusing on screen reader compatibility:
- Incorrect Roles: An <h5> element is incorrectly read as an <h4> due to conflicting aria-level and role attributes.
- Pronunciation Issues: Screen readers struggle with specific text like "#HistoryColorado" (read as "Number History Colorado") and "FAQs" (read as "FA Q s").
- Redundant Content: Screen readers announce redundant information, such as "Graphic History Colorado image 11" before reading the actual section title.
- Punctuation & Formatting: Dashes in date ranges (e.g., August 23rd - May 23rd) are skipped; using "to" or "through" is recommended. Additionally, <br> tags are being read as "blank" or "separator."
- Widget Complexity: A specific widget is described as "messy," with individual elements like "January" and "Flow" being read as separate links.
- Missing Functionality: The phone number is not coded as a link (tel:), and reviews are missing quotation marks or a clear header to identify them.