Improve the accessibility of your site
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.
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 |
h1—h6 |
Heading tags help define your content’s structure. Screen readers use these tags to help users navigate sections quickly. For example, |
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. |