Figma Sites collection: Make your Figma Site accessible

When you're happy with your design you can start making it more accessible for visitors, including those with disabilities. Using accessibility features may not be required, but is important because it:

• Improves usability for people who rely on screen readers or keyboard navigation.
• Can boost your site’s search engine optimization, by using semantic HTML that clarifies your site’s structure.

Select an element of your design and apply HTML tags and accessibility properties from the Accessibility section in the right sidebar.

Accessibility in Figma Sites

Ways to use accessibility features

You can use accessibility features in Figma Sites to:

• Add alt text to images that need description, or mark it as decorative. Keep alt text concise and functional—focus on the purpose of the image, and not its appearance.
• Set the correct HTML tag. Use a role only when no semantic tag fits.
• Add labels when visible text is missing or unclear.
• Mark purely decorative elements as hidden.
• Use the color contrast tool in the color picker to improve readability.

Automatic tags

The Layers panel shows each layer’s assigned HTML. By default, most layers will use a div tag. Figma also automatically applies these tags:

• Text layers use the p tag.
• Frames and rectangles with a media fill use img or video.
• Layers with a link applied use an a tag.
• Layers with on click interactions use the button tag.

Check your knowledge

Up next: Publish your site

We're almost there! The last step is to publish your site so others can use it. We'll walk you through that in our next lesson.