WAI-ARIA and HTML 5

WAI-ARIA was released as a complement to HTML5. Its main purpose is to give developers more freedom to build custom web content, web applications, and interface controls created with HTML, JavaScript, and Ajax. WAI-ARIA provides a framework for adding semantics that make it possible for assistive technology users to understand and operate these custom elements.

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 aria-pressed attribute, which is updated with JavaScript when the button is pressed. In the case of an actual <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.