<label>
tag for form inputs, and inner text for buttons.aria-labelledby
if there is visible text onscreen that can be used to label the element (a nearby heading, for example).aria-label
when there is no suitable labeling text onscreen (this issue is common with icon buttons, for example).<div>
or <span>
into an interactive button. Also useful in converting hijaxed hyperlinks into buttons.<div>
or <span>
into a fully functioning, keyboard-accessible button. That behaviour must be added with JavaScript. Better yet, just use a native <button>
element which will give you the screen reader role and keyboard behaviour for free without requiring any JavaScript.dialog
role informs the user that they are inside of a child window of the main page. dialog
or alertdialog
to indicate modality.aria-hidden
to "true" is not necessary if the element already has CSS display: none
or the HTML5 hidden attribute.<div>
or <span>
but retaining its default styling.