Client Profile
A multinational retail conglomerate operating dozens of consumer brands across North America and Europe. With a digital footprint spanning Canada, the United States, and the European Union, the client is subject to multiple overlapping accessibility regulations, including AODA (Ontario), Section 508 (U.S.), and the European Accessibility Act. Their diverse portfolio and regulatory exposure required a scalable, standards-compliant approach to web accessibility across high-traffic public websites and brand platforms.
Project Timeline
Duration: 2 weeks
Initial accessibility scan (automated + manual) across ~50 pages. Scoped remediation work and prioritized by severity and compliance risk.
Initial accessibility scan (automated + manual) across ~50 pages. Scoped remediation work and prioritized by severity and compliance risk.
Duration: 1 week
Evaluated UI components (carousels, navigation, forms) for accessibility; collaborated with design teams across brands.
Evaluated UI components (carousels, navigation, forms) for accessibility; collaborated with design teams across brands.
Duration: 3 weeks
Implemented fixes for structure, content, color contrast, focus management, and alternative text.
Implemented fixes for structure, content, color contrast, focus management, and alternative text.
Duration: 1 week
Conducted joint testing sessions; documented issues in shared ticketing system; verified compliance with AODA, Section 508, and EAA standards.
Conducted joint testing sessions; documented issues in shared ticketing system; verified compliance with AODA, Section 508, and EAA standards.
Duration: 3 days
Delivered accessibility report and WCAG compliance checklists; trained client team on sustainable a11y practices.
Delivered accessibility report and WCAG compliance checklists; trained client team on sustainable a11y practices.
Project Details
Design
- Replaced inaccessible image carousels with WCAG-compliant alternatives supporting keyboard navigation and visible focus (WCAG 2.1.1 Keyboard, 2.4.7 Focus Visible)
- Removed deprecated
<marquee>elements and re-implemented content using ARIA live regions and semantic structure (WCAG 1.3.1 Info and Relationships) - Ensured that all interactive elements (buttons, toggles, tabs) had appropriate ARIA roles and states (WCAG 4.1.2 Name, Role, Value)
Structure
- Audited and restructured main navigation to allow full keyboard operability and screen reader compatibility (WCAG 2.1.1 Keyboard, 2.4.3 Focus Order)
- Rebuilt forms with proper
<label>associations,<fieldset>and<legend>usage, and logical tab order (WCAG 1.3.1 Info and Relationships, 3.3.2 Labels or Instructions) - Converted inaccessible CAPTCHA elements into accessible alternatives (e.g., audio CAPTCHA or compliant third-party services) (WCAG 1.1.1 Non-text Content, 1.3.5 Identify Input Purpose)
Appearance
- Remediated text and UI element color contrast failures across ~50 pages to meet the minimum 4.5:1 ratio (WCAG 1.4.3 Contrast (Minimum))
- Added visible focus indicators to all actionable elements to support keyboard users (WCAG 2.4.7 Focus Visible)
- Normalized visual hierarchy using semantic heading levels (
<h1>–<h6>) to support assistive tech parsing (WCAG 1.3.1 Info and Relationships)
Content
- Collaborated with client to determine which of the many images were informative vs decorative, applying meaningful alt text only where appropriate (WCAG 1.1.1 Non-text Content)
- Revised vague link text like “Click here” and “Read more” to be descriptive in context (WCAG 2.4.4 Link Purpose (In Context))
- Improved instructions and error feedback in forms to ensure clear labeling and assistive tech compatibility (WCAG 3.3.1 Error Identification, 3.3.2 Labels or Instructions)