“Click here for details,” “click here” — a common way to write links, but a big problem for screen reader software. Many users skim just the links on a page as a list. What they hear then is “here, here, here…” — with no idea which one goes where.
The fix is just “make the destination the text”
<!-- ❌ you can't tell without reading around it -->
<p>You can see Shima's work <a href="/works">here</a>.</p>
<!-- ○ clear from the link alone -->
<p>You can see <a href="/works">Shima's list of works</a> here.</p>All we did was shift the linked range from “here” to “Shima’s list of works.” Now the destination comes across even when skimming. As a bonus, everyone finds it easier regardless of eyesight — skimming the bold links to find your destination is something we all do.
Let’s experience skimming
How does this page sound to a screen reader user? Let’s recreate it by lining up just the links as a list.
Make button wording a “verb”
Buttons work the same way. Make what happens when you press it clear from the button text alone.
| Wording | Verdict |
|---|---|
| ”OK” / “Yes” | △ On its own, you can’t tell what you’re agreeing to |
| ”Submit” | ○ You can tell what happens |
| ”Send message” | ◎ You can tell what and how |
Especially in a scene like “Delete this?” → “OK / Cancel,” changing it to “Delete / Cancel” also reduces mistaken presses.
Buttons with no text get an aria-label
A close button that’s just ”×,” a search button that’s only a magnifying-glass icon — a button with no text just sounds like “button” in a screen reader. In that case, give it a name for speech with aria-label.
<button aria-label="Close menu">×</button>It still looks like ”×,” but a screen reader hears “Close menu, button.” An aria-label is a name plate just for speech that doesn’t show on the screen.
Summary of this lesson
- Make links so the destination is clear from the text alone (stop using “here”)
- For buttons, write what happens when you press it as a verb
- Give text-less icon buttons a name for speech with
aria-label
That wraps up the accessibility course. alt, contrast, focus, labels, wording — every one is a small improvement you can use in today’s code. “Usable by anyone” is built by stacking these up.