Accessibility Case Studies

Improving accessibility on a live site without a redesign.

Overview

This marketing site needed stronger accessibility support while keeping the current visual design and content structure intact. The goal was to improve clarity, navigation, and assistive technology support with minimal disruption to the existing layout. All updates were mapped to WCAG 2.1 AA.

Core Challenges

The site had grown over time with multiple contributors. Some visual builder patterns were mixed with custom code placed inside the body element. These interdependencies made it important to improve accessibility without introducing layout or interaction issues.

Approach

Structural improvements and cleanup

• Identified a large block of global CSS placed in the body and recommended moving it to project settings for proper validation.
• Improved the use of headings, main, and footer so the reading order is predictable.

I documented the CSS relocation for the client's developer since moving that amount of styling could affect components I did not build.

Color contrast and visual consistency

• Verified brand colors against WCAG contrast requirements.
• Suggested a small color adjustment for one palette value that did not pass against white backgrounds.
• Unified the focus outline style to improve clarity for keyboard users.

Skip link and focus behavior

• Added a skip to main content link and styled it so keyboard users can find it immediately at the top of the page.
• Chose the page H1 as the focus target because it provides a clear sense of location and helps users understand where they landed after skipping repeated navigation.
• Added a lightweight JavaScript function so the skip link does more than scroll the page. The script temporarily adds a tabindex of minus one to the H1, shifts focus to it, allows screen readers to announce it, then removes the tabindex so the DOM stays clean.
• This improves the behavior that many sites rely on, where an href moves the viewport but assistive technology does not announce the new context, leaving users without confirmation that the skip action worked.
• Tested the sequence with VoiceOver in Safari and on iOS to confirm that the heading is announced and that tab order continues in a predictable way.

Screen reader testing

• Tested templates with VoiceOver in Safari.
• Tested mobile behavior with VoiceOver on iOS for accurate announcements and order.

Navigation behavior review

• Identified a slow color transition on the fixed navigation that caused readability issues.
• Recommended speeding up or removing the transition for clarity.
• Reviewed inherited interactions that added unnecessary complexity.

In progress:

• Further refinements will follow once the preferred long term pattern is confirmed.

Mobile navigation and focus management

In progress:

• Background scroll currently remains active under the mobile menu.
• Focus trapping, scroll locking, and aria attributes are being added.
• Work continues alongside the navigation refactor.

Form structure and error handling

• Identified missing labels and inconsistent form structure.
• Mapped needed improvements to WCAG 2.1 AA standards for labeling and errors.

In progress:

• Adding an aria polite region for error announcements.
• Linking each error item directly to its input.
• Moving focus to the error block so screen reader users understand what changed.

Accessibility statement

• Created a custom accessibility statement specific to this site rather than using a generic template.
• Included accurate details about current compliance and planned improvements.

Results

• More predictable navigation and clearer focus movement.
• Improved alignment with WCAG 2.1 AA across structure, color, and focus behavior.
• Skip link behavior works consistently across templates.
• Form interactions are more accessible with improved screen reader support underway.
• A custom accessibility statement now reflects the actual work completed and the improvement plan.

Key takeaway

A live site can become significantly more accessible through targeted improvements to structure, focus behavior, and interaction patterns. These updates can be implemented safely even when components are interdependent, as long as the work is guided by careful testing and WCAG 2.1 AA standards.

Delivering an accessible hero animation within a locked creative direction.

Overview

This project took place in an agency environment where the client had already approved the final creative assets before any accessibility review. The approved hero design included fast motion, scaling elements, and contrast issues. My role was to deliver an accessible implementation without altering the approved visuals. This required multiple adjustments, testing cycles, and careful collaboration with the creative team.

Core Challenges

The locked design included rapid motion, expanding and rotating imagery, and color combinations that did not pass contrast requirements when built. There were no controls to pause or stop the animation. The prototype itself caused me noticeable dizziness even though I do not have motion sensitivity, and it was easy to see how it could also affect people without known sensitivities, which raised concerns for users with vestibular disorders who can experience nausea, disorientation, or discomfort from this type of continuous movement. Flashing content is the more typical seizure trigger, but high intensity motion with rapid contrast changes can increase risk for some users. The delivery timeline did not change, even though the work needed to meet accessibility expectations doubled.

Approach

Slower, more stable timing

• Reduced the speed of the animation to make motion smoother and less abrupt.
• Removed sharp scaling jumps that could create discomfort or motion sensitivity.
• Preserved the creative intent while reducing the rotation and expansion speed to a much slower, more tolerable timing. The animation originally cycled too quickly for safe viewing, so I recalibrated the duration so each frame had enough time to register without inducing strain or disorientation.

Play and pause control

• Added a visually integrated play and pause control that matched the approved design instead of looking added later.
• Placed the control as the first focusable element in the experience so keyboard and assistive technology users encounter the control immediately, before entering the animated region. This prevents users from being forced to tab through a moving hero without the ability to stop it first.
• Added ARIA attributes so assistive technologies announce state changes. Included an aria live polite region that announces when the animation is paused or resumed so users relying on screen readers receive clear feedback.
• Ensured users could pause movement at any time, which is a requirement for animated content.
• Built logic that stops the animation after five seconds so users are not overwhelmed by endless motion.

Reduced motion support

• Implemented the prefers reduced motion media query so users who have motion reduction enabled at the system level automatically receive a non animated version without needing to find or activate the play and pause control.
• Delivered static hero assets for all breakpoints so reduced motion users receive a cohesive visual alternative.
• Creative was overloaded at the time, so I generated the static versions myself and then sent them for final approval to maintain brand alignment.

Mobile considerations

• Disabled the animation entirely on mobile to avoid performance issues and unpredictable motion behavior.
• Served the static image for mobile to provide a stable, readable experience.

Color and contrast adjustments

• Identified brand colors that did not pass contrast when placed over motion or lighter areas.
• Adjusted specific color values to meet WCAG 2.1 AA contrast requirements while keeping the overall palette consistent with the brand concept.

Workload and coordination

• The accessibility workload doubled but the delivery schedule remained fixed.
• Coordinated closely with creative to approve fallback visuals and motion adjustments.
• Handled the development of animation timing, control logic, and motion preferences on top of the standard build.

Results

• Prioritized an equivalent experience for assistive technology users instead of hiding the entire hero with aria hidden. Removing major content breaks the context and creates a meaningfully different experience. The goal was to keep the structure and information available while reducing or eliminating motion when needed. This ensures users who rely on assistive technology receive a version that is consistent in purpose and content with the non assistive experience.
• The hero animation remained visually engaging but became stable, smoother, and easier to tolerate.
• Users gained full control over motion with a clear play and pause button.
• Motion stopped automatically after five seconds to prevent overload.
• Reduced motion users and mobile users received clean static imagery without needing to adjust settings.
• Color adjustments made the component readable without altering the creative direction.
• The final build respected the client's approved design while meeting accessibility expectations for real users.

Key takeaway

Motion heavy creative can remain fully intact and accessible when timing, control, and user preference signals are respected. By adding user controlled playback, honoring system level motion preferences, slowing the animation to a safe rate, and coordinating tightly with creative to preserve the intended look and feel, it is possible to deliver a hero experience that is visually rich and still usable for people with motion sensitivities, keyboard only users, and screen reader users. The approved design stayed intact, and the final solution supported a much broader set of users without altering the core creative concept.