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.
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
Encapsulates the main content of a page, including the title and body, but excludes general site elements like navigation.
Designates the site's footer, typically containing secondary links and email sign-up sections. It can also be used within individual sections.
Identifies the site's header or navigation bar, which can be a floating sticky bar. It's also applicable within sections.
Surrounds all navigation elements on a page, such as header links, footer links, or sidebar navigation.
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.
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.
Sometimes, elements lack a default accessible name or their name doesn't accurately reflect their content. In such cases, use the
aria-label attribute to define a more appropriate accessible name. For example, a button's accessible name is the text between its tags, an image's name is its alt text, and a form input's name is the associated label text.
By utilizing these tools and strategies, you can significantly improve the accessibility of your website, making it more inclusive and user-friendly.