Pemaquid Communications

Did you know that Google has an experimental version of its search engine geared towards people with special needs in the area of accessibility? One feature: when search results load, they automatically skip the navigation and search interface.

Facebook is also making an effort to improve their site’s accessibility. Earlier this week, Carl Augusto, President of the American Foundation for the Blind, wrote a post for Facebook’s blog on the subject.

Google’s Accessibility Enchanced search engine

Facebook FAQs on accessibility

No, there’s nothing wrong with our blog today.

We’ve stripped the CSS from it to mark the fourth annual CSS Naked Day, an idea that is the brainchild of designer Dustin Diaz. The idea is to promote proper use of semantic markup. Web sites content should still be readable and accessible even when the CSS is removed.

Try to imagine what some popular Web sites, or even those of some Web design firms, would look like w/o their CSS.

Come to think of it, if you’re using the Firefox browser, you can use the Web developer toolbar to turn off the CSS of any Web site. Try it. Let me know what you find. I’d love to see some screenshots (let’s not be mean, though, people).

BTW, we’re not perfect. We’re using inline CSS in the image tags to float them to the right – for now, until we upgrade the site in the near future.

Pemaquid has some state agency Clients who would love to partake of social media just like everybody else. The challenge is that the State of Maine has an accessibility policy that requires agencies to make sure they provide information in a way that’s accessible to the visually and physically impaired.

Enter Facebook. Facebook is loaded with Ajax-y goodness, the kind that’s hard for screen readers and other assistive devices to pick up. So, is Facebook accessible? Strictly speaking, perhaps it is. Here’s the more important question: is Facebook usable?

I posed the question to a colleague who’s been blind since birth and who has a Facebook account. His response:

Honestly, I hate the Facebook site. I hated the old one and try though I might, I don’t find the new layout much improved.

Admittedly, there now seems to exist heading navigation which is nice, but not knowing when pages update and so forth poses a real problem where accessibility is concerned.

I generally use Facebook via the mobile site which is much more accessible, but at the cost of a lot of features.

For example, there’s no way to access group discussion boards via the mobile site, certain notifications don’t show up and applications, well they can just be forgotten.

Still, for basic FB use, the mobile site is definitely the most efficient, most accessible way.

When designing all these way-cool, bubblicious Web 2.0 apps, and when working with frameworks like jQuery, it’s easy to get caught up in the ajax-y goodness of it all and forget about accessibility requirements.

One reason many Web sites don’t have a higher degree of accessibility built in is that accessible design is seen as hard work. It’s one more set of best practices to wrap one’s brain around.

Often, for designers, it can seem to take the fun out of things (though it doesn’t have to be that way).

Drew McClellan has a recent blog post on the subject that illustrates the point. He talks about the Cappucino framework, developed by 280 North and billed as a way to build “desktop-caliber applications that run in a web browser”. The 280 guys are even working on a drop-and-drop IDE, called Atlas, for creating Cappucino apps.

I haven’t tried Cappucino first hand, but the word on the street is that this system is incredibly stunning, and the folks at 280 North should be congratulated for the accomplishment.

Cappucino’s javascript-laden framework, however, still has a ways to go to address accessibility issues. Hopefully, the 280 guys – and others developing similar systems – will take the time and do the hard work necessary to make sure their creations have a high degree of accessibility built in.

We can do it without losing the Coolness Factor. Focus on simple elegance in your design, make it your business to understand best practices for accessible design, and you’ll be able to build sites that work with assistive devices and are also fun to use.

I’ve been tooling around the Internet for the last few days and I’ve noticed that one thing hasn’t changed much in the last ten years: Web sites are almost always accessible, or well-designed, but hardly ever both.

I’m not sure why. At Pemaquid, while we’re not perfect, we always build a high degree of accessibility – at least Level AA – into every site we develop. (Go ahead, check out the sites listed in our Portfolio and run them through your favorite accessibility checker – as long as you don’t bother w/some of the ancient table-based sites towards the bottom of the list.)

Accessibility is only going to become more important as time goes by. You may recall that Target recently settled a lawsuit brought against it by a blind man whose screen reader couldn’t weed his way through the hideous code soup Target’s development team put in front of him.

Companies and governmental organizations are only going to find it more and more important to build accessibility into their sites. Web designers should be up to the task.

Fortunately, when you add accessibility to your Web site, it doesn’t have to ruin a good design concept. It doesn’t have to add cost or overhead to your project either. You just have to take the time to learn about the core issues and build it into your design process.

More Web designers should understand the issues around accessibility and become accustomed to being a problem solver regarding them. The ingredients: an understanding of Web standards and the Web Accessibility Guildelines. A solid understanding of CSS can go a long way towards helping designers deal with accessibility challenges to their design concepts.

One person who uses the latest CSS techniques to create sites with amazing visual designs along with a high degree of accessibility is Andy Clarke (@malarkey on Twitter).

I hope to get back to my roots a bit and start writing and speaking more about accessible design and how the two don’t have to be mutually exclusive. I’d love to know what issues you’ve faced regarding accessible design.

Late last week I surfed on over to the newly-redesigned site of a high powered Web design firm whose personnel I respect. I took a look under the hood.

I saw things that I typically see (that is to say, there were things missing). Examples:

• No h1 tag
• No skipnav for accessibility, not even a simple, modest one

How is it that such things get omitted from the architecture of sites whose people should know better? I have my theories.

Accessibility is not a primary goal for most high-end Web design firms. The goal of most of these sites is to sell the graphic design capabilities, the voice of the copywriters, and the background of the company principals. The audience of such a site is typically a creative director at an agency or the marketing director at a large company. These folks have hi-res monitors and generally don’t have visual or other physical disabilities.

Requirements for accessible design and semantic markup create overhead. I suspect that many creative firms would rather not take the time to be problem solvers when it comes to accessibility. Building in a high degree of accessibility while also preserving a design concept can be challenging, though at the upper echelons of the Web design world I would have thought that in 2009 these types of design considerations would be non-issues.

We can do better, people

When I got involved in the Web I quickly noticed that what’s required to design sites (write code) is an intrinsically difficult bridge for many graphic designers to cross. Just the other day, I talked to the principal at a Portland design firm. When I asked her about how her company goes about building Web sites, here is what she said:

I hate building Web sites. Hate it, hate it, hate it. When I create a brochure, I know exactly how it will look. On the Web, it might look different depending on the browser, the screen size, the color temperature of the monitor…

I’ve heard other agency principals beat the same drum.

Here’s the thing: the issues mentioned above are all technical issues. They are not design issues.

Still, if you pitch yourself as a top-flight Web design firm, you ought to be able to demonstrate the basic principles of accessible design, semantic markup and Web standards.

It is possible to create elegant sites that meet the highest accessibility standards without compromising your design goals. I would even say it’s getting easier as browsers improve. It shouldn’t take a lot of time, and it shouldn’t be that hard.

And if it is, let Pemaquid be a problem solver for you.

The Maine Commission for Community Service works to get people involved in volunteer activities throughout the state. The Commission’s site, at MaineServiceCommission.gov, is the place where they report to the public and their stakeholders how effective they’ve been in achieving their goal.

Last week Pemaquid launched a new and improved site for the Commission. Our main objectives:

Create a more up-to-date, professional image. The creative available from MCCS was limited. It consisted of a logo created in house. We developed a hi-res version of the logo so they could use it in other materials, and then we created the layout and color palette around it.

Improved content management. The Commission stores literally hundreds of reports and publications on the site. They publish events, photo galleries, news releases, and they have a fairly unique way of posting information about goings-on, called Maine Volunteer Fare. That and other content is handled with a custom version of the Pemaquid Content Manager, our home-cooked CMS.

Accessibility. As a state agency, the MCCS must adhere to the Maine’s Accessibility Policy, which sets fairly high standards for meeting the needs of the visually/physically impaired. As always, our intent was to ensure accessibility without compromising the elegance of the site’s design concept. We think we’ve done that.

There are a bunch of other goodies reflecting the latest techniques: the jQuery Cycle plug-in is used to rotate the home page “marquee slides”; and for the first time we used css_browser_selector.js as a means to serve up different styles depending on the browsers (we used it mainly to adjust the navigational font in IE (further reading on CSS browser selector, many thanks to Jen Ecker for dropping this into the codebase).

Executive Director Maryalice Crofton and Public Relations Representative Rochelle Runge are a joy to work with and Pemaquid will continue to assist the MCCS with ongoing content development and by providing hosting for the site (Pemaquid also hosts another Commission site, VolunteerMaine.org). We’re proud to support their mission of fostering community service activities and a spirit of volunteerism in Maine.

Below is an example of a javascript that lets you easily sort columns in a table. It’s called sortable.js. It’s been around for awhile, but I thought it worth a mention.

At Pemaquid we use it for table sorting in our Content Manager (our home-grown but spunky little CMS). The nice thing about it is that it degrades gracefully. In other words, the table works just fine even if the javascript doesn’t.

More on the whole bit here.

Editor’s note: Yep, the table below is not the prettiest, and I can’t properly show code snippets at the moment. We’ll be upgrading to WP 2.7 shortly and will bang the CSS around a bit to give a cleaner display.

There are a ton of content management systems out there (see CMS Matrix). So how do you decide which one is right for you?

In selecting a content management system – or CMS – for your Web site, it’s important to remember that you don’t want to compromise the user experience or the accessibility of your site just so you can slap another page up there.

You also don’t want to become a slave to your CMS; it should work for you, not the other way round. It shouldn’t unduly compromise your ability to organize content on your site.

Some of the most popular systems include: WordPress, Joomla, Drupal, Expression Engine and Silver Stripe (all of these are open source; Silver Stripe was used to create the Democratic National Convention Web site).

At Pemaquid we’ve worked with dozens of these content management systems. Usually, however, we stick with the one we’ve developed ourselves: the Pemaquid Content Manager. The basic package can be installed quickly and inexpensively, but it’s easily customizable.

Are we proud of our little CMS? Yes. Is it the right solution for all situations? No.

Over the next few weeks we’ll take an in-depth look under the hood of some of the most popular content management systems and examine the pros and cons of using them.

Before launching a new site, it’s always a good idea to run a check on its accessibility to folks with visual or other physical disabilities.

One of our favorite tools for checking Web site accessibility is no longer available. The WebXact service from Watchfire had a very comprehensive free assessment tool that not only checked accessibility but also other important components of the Web page to make sure it was well-formed. Alas! IBM, which owns Watchfire, decided in February that the tool would no longer be offered for free – it now costs a very steep $1,580 for a 12-month license.

Not surprisingly, according to one metric I use, the site’s traffic plummeted in March to half of its previous levels. I expect April’s traffic numbers will be down even further. Perhaps a better idea would have been for IBM to continue offering WebXact for free while posting ads for content relevant to those using the service.

No matter. Other excellent free tools are available. Here are a few we use at Pemaquid:

• Cynthia Says Portal (contentquality.com) - from HiSoftware, a company that develops accessible software. Just enter the URL of a page in question on your site, and the service will run a report to show how it measures up against the Web Content Accessibility Guidelines and Section 508 guidelines. The report is thorough and runs very fast. It’s become the spot-checker-of-choice for many top-flight Web design firms.
• WAVE – runs a similar report when you enter the URL of a page. Offers a visual view of the page as well as some other features, including a text-only view. Not as comprehensive as Cynthia Says. Here’s a report on Pemaquid’s home page

No accessibility tool is perfect, but these two can help you avoid making obvious mistakes.

Finally, I should add Web designers shouldn’t rely on any tool to tell them whether their work is accessible. You need to do your homework. Required reading: the Web Accessibility Initiative guidelines for accessible Web design.

I surfed over to a certain Maine Web site the other day and found that it had been redesigned. Here is the site navigational structure:

Can anyone tell me with 100% certainty what those items represent?

Therein lies the problem. You can’t tell what you’re going to get when you click (you can’t even tell that you can click). The only hint that this is the site navigation is that it is positioned in the spot where, if you’ve surfed for any length of time, you know that navigation is usually found.

Here’s the site, btw, if you’d now like to see that nav positioned within the overall layout.

(I don’t mean to pick on Downeast. They’re a great company and their Web site is far better than the previous version. I’m just using their site to show how you can improve the user experience on sites you design.)

Navigation is best as text. Text that is unambiguous. “About” is more effective than “Who We Are“.

Lo and behold, when you mouseover the nav on this site in question, you see a… word.

There are two big reasons why you should use text in you site navigation.

Usability. There’s an excellent book on Web design by Steve Krug called Don’t Make Me Think. In it, Krug points out usability studies show that people usually don’t read Web sites – until they’ve found that article they were searching for – they scan them. Navigational text that is simple and clear supports this scanning activity. With graphics, you have to stop and think (“hmmm… what could a camera mean?…”) This is why icons, unless they are universally understood, are also poor choices for navigational labels on Web sites.

Accessibility. In the example above, if you were visually impaired and came upon this site, there would be no way for you to understand that the images represented the site navigation. It would be much better to place navigational items towards the top of your HTML as a list of text links and to then use CSS to style the list to match your overall design concept.

Web site designs like the one in question point to a larger issue in Web design, which I call The Tyranny of Graphic Design. That’s a topic for another day, but briefly, Web design is not graphic design. It’s interaction design (of which graphic design is certainly a part). In creating Web sites, designers should take care that the graphical design concepts they produce make it easier for people to find what they’re looking for on a site, not harder.

Don’t make me think…

It’s that time of year again, when people take a look back at what they’ve done and take a look ahead. Some, including Yours Truly, still even make New Year’s Resolutions.

Seth Godin has a great post on his blog today that fits right in with that theme. He says people should think about what they’re doing right now and ask themselves if they will be proud of themselves 15 years hence. Do we think these are crazy days? Godin says that’s nothing new:

So stop thinking about how crazy the times are, and start thinking about what the crazy times demand. There has never been a worse time for business as usual. Business as usual is sure to fail, sure to disappoint, sure to numb our dreams. That’s why there has never been a better time for the new. Your competitors are too afraid to spend money on new productivity tools. Your bankers have no idea where they can safely invest. Your potential employees are desperately looking for something exciting, something they feel passionate about, something they can genuinely engage in and engage with.

If times are going to be crazy no matter how you slice it, says Godin, Why Not Be Great?

Sounds like a good Resolution to me.

Leo Burnett, the great ad man, had the same idea, which he put this way:

When you reach for the stars, you may not quite get them, but you won’t come up with a handful of mud either.

And Donald Trump said:

As long as you’re going to think anyway, think big.

To paraphrase The Donald, if you, like me, are going to build Web sites anyway, think big. Stretch a little bit this year:

• If you’re still coding layouts w/table structures, learn some CSS (Your Clients will thank you because their sites will be easier to update and maintain)
• If you’re still creating design concepts that depend on embedding a lot of images into each Web page, again, learn some CSS (Clients will appreciate that their pages are dramatically smaller, load more quickly and use much less bandwidth – bandwidth costs money)
• If you’re not yet writing valid code based on Web Standards, start (Clients will thank you when it becomes easier to maintain the look and feel of their sites across different browsers and operating systems
• If you haven’t learned about Web site accessibility, start reading up on it, and apply to your sites (your Clients, and their Web site visitors with visual and physical disabilities, will thank you for being mindful of their special needs)
• If you think it’s more important to bring people to your site – (search engine marketing) – than it is to keep them there – (Web site design and usability) – please think again (if you don’t, your Clients’ competitors will thank you for sending customers their way as they flee a hard-to-use site)

Here’s wishing you a happy, productive – and Great! – New Year!

I’d like to thank Shirley Helfrich, Thomas Bennett and the folks at the Prince Memorial Library and everyone at the Southern Maine Library District for inviting me to speak the other day about Web site usability at their annual conference. Thanks for the opportunity, the thoughtful questions – and for not throwing tomatoes!

Here are some of the tips I mentioned (and some I did not), as well as some links to resources you might find useful.

Usability

• people don’t read Web pages, they scan them support that scanning activity by “chunkifying” the content on your pages (use headings, subheadings, lists, meaningful link text)
• don’t use “click here” in your link text. It’s wastes space. Use either an action word (“shop”, “review”) or a descriptive word (“apples”, “oranges”) that describes what the person will see when clicking
• if you want someone to click on something, make it look like a button
• if you want someone to read something, make it a text link (not a graphic; see banner blindness
• if it’s a link, underline it; if it’s not, don’t underline
• when linking to PDFs, spreadsheets and other files, put the filetype and the size of the file in the link text (big pdf file (PDF – 1.7MB)
• avoid uploading/linking files that are more than, say, 4MB in size (see Attack of the Giant PDF)
• don’t use “What’s New” (it gets old fast)
• review your traffic stats to see what how people are moving through your site and which sections of your site are generating the most traffic

Accessibility

• provide “alt text” for all images on your Web pages
• use relative sizing for fonts (%, rather than pixels)
• ideally, use CSS to layout your site (less code, easier for assistive devices to interpret properly)
• in forms – remember to use labels and associate labels with the proper form field – learn more
• don’t use color as the only way to represent information (as in: red = “bad”; red=”required”)

Resources

• Watchfire’s Webexact accessibility checker – great for spot-checking your work
• Web developer Toolbar for Firefox – a ton of useful tools for accessibility/usability built right into the browser
• World Wide Web Consortium’s Web Accessibility Initiative – the standards for accessible Web site design, from the folks who brought you HTML
• Section 508 – federal standards for software accessibility
• Sim Daltonism – tool for viewing Web pages as a colorblind person might see them
• W3C Markup validation service – essential tool for making sure your Web pages are coded properly
• Dreamweaver – easy to use Web editor; the latest version has excellent support for CSS
• Coda – great little Web editor; helps you work faster. For advanced users comfortable hand-coding (Mac only)
• Accessible Photo Gallery – this gallery meets the criteria for accessible display of photos, uses progressive enhancement to meet needs of viewers
• CSS1 reference guide and CSS2 reference guide – from CSS guru Eric Meyer

Books

• Don’t Make Me Think (Steve Krug) – easy read; reveals how people really interact w/Web pages, and how you can take advantage in your design
• Bulletproof Web Design (Dan Cederholm) – shows how you can use CSS to tackle common design challenges
• Designing with Web Standards (Jeffrey Zeldman) – Zeldman explains why Web standard design techniques are the way to go

Catching up on my required reading, I came across another useful post from Jeffrey Zeldman’s blog (as I often do) on tools to help designers predict how people with color-blindness will see their designs.

• Sim Daltonism
• Colorblind Web Page Filter

Details on each @ Zeldman’s site.

Adding to delicious….

I’ve known about Netvibes for some time now and had toyed around w/it. Over the Fourth of July holiday, however, I suddenly realized how you can keep track, at a glance, of whether you’ve read the items in a particular feed.

That’s all it took.

I spent part of the day yesterday bringing in all my feeds and content, which I had set up in my old feed reader, Newsgator. This type of site, w/its high level of Ajax functionality, no doubt would be difficult for people who require a high degree of accessibility to use, but for an average joe like me, the usability is A+. You can see a tremendous amount of information in one screenful and very quickly and easily add stuff or move it around.