“The inclusive practice of making websites usable by people of all abilities and disabilities,” including but not limited to:
Your HTML should reinforce the meaning of the information rather than to simply define its style
Imagine that your user were reading your plain, unrendered, source HTML. How well would this user understand the page?
<h1>
, <h2>
, etc) in order of hierarchy<h3>
on the page if it falls hierarchically under an <h2>
and an <h1>
<a>
) are not buttons!<div>
tags are not buttons!<button>
.<a>
)<a href="#"></a>
is a red flag.<article>
<header>
<section>
<footer>
<nav>
<header>
<time>
(include machine-readable datetime <em>
- use only when providing emphasis. Sometimes italics are used for stylistic reasons rather than emphasisStrobing, flickering, flashing, and other distracting effects may cause dizziness, nausea, and even seizures in users with photosensitive epilipsy and other disorders.
Strobes, flickers, and flashes, should be avoided or prefaced with a clear and concise warning.
Note: Section 508 prohibits flickers greater than 2 per second
onmouseover
, etc)Consider this “facepile” example:
<span class="offscreen">Friends attending this event:</span>
<ul>
<li><img src="01.jpg" alt="Mike Schneider" /></li>
<li><img src="02.jpg" alt="Dave Thomas" /></li>
<li><img src="03.jpg" alt="Anthony Mitchell" /></li>
</ul>
/* make this invisible, don't let it take up space */
.offscreen {
font-size: 0;
position: absolute;
display: inline-block;
height: 0;
width: 0;
}
Note that screenreaders will ignore display: none;
and visibility: hidden;
, so we can't use those!
<h2 id="nav-heading">Navigation</h2>
<ul class="navbar" role="navigation" aria-labelledby="nav-heading">
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="developers.html">Developers</a></li>
</ul>
alt=""
) if necessary.