Optimizing for Accessibility

While Framer can do some small things automatically, in the end it comes down to the meaning you add to the elements for a site with great accessibility. Framer gives you a set of excellent tools under the accessibility panel to do so.

Text Styles

Text styles come with the right semantic tag by default, which you can choose on creation. You can pick h1 to h3 or p. You can optionally override the used tag in specific instances with the accessibility panel.

Frame Tags

• article: A Frame wrapping an entire content of page, including title and content, excluding general site stuff like navigation.

• footer: The site footer, where all the junk links and email signup live. Can also be used within sections.

• header: The site header nav, for instance floating sticky bars. Can also be used within sections.

• nav: A Frame that wraps all the navigation in the page. So one Frame wrapping the header links, one wrapping the footer links, one wrapping the sidebar nav etc.

• section: A Frame denoting a distinct section of your page. For instance, a USPs block, a testimonials block etc.

Image ALT text

Image Frames can accept an alt text via the a11y panel. This is text that will be used by search engines and screen readers to describe the image, or shown to users when the image doesn’t load.

This guide explains what kind of stuff you should (and shouldn’t!) write here.

Tab order

By default, every page will cycle users through links, buttons and inputs when they use the tab button to cycle through active elements on the page. This is a best-guess - by default users will tab through elements as they appear in the layers panel/markup. By setting an explicit tab order  in the accessibility panel you can override this behavior, for instance directing users to the primary CTA first.

Contrast ratio

You can check our score on this by running a Lighthouse report in Chrome’s developer tools. Personally I think this is something that should be enforced user-side but it does affect our score so we should be especially careful on pages where we’re bragging about our Lighthouse scores because this is an easy shot.

Reduced motion

Modern operating systems have the ability for users to indicate their preference for Reduced Motion. In site settings, there’s a checkbox that will enable you to turn off all parallax, transform and layout animations for these users.

ARIA label

Sometimes the default accessible name of an element is missing, or does not accurately describe its contents, and there is no content that can be associated with the object to give it meaning.

For instance, a button's accessible name is the content between the opening and closing <button> tags, an image's accessible name is the content of its alt attribute, and a form input's accessible name is the content of the associated <label> element. If none of these options are available, or if the default accessible name is not appropriate, use the aria-label attribute to define the accessible name of an element.

On top of this, ARIA roles and attributes help screen readers understand a page with even greater detail. They're not available to set at this moment yet, but are coming next.