“display: none” is NOT Accessible

Just a quick note to say that using “display:none” is not as accessible as many web developers think. I know I fell into this in several of my earlier examples. The general though is: “To keep my app accessible I need to include content that will only be read by screen readers and not to my visual audience”. This type of content can include submit buttons for simple dropdown lists, textual headers and content that needs to be hidden until a browser event occurs. The simple solution is just to add “display:none” to that element to hide it from view — but this is wrong.

The problem is that modern screen readers do understand CSS and if you use “display:none”, they will assume this content should be ignored and will skip it entirely. This of course was not your intention and leaves all that work and consideration for nothing.

A better solution is to hide the content off-screen until you need it:

.accessible { position: absolute; top: -9999px; left: -9999px; }

You’ll find that once you start supporting accessibility through Progressive Enhancement (Hijax), development becomes more straight forward and easier to maintain. Keep it accessible.

Discuss…

Lost: The Answers? – I’m Still Lost

I’ve been in a love/hate relationship with the television show “Lost” since it started. I do enjoy some of the plot twists and the character flashback that, over time, show how all the characters relate. The whole story is an interesting concept, and Ben is the perfect villain. But, since the beginning I’ve hated the countless plot twists without any answers (do the producers even know where it’s going), the number filler episodes that draw out 5 minutes of content over an entire hour — for example: Boone dieing, Lock’s obsession with the hatch and Paulo and what’s-her-name dying (they weren’t even part of the show).

Lost has been loosing much of it’s audience for exactly these reasons. Instead of the producers fixing the problem, they instead narrate a review episode, called “The Answers” where they explain all that we have learned throughout the series. The episode felt like they were trying to convince all of us that there have been answers — really — we must not have seen them. The problem is that the answers so far are either not directly part of the main plot line or open other questions.

The types of answers that don’t matter are things like how Locks’ Dad is the same person that conned Sawer’s parents. Or that Jack’s father is also Claire’s dad. Oh and Kate killed her father. Do the producers have “daddy” problems? How about how the girl Sawer conned helped Kate later on — that was really important, right? These things are interesting, but don’t give a whole lot to the story. They really aren’t answers.

Most of the other “answers” really didn’t answer anything but opened up more. For example, we thought that the others were part of the Dharma Initiative. Well, the show answered that question by…spoiler alert…telling us the “others” were rebels who murdered everyone in the Dharma Initiative with the help of Ben. Ok, then where did the rebels come from? Why are they at war the plane crash survivors? And who the f***k is Jacob?!?

This is why the audience feels like there haven’t been any answers, because the answers aren’t leading anywhere. They don’t really contribute, and I’m starting to get really pissed off. I’m considering tuning out until the last season. Because I’m reasonably sure not much will happen until then and the last few episodes will be a huge explosion of revelation.

If the producers want to keep their audience, they need to answer some big questions first: Why are the others at war with the survivors? Who is Jacob, why is he there and where did he come from? What’s with the black entity on the island? Give us real answers, then feel free to open a few more questions. We want to feel progress.

The Web Design [and developer] Survey, 2007

From A List Apart:

Designers, developers, project managers. Writers and editors. Information architects and usability specialists. People who make websites have been at it for more than a dozen years, yet almost nothing is known, statistically, about our profession. Who are we? Where do we live? What are our titles, our skills, our educational backgrounds? Where and with whom do we work? What do we earn? What do we value?

It’s time we learned the answers to these and other questions about web design. And nobody is better qualified than the readers of A List Apart to provide the answers. Participate in our first annual survey to increase knowledge of web design and boost respect for the profession. Selected participants, chosen by random drawing, will win one free ticket to An Event Apart event held in the continental U.S.; an Apple 30GB video iPod, an Event Apart jump drive, or a funky A List Apart T-shirt.

This survey is so important for our industry. How often have you wondered where your salary fit within the industry standard? Are you being paid enough? How do you rank among your peers? Of course these questions are taboo to ask of coworkers, but this survey will help break the ice.

TAKE THE SURVEY!

I Took the survey

I’m Naked and it feels great…

…a bit brisk though.

If you’re wondering why my site is missing it’s design and appears a bit ‘naked’, it’s because I’m participating in CSS Naked Day ’07. To support web standards this site will be naked on April 5th.

CSS Naked Day is the brainchild of Dustin Diaz:

“The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good ‘ol play on words. It’s time to show off your <body>.”

GE Evolution™ Series Locomotive


GE Ecomagination

I’m not the type of guy that gets excited about new locomotives, but this is something cool that I caught while browsing through inhabitat.com.

The folks at General Electric have recently put together a series of informative, compelling, and visually stunning videos as part of their Ecomagination “commitment.” Here’s a video about their Evolution Series Locomotive, a lean mean high-performing machine which truly “defies the perception that greater efficiency means less power,” using 189,000 fewer gallons of fuel in its lifetime than its predecessors….

via inhabitat.com

The coolest thing was the numbers on the GE site (located from the video page at ‘Behind the Story’ > Facts):

  • If every locomotive in North America were as clean as GE’s Evolution…[it] would be like removing 48 million cars from the road each year.
  • If the largest railroad in North America switch half its locomotive fleet to the GE Evolution, annual carbon dioxide emissions would be reduced by an amount equal to planting more than 31,000 acres of trees.
  • Compared to locomotives built in 2004, a single Evolution locomotive will consume 315,000 fewer gallons of fuel in its lifetime…

I always love seeing innovations like these. We wont stop, or reverse, global warming with a single solution but many smaller steps until we reach the tipping point.

The Start of SXSW

This year I decided to find out what this whole SXSW conference thing was all about. Yesterday I hopped on a plane and when it landed I was surrounded by nerds, geeks and trendy Web 2.0 developers and designers — I suddenly felt home. I spent the day talking to and hanging out with the likes of Steve Ganz, Kimberly Blessing, Kent Brewster, Stephanie Trimble, Dylan Schiemann, Gilnda the Good Witch, among others.

Right now I’m in the “How to Bluff Your Way in Web 2.0” hosted by the very funny Jeremy Keith and Andy Budd. It is a 90 minute mockery of Ajax, Web2.0 and important site design. Half the people in the room have their laptops open and are playing Buzzword Bingo — 2 people have won so far.

ClassAnim & HoverHijax: Keeping Presentation out of Your JavaScript

Heads up! This was written in 2007 and many things have changed since then. Nowadays, CSS transitions are widely supported by browsers and a better approach.

Ever since the dawn of CSS and compliant browsers web developers have been squeezing the presentation layer out of HTML and into external CSS files. It has become a web development battle cry and having a tableless website was worn as your badge of honor. To the web dev elite, having <br> tags in your HTML is a sin punishable by death (or at least severe laughing and poking).

Now we are moving in to the so-called ‘Web 2.0’ era. The time of shiny websites with page refreshes cut down to a select few actions. Animations and special effects compliment the content as it fades in and out of view. Libraries like YUI, Dojo and Prototype are making these things increasingly easy and well supported. But with all this, I feel we’re forgetting something. Where’d the presentation layer go?

When you’re animating a rollover or fading some colors do you stop and thing what you’re doing? You’re putting the colors, dimensions and effects into your JavaScript! The presentation layer that you’ve worked so hard to externalize is leaking into your JavaScript code. This is a slippery slope that we have to prevent now. The presentation layer should remain in the CSS, markup in the HTML and logic in the JavaScript. If you want to change the colors or sizes the elements are morphed into, you should be making those changes in CSS.

This brings me to my solution. I present to you an extension to the YUI animation library that will perform your cool animations from the styles defined in your CSS. I call it ClassAnim.

How it works

  1. ClassAnim starts by reading the styles from the base element.
  2. Then it quickly applies the new CSS class to it, reads the new styles and removes the class. This happens quicker than the user can notice.
  3. Now it compares the styles from both versions, extracts the differences that can be animated, and invokes the animation.

With ClassAnim, when you want to make a color or dimensional change you don’t have to go searching through your JavaScript, you make the change straight in the CSS — the way it was meant to be.

See the demo
(Please note: This API is still beta)

Link Rollovers (HoverHijax)

Here’s a simple implementation for rollovers. You’ll notice that all the links on my site have a fading hover effect on them (try mousing over one). This uses a simplified version of ClassAnim that I call HoverHijax. It only animates colors and does it on mouseover and mouseout. My original prototype would actually honor the :hover pseudo class, but good ‘ol Internet Explorer wasn’t allowing me to get to those styles through JavaScript. The current implementation adds a ‘hover’ class to all links when they are being moused over.

See the demo
(Please note: This API is still beta)

The best thing with HoverHijax is that it follows the Progressive Enhancement (or Hijax) strategy and can easily work with or without JavaScript as long as you use the ‘hover’ class along with a ‘:hover’ pseudo class. The only difference is that without JavaScript it wont have the cool fade effect.

a:hover, a.hover {

   color: #000;

}

Where to Download

You can download these new ‘experimental’ APIs from my subversion repository.

Browser Wars Episode II

Looks like Yahoo is getting pretty active on hosting exciting web development events! In their latest offering they will be hosting “Browser War Episode II” where the “Jedi Masters” behind Internet Explorer, Firefox and Opera will converge on a single floor to talk about DOM scripting — and perhaps we’ll even see a death match. OK, that’s my wishful thinking creeping into my blog again. This will all be moderated by the very smart Douglas Crockford.

This should be a very exciting and insightful night!

http://www.svwebbuilder.com/page/2%2F28%2F07+Browser+War+Episode+II

What:
Browser Wars: Episode II Attack of the DOMs
When:
Feb 28, 2007 Wed 6:00pm
Where:
Yahoo Building C, 701 First Avenue, Sunnyvale , California 94089
Who:
Douglas Crockford, Architect at Yahoo & Founder of JSON (Moderator & Host)
Chris Wilson, Group Program Manager of the Internet Explorer Platform at Microsoft
Mike Shaver, Director of Ecosystem Development at Mozilla Corporation
Håkon Wium Lie, CTO at Opera & Founder of CSS