Skip to main content

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index] [List Home]
[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: 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.


Back to the top