A common mistake for accessibility is creating more than one link that takes a user to the same place. For example, if we have a link wich is preceded by an icon (just for decoration), it would be a mistake to create one link for the icon and another link for the text because screen readers will read them as two different links and users won't know which one they should follow.
In addition, when the icon is only decorative it should be created:
- Using css as a background image (this way it will be ignored by screen readers)
- Using the tag img with empty alternative <img alt="" ...>
All this logic is already encapsulated in our <liferay-ui:icon> taglib. We should use this taglib whenever possible to generate links with icons because it automatically handles all these issues for us:
- Automatic management of alt attribute
- it creates only one link for both the image and the text