DEV Community

Arnold Ho
Arnold Ho

Posted on

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>here</a></p>

<p>if you want an example html, click <a>here</a></p>
Enter fullscreen mode Exit fullscreen mode

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>my html tutorials</a></p>

<p>Here are <a>a list of example html scripts</a></p>
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (2)

manuelbv profile image
Manuel Cheta • Edited

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.
_arnoldho profile image
Arnold Ho

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