Figma plugin for adding screen reader-like comments
Screen Ready helps designers and developers create more accessible interfaces by adding comments with information about how a screen reader should announce each element.
- ARIA role selection: button, link, heading, checkbox, radio, switch
- ARIA attributes configuration: aria-label, aria-disabled, aria-checked, aria-pressed, aria-expanded, aria-haspopup, aria-level
- Screen reader text generation: automatic creation of text describing how the element will be announced by screen readers
- Visual comment creation: adding comments as yellow blocks next to selected frames
- Select a frame in Figma that you want to add a comment to
- Launch the plugin Screen Ready
- Choose the element role (button, link, heading, etc.)
- Configure attributes - add necessary ARIA attributes and their values
- Click "Done" - the plugin will create a comment next to the selected frame
Each comment contains:
🔊 Screen Reader: "text that the screen reader will announce"
📋 HTML Attributes:
role="button"
aria-label="Submit button"
aria-disabled="false"
- button - buttons and interactive elements
- link - links and navigation elements
- heading - headings with levels 1-6
- checkbox - checkboxes with checked/unchecked states
- radio - radio buttons in groups
- switch - on/off toggles
- aria-label - text label for the element
- aria-disabled - accessibility state (true/false)
- aria-checked - checked state for checkbox, radio, switch
- aria-pressed - pressed state for buttons
- aria-expanded - expanded state for dropdown elements
- aria-haspopup - type of popup content
- aria-level - heading level (1-6)
- Figma Desktop App or Figma in browser
- Selected frame, component, or instance to add comment to
# Install dependencies
npm install
# Development build
npm run dev
# Production build
npm run buildsrc/
├── code # Plugin logic for Figma API
├── ui # React plugin interface