====== Creating Unique Accessible Names for Links and Buttons ======

If an element’s accessible name doesn’t contain enough information, it can be supplemented with `aria-describedby` or `aria-description`. A common use case: [[https://www.w3.org/WAI/GL/wiki/Using_aria-describedby_for_link_purpose_-_May_2014|making unique link titles without changing the visible text]].

Do not use visually hidden CSS to add invisible text inside a label, button, or link tag. A mismatch between the accessible name and what is visible on the screen will prevent voice input users from selecting their intended elements; see [[https://www.briandeconinck.com/designing-coding-voice/|Designing and Coding for Voice]].

See [[https://bugs.launchpad.net/evergreen/+bug/2016343|#2016343 Add aria-describedby when multiple links have identical text]] for discussion of aria-describedby in links

===== References =====

  * [[https://www.w3.org/WAI/GL/wiki/Using_aria-describedby_for_link_purpose_-_May_2014|Using aria-describedby for link purpose]]