Most HTML has built-in semantics and does not generally need WAI-ARIA. However, when HTML is being used in a non-standard way, like making a button out of a
<div>, then WAI-ARIA can be added to that
<div> to make it appear as a button to a screen reader by adding the following: Add the role of “button” (i.e.,
role="button"), add a null tabindex value (i.e.,
tabindex="0"), which makes it focusable, then define its state using the
<button> element, these properties are all already defined, so there is no need to use WAI-ARIA.
<div role="button" aria-pressed="false" tabindex="0">Press Me</div>
Though WAI-ARIA is typically used with HTML5, it can also be used with XHTML and HTML4. You may find, however, that HTML validators see WAI-ARIA as broken markup in older versions of HTML, but don’t worry about that. Any WAI-ARIA related errors that a validator might identify in older HTML can generally be ignored (assuming it has been used correctly). By now though, you should be using HTML5. If you are retrofitting older code, then go ahead and add WAI-ARIA to it. If you are developing something new, then go with HTML5.