Led WCAG 2.1 AA accessibility remediation of MyLife.adp.com
Background & Challenge
- The websites, prior to remediation, had accessibility gaps: inconsistent keyboard navigation, insufficient color contrast, inaccessible forms, missing alt text, ARIA misuses, and layout issues on different screen sizes.
- ADP had a firm deadline (contractual timeline) to deliver accessibility compliance to WCAG 2.1 AA level without sacrificing design quality or breaking existing functionality.
- The sites also needed to remain responsive and maintain brand consistency during the overhaul.
My Role & Responsibilities
As the specialist, I took ownership of:
- Conducting full accessibility audits (automated & manual) of all pages
- Mapping remediation tasks (component-level, template-level, content-level)
- Overseeing or executing code changes: HTML, CSS, ARIA, WordPress, and theme templates
- Testing with assistive technologies (screen readers, keyboard only, magnifiers)
- Ensuring responsive behavior and cross-browser compatibility
- Performing quality assurance and regression testing
- Delivering final accessible designs, documentation, and guidelines
Approach & Process
Here’s how I structured the project:
| Phase | Activities | Outcomes / Deliverables |
|---|---|---|
| Discovery & Audit | Crawl all pages, run automated tools, perform manual checks (keyboard nav, forms, skip links, headings, ARIA) | Prioritized list of issues by severity |
| Design & Prototyping | Collaborate with design team to adapt UI elements (buttons, form fields, color palette) for accessibility | New mockups adhering to color contrast, focus indicators, scalable fonts |
| Template & Theme Remediation | Update WordPress theme templates and components (menus, footers, sidebars, widgets) | Theme-level fixes baked into template files |
| Content Remediation Guidance | Create content editor guidelines (alt text, heading use, accessible tables) | Template guidelines and training |
| Testing & QA | Full testing with keyboard-only, screen readers (e.g. NVDA, VoiceOver), zoom modes, mobile | Iterative fixes and verification |
| Launch & Monitoring | Deploy changes, monitor for regressions, respond to tickets |
The Results
Key Improvements & Highlights
Below are standout enhancements made during the remediation
- Navigation & Skip Links Added a “Skip to Main Content” link visible on keyboard focus. Improved menu keyboard traversal, corrected ARIA roles, and ensured logical focus order.
- Color & Contrast Updated colors for text, backgrounds, and UI elements to reach minimum contrast thresholds (≥ 4.5:1 for normal text). Maintained accessible contrast across states (hover, focus, disabled).
- Forms & Labels Ensured every form field had a visible or programmatic label tied with for/id. Enhanced error messaging with aria-invalid, aria-describedby, and clear instructions.
- Images & Media Reviewed alt text usage: provided meaningful alt descriptions where needed, used empty alt (alt=””) for purely decorative images, and removed informational content dependency on images alone.
- Semantic Structure & Headings Reordered headings into a logical hierarchy (H1 → H2 → H3). Replaced non-semantic elements (div/span) used as buttons or links with proper HTML (e.g. <button>, <a>).
- Responsiveness & Touch Targets Ensured touchable elements met minimum size. Verified layouts held under zoom, reflow, and in different viewport sizes without loss of content or functionality.
Before and After
Benefits Page: Improved page structure, readability.
ESP Page: Provided screenreader text and visual indicators for download.
Health Insurance Forms: Improved page readability by displaying the headers to allow for skim reading.
Homepage: Replaced carousel with an accessibility friendly option that allows screen readers to read the text
Enrollment: Improved page readability by displaying the headers to allow for skim reading.
FAQ: Improved page readability by only showing the relevant questions to allow user to find information quickly
Articles: Improved page readability by improving page structure and font size and contrast
