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 Provide Elements with More Context


    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 does not provide enough context to be useful enough for those that 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 provides better context for the element and what a user can expect from it.