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.

While looking into the proper syntax for telephone numbers as links in microformats, I found a good discussion from 2005.

There’s a great discussion of telephone microformats and using the tel: protocol in an anchor tag.

Some simple examples might be:

<div class="agent vcard">
  <a class="email fn" href="mailto:jfriday at example.com">Joe Friday</a>
  <a class="tel" href="tel:+1-919-555-7878</a>
  <div class="title">Area Administrator, Assistant</div>
</div>

Notice the use of the “tel:” in the href attribute. The only drawback I’ve found is that I get a lot of 404 errors in my stats because most clients do not have a telephone application associated with the “tel” link. This can be rather bothersome and result in this:

29	/experience/tel:1+408-656-2473
29	/quote/tel:1+408-656-2473
28	/advertising/tel:1+408-656-2473
28	/terms/tel:+1-408-656-2473

I haven’t decided yet if it is worth seeing these in my stats infavor of allowing skype, or other telephony VOIP apps to link through.

I find that one of the most annoying things about OSX, both win32 and Linux support that feature…and it’s not only the lack of “focus follows mouse” but also the necessity to click twice to get your action.

For example, a browser window open, but in the background and I want to click a link, I have to click twice: once to focus the browser into the foreground and again to trigger the clicking on the link. Rather annoying.

I did find a few resources for *some* applications that support “focus follows mouse”, but it only appears to work within the application only, not between different applications.

I find the lack of a “tabbing” support in Mac OSX to be rather disturbing as well. I checked the accessibility settings, and there is still no way to force my browser (or other apps) to tab through the interface stopping on objects in the window.

Here are some more resources:

1. http://www.apple.com/macosx/features/expose/
2. http://acs.pha.jhu.edu/general/computing/faq/os/os_x/opt/#ffm
3. http://jeremy.zawodny.com/blog/archives/000149.html

The adoption of Section 508 accessibility guidelines has been a controversial issue at best. depending on the site involved, and those developing and using it.

Breaking the back button means that traditional browsing with forward and backward buttons will be rendered useless.

Too many times I’ve seen sites that have a rich UI experience, but only tested in one or two browsers (usually IE and FF). As a web developer, I often cringe at sites who have not adopted standard-based DOM scripting techniques, or worse yet throw an error page if I am not using one of their supported browsers, as is the case with Konquerer and weightwatchers.com.

I often bring up my favorite sites on my mobile phone as well. The more popular web sites have started to realize the potential of mobile phone usage and accomodated either with standards-compliant markup and scripting, or offering a dedicated WAP 2.0 site.