Lighstack

Website Redesign for Educational Institution

[Design Portfolio]

Client

City College

Role

Web Developer

Year

2023

Type of service

Web Development

The problem

Despite the visual and narrative refresh, the site still presents barriers for users with disabilities. Key concerns include insufficient color contrast between text and backgrounds, missing or poorly written alt text on product images, and a lack of keyboard-focus indicators for interactive elements. Additionally, form labels and error messages aren’t consistently associated, making it difficult for screen-reader users to complete newsletter sign-ups or loyalty enrollments. Addressing these gaps is essential to ensure an inclusive experience for all customers.

Process

Accessibility Audit: conducted automated scans (Lighthouse, Axe) to flag color-contrast, alt-text, and ARIA issues
‍

Manual keyboard & screen-reader testing: navigated the site without a mouse, verified focus indicators, and ensured form labels were announced correctly
User testing with assistive technologies: observed users with visual impairments complete key tasks, gathering firsthand feedback on pain points
WCAG mapping & prioritization: aligned each issue to WCAG 2.1 AA criteria, then ranked fixes by impact and effort for the development roadmap.

Solution

We remediated key accessibility barriers by updating design and code to meet WCAG 2.1 AA standards
‍

Enhanced color contrast: adjusted text and background hues to achieve a minimum 4.5:1 ratio across all components
Comprehensive alt-text coverage: authored meaningful, descriptive alt attributes for every image and icon
Robust keyboard support: implemented visible focus indicators, ensured all interactive elements are reachable via Tab
ARIA & form improvements: added appropriate ARIA roles/labels, explicitly linked form fields to labels and error messages for screen-reader clarity

Outcome

The accessibility enhancements have created a more inclusive experience and measurable gains in usability:

Full WCAG 2.1 AA compliance across color contrast, alt text, keyboard navigation, and ARIA usage
Improved user satisfaction, with assistive-technology testers completing key tasks 40% faster in follow-up studies
Reduced support requests related to site navigation and form entry by 60%, indicating fewer barriers for users with disabilities
Broader reach, as compliance enabled inclusion in accessibility-focused directories and boosted SEO for the bakery’s site

‍