Tip #1: Whenever possible, use semantically
appropriate "native" HTML elements instead of <div> and
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
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
(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).