Chovy’s Blog

Following are a few notes I took from Jeremy Sydik on Accessibility podcast “Design accessible web sites”.

Legal Reasons:

• 508, government requires it to provide service or contract.

Commercial Reasons:

• multi-billion market
• iPhones, mobile devices
• video game consoles.
• even some televisions are on the horizon that have browsing capabilities

Accessibility Reasons:

• Colorblind
• Images/Video/Sound may be unavailable
• Rollover flicker may cause seizures
• Text alternatives
• Use widely available technologies
• Use clear language to communicate message
• Navigable content
• Users with mobility impairments
• If you’re not usable, you’re probably not accessible
• Some users turn off presentation layer
• Progressive enhancement for features, degrade gracefully — start with the basics
• Catchall – encounter new technologies, apply accessibility rules above

In response to CSS-Trick’s post “Rethinking CSS Image Replacement”, I have to respectfully disagree with wrapping your logo in an H1 element.

H1 should be used to describe the page below it, using it on every page to wrap a logo isn’t giving you any benefit for accessibility or SEO. Its a waste of a perfectly good (and important) semantic tag.

I recommend keeping things simple, and using the tag names as they were intended to be used:

<div id="head">
    <img src="/images/logo.png" alt="FooBar Logo" />
    <!-- tabbed navigation or banner advertisement may go here -->
</div>

Using the #head rule, I can position the image and any children elements, or apply a background gradient to the entire div. Its easier to style any navigation lists or banner advertisements as well with a common parent ID “#head” using the element names as sub-selectors.

<h1>Topic of the Page</h1>

<p>Intro paragraph about The Topic</p>

This is the original (and still relevant) intended usage of an H[1-5] heading element.

CSS-Tricks.com is a great web design blog by Chris Coyier — I highly recommend reading it for web designers.