Semantic HTML helps everyone!

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?

Headings

• Use headings (<h1>, <h2>, etc) in order of hierarchy
• For example: only use an <h3> on the page if it falls hierarchically under an <h2> and an <h1>
• If necessary, a descriptive header can be hidden from view

Buttons, anchors, and divs

• Anchors (<a>) are not buttons!
• <div> tags are not buttons!
• If clicking on an element triggers a JavaScript event, it's a <button>.
• If clicking on an element changes the URL in the address bar, it's an anchor (<a>)
• <a href="#"></a> is a red flag.

Fancy new HTML5 semantic tags

The easy ones (to explain) first

Deafness

• All videos or embedded audio should have transcripts or captions (and ideally a sign language interpretation)
• Any audio cues should be accompanied by a visual cue
• Side benefits of transcripts: Better for SEO and users who can't or prefer not to use speakers

Colorblindness

• Colors should not be the only means of conveying information
• Use a colorblindness simulator to ensure that your page can be fully understood without full perception of color

Limited motor abilities

• Users may not be able to use a mouse - make your site usable with only the mouse
• Users might make mistakes - ask for confirmation, have easy ways to undo

Seizure disorders

Strobing, 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

Blindness

How do blind users use the Web?

• Perception: Screenreaders
• Operation: Keyboard-only
• Understanding: Information is presented linearly

General tips in developing for the blind

• Always provide keyboard alternatives to mouse interactions (avoid onmouseover, etc)
• Provide descriptive text when necessary
• Don't repeat yourself

Not just audio screenreaders!

Using an iPhone with a Braille display

How screenreaders can be used

• Navigating linearly down a page
• Skip through heading tags to the desired section
• Skim through a list of all the links on the page (out of context)

Limitations of screenreaders

• Can't “describe” images (duh)
• Some context that's obvious to a seeing user might be unclear
• When necessary, use offscreen descriptive text

Offscreen descriptive text

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!

ARIA roles example

<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>