Guide
Fix a screen's accessibility warnings
Bitácora checks contrast, touch size, small text and unnamed elements on every screen, and lets you fix them all with one note.
Who can do this
- For
- Designers, Your team
- Role
- “Can review and comment” and up
- Plan
- All plans, including Free
- Where
- On a computer
Every time a screen changes, Bitácora checks its accessibility. If it finds something, the screen's label shows an icon with the number of warnings, in the color of the most serious one.
See the warnings
- Click the icon with the number on the screen's label.
- Accessibility of opens with the screen's name: errors first and, within each, from top to bottom.
- Hover over a warning to see which element on the screen it refers to.
What is checked
| Warning | What it asks for | It is an error if |
|---|---|---|
| Contrast | At least 4.5:1 between text and its background (3:1 for large text) | It drops below 3:1 |
| Touch size | Tappable areas of at least 44 × 44 px | It drops below 32 px |
| Small text | Text of at least 12 px | It drops below 10 px |
| Image without description | Every image with its alt text | It is always a warning |
| Control without a name | Every field with its label | It is always a warning |
Fix them
At the bottom of the panel you have two buttons:
- Add as a note: all the warnings become one note, with a point on each element, and they are fixed in your next run.
- Run them all now: the same, but they are fixed right away, with your API key or your connected AI.
If a warning does not matter to you (for example, small text that is on purpose), click its X to dismiss it. Dismissed warnings stay in their dropdown, where you can Restore them.
Who can do it
Anyone can see the warnings. Add as a note requires Can review and comment; Run them all now and dismissing warnings require Can run with AI (without that role, the buttons do not show).
