Problem/Motivation

axe-core found three serious WCAG 2.2 AA violations on a fresh Horizon Aid install, as an anonymous visitor:

  • World map: role="img" hid the 15 country buttons from screen readers.
  • Pager: role="presentation" on li items broke the list.
  • Gold headings on light sections failed colour contrast.

Steps to reproduce

  1. Install Drupal CMS with the Horizon Aid site template.
  2. Run axe on /countries, /resources, /events and a country page, logged out.

Proposed resolution

  • Map: role="group".
  • Pager: drop role="presentation".
  • Gold headings on light sections use the design's own text tone #997404, at 24px or more. Design colours are unchanged.

Tested: 79 public URLs, WCAG 2.2 AA + best-practice, 0 violations.

Remaining tasks

  • ✅ File an issue
  • ✅ Addition/Change/Update/Fix
  • ✅ Testing to ensure no regression
  • ✅ Automated unit/functional testing coverage
  • ➖ Developer Documentation support
  • ➖ User Guide Documentation support
  • ➖ UX/UI designer responsibilities
  • ✅ Accessibility and Readability
  • ❌ Reviewed by a human
  • ❌ Code review by maintainers
  • ❌ Full testing and approval
  • ❌ Credit contributors
  • ❌ Review with the product owner
  • ✅ Update Release Notes
  • ✅ Release

User interface changes

  • Gold stat headings on light sections render in #997404.

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • Fix three WCAG 2.2 AA violations on the world map, the pager and the gold headings.

AI-Generated: Yes

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

rajab natshah created an issue. See original summary.

rajab natshah’s picture

Title: Meet WCAG 2.2 AA: render the page title, and step headings one level at a time » Fix three WCAG 2.2 AA accessibility violations: nested-interactive on the world map, list on the pager, and colour contrast on brand-coloured headings
Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes

  • rajab natshah committed db9451d0 on 1.0.x
    fix: #3625357 Fix three WCAG 2.2 AA violations: world map, pager and...
rajab natshah’s picture

Issue summary: View changes
Status: Active » Fixed
Issue tags: +vartheme_bs5_horizonaid-1.0.3

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.