HomeNewsAccessible components: #2 dynamic ARIA labels

Accessible components: #2 dynamic ARIA labels

Published on | Prototyping: From UX to Front End — Medium Paul Champion With an input component we can set up a dynamic label fairly easily whether that’s text or creating both a dynamic ‘id’ and <label> in the code behind. Taking a tooltip/popover component as an example which only displays a clickable icon, we can end up with an accessibility error of ‘empty button’ as the icon won’t provide any information to the screen reader. In the below examples I’ll be discussing ‘aria-label’ and ‘aria-labelledby’, if you haven’t explored these before