Search code examples
htmlbuttontags

Correct attribute for buttons in HTML


What is better for empty buttons (without text) in HTML, attribute "aria-label" or "button"? I use this empty tags and buttons for nodes in JS.

Has there been some discussion that it would be better for accessibility?


Solution

  • For empty buttons in HTML, it is best to use the air-label attribute.

    This allows screen readers and accessibility devices to provide a description of the button for users with visual impairments. "aria-label" (<button id="siteSearch" aria-label="Find in this site">Go</button>)provides a textual description of the button, whereas using the button tag without text can cause confusion for users with disabilities.

    https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#basic_buttons

    Please note, as pointed out in other posts (Button with icon labelled with aria-label still an 'Empty Button' error) it is recommended not to put anything in a blank button but to leave the "standard view" like this:

    <button type="button" class="btn btn-default dropdown-toggle">
       <i class="fa fa-arrows">Sort</i>
    </button>