Screen Reader Order

About this plugin

Screen Reader Order helps designers create accessible interfaces by visualizing how screen readers navigate through designs.

👉 Access the plugin Plugin Playground to try it out.

Comments and suggestions for improvement are welcome.

🔍 What it does:

- Analyzes the reading order of text and images in your frames

- Identifies accessibility issues like missing alt text

- Lets you reorder elements with drag & drop

- Exports documentation for developers

✨ Key Features:

- Visual reading order preview with numbered sequence

- Drag and drop to reorder elements

- Automatic detection of images without alt text

- Add alt text descriptions directly in the plugin

- Export a documentation frame for handoff

- Quick element location in Figma with "View item" button

- Resizable interface (S, M, L)

⚠️ Issues Detected:

- Images without alt text

- Empty text elements

- Incorrect reading order

🎯 Perfect for:

- UX/UI designers focused on accessibility

- Design systems teams

- Teams working on WCAG compliance

- Anyone building inclusive digital products

🚀 How to use:

1. Select a frame in your design

2. Run the plugin

3. Review the reading order

4. Drag to reorder elements (optional)

5. Add alt text to images

6. Export documentation for developers

💡 Pro tip: Use descriptive layer names like "btn-submit" or "img-hero" for better identification.

Made with ❤️ for accessible design.