In 2004 Russ Weakley of Max Design presented a Web standards checklist to the Web Standards Group. I was on the mailing list and found the checklist invaluable as a guide for developing and testing web sites. The online version is perhaps the most useful, since it has links and reference materials, but I’ve often used the PDF version that Russ made available since I could print a new version for each project.
For several years I would either print the PDF and reference the checklist on paper, or open it in Illustrator, edit new layers of “checked” boxes and notes, and save it as a PDF again.
Now I’ve moved the checklist to a much easier format to work with on a regular basis: outline template in OmniOutliner. (OmniOutliner’s free version comes bundled with default software packages on Mac OS X.)
This allows me to quickly check off items without the clunky Illustrator editing. The plain-text export is handy for emailing or clean printing, and you can export as HTML if you like. OmniOutliner also has “notes” areas for adding text underneath each item, which is great for including reasons for not checking off a point, or if you need to jot down a few to-do items regarding an item.
A big thanks for Russ for developing this checklist—it’s been an integral part of my workflow. I hope you can use this outline-style “Web Standards Checklist” and that it speeds up your web site development and testing.
To use the outline, download the template file and open it in OmniOutliner. Then “Save As” to start a checklist; this gives you a new checklist for every web site project.
Download:
“Web Standards Checklist” as OmniOutline Template (Note: Includes minor changes to spelling, punctuation, and style.)
Original “Web Standards checklist”[sic] from Max Design as OmniOutline Template (Note: I didn’t change any text or fix typos in this version—it’s straight from the original PDF.)
Many web designers implement “skip links” on their sites in order to aid visitors with alternate devices like mobile phones or screen readers. The links act as a way to navigate quickly to main parts of the page; if implemented correctly, they can be a good step towards keeping a web site accessible.
How to implement these links is a hot topic of discussion among web professionals. I recently received this question regarding skip links and whether to show them or hide them in a given layout.
Hi, I just wanted to ask you a quick question about accessibility for this site I am working on… I was going to use the display:none CSS attribute for my skiplinks, but according to this site, it’s not ideal because users that use a keyboard but that are not blind (i.e., have to use TAB to get around) can’t see it and therefore can’t use it. Also, apparently, some screen readers don’t read them. So, that option aside, I’ve come up with a potential solution. This would be to put a small downward-facing arrow at the top right, with the ALT tag[sic] describing its use. It’s visible, and relatively unobtrusive. In your experience, is using display:none an industry standard, and is what the site said a concern? What do you think would be the best solution?
My experience has been that a well-designed HTML document doesn’t need skip links at all. If you do need it, for a very busy or long page with lots of content, then it is a great way to aid site visitors.
On some of the sites I have worked on I’ve included a “Skip to navigation” link and tried to put the main content first in the source. For example, see my Travel/RV blog and turn off CSS. The skip link is under the page title but just on top of the main content. For other sites, like here on simpledream, the skip link text is “Skip to content” and is located just above the global navigation menu.
To hide or not to hide? This is very much a personal preference. Lots of accessibility experts claim all skip links should be visible (always). My preference is to hide them from sighted folks. Most designers or visually-oriented developers will follow the hidden approach unless they can come up with a creative way to show the visible skip link. As a general rule, and as you pointed out, hidden skip links only benefit screen readers and other alternate browsers and don’t provide an option for sighted keyboard users.
If I’m going to hide, what CSS rules to use? I’ve used “display:none” on almost every site, but I am now leaning towards a better approach. For example, setting the “text-indent” to ”-9999px” or something similar (I’ve also used “width: 0; height: 0; overflow: hidden;” before with similar results). This keeps it visible in screen readers and alternate browsers that understand CSS. I think it’s valid to say that “display:none” is not the best solution for hiding the links since it’s possible that some screen readers will ignore them.
What’s the best solution? It really depends! Like a lot of web design and development issues, the best solution depends on the web site itself, especially its audience and purpose. For example, if a site expects lots of mobile device visitors, the visible skip links at the very top of the page will be ultra-important. It’s really useful on a mobile device (such as a cell phone) to be able to use a skip link to navigate rather than having to endlessly scroll. As mobile access gets more popular each day, this is an important consideration.
If you want the site to be clutter-free and clear, I would recommend hiding the skip link. If accessibility is more important than the look of the layout, then the arrow idea is superb. Go for it!
In a scenario where the main content of the page comes first in the HTML source, then you may be alright without a visible skip link since the important content will be right there for the visitor to read.
If you would like to read other opinions and explore test cases:
If you can’t be there, make sure to download the full list of podcasts from Web Essentials 2005 in Sydney. I just downloaded 12 podcasts, and am looking forward to listening and learning. One in particular: Molly’s first keynote!
Link to WE05 podcast page: WE05 PodCasts ».
Via: Veerle.
There has been a bit of recent talk about the benefits of Flash-based user-centered design versus designing a web application interface with web standards technology such as AJAX or DHTML. One great showdown and discussion-starter was at the 2005 SXSWi conference with the Flash vs HTML Game Show. It was a great panel where popular web apps like Flickr and Gmail were re-engineered in Flash or HTML. The panel even garnered a write-up by the great Zeldman on zeldman.com’s Daily Report.
The best result of the panel and other online discussion is the subsequent questioning of usability of the Flash interface for a web application. In this case it was Flickr that got some attention when they announced they were going to convert parts of their popular online photo gallery application to run with DHTML instead of Flash.
Recently this topic came up with a client here at simpledream web studio who wanted to know the benefits and drawbacks of presenting photos and content with Flash instead of HTML. Since the MO of simpledream web studio is web standards, the discussion was one-sided—it was pretty much a "Flash bash" from my perspective. The most important thing that came out of it, however, was the fact that Flash and HTML/CSS are both tools. How you choose to use them is up to you—I decided to pitch for using standards-based design with CSS because that is the tool I feel the best about on all levels of design and development. If a Flash developer were to have been in the meeting with us, he/she would probably have said the same thing about Flash and would have had the same thoughts as me about their way of doing things.
I think the panel at SWSX proved that for any given application you can use either tool effectively and achieve great results. Of course, in the case of the panel and Flickr's recent change, the comparison is between Flash and either DHTML or AJAX and not just CSS design versus a Flash rendering of content. Regardless, both camps have strengths and weaknesses. Since we have a choice as developers, my recommendation would be to use the tool that fits the project well and will use your skills to their maximum capability. If I have my druthers on every web project from now on then it will always be web standards for me: CSS, (X)HTML, and the DOM. But for the many great Flash developers out there, I say "more power to you." Make me a believer!