Publishing & Settings, SEO

Optimizing Images, Icons, and Interactive Elements in Framer (SEO Lesson 3)

Justin

4:54

6.1K views

Jul 15, 2025

About this lesson

Learn how to add alt text, ARIA labels, and clear button text in Framer to make your site more accessible and SEO-friendly. Small changes here go a long way in helping people (and search engines) understand your content.

https://www.youtube.com/watch?v=Fztuf6GDyb0&t=0s Introduction

https://www.youtube.com/watch?v=Fztuf6GDyb0&t=45s Alt Text for Images

https://www.youtube.com/watch?v=Fztuf6GDyb0&t=123s ARIA Lables for Icons & Graphics

https://www.youtube.com/watch?v=Fztuf6GDyb0&t=187s Descriptive Button & Link Text

https://www.youtube.com/watch?v=Fztuf6GDyb0&t=251s Wrap Up

Check out the full course here: https://www.framer.com/academy/courses/structure-for-visibility-with-seo-in-framer

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

MB013MQ8YHMNWAA

0:00When someone can't see your site,0:01whether they're using a screen reader or 0:03their bandwidth is limited, the way you 0:06describe your images and icons become 0:08incredibly important. That's where 0:11things like alt text and ara labels come 0:13in. They fill in the blanks for people 0:16who can't rely on visuals, and they give 0:18search engines more context about what's 0:20actually on the page. So, in this 0:23lesson, we'll walk through how to 0:25describe visual and interactive elements 0:27using the right accessibility tools like 0:30alt text for images, ara labels for 0:32icons, and clear descriptive button and 0:35link text. Believe it or not, these 0:37small adjustments make a big impact.0:45Let's kick things off by talking about 0:47alternative text, also known as alt 0:50text. Alt text is a brief description 0:53that lives in the code of your site and 0:55gets read aloud by screen readers when 0:58someone can't view the image. And just 1:00like other tags, it lets search engines 1:02better understand the content of your 1:04visuals, which if you haven't guessed by 1:06this point in the course, is very 1:09important. To add alt text to an image 1:11in Framer, just select the image, then 1:14click on it under the fill section in 1:16the style panel. Scroll to the bottom 1:18and you'll see a field labeled alt text.1:22This is where we can type in our image 1:24description. Alt text should always be 1:27short, clear, and feel human, like we're 1:30writing a sentence as if we were 1:32describing the image to someone over the 1:34phone. For example, instead of writing 1:37hero-image-1:39mountain-- sunrise-v2,1:42we'd want to write something more like a 1:44person standing on a mountain at 1:46sunrise.1:47Now, if the image is decorative, like a 1:50background shape or a gradient, it's 1:52okay to leave the alt text empty so 1:55screen readers know to skip it. Done 1:58right, alt text helps both your users 2:00and your SEO.2:03Next, let's move to Arya labels. Arya 2:06stands for accessible rich internet 2:09applications. But you don't need to 2:11remember that. What matters is that Arya 2:13labels let us describe elements that 2:15don't have visible text. So, if you've 2:18got an icon inside a frame that acts 2:21like a link or a button and there's no 2:23text around it, a screen reader won't 2:25know what it does unless we tell it.2:28Just like other tags, we can add an ARA 2:31label by heading to the accessibility 2:32section in the properties panel and 2:34selecting Arya label. Then simply type a 2:38short descriptive phrase that clearly 2:40explains what the element does in 2:42context. For example, in my footer, I 2:45have an image that links to Instagram 2:47and only shows the Instagram icon. So my 2:50Arya label for this might be visit us on 2:53Instagram.2:55Remember that all of these small details 2:58add up to help bridge the gap between 3:00design and usability. Making sure 3:03everyone, regardless of how they 3:05navigate the web, gets the same 3:06experience. That brings us to the next 3:09part. How to write clear, descriptive 3:11button and link text that helps everyone 3:14get where they're going. By now, you've 3:16probably noticed that one of the easiest 3:18ways to improve both accessibility and 3:20SEO is by being specific with our 3:23wording. That's especially true for 3:25buttons and links. So, it's best to 3:27avoid vague phrases like click here or 3:30learn more, which are everywhere, but 3:32don't actually tell anyone what to 3:34expect. Sure, they're easy to write,3:37which is why they're so common, but they 3:39leave users guessing and give search 3:41engines almost no information to work 3:43with. Instead, we want to aim for text 3:46that clearly spells out what someone can 3:48expect when they click. So things like 3:51view pricing details, explore case 3:54studies, download the guide. These kinds 3:58of labels don't just help users know 4:00what to expect, they also give search 4:02engines stronger signals about the 4:04content they're linking to, and that can 4:06make a real difference in how your pages 4:09are ranked and discovered. These are all 4:12loweffort, high impact wins, and they go 4:15a long way in making your site more 4:16inclusive and easier for people and 4:19search engines to understand. In the 4:22next lesson, we'll move on from 4:24individual elements to full page SEO,4:27including how to set titles, page 4:29descriptions, and URLs that help your 4:31pages show up in search results. But 4:34again, throughout this course, always 4:37remember this. If your content isn't 4:40purely visual, don't make it only 4:43visual. Describe it with intention. And 4:46I'll see you in the next one.

TeachesImage Optimization Semantic Tags

Also coversFrames Links Plans & Pricing SEO Audit

Watch on YouTube ↗

‹ Mastering transitions and easing in Framer (Animation Lesson 3)

Startups are hard, Framer makes one part easy. Your website. ›