Category: accessibility

Useful links: Color Contrast Checker, Zeldman interview, retweet

The WebAIM Color Contrast Checker is a great tool. Using it should be listed as a must do early in the planning and design of any web site. Within seconds you know if your color choices will pass or fail color contrast accessibility standards.

Peachpit’s Author Interview program with Jeffrey Zeldman about the latest edition of Designing with Web Standards is worth your time. It’s about 40 minutes long.

Twitter is rolling out a retweet function, and it needs some explaining. Demo Girl explains it, and so does Evan Williams.

Using CSS background-image to style links

There are many ways to style links with CSS. One possible way is to use the background-image property to distinguish the various link states.

Link states are represented in CSS by selectors involving the a element, which targets an HTML a tag in a link like <a href="somepage.html">Some page</a>. The potential states of a hyperlink are link, visited, hover, active, and focus. In CSS rules, these selectors are written as:  a:link, a:visited, a:hover, a:active, and a:focus.

Let’s assume you have a set of images suitable for link backgrounds. These images might involve color changes, show small arrows or glyphs, or various other small but meaningful graphic enhancements meant to indicate link states. Further, assume the images are named hoverbg.jpg, linkbg,jpg, and visitedbg.jpg.

Start with the normal link state, a CSS selector that will style all your links until overruled by a subsequent rule.

a:link {
background: url(img/linkbg.jpg)
}

This will put your background image behind the text of you links. The next rule in your CSS should style visited links.

a:visited {
background: url(img/visitedbg.jpg)
}

Any visited link will now have a different appearance to your user.

Finally, add a rule to style the links while they are in the hover state or in the active state. You can use a group selector for this.

a:hover, a:active {
background: url (img/hoverbg.jpg)
}

This rule will style the link while is is hovered over or being clicked.

You could add a:focus to the group selector in the last rule, although I’m not sure it would be that useful in this scenario. Focus states are important to users browsing with assistive devices and visual difference like background images may not be relevant to them. Focus states are important to users who use the keyboard to move from link to link.

Useful Links: Geek of the Week, accessible video, Glamour

Geek of the Week is a feature on The Big Blog from Seattle PI Blogs. Interesting geeks profiled thus far include Wendy Chisholm, Kathy Gill, Doug Ireton, Rachel Strawn, Brian Dorsey, Natala Menezes, Jenny Lam, Marty Stepp and more. Each geek gets the same set of questions to answer. Fascinating.

Make video accessible, localised, mobile and searchable by captioning from Henny Swan at iheni is an important overview of captioning tools and services. Before she gets into the details of the captioning tools she tested, she lists the benefits of captioning, which I think are worth repeating here.

Captioning benefits

Accessibility – this is the obvious benefit as you’ll be opening up your content to deaf and hard of hearing users as well as people find it easier to read rather than listen (or do both together). If you don’t have translated captions some non-native speakers may also find content easier to consume when reading captions.

Localisation – adding translations to your captions widens your potential audience massively. There are plenty of tools out there such as dotSUB that enable you to crowdsource translations and many hosts such as YouTube which support multiple caption tracks.

Mobile – users with mobile phones who may not have earphones or are in a noisy place also benefit. I do wonder how much can be visible on some small screens but certainly some people will find it useful.

Search – site indexing may also get a boost. For example YouTube supports video searching of caption data which also filters through into Google search.

Glamour Magazine, which I normally associate with nothing more than fashion and appearance, has picked some Women of the Year for 2009 and the choices are interesting. Among them are Marissa Mayer from Google, The Women of Iran’s One Million Signatures Campaign, and Maya Angelou.

Useful Links: Twitter acronyms, Twitter lists

Accessibility Allies Against A11y by The Pickards exactly expresses my opinion about the use of #a11y rather than #accessibility or another more accessible acronym on Twitter.

Everybody is all wound up about Twitter Lists. Now you can take a short cut to finding the best lists to follow using Five Must-Follow Twitter Lists at Think Vitamin. I love Think Vitamin, but as with all Carsonified lists, these are heavily male oriented. Just sayin’.

Making Twitter Lists more useful with filtering at contentious.com is very helpful if you don’t care about Carsonified recommendations but want to make your own Twitter lists. Also take a look at Learning Social Media: How to Create and Share Your Twitter Lists at SheGeeks.net.

Useful links: Hot air, create video, UDI, CSS

Above the clouds

I’m straying off topic to talk balloons. This time of the year in central New Mexico is all about hot air. I took this photo yesterday standing in my driveway in my pajamas. People willingly get up at 4:30 AM to go to a mass ascension at the Albuquerque International Balloon Fiesta. If you’ve never had the thrill of attending this event, you’ll find plenty of photos on Flickr, including some of mine. You might get a flavor of what a mass ascension is like from my article at BlogHer, Balloon Fiesta Time in Albuquerque.

Create Video Notebook is a collection (a notebook) of useful information on how to create video for a blog. It’s a new blog and already full of good tips. Keep an eye on this one.

Equal Access: Universal Design of Instruction is from the University of Washington. “Universal design of instruction (UDI) can be discussed as a process, as a set of strategies applied to specific aspects of instruction, or as a goal.”

I’ve been noticing the name Soh Tanaka on well-written articles about CSS lately. Found a blog to go with the name at The Art of Hand Coding. There’s a lot there; you may find just what you need for yourself or in the classroom.

CSS3.info has an article explaining the basics of The Flexible Box Layout Module. This is very early work—support in browsers is minimal at this point, but it’s a glimpse into what may come.

Useful links: Talking books, Facebook updates

Effective Practices for Description of Science Content within Digital Talking Books from the National Center for Accessible Media (NCAM) provides accessibility description best practices for all sorts of charts, diagrams, tables,  illustrations and equations that are used in science writing. Many times, the recommendation is to convert a chart or diagram into an accessible table, but other methods of describing information are also suggested.

This website provides both general guidelines that should be followed when describing STEM images and many examples of how the guidelines can be implemented. The guidelines are the result of a seminal 4-year effort encompassing multiple surveys with describers and with students and scientists with vision loss to research preferred practices for description of visual information in textbooks and journals.

In the stupid is as stupid does department, we have a 19 year old jewel thief in Pennsylvania who updated his Facebook page while stealing two diamond rings from a neighbor and left his Facebook page open on the neighbor’s computer. And you thought you were having a problem explaining to your students why they shouldn’t post those drunk shots from a kegger on their Facebook page.

Useful Links: Accessibility and more accessibility

Accessibility Changes Lives from ATMac is the first of what promises to be an excellent series about how accessibility can make a life-changing difference. Stay tuned on these to read them all.

An interview with Jamie Knight: autism and accessible web design at Iheni’s site. Jamie is young (either 19 or 20, the article says both) and has autism himself. Iheni ask him about site that work for him, tools, addons, accessibility challenges and more.

Insurers Fight Speech-Impairment Remedy at the New York Times describes the struggle to find appropriate tools for those in need of improved accessibility. The struggle is not with the technology. It’s with the insurance industry.