Simple way to increase site accessibility

Disclaimer: I am not an expert, this is more like a note to self kind of thing. I am merely learning in public

When you make a website with different links, here is how your html file might look like:

<p>If you want an html tutorial, click <a href=tutorial.link>here</a></p>

<p>if you want an example html, click <a href=example.com>here</a></p>

If the user is accessing your website visually, they are not going to have a problem when visiting your website. However, if someone is accessing your website using a voice reader and they want to navigate all the links on your website, all they are going to here is a bunch of 'here's because that is the name embedded in your link tags.

One simple fix is to restructure your sentence so that the text within the a tag tells the person what it is:

<p>Here are <a href=tutorial.link>my html tutorials</a></p>

<p>Here are <a href=example.com>a list of example html scripts</a></p>

For someone who visually visits your website they are not going to see much difference. However, this way of writing your html dramatically improves the user experience for someone using a voice reader. So bare this in mind when you are cleaning up/making your website :)

Happy coding!

Comments

[Manuel Cheta]

That is a good catch and also a good start.

In terms of links you also need to make sure you cover some other situations:

• if the link opens in a new tab, you need to inform the users about this
• if the link goes to external source, then you need to inform them of this too
• if you link to a file, then it is customary to also add the file extension in the link details 2021 Survey (PDF mobile/desktop) PDF can also be made accessible if you add tags to them.

[Arnold Ho]

Thanks Manuel! Those are all good points to be mindful of when making links in our websites :)