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

[Carolyn MacLeod <Carolyn_MacLeod@xxxxxxxxxx>]

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.

Car