Become a member
to unlock all features

Create an egghead account to access 5000+ tutorials and resources from expert developers.

Create account

    Add Accessible Labels to Elements Whose Labels are Not Clear Enough


    Labeling inputs, elements, and widgets add context and clarity for assistive technology such as screen readers. Some elements do not already have some sort of labeling text being displayed visually, such as a <button> without descriptive text or an <icon> or part of a more complex widget. Others may have some form of text label but it is not descriptive enough for those who cannot see it. The addition of an aria-label attribute to the element will provide it with an accessible label so that when that element is focused by a screen reader, for instance, a label is read that better describes the element and what a user can expect from it.