Framer Offers Accessibility Features, But Are They Enough?

Back to blog

Framer Offers Accessibility Features, But Are They Enough?

Posted March 17, 2023

AudioEye

Posted March 17, 2023

A green accessibility symbol next to the icon for Framer, a no-code web builder.
A green accessibility symbol next to the icon for Framer, a no-code web builder.

In this post, Sr. Manager of Brand and Design, Sojin Rank, provides an overview of the website builder Framer and its accessibility features.

On Twitter, one of the hottest topics among designers has been Framer — a no-code web builder that comes with built-in accessibility features.

Framer has gotten a lot of hype because it’s a great example of the #NoCode movement. As designers, we’re always looking for ways to be more efficient — and a tool that lets us design and build websites without having to write a line of code certainly fits the bill.

It’s exciting to think about the possibilities. But to borrow a familiar adage, with great power comes great responsibility.

If designers are going to be responsible for websites going live — and not just the static mock-ups or interactive prototypes — it also falls on them to make sure these sites are accessible to every visitor.

With that in mind, I decided to play around with Framer and explore its accessibility features. Here are my initial thoughts.

A grid of four icons: the first reads "Semantic HTML Tags," the second reads "Tab Order," the third reads "Reduced Motion," and the fourth reads "Image Alt Text."

What Does Framer Get Right About Accessibility?

First, let’s not bury the lede. It’s incredibly exciting that companies like Framer are prioritizing accessibility — and in turn, encouraging others to think about accessibility.

Framer offers a number of accessibility features, such as:

1. Semantic HTML Tags

Framer doesn’t actually list Semantic HTML tags under the accessibility section of their website (instead, they list Semantics as a separate section), but they should.

Semantic HTML tags help define the meaning of the content they contain, which provides important clarity for search engines and people who use screen readers. For example, tagging an element as a <header> provides more context into its role than simply tagging it as a <div> or <span>.

Framer makes it easy to tag different elements of a page, such as headers and images.

2. Tab Order

Screen reader users will often tab through all of the links and buttons on a page the first time they visit it. The idea — as explained by A11iance Advocate Charles Hiser — is to build a mental model of the page before deciding whether they want to read further, similar to how someone might skim a page’s headlines or table of contents before diving in.

Framer anticipates this, so it allows users to use the tab button to cycle through active elements on the page. However, it also lets designers set an explicit tab order in the accessibility panel.

3. Reduced Motion

According to Framer, “modern operating systems have the ability for users to indicate their preference for reduced motion.” For any site built on Framer, there’s an option in the site settings to turn off all parallax, transform, and animations for these users.

At AudioEye, we’ve written about the need to be mindful of animation — and how it can be disruptive or even dangerous for different disabilities.

4. Image Alt Text

Framer makes it easy to add image alternative text, or alt text, to any image or graphic.

Alt text is a written description of an image that screen readers can read out loud — or convert to Braille — for people with visual impairments, sensory processing disorders, or learning disorders.

A stylized web browser with a label that reads "Web Content Accessibility Guidelines" in the upper-right corner. In the bottom-left corner is a magnifying glass hovering over an accessibility symbol.

Where Can Framer Improve?

It’s great that Framer provides all of these accessibility features, but I have a slight issue with how they position accessibility on their site.

Instead of highlighting the fact that just 3% of the internet is accessible to people with disabilities, Framer focuses on how its accessibility features can help designers optimize their sites for SEO.

This might not seem like a huge deal — after all, there is a strong link between SEO and digital accessibility — but it devalues the importance of accessible design for the one in six people globally who live with a disability.

Additionally, the features that Framer does offer are not exhaustive. Simply adding alt text or setting the reading order of a page won’t ensure an accessible site. Designers still need to follow the best practices of accessible design, from accessibility standards like the Web Content Accessibility Guidelines (WCAG) to common accessibility mistakes.

Finally, tools like Framer can instill a false sense of confidence in designers — and lead them to overlook other accessibility issues (like this auto-playing carousel that doesn’t work with screen readers).

A stylized web page with a number of accessibility errors marked by green icons with exclamation points.

What’s the Verdict On Framer?

At the end of the day, Framer is like many of the other website builders out there. It might be the shiny new toy and come with a few accessibility features, but that doesn’t mean it’s enough by itself.

So what else should designers do? As a first step, I recommend learning more about the principles of accessible design. Tools like Framer are handy, but they can’t do it alone. Instead, you should familiarize yourself with the latest accessibility standards and best practices (WCAG’s Supplemental Guidance to WCAG 2 is a great resource for improving your site’s accessibility).

Want to get more accessibility tips? Check out AudioEye’s Comprehensive Guide on Accessible Design, which covers everything from site architecture to video best practices.

Ready to test your website for accessibility?

Scan your website now.

Share post

Topics:

Keep Reading