After completing the P4 team’s manual accessibility audit, guided by the WebAIM’s WCAG 2 Checklist, we’ve rolled out a series of enhancements across the site to make every interaction clearer and more inclusive. Below is a high‑level overview of the changes by category.
⌨️ Keyboard Navigation & Focus
Actions & Post List blocks (Carousel view)
| Before | After |
| • Carousel controls weren’t tabbable. | • Arrow controls (“◀”/“▶”) are now keyboard‑operable • A skip link “Back to Action list section” is added when tabbing past the carousel. |
Carousel header block (in progress)
| Before | After |
| • Play/Pause button and page indicators weren’t in the tab order. | • Play/Pause button and carousel page‑controls are focusable and operable via Enter/Space. |
Donation button
| Before | After |
| • Button received focus but showed no visible outline. | • The button displays a clear focus ring when tabbed. |
Mobile Navigation & Hamburger Menu
| Before | After |
| • Close button was unreachable through Tabbing. • Focus navigates to other page content that is not currently being displayed in the screen. • Mobile tabs and menu items are tabbable when hidden or closed. | • Close button is reachable through Tabbing. • keyboard focus is trapped inside an open menu. • Mobile tabs and menu items are removed from the tab sequence when hidden or closed. |
Main Navigation Dropdowns
| Before | After |
| • Sub‑menus was displayed only on hover | • Tab‑focus on any nav item reveals an arrow; Enter opens its dropdown |
Skip‑Links
| Before | After |
| • Skip‑links existed but were visually hidden with low‑contrast | • All skip‑links have a solid background and are prominently visible on focus. |
Listing Page Layout Toggle
| Before | After |
| • Toggle wasn’t in the tab order or announced to screen readers. | • Layout toggle button is keyboard‑focusable and labeled for assistive tech. |
Search Results Page
| Before | After |
| • No skip‑link to bypass filters. • The placeholder wasn’t reading Search by name, keyword, or topic. | • A skip-link is added to jump directly to results. • The placeholder now reads “Search by name, keyword, or topic,” providing clearer guidance. |
Footer Country Selector
| Before | After |
| • Close icon was focusable but lacked a visible outline. | • Close icon now shows a clear focus ring when selected via keyboard. |
🎨 Color Contrast & Typography
Author’s Name Styling
| Before | After |
| • Author names appeared in dark grey, making them indistinguishable from plain text and not obviously clickable. | • Author name links now use green‑800, providing a clear visual cue that they’re interactive. |
⚠️ Forms & Error
Comments Form
| Before | After |
| • Labels were hidden once user starts typing. • Required fields not visually indicated. | • Labels remain permanently visible above inputs. • Required fields are visually indicated. |
📑 Semantic Markup & ARIA
Actions List CTA Text
| Before | After |
| • Screen readers always read “Learn more,” which wasn’t descriptive. | • Editors can supply custom CTA text via a new backend field, which populates an aria-label. |
Gallery Block Alt Text
| Before | After |
• Content images lacked alt, so screen readers skipped them. | • Every <img> in the gallery block includes proper alt text and is announced. |
Search Filters & Remove Buttons
| Before | After |
| • Filter checkboxes had generic labels. • Remove‑filter buttons had no aria-label | • Filter checkboxes now announce both the category and its result count (e.g., “People, 3 results”). • Remove buttons uses a descriptive label such as “Remove Energy filter.” |
Overall HTML Structure
| Before | After |
• Pages and blocks wrapped in generic <div>.• Donate was an <a>• Breadcrumbs weren’t marked as <nav> | • Pages are now wrapped in one <main> element.• Donate uses <button>• Breadcrumbs wrapped in <nav> |