Skip to content

WCAG navigation submenu#13796

Merged
alecslupu merged 2 commits intodecidim:developfrom
OpenSourcePolitics:Fix/wcag/navigation-submenu
Jan 14, 2025
Merged

WCAG navigation submenu#13796
alecslupu merged 2 commits intodecidim:developfrom
OpenSourcePolitics:Fix/wcag/navigation-submenu

Conversation

@BarbaraOliveira13
Copy link
Copy Markdown
Contributor

@BarbaraOliveira13 BarbaraOliveira13 commented Dec 27, 2024

🎩 What?

This PR updates the submenu navigation structure to improve accessibility and ensure compliance with WCAG standards. Changes include:

  1. Added dynamic aria-label attributes to navigation menus to provide better context for screen readers, improving compliance with WCAG 1.3.1 - Info and Relationships(Level A).
  2. Added an aria-label attribute dynamically generated using the current page title, to provide an accessible and descriptive name for the navigation zone.

🎩 Why?

This issue originates from an accessibility audit funded by the city of Lyon, targeting compliance with RGAA and corresponding WCAG standards. The changes ensure clearer navigation and improved usability for assistive technologies.

📌 Related Issues

Related to WCAG 1.3.1 - Info and Relationships.

📋 Subtasks

  • Update tags to include dynamic aria-label attributes, addressing WCAG 1.3.1 - Info and Relationships.
  • Verify compliance with WCAG standards.
  • Add CHANGELOG entry.
  • Add tests for updated accessibility structure.
  • Update documentation if required.

Testing

  1. Accessibility Check:

    • Open the Chrome Developer Tools and go to the Accessibility tab: ... /pages/help
    • Inspect the submenu <nav> element.
    • Ensure that:
      • The role="navigation" attribute is present.
      • Confirm that the aria-label contains the appropriate value based on the current page title.
  2. Screen Reader Validation:

    • Use a screen reader (e.g., VoiceOver on macOS) to navigate the submenu.
    • Confirm that the navigation zone is announced with the correct label from the hidden <h1>.

📷 Screenshots

Capture d’écran 2024-12-18 à 17 16 17

♥️ Thank you!

Copy link
Copy Markdown
Contributor

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This pull request does not contain a valid label. Please add one of the following labels: ['type: feature', 'type: change', 'type: fix', 'type: removal', 'target: developer-experience', 'type: internal']

@BarbaraOliveira13 BarbaraOliveira13 changed the title fix wcag navigation submenu Fix wcag navigation submenu Dec 27, 2024
@BarbaraOliveira13 BarbaraOliveira13 changed the title Fix wcag navigation submenu Fix: wcag navigation submenu Dec 27, 2024
@BarbaraOliveira13 BarbaraOliveira13 changed the title Fix: wcag navigation submenu fix: wcag navigation submenu Dec 27, 2024
@BarbaraOliveira13 BarbaraOliveira13 changed the title fix: wcag navigation submenu fix wcag navigation submenu Dec 27, 2024
@BarbaraOliveira13 BarbaraOliveira13 changed the title fix wcag navigation submenu WCAG navigation submenu Jan 6, 2025
@BarbaraOliveira13 BarbaraOliveira13 marked this pull request as ready for review January 7, 2025 15:18
@andreslucena andreslucena added team: accessibility type: fix PRs that implement a fix for a bug labels Jan 8, 2025
Copy link
Copy Markdown
Contributor

@alecslupu alecslupu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

visiting using Voiceover the menu, i get:

"What is a participatory process", Visited link navigation menu "What is a participatory process?" navigation landmark

LGTM

@alecslupu alecslupu added release: v0.28 Issues or PRs that need to be tackled for v0.28 release: v0.29 Issues or PRs that need to be tackled for v0.29 labels Jan 14, 2025
@alecslupu alecslupu merged commit 9fd1b9e into decidim:develop Jan 14, 2025
@alecslupu alecslupu deleted the Fix/wcag/navigation-submenu branch January 14, 2025 11:45
entantoencuanto added a commit that referenced this pull request Jan 14, 2025
* develop: (27 commits)
  WCAG navigation submenu (#13796)
  Update gem dependencies (part 3) (#13849)
  Prevent notifications for deleted users (#13812)
  Retries NPM installation a couple times to prevent network timeouts (#13831)
  Update gem dependencies (part 2) (#13839)
  Enhance signature pdf export (#13778)
  Fix HexaPDF dependency (#13834)
  Fix flaky spec in authentication (#13827)
  Merge upload field for documents and image on proposal admin form (#13735)
  Update gem dependencies (#13835)
  Upgrade erb_lint to 0.8.0 (#13833)
  Fix flaky spec in geocoder (#13820)
  Refactor modules mounting routes (#13294)
  Upgrade check-spelling action (#13825)
  Add missing images in the custom registration emails from meetings (#13632)
  Add missing translations (#13793)
  Fix proposal map performance with hundreds of markers (#13798)
  Create multiple surveys within same Survey component (#13420)
  Accountability bulk actions (#13730)
  Improve UI for sorting options on comments (#13670)
  ...
rsdeus pushed a commit to octree-gva/decidim that referenced this pull request Jan 15, 2025
antopalidi pushed a commit to openpoke/decidim that referenced this pull request Feb 12, 2025
andreslucena pushed a commit that referenced this pull request Mar 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

module: core release: v0.28 Issues or PRs that need to be tackled for v0.28 release: v0.29 Issues or PRs that need to be tackled for v0.29 team: accessibility type: fix PRs that implement a fix for a bug

Projects

No open projects
Archived in project

Development

Successfully merging this pull request may close these issues.

3 participants