Introduction
Most accessibility problems on a design tool site come from five things: heading order, alt text, contrast, focus states and motion. Four of the five need no code at all in Framer, and together they cover the majority of what an audit would flag.
Heading Order Is Structure, Not Size
Framer's accessibility panel is where most of this lives: text styles carry semantic tags you can override per instance, frame tags set page structure, and tab order is adjustable. Headings describe the shape of a page, and screen readers navigate by them. One h1, then h2 for sections, then h3 beneath those. Skipping from h1 to h3 because it looked better is the most common mistake, and it is a styling decision made in the wrong place.
If a heading is the wrong size, change the text style. Do not change the heading level to get a size.
Alt Text Describes Purpose
Good alt text say what the image is doing, not what it contains. A product photo needs the product named. A decorative shape needs empty alt so it is skipped rather than read aloud as a filename.
Useful | Not useful |
|---|---|
Names the subject and its purpose | The filename |
Empty alt on decorative shapes | Describing a decorative gradient |
Text in an image repeated in the alt | Starting with image of |
Short and specific | A paragraph of keywords |
Contrast Is Where Dark Themes Fail
Gray text on a dark background is the signature failure of a modern design site. WCAG 2.2 Level AA asks for a contrast ratio of at least 4.5 to 1 for body text against its background, and at least 3 to 1 for large text, which it defines as 18pt or 14pt bold. The colors that look sophisticated on a calibrated laptop are frequently the ones that vanish in daylight.
Focus States Are Not Optional
Anyone navigating by keyboard needs to see where they are. Removing focus outlines because they looked untidy leaves those people lost with no recourse. If the default outline clashes, design a better one rather than deleting it, and give it a contrast ratio of at least 3 to 1 against what sits behind it, which is what WCAG asks of any non text indicator. This is also the one item here Framer gives you least control over: focus styling is designable on form inputs and component variants, but there is no site wide focus ring setting for every link and button.
Motion Should Be Reducible
Large parallax and heavy scroll animation cause real discomfort for some people, not mild annoyance. Respect the reduced motion preference, and treat big movement as something to use deliberately rather than as a default.
A Ten Minute Check
Tab through the page and watch where focus goes. Read the headings in order and see whether they describe the page. Look at the site in daylight on a phone. That catches more than most automated tools, and it costs ten minutes.
Focus states and heading styles are worth defining once as components and text styles rather than per page. Our templates ship with both already set, which removes most of this work before you start.
