Enhancing web accessibility

Accessibility is fundamental to web design, ensuring a wider audience can access and enjoy your content. While Framer automates some aspects of accessibility, the real impact lies in how you assign meaning to web elements. This intentional assignment is key to creating an optimally accessible website.

Accessibility tools

Framer’s accessibility panel includes various tools to help enhance your website’s accessibility, simplifying the process of making your site more inclusive.

Text styles and semantic tags

When you create text styles in Framer, they’re automatically assigned semantic tags like h1, h2, h3, or p. You can override these tags for specific instances through the accessibility panel, allowing you to customize your site’s semantic structure.

Understanding frame tags

Frame tags are essential for organizing and structuring webpage content, improving user experience and navigation. Below are descriptions of various frame tags and their functions:

  • Article frame: Encapsulates the main content of a page, including the title and body, while excluding general site elements like navigation.

  • Footer frame: Designates the site’s footer, which typically contains secondary links and email sign-up sections. It can also be used within individual sections.

  • Header frame: Identifies the site’s header or navigation bar, which may be a floating sticky bar. It’s also applicable within sections.

  • Nav frame: Surrounds all navigation elements on a page, such as header links, footer links, or sidebar navigation.

  • Section frame: Marks a distinct section of your page, such as a block for unique selling points (USPs) or testimonials.

Image alt text

You can add alternative text to image frames through the accessibility panel. This alt text helps search engines and screen readers describe the image and is displayed if the image fails to load. Our guide provides best practices for writing effective alt text.

Video description

For videos without an audio track, it’s recommended to describe the video content below the video. You can find examples here.

Tab order customization

By default, the tab order on a webpage follows the sequence of links, buttons, and inputs based on their arrangement in the layers panel or markup. Framer’s accessibility panel allows you to set a custom tab order, which is especially useful for directing users’ attention to primary calls to action (CTAs) first.

Contrast ratio

To assess your site's contrast ratio, use the Lighthouse report in Chrome’s developer tools. Although this is a user-side consideration, it’s crucial for your Lighthouse score, particularly on pages where these scores are emphasized.

Setting reduced motion

Modern operating systems let users indicate a preference for reduced motion. Framer offers a setting that disables parallax, transform, and layout animations for users who prefer less motion.