How to make a Figma website accessible

Figma doesn’t let you add accessibility information to a design. figma.to.website follows a few conventions to add it to the published HTML instead.

The examples below aren’t the full list: you can add any accessibility markup with custom HTML.

Headings

Add <h1>, <h2>, <h3>… to a layer’s name, or to the name of the text style a text layer uses, and the layer is published as that heading.

<h1>

A clear heading outline helps screen-reader users navigate the page, and search engines understand it. More in Custom HTML.

Lists

Bulleted and numbered text lists in Figma are published as <ul> and <ol> lists.

Image alt text

The image layer’s name is used as the image’s alt text: name each image for what it shows.

The image above comes from a layer named “Grapefruit slice atop a pile of other slices”, which is also its alt text.