Improve the accessibility of your site

Updated at June 19th, 2025

+ More

Table of Contents

Set tags and write alt text for images Set a tag for a text layer Write alt text for images Set accessibility landmarks

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 your design more accessible.

These guidelines are provided for informational purposes. Please consult with a lawyer to ensure you understand your legal obligations with respect to accessibility. Do not rely on these guidelines or Figma Sites to make sure you are in compliance with the law.

Set tags and write alt text for 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

Figma automatically assigns the <p> tag to all text layers by default.

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 accessibility landmarks

Accessibility landmarks are specific HTML tags designed to help users who rely on assistive technologies. These tags clearly define different sections of a website, making navigation easier and more intuitive.

Tip: Learn more about accessibility landmarks, including visual examples, from the W3 Schools Guide to Accessibility Landmarks.

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.

Improve the accessibility of your site

Contact Us

Set tags and write alt text for images

Set a tag for a text layer

Write alt text for images

Set accessibility landmarks

Related Articles