Enhancing web accessibility

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

Accessibility Tools

Framer’s accessibility panel includes various tools to assist you in enhancing your website's accessibility. These tools simplify the process of making your site more inclusive.

Text Styles and Semantic Tags

When you create text styles in Framer, they are automatically assigned semantic tags such as h1, h2, h3, or p. You can override these tags for specific instances using 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 when the image fails to load. Our guide further explains best practices for writing effective alt text.

Video Description

For videos, if they don’t have an audio track, it is recommended to describe the content of the video below the video. You can find some 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. This feature 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 is crucial for your Lighthouse score, particularly on pages where these scores are emphasized.

Setting Reduced Motion

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