Improve the accessibility of your site – Figma Learn - Help Center

Figma Sites was released in open beta at Config 2025. It is currently available on all paid plans, with a limited Starter plan experience coming soon. Learn more about what’s included in the beta.

Who can use this feature

Available on all paid plans

Requires edit access to the file

You can enhance your site's accessibility by selecting the appropriate HTML tags for each element in your design.

This makes your site more usable for people who rely on screen readers or keyboard navigation. Using semantic HTML provides a clearer structure, which can also improve your site's search engine optimization (SEO).

Tip: You can also use the color contrast tool in the color picker to make sure your design meets Web Content Accessibility Guidelines (WCAG).

Set tags and write alt text for images

By default, Figma assigns the div tag to all elements except images. To customize an element’s tag:

Select one or more layers on the canvas.
In the right sidebar, click the plus icon in the Accessibility section.
Select a tag, or add alt text to your image.

Note: If you modify a tag for an element that exists across multiple breakpoints, edits made on the primary breakpoint will automatically apply to all breakpoints. Edits made on non-primary breakpoints only affect the element on that specific breakpoint.

Learn more about making changes across multiple breakpoints in a webpage.

Set a tag for a text layer

Tag	What it means
div	A general container for grouping elements, often used for styling and layout.
p	The `<p>` tag signifies a block of text. This breaks content into manageable pieces for easier reading and comprehension.
h1—h6	Heading tags help define your content’s structure. Screen readers use these tags to help users navigate sections quickly. For example, `<h1>` indicates the main title, while `<h2>` to `<h6>` create subheadings that outline the content hierarchy.

Write alt text for images

Images in your site are automatically assigned the img tag. You can add alt text to each image—a brief description of the image that provides context to users who cannot see it, such as those using screen readers.

Tip: Looking for more guidance on how to write effective alt text? Check out Alt text: What to write from Nielsen Norman Group.

Set a tag for a frame, shape, or vector object

For other elements, you can choose tags that best describe their function.

Tag	What it means
div	A general container for grouping elements, often used for styling and layout.
article	A self-contained piece of content—like a blog post, press release, or help center article—that can stand on its own.
aside	Contains content related to the main content, like sidebars or extra information.
footer	The bottom part of a page or section, usually with info like copyright notices or links.
header	The top part of a section or page, typically with a title or navigation links.
main	The primary area of a document that holds the main content, excluding headers and footers.
nav	A section containing navigation links to other parts of the site.
section	A segment of a webpage that groups related content, generally with a heading.

Note: Some tags—like button—are not yet available in Figma Sites.