top of page
Brief:

Projects

Projects >> Article Template Accessibility Test

Events Template Accessibility Test

My Role:

Accessibility Tester

Context:

History Colorado publishes new events. To ensure accessibility was built into the publishing workflow, I conducted a comprehensive audit of this Events template to identify and remediate WCAG compliance issues. This approach allowed content managers to create and publish new content with confidence, knowing accessibility requirements were already incorporated into the template design.

Tools:

WAVE, WebAim, NVDA, WCAG 2.1 AA, manual keyboard testing, screen reader testing

Accessibility Findings:
Critical Severity

Missing first level heading

  • WCAG Criteria: 1.3.1 (Info and Relationships), 2.4.6 (Headings and Labels)

  • The page does not have a first level heading (H1).

Broken ARIA reference (16)

  • WCAG Criteria: 1.3.1 (Info and Relationships), 4.1.2 (Name, Role, Value)

  • Context: Multiple ARIA references are broken, affecting screen reader navigation.

Name, Role, Value

  • WCAG Criteria: 4.1.2 (Name, Role, Value)

  • Context: Identified during Screen Reader testing. A widget reads everything individually as a link (e.g., "January", "Flow", "Let's Go"), creating a confusing experience.

Name, Role, Value

  • WCAG Criteria: 4.1.2 (Name, Role, Value)

  • Context: Identified during Screen Reader testing. Content labeled as H5 is read as H4 due to conflicting aria-level="4" and role="heading" attributes.

PDF Accessibility

  • WCAG Criteria: 1.1.1, 2.4.3, 2.4.6

  • Context: The checked PDF document is not accessible to assistive technologies.

High Severity

Very low contrast (3)

  • WCAG Criteria: 1.4.3 (Contrast - Minimum)

  • Context: The white and green used for "Become a Member" lacks sufficient contrast (3.53:1 vs required 4.5:1).

Link not tabbable

  • WCAG Criteria: 2.1.1 (Keyboard)

  • The map link under the location section is skipped during keyboard navigation.

Focus visible

  • WCAG Criteria: 2.4.7 (Focus Visible)

  • Context: Found on multiple pages. Tabbable items like the photo link at the bottom of the History Colorado Center page do not receive a visible focus border.

Name, Role, Value (Multiple instances)

  • WCAG Criteria: 4.1.2 (Name, Role, Value)

  • Context: Screen Reader testing. Issues include phone numbers not being linked, images with generic labels (e.g., "Graphic History Colorado image 11"), and screen readers picking up empty <br> tags.

Medium Severity

Skipped heading level (2)

  • WCAG Criteria: 1.3.1, 2.4.1, 2.4.6

  • Context: History Colorado Center page. The structure skips from H2 to H5, which can confuse screen reader users.

Redundant alternative text

  • WCAG Criteria: 1.1.1 (Non-text Content)

  • Context: Found on the History Colorado Center and Tours and Treks pages.

Missing links

  • WCAG Criteria: 4.1.2 (Name, Role, Value)

  • Context: Screen Reader testing. Contact information like phone numbers and email addresses are not programmatically linked.

Link text

  • WCAG Criteria: 2.4.4 (Link Purpose - In Context)

  • Context: Tours and Treks page. Links using "here" are not descriptive, especially when separated into different links within the Registration section.

Accessibility Improvements:

Before:

Screenshot 2026-06-04 202300.png

After:

Screenshot 2026-06-04 202149.png

Before:

After:

Before:

After:

bottom of page