The problem
Every pharma site carries Important Safety Information, usually in a sticky tray added late in the build. Regulatory review often sets its size, but rarely its design. It hides whatever a keyboard user is focused on, reads twice to screen readers, and can't be dismissed. It exists for regulatory reasons, so it can't simply go away.
What we changed
| Problem in a typical tray | Our fix | WCAG reference | Ansanm band |
|---|---|---|---|
| Covers the focused element | Scroll padding matches the tray at whatever height review sets, so focus is never hidden | 2.4.11 Focus Not Obscured | Physical band, Ansanm Framework |
| Read twice by screen readers | One full copy inline; the tray is a summary that links to it | 1.3.2 Meaningful Sequence | Digital band, Ansanm Framework |
| Never goes away | Docks once the full section is reached; minimize persists for the session | 2.4.11 | Cognitive band, Ansanm Framework |
| Mouse-only toggle | Native button with aria-expanded and aria-controls; Esc collapses | 2.1.1, 2.1.2, 4.1.2 | Physical band, Ansanm Framework |
| Breaks on small screens | Becomes a one-line button at 320px or 400% zoom | 1.4.10 Reflow | Contextual band, Ansanm Framework |
| Slides in regardless of settings | No slide under reduced motion | 2.3.3 (AAA) | Environmental band, Ansanm Framework |
How it works on this site
The tray at the bottom of this page is the case study. Tab to it, expand it, then scroll to the full section and watch it step aside.
Results
Passes the WCAG 2.2 AA criteria above, tested with NVDA, VoiceOver, and TalkBack. This site is the live proof: the tray on every page is the rebuilt component.
Start a project.
Tell me what you’re building and where it needs to land. I respond within 48 hours.
Start a projectIMPORTANT ACCESSIBILITY INFORMATION
INDICATION: Design Lady is indicated for organizations whose websites, documents, and campaigns must work for every person who uses them.
Do not launch if your site has images without alt text, text contrast below 4.5:1, or form fields without labels.
SIDE EFFECTS of inaccessible design may include lost customers, failed procurement reviews, and federal lawsuits (3,117 filed in 2025).
Tell your developer if you rely on an overlay widget. In 2025, 24.9% of website accessibility lawsuits targeted sites that had one installed.
Please see full Prescribing Information: the 5-minute self-audit