Search
Enhancing web accessibility
Accessibility forms the backbone of web design, ensuring that a wider 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 deliberate assignment is key to creating a website that’s optimally accessible.
Accessibility tools
Framer’s accessibility panel is equipped with a variety of tools designed to help you in this endeavor. These tools streamline the process of making your website more accessible.
Text styles and semantic tags
When you create text styles in Framer, they are automatically assigned appropriate semantic tags like h1, h2, h3, or p. However, you have the flexibility to override these tags for specific instances using the accessibility panel, tailoring your site's semantic structure to your needs.
Understanding Frame tags
Article Frame
Encapsulates the main content of a page, including the title and body, but excludes general site elements like navigation.
Footer Frame
Designates the site's footer, typically containing 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 can 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, like 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. The guide further explains best practices for writing effective alt text.
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/markup. Framer's accessibility panel allows you to set a custom tab order. This feature is particularly 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. While this is a user-side consideration, it's important for our Lighthouse score, especially on pages where these scores are highlighted.
Reduced motion setting
Modern operating systems allow users to express their preference for Reduced Motion. Framer provides a setting to disable parallax, transform, and layout animations for users who prefer reduced motion.