Good accessibility usually starts with clear words and the right HTML elements, not a large amount of extra code.
What You Need to Know
Read a link without the paragraph around it. Can you tell where it goes? Download timetable is more useful than Click here. The destination and purpose should usually be clear from the link text itself.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<p>Download the materials:</p>
<ul>
<li><a href="files/lesson.pdf">HTML lesson handout (PDF)</a></li>
<li><a href="files/practice.pdf">Practice worksheet (PDF)</a></li>
</ul>Let’s Read the Code
- href: Href is the URL to a related resource or destination.
- Read from the outside inward: the outer element describes the job, while the nested elements supply the information.
What the example shows: The link text tells someone what each link opens without needing the surrounding sentence.
What Happens in the Browser?
Try this with Tab and Shift+Tab. If you can, inspect the accessibility tree too; appearance alone does not tell the whole story.
Try a different way of reading. Read only the headings and labels, or navigate through links without looking at the rest of the page. If the page still makes sense, the underlying HTML is probably doing an important part of its job.
Your Turn
Cover the surrounding text and check whether each link still makes sense.
Common Beginner Mistakes
- Judging the page only by how it looks, without checking its meaning and keyboard behavior.
- A page full of “Click here” links is confusing when read out of context.
Key Takeaways
- Read a link without the paragraph around it.
- href: Href is the URL to a related resource or destination.
- Test the behavior you expect rather than trusting how the snippet looks in your editor.