Links is the most thing on the web you see so that we should make links more simple and more accessible for all users.

we will take a look at examples and discuss how should links looks.

1- Link or anchor tag should explain what's happen if you click on, the user need know where this link goes no one like click on an anonymous link.

Do

<a href="http://www.example.com"> Example || Accessibility Guidelines. </a>

Don't

<a href="http://www.example.com"> Click here || more </a>

2- Don't write "link" word in the link because the screen reader knows the link if you use the anchor tag, screen reader differ from one to other some of them say the "link" before value and other say it after value anyway in finally the screen reader know this is the link.

Do

<a href="http://www.example.com"> Example of bla bla || Accessibility Guidelines. </a>

Don't

<a href="http://www.example.com"> Example Link || Accessibility Guidelines Link. </a>

3- use semantic element don't change the element behaviour.

the first and second rules of ARIA say use native HTML semantic element and don't change native semantics, unless you really have to, so I don't see any reason to change the element behaviour.

Do

<a href="http://www.example.com"> Example || Accessibility Guidelines. </a>

Don't

<span class="act-link"> Act like Link </span>

4- if you used the another element to act like link as example you should make it accessible you should make it foucs you should make screen reader read it a link you should make it real link.

Do

5- if the link include image, image should explain what's going in alt OR let alt empty and return to num 1.

Do

<a href="http://www.example.com"> <img src="/" alt="example"> </a>

OR

<a href="http://www.example.com"> <img src="/" alt=""> example </a>

6- the blind users don't know if the link open in new window or not so we should make an alert to recognize them to the link will open in new window.

Do

OR

7- Don't overide the semantic anchore element by wrong ARIA-role.

the HTML by default is accessiblee,so if you use the correct HTML element the code will be accessible but If you play in the semantic element by add wrong roles the element will change but the behaviour not change.

Do

<a href="https://example.com">Accessibility Guidelines.</a>

Don't

<a href="javascript:void(0)" role="button">Accessibility aria</a>

in the above example the accessibility tree will show the element as button and screen reader will read it as button.

accessibility tree for anchor element

we should take care of small things, we should make the web more accessible and more meaningful.

finally, I made a script to check the issues in your code that's will help you to identify the accessibility issue to fix it a11y-checker