Device-neutral language
Use verbs that work for any input method: mouse, touch, keyboard, voice, switch.
|
✅ Prefer |
❌ Avoid |
|---|---|
|
Select Save changes. |
Click the button on the right. |
|
Open Notifications. |
Tap the bell icon. |
|
Choose an environment. |
Hit Enter. |
Meaningful links
Link text should make sense out of context. Screen readers can list every link on a page; "click here" tells the reader nothing about where they'll go.
|
✅ Prefer |
❌ Avoid |
|---|---|
|
Read the OpenTelemetry installation guide. |
Click here for the installation guide. |
|
See AppSignal terminology for all key types. |
See more information. |
No visual direction
Don't say "above", "below", "to the left", or "the button on the right". On a phone, "the sidebar on the left" doesn't exist. For screen readers, "above" has no meaning.
|
✅ Prefer |
❌ Avoid |
|---|---|
|
In the previous step… |
See above. |
|
In the following section… |
Use the option on the left. |
|
Select Billing. |
Click the button below. |
Alt text
Describe the purpose of the image, not every visual detail. If the image is purely decorative, use empty alt text (alt="") so screen readers skip it.
|
✅ Prefer |
❌ Avoid |
|---|---|
|
Namespace filter showing the web and API namespaces |
Screenshot of AppSignal |
|
Billing page with invoice download links |
image001.png |
Don't rely on color
A red border alone isn't enough to communicate an error. Pair it with an icon and a sentence. A green check alone isn't enough to communicate success. Say so in words.
Screen-reader notes
- Don't use punctuation as decoration. Screen readers read it.
- Don't use ALL CAPS for emphasis. Screen readers may spell each letter.
- Don't use ASCII art or emoji as functional UI. Provide a text equivalent.
- Hide truly decorative icons from assistive tech with aria-hidden="true".