Accessibility
Figma doesn’t provide the ability to add accessibility information to your designs. However, figma.to.website offers some conventions to add accessibility information to the published HTML.
This page only introduces some accessibility examples, and is not an exhaustive list of the accessibility capabilities of figma.to.website. You can add any accessibility you want to your published website by adding custom HTML to your designs.
Headers
You can add “<h1>”, “<h2>”, “<h3>”, etc... tags to any layer by adding “<h1>” (or any other tag) in the Layer name, or in the Text style name used by a text layer.
Demo
Inspect in Figma and on the web
Header 1
Header 2
Header 3
Text content
Text lists are transformed into “<ul>” or “<ol>” tags accordingly.
Demo
Inspect in Figma and on the web
- Unordered item 1
- Unordered item 2
- Unordered item 3
- Ordered item 1
- Ordered item 2
- Ordered item 3
Image alt text
The image layer name is used as the “alt” description of the image.
Demo
Inspect in Figma and on the web