Accessibility improvements for Learning MFE #495
Description
Type of Request
Fast Track Change (small, low-risk improvements)
Feature Description
This initiative focuses on improving accessibility across key Learning pages in Open edX, including the Course Unit page, Course Outline, Header, Progress page, and Dates page. The work enhances keyboard navigation, screen reader support, semantic HTML structure, and ARIA usage to ensure that interactive components such as notification trays, accordions, menus, tabs, tooltips, and navigation regions are fully operable and understandable for users relying on assistive technologies.
Importantly, these enhancements were implemented following a detailed review and recommendations from an accessibility expert.
Improvements
Learning Header
Problems
- Dropdown menus did not trap focus while open, allowing users to tab into background content.
Improvements
- Trapped Tab and Arrow key navigation within the menu until it is closed.
- Ensured focus is returned to the menu button on close.
- Placed focus on the first menu item when opened.
- Added appropriate
menuandmenuitemroles. - Added an accessible name to the menu's trigger button using the
aria-labelattribute.
Related PRs
Course Unit Page
Problems
- Notification tray did not move focus when opened and did not expose expanded/collapsed state.
- Keyboard users could not easily close the tray, especially on smaller viewports.
- Course sequence navigation lacked proper tab semantics and ARIA relationships.
- Icons indicating completion and bookmarks were not accessible to screen readers.
- Navigation regions were not labeled.
Improvements
- Added aria-label, aria-controls, and aria-expanded to the notification tray button.
- Programmatically moved focus into the notification tray when opened and returned focus when closed.
- Marked the notification tray title as a heading level 2.
- Implemented full ARIA tablist / tab / tabpanel semantics for course sequence navigation.
- Improved keyboard interaction using Tab, Enter/Space, and Arrow keys.
- Added accessible titles to bookmark and checkmark SVG icons.
- Labeled navigation landmarks to clarify their purpose.
Related PRs
- feat: improved accessibility of notification tray frontend-app-learning#1817
- feat: accessibility HTML attributes for Course Navigation top bar frontend-app-learning#1820
Course Outline Page
Problems
- Accordion labels were not part of the heading structure, limiting screen reader navigation.
Improvements
- Marked accordion labels as logical headings (e.g., level 2).
- Added
role="presentation"to the ordered list wrapping accordion content.
Related PRs
Progress Page
Problems
- Tooltips could not be closed using the keyboard.
- Focus was not placed inside tooltip content.
- Key content sections were not marked up as headings.
Improvements
- Programmatically placed focus inside the grade summary tooltip when opened.
- Added Escape key support to close the tooltip.
- Trapped focus within the tooltip while open.
- Marked weekly modules as heading level 4.
- Marked Certificate Status as heading level 2.
Related PRs
- feat: added the ability to close the hint using the keyboard frontend-app-learning#1812
- feat: replaced detailed grades html tag frontend-app-learning#1813
- feat: Certificate Status marked up as a heading level 2 frontend-app-learning#1835
Progress, Course Unit, and Dates Pages
Problems
The “Skip to main content” link allows users who navigate with a keyboard (Tab / Shift+Tab) or a screen reader to bypass repetitive interface elements such as headers, navigation menus, and course selectors, and move directly to the primary page content. Without this, users must tab through the same set of controls on every page, which is inefficient and can be frustrating.
Improvements
Improved the “Skip to main content” link behavior to allow users to bypass repetitive navigation and other non-essential content blocks.
Related PRs
Link to Product Proposal
No response
Status
New
Proposed By
Raccoon gang