Sites That Speak

January 23, 2012

I’ve just finished up a session on Designing Flexible Content at Word Up Austin where I outline my process for designing device agnostic sites. I was very impressed with the content at the meet up and had some great questions from the attendees.

One section of my talk details specific techniques for hiding complex navigation on small screens using a little bit of jQuery:

// Toggle for nav menu
$('.menu-button').click(function() {
    $('#access').slideToggle('fast', function() {});

This shows and hides the menu by adding display: none; to the element with an id of #access. (See my FlexNav demo for a device agnostic approach to complex navigation.)

Pat Ramsey brought up a good point about accessibility when elements are hidden with display: none;. Particularly when using assistive technology like screen readers.

This got me thinking about web pages that are read aloud to small screen users. Would hiding the navigation with display: none; be an accessibility issue? I hadn’t thought about that at all until Pat brought it up. Doing some initial testing on my Android powered MyTouch using the WebSpeak app revealed that it read only the structured markup and ignores the css all together. This is a very good thing but I need to do more testing on different platforms and assistive technology. I’m concerned that as these speech technologies become more ubiquitous on small screens I would have fallen into a very inaccessible design pattern.

Latest Thoughts

Thanks for stopping by!