Optimizing images, icons & interactive elements
In this Framer tutorial, you will learn Optimizing images, icons & interactive elements. We explain a practical workflow, highlight the key settings that affect the result, and show how to apply the technique on real pages for cleaner UX and better site performance.
How do I add alt text to images in Framer, and what makes good alt text?
To add alt text to an image in Framer, you must first select the image layer on your canvas. Then, in the properties panel on the right, scroll down to find the dedicated Accessibility panel. Within this panel, you’ll see a field labeled “Alt text”, this is precisely where you can type in your clear image description. Good alt text should be short, descriptive, and feel natural, as though you’re quickly describing the picture to someone over the phone. For instance, instead of writing “hero-image-mountain-sunrise-v2”, write something like “a person standing on a mountain at sunrise”. If the image is purely decorative, like a background shape or gradient, it’s best practice to leave the alt text field empty so screen readers know to skip it entirely.
When should I use ARIA labels in Framer, and how do I add them?
ARIA labels are useful for describing elements that don’t have visible text, such as icons that act as links or buttons. If you have an icon inside a frame that acts like a link or button and there’s no text around it, a screen reader won’t know what it does unless you provide an ARIA label. To add an ARIA label in Framer, go to the accessibility section in the properties panel and select ARIA label. Then, type a short descriptive phrase that clearly explains what the element does in context, such as ’visit us on Instagram’ for an Instagram icon link.
What are best practices for writing button and link text for accessibility and SEO in Framer?
To improve both accessibility and SEO, be specific with your button and link text. Avoid vague phrases like ’click here’ or ’learn more’, as they don’t tell users or search engines what to expect. Instead, use text that clearly spells out the action or destination, such as ’view pricing details’, ’explore case studies’, or ’download the guide’. These clear labels help users know what to expect and give search engines stronger signals about the content they’re linking to.
Lesson details
