
[orion-dev] Web Accessibility Tip of the Day: Tip #1

Tip #1: Whenever possible, use semantically appropriate "native" HTML elements instead of <div> and <span>.
You can style them to get the look you want, and augment them to get the semantics and behavior you need.
As a bonus, this is usually a lot less work!

For example, use <button> instead of... <div role="button" tabindex="0"> and changing styles onmouseover/out/down/up and onfocus/blur/keydown/keyup.

Even if the native semantics are only "close", it is usually better to start native and augment (as long as you don't *change* any behavior).
For example, start with <ul> and <li> for a tree and its tree items, or a menu and its menu items.
This way, even if you do nothing else, a screen reader user will know that these items are grouped in a logical manner.
(Of course, you have to keep your DOM consistent too, i.e. use nested <ul> for new branches of the tree instead of using CSS to move them into place).

Take a minute to scroll through the Table of Contents for section 4 "The elements of HTML" in the draft HTML5.1 spec:
http://www.w3.org/html/wg/drafts/html/master/ and search (Ctrl+F) for "the elements".

For more on the semantics of HTML elements and how to augment them with ARIA, see the next Web Accessibility Tip of the Day.