Shauna Keating
HCI 530 Advanced Accessibility
April 19, 2026
For a better experience, visit: https://shkeating.github.io/a11y-examples/labels/best-practices/
Best Practices
Use Native HTML First
Section titled “Use Native HTML First”In general, HTML elements natively provide their own way of labelling. Always prefer native text content over ARIA attributes when possible.
For example, aria-label is incredibly useful, but it should be reserved for cases where text that could label the element is not visible.
Labelling Iconic Buttons
Section titled “Labelling Iconic Buttons”A common scenario where aria-label shines is interactive components that use a commonly understood symbol (like an icon) as their visible label, but lack actual text.
<button aria-label="Close Dialog" onclick="myDialog.close()"> X</button>Without the aria-label, a screen reader would just announce “X, button”, which is unhelpful. The aria-label overrides the inner text and announces “Close Dialog, button”.
Meaningful Link Text
Section titled “Meaningful Link Text”Because standard links pull their labels from their inner content, the content must be meaningful on its own.
- Good:
<a href="/report.pdf">Download 2026 Financial Report</a> - Bad:
<a href="/report.pdf">Click here</a>