ADA Compliance Guide
Web accessibility is a legal requirement. Thousands of businesses face lawsuits annually for non-compliant sites. Learn how to use Framer’s accessibility tools, from ARIA labels to tab order, to ensure your site is inclusive, usable, and legally secure.
1. Semantic HTML Tags
Don't let everything be a <div>. Screen readers rely on tags to understand page structure.
Action: In the Styles panel, ensure your Header is tagged as <header>, your Footer as <footer>, and your main content as <main>.
Why: It allows users to skip directly to the content they want to read.
2. Custom ARIA Labels
Sometimes a button is just an icon (like a "burger" menu). A screen reader won't know what that does.
Action: Select the icon or button, go to the Accessibility section in the right-hand panel, and add a Label like "Open Navigation Menu."
3. Mastering Tab Order
Users with motor disabilities often navigate using only the Tab key.
Action: Test your site by Tabbing through it. Does the focus move logically from top to bottom?
Pro Tip: Use Framer’s "Tab Index" setting to hide decorative elements (set to -1) or prioritize important links.
4. Color Contrast & Legibility
If your text is too light against the background, it’s a violation of WCAG (Web Content Accessibility Guidelines).
Action: Use a contrast checker to ensure a ratio of at least 4.5:1 for normal text.
Avoid: Never rely on color alone to convey meaning (e.g., making a "required" field just red without a text label).
Accessibility is a journey, not a checkbox. Start with these basics, and you'll be ahead of 90% of the sites on the web. Inclusive design is simply better design.
Details
Patricia Ordoñez
