Links in HTML

The code for a link looks like this:

<a href="https://www.gov.uk/disabled-students-allowances-dsas">Applying for Disabled Students’ Allowances (DSAs)</a>

The first half is the hyperlink reference, and the second half is the text of the link.

On the web page it looks like this:

Applying for Disabled Students’ Allowances (DSAs) (opens in a new tab)

Assistive technology will tell the user that there's a link, and will read what is visible on screen.

Something like "Applying for Disabled Students’ Allowances (DSAs), Link"

Image links

For an image the code is something like:

<a href="https://www.dewis.wales/family-information-service">

  <img src="FIS.gif" alt="Family Information Service">

</a>

Again, the first half is the hyperlink reference, then there's the source <img src> of the image, and finally the alt (alternative) text. Without that text, there is nothing for the assistive tech to read out.

On the web page it looks like this:

Family Information Service

Here the assistive tech will say something like:

"Family Information Service, Link"

Where an image is a link, you only need to worry about the link itself - where the link takes the user, not what the image is.

There will be another chapter about images and alt text, as it's an important topic.

Next: Make links meaningful →

Discussion

Log in to join the discussion. Your comment will be checked before it appears publicly.