Yesterday, I woke up and could see the sun shining. I walked out to get a croissant and it was downright pleasant. Well, I didn’t need anything more to choose shorts and sandals for the day’s outfit. Needless to say, the bizarre mixture of weather made this an unfortunate decision. The temperature fluctuated by about 20 degrees from warm to chilly. It rained, it hailed, it left me looking like a circus clown in my sunny California attire. But what the heck, not everyone can be glamorous.

I’ve walked so many miles in the past few days that I’m afraid the ASPCA is going to arrest me for abusing my size 14 dogs. They’re barking up a storm and could use a day of rest. I’ve also been swallowing horse pills to avoid malaria and Ghandi’s revenge in India. Ah, the life of a jet setter.

Garcon! Garcon! bring me another cafe! Pronto!

I’ll be in Bangalore for a few days to discuss Yahoo! technology and web site accessibility to engineers. I’m looking forward to hearing some of the other talks, meeting various people, and seeing the city and country. I’ve got a shopping list started: elephant for Jim, outfit for Hannah…

1. I am going to Bangalore, India to discuss accessibility at the annual Front End Engineers conference. I’ve wanted to visit India for a long time and I’m looking forward to the chance. I’m also going to Paris and Munich for other Yahoo! business.

2. The Yahoo! Accessibility Stakeholders Group, of which I am a member, is hosting a global campaign to fix alt attributes across the network. Alt attributes are the snippets of text that appear when an image is not displayed. They are critical for those using a screen reader. Using alt attributes correctly seems to be the most basic element of making a site accessible, unfortunately they are also easily forgotten.

3. Yahoo! Avatars has added the Accessibility Stakeholders Group icon to the clothing options for your avatar (http://avatars.yahoo.com) This nifty logo replaces the normal Y in the logo with a braille version.

I’ll post more as the trip and campaign progress.

Joe Clark has an ambitious project on the docket. The Open & Closed Project hopes to create a new standard for video captioning. It also includes plans to develop better training and certification for those creating captioning. Joe even has plans for developing and implementing new fonts that would make it easier to view the online and over-the-air captions.

However, Joe needs some help.

This project won’t run itself and needs funding. He’s asking us to help him raise the funding. Joe needs $7,777 to support 4 months of intensive fund-raising and project co-ordination. Can you help him raise this sum? If you have a friend, family member, or acquaintance that is deaf, this project will significantly help their lives.

If you go to the gym and watch the telly while sweating on a treadmill, desperately trying to figure out what the talking head is saying…. this project may or may not significantly help your life. Sometimes, you just don’t want to know what the idiot on Fox News is saying when some jerk on another treadmill is controlling the remote control… but I digress.

Visit Joe’s site and donate a few bucks. That’s all it takes. You don’t have to be a superstar to make captioning real.

Seriously, Joe Clark referred to Yahoo! Tech as an antidote to some of the horrible re-designs of gay-game sites. It’s a bit disjointed but appreciated.

We tried to make Yahoo! Tech as accessible as possible. User-testing with Victor Tsaran, Yahoo’s accessibility guru led us to make many small and large changes to the code. I’ve written one article about how we made our home page flash movie accessible and have two more on the way about our comparison tables and how we are displaying our ratings and reviews.

Visit www.last-child.com for my notes and articles about web design. It’s got the geeky side of me and stay on this site for the well… less geeky side. Thanks Joe for the nod and the push. Now I’ll need to get busy on publishing those other articles.

Museums and other non-profits have an amazing collection of misfits, psychopaths, and egotistical maniacs. But once you get beyond the marketing departments, you’ll find people who love what they do and have an earnest desire to share their collections, art, history, and culture with anyone and everyone. Museums have been leading the drive towards accessibility, online interactions, user generated content, and doing so with the tiniest of budgets.

So step behind the scenes. Go past the paintings, the skeletons, and the gift shops. Share the lessons learned by some of the largest (Getty) and smallest museums around the world.

We will be discussing how accessibility is tied to semantic markup in standards-based web design. It’s an obvious connection for me. Accessibility is about offering information to everyone. Semantic markup displays information in the best possible way. One doesn’t support the other, they are the same.

I will be showing some examples of UFO flash detection, using table headers, what’s involved in building an accessible form, and how to use CSS to offer great content and visual design at the same time.

This post is just a tease. I’ll write some posts about the concepts I’ve covered but can’t show the examples until we launch. It’ll be worth the wait… I promise.

The NFB actually gave Target 10 months to make adjustments to their site before filing the law suit. Unfortunately, big business seems to need these shots in the arm to move in the right direction.

History of lawsuit-activated advancements

The Australian Olympic site was sued for making ticket purchases impossible online to the blind. New York sued several travel sites for their inaccessible sites. Now Target is the new “target” and perhaps this will be the straw that breaks the hobbled camel’s back.

Just Do It

It all goes back to being more than a “web designer” and thinking about how your site is going to be used by the public. Are you doing something because it “looks cool”, “is quicker”, or “is how it’s always been done”? Or are you doing something because it adds intrinsic value, better performance, expands the audience, assists the user, makes it more intuitive, …

When I add something to a web page, whether it is a link, list, table, or paragraph, I think about how it is going to be used.

Should I put a title on the link? Is the text descriptive enough? Is the list or paragraph the most appropriate structural element? Should the table have a summary? Should I use headers=”" or will scope=”col” be enough?

Filling the Vacuum

Other standardistas have been talking about the new web professionals, those who know how to create valid, accessible web sites. And those who are no longer true pros (who still use tables and invalid markup). What they are not discussing is the vacuum being left behind by the early-adopters. Let’s take me for example, as I always do enjoy the subject.

The Ted Factor

I have created a number of site conversions over the past 2 years. I’ve also moved up and up from job to job. I’d finish a conversion, move to the next, finish that, move to the next, etc… But who ends up maintaining these sites? That is the problem some companies are facing today. You hire someone that builds a standards-based web site and then gets tapped on the shoulder by a bigger company. Now the smaller company needs to hire someone that can work with this new creature.

I got an email today from a former employer. They need someone in San Diego who is ready to work. Sundance Kid and I made huge changes to their sites and now they need someone that knows how to continue the work without us. Another former employer has been searching for a web developer for over a year. What do they do? Hire a table hacker that will revert the pages back to tag soup?

Witness the Disney store makeover in Europe. They went from an accessible, standards-based design to a crappy mess. Why? Possibly it was due to lack of understanding. Perhaps they had nobody that could extend it and they felt more comfortable with the old cut-up images.

Education, Education, Education, Education…

As standards-based web developers, we need to educate others. Take someone under your wing and show them how to use CSS, DOM, or what it means to validate. Don’t hold it in. Be kind to your fellow workers and employers. If they are not recognizing your abilities, look around. Jobs are out there!

So, this post has rambled enough. If you are a standards-based developer. Leave a comment, I’ll respond with information on who to contact. Heck, leave a small resume and perhaps someone else will see this and contact you as well. The jobs I know of are in Southern California, but I do have certain connections to a very large company in Silicon Valley that is looking for quality developers.

Looking back fondly

Several of the standardistas out there have been sharing their joyful memories of their ventures into the big ol’ world of moolah with nary but a Dreamweaver on their back. Great advice is out there for the pickins. Sure there’s a mixture of demanding bosses, forever late paycheques, and brain-dead art directors. But ah….the glory of it all.

Yes, my dear… there is a big world of hacks out there for you to climb. Grab a friend and start climbing, for soon enough you will be on top and have the opportunity to reach down and pull someone else out of the valley of the table-goo. Ask questions and begin providing answers. Maybe next year, you will be the star on top of the standardista chrismahanakwanza tree.

Sébastien Guillon, recently wrote a post about using the CSS2 attribute selector and content rule
to let visitors know what to expect when clicking on a link to an international web site. Inspired by his approach, I’ve simplified some of the code and added background images to
represent the countries.

Guillon’s original project focused on adding a text description after the link in the site’s native language. To do this, he used a set of descending selectors to look at the page’s language declaration and the link’s hreflang attribute. I am assuming the site that hosts this CSS is in english. However, it would not be difficult for you to simply change the generated content if your site is written in French, Spanish,
Swahili, etc.

Sample list of international Yahoo sites

Europe

• Catalan
• Denmark
• France
• Germany
• Greece
• Italy
• Norway
• Spain
• Sweden
• UK
• Ireland

Now look at the final version with new CSS. Internet Explorer users will not see a difference, try Firefox or Opera.Internet Explorer 7 beta 2 shows the flags but does not show the generated content.

The hreflang Attribute

The hreflang allows the user/browser to define the language of a link’s targeted page to avoid presenting
unreadable information:

The hreflang attribute provides user agents with information about the language of a resource at the end of a link, just as the lang attribute provides information about the language of an element’s content or attribute values.

W3C.org

The hreflang attribute defines the language of the web site you are sending someone to. The language is defined with a two letter abbreviation, such as en, fr, sp… You can also define the locality of this language by adding the country code to this language. This is particularly helpful for languages that have dialects. A Mexican site would have this attribute: hreflang=”sp-mx”.

The Attribute Selector

CSS2 allows us to look for tags that contain specific attributes. We can look for blockquotes with cite attributes, tables with summaries, table cells with header attributes,
and our little friend, the link with an hreflang attribute.


/*English */
a[hreflang="en"]:after, a[hreflang|="en"]:after {content:"\A0(In English)";}


Breaking it down

This rule uses a combination of attribute selector and pseudo-class to transform the link from common to fabulous.

a[...]

Look for a link with an attribute

hreflang=”en”

The hreflang attribute must include the letters “en”. This allows the CSS to work on links that do not define a country variation

:after

This pseudoselector defines the space after the link

{content:”\A0(In English)”;}

After the link, place the following text: (In English)

hreflang|=”en”

The hreflang attribute must include the letters “en” within a hyphenated set, i.e. en-us, en-ca, …

Adding the flag

Now that we’ve notified the user about what language the link will be in, let’s tell them the country the site is from. Once again, we will look at the hreflang attribute for this information. This rule is not as neat and tidy. For each country, we are going to look for all of the possible language attributes. For instance, Canadian links could have hreflang=”fr-ca” and hreflang=”en-ca”.


/*Canada */
a[hreflang="en-ca"], a[hreflang="fr-ca"] {background:url(flag-sprite.png) no-repeat 0 0; padding-left:35px;}


This time, we will give links that have Canadian country codes 35px padding to the left side and a background image of the Canadian flag that sits to the
left edge of the link’s text. This style sheet is using an image sprite to keep the server requests to a minimum. See the Alistapart.com article about using
image sprites for more information on this technique.

Et Voilà

There we have it. A set of international links with the country of origin and language clearly defined. All of this has been made possible by our friends, the
attribute selector, the pseudo-class, and the content style. Tune in next week as we learn how to make a cruise ship out of two
shoe-boxes and an XML schema.

Fine Print

This has not been tested in Safari, but it shouldn’t be a problem. The pretty and useful presentation elements will not appear in IE, NN4, and probably
most alternative devices (My Treo shows the flags but not the added content). I do not know how assistive devices would render these styles, more than likely they would be ignored. This project falls under
the “build for the best, don’t hurt the rest™” protocol.

Resources

• W3C Selectors
• Exploiter les langues avec les pseudo-classes CSS
• A tribute to selectors – Andy Clarke
• Attribute Selectors Part II – Eric Meyers
• hreflang resources – Standardistas