Design with the screen reader layer in mind

Closing the gap between what you’ve designed and what’s announced by screen readers doesn’t require accessibility or production code expertise. It’s about being more intentional with the decisions you’re already making.

Though screen reader output depends on how the design was developed, designers have more influence over the screen reader experience than they think.

Think “role, name, state” while designing

You don’t need to memorize ARIA specs to improve accessibility. Just ask yourself three questions as you design elements like interactive or informative elements:

Role: What is this?
Name: What does it do?
State: What’s its current condition?