Fixing Non-descriptive link error
To make sure that our websites are accessible we have to add clear descriptions to all links. This is usually handled automatically if there's text inside them or an image with an alt text. But when we have links that are just icons then screen readers can't process them. To fix that we add the aria label attribute to them to make them accessible and fully compliant.
1. Click on Open Designer
2. Click on Audits
3. Click on: Non-descriptive link content
4. Hover over the newly shown item(s) and click the arrow 'Show me how to fix'
ℹ️ We're looking for the link block element that it has highlighted. In the layers on the left it's the icon with the 🔗 . It should already be selected but in case it's not, that's what we're looking for
5. On the link block element, select the Element Settings
6. In the Custom Attributes tab, add a list item by clicking on the +
7. In the Name field, type "aria-label"
8. In the Value field, describe what the link is doing
Make sure to describe clearly what the link is doing: e.g. 'Link to home page' or 'closes modal'.
9. When you see 'issue resolved', you know you're done!
