Web Design

 

Accessibility Summary

Keyboard Only

This site is utilizing skip links to improve mouseless browsing. Skip links are links to another part of the page that allow visitors to navigate their way around a web document, without having to cycle through a huge list of links. They will be seen when tabbing through the page, and can be activated by hitting enter key when visible.

Access Keys

An access key is a keyboard shortcut that allows you to immediately jump to a web page or specific part of a web page. Activating access keys varies between web browsers and operating systems. In Internet Explorer they are activated by hitting the Alt button and the access key at the same time, while in Firefox it is Alt, Shift, and the access key. On a Mac, it is Control and the access key. The access keys for this site are:

  • accesskey "s" - Skip to main content
  • accesskey "n" - Navigation
  • accesskey "5" - Return to top of page
  • accesskey "1" - Return to home page
  • accesskey "o" - Accessibility page

Skip Links

Unlike many others, our recommended method of implementing skip links ensures that all keyboard users ’see’ the skip link, as it appears visually on screen when a user tabs to it, and is of course read out by screen readers. The problem is this — although they find it, many web users simply do not understand what a skip link does, let alone how to use one.

I've used skip links on all my sites for quite some time, but a while back I made a change. The change was in using longer link text. Taking a page from Accessibility Field Notes, I realized that there is really no down-side to longer link text. Rather than the simple "skip" or "skip-link", I now favor "Skip to Main Content - press enter to activate". If you're not using the skip links, the length of the text doesn't matter, you don't see it. If you are using it, it helps, or you don't read it anyway. Win-win. What are skip links? Skip links are links, often hidden, that allow the viewer of a website to skip blocks of content. Why? It's an accessibility feature. Viewers using screen-readers, increased font sizes, no CSS, or a variety of other methods can have difficulty navigating web pages because of the complexity of modern web sites. Websites viewed using accessibility features are often made linear. So if a viewer wants to read the content of your page, they have to read everything that comes first, first. Thinks that's not much? Try reading your site.

  1. Start with the header,
  2. Then read the sidebar all the way to the bottom.
  3. Now, if you're lucky, you found the content you were looking for.

What if it's the wrong page? What if the story it has a second page?

  1. Start with the header,
  2. Then read the sidebar all the way to the bottom.
  3. Now, if you're lucky, you found the content you were looking for.

Third page? You see where this is going? Skip links let you "skip" over blocks of content like the sidebar. They eliminate the need to view irelevent and/or repetitive content you aren't interested in. Go to the page you want, and "skip" to the content you want. A simple solution to an annoying problem.

Test Driven

Test-Driven CSS (sorta) at zahnster

When starting this task, I knew that we'd have to come up with an at-a-glance method for our developers to take the newly re-factored CSS and run with it.

This is an idea that I use. I have a file I call the style guide for each of my sites. It contains every CSS style I have coded of the site. The page tends to be long. Variations on ordered lists and unordered lists, definition lists, headers, paragraphs, buttons, and blockquotes. The ideas is twofold. One is to make sure that everything is working and not conflicting in some unexpected way. The other is to leave myself, or any designer who picks up the project, a way to see what currently exists and how to use it. It's not the perfect solution to CSS bloat, but it really helps limit it. If you know what's already in the CSS, you're much less likely to reinvent it when need to add something.

Cascade Exposures

My most recent project at Riven Design was transitioning a Typepad photo-blog called Cascade Exposures to WordPress and it's own domain. The new site debuted today, and I'm really thrilled. Go take a look, Jan's work is impressive, and always worth a visit. While you're there, make sure you subscribe so that you'll never miss anything.

Cascade Exposures

Riven Design

As you may have notice, I haven't blogged much lately. One of my recent endeavors has been doing web design at Riven Design. I've been doing web design with an emphasis on high quality imagery and accessibility, and some really fun print design as well.

Riven Design

WCAG 2.0 has been released

W3C Web Standard Defines Accessibility for Next Generation Web

Today W3C announces a new standard that will help Web designers and developers create sites that better meet the needs of users with disabilities and older users. Drawing on extensive experience and community feedback, the Web Content Accessibility Guidelines (WCAG) 2.0 improve upon W3C's groundbreaking initial standard for accessible Web content.

Web Design Resources - Updated

I was putting together a list of resources that I regularly use for someone, and I thought it might be helpful for someone else.

Firefox Resources

Resources for Internet Explorer

Resources for Opera

All Browsers

CSS Menu Writer Rides Again

I'm still using the CSS Menu Writer that I got to evaluate. I have to say it's very slick. I'm working on a WordPress site that I hope to reveal soon, and it came in very handy. I've worked on tabbed navigation with CSS before, but this was relatively painless. A few quick menu adjustments and it gave me a set of beautiful tabbed menus. Of course it's never quite that easy. I had to track down a bit of a z-index glitch in IE6 and 7, but that was hardly the fault of the people at WebAssist.  The menus performed perfectly in my base page in all browsers. It was only when I introduced some additional CSS of my own that I had an issue. Why can't Microsoft come up with a browser that works as well as the new Chrome by Google seems to? If you're looking for a Dreamweaver plugin that takes some of the work out of clean CSS menus, I'd suggest giving CSS Menu Writer a look. Even if you use it like I did, to quickly build a base menu that I further customized, it is an incredible time saver.

Web Design Tools - The Site Test

If you are a site designer, or a site owner, you will at some point need to evaluate a site. Do the bones of the site stand up, or it is a screaming wreck hidden behind a pretty facade? The first thing I do is look at the source code.  Beautiful code isn't the final answer on site testing, but it's a place to start.  Is it table based, or a CSS layout? A table based layout should put up a warning flag. Table based layouts are outdated... you can do better. You want CSS. It's more adaptable, and more accessible to a wide range of technologies. You can also make significant changes to your entire site by changing just one file. A quick look at the code should be enough to tell the difference. If the source code is filled with <table>,<td>,<font>, and <tr> then you're looking at a table layout. If it looks more like <div id="blah-blah">,<h2> and <ul> then you're likely looking at CSS. Validation is my next step. Just because it validates, doesn't mean the page works, but it does rule out a lot of common errors. If you just want to validation check one or two pages, for to WDG HTML Validator and type in their URL. You will get an immediate evaluation of the page's validation status. Quick, clean, and simple. If you're going to do this often, go get the Web Developer or Html Validator add-on for Firefox. You are using the Firefox web browser aren't you? If you aren't, then download that as well as one of the validation add-ons. They're free, high quality products.The Web Developer add-on is a powerful testing tool. It has all kinds of bells and whistles, so it may be more than you're looking for. If you only want to check validation, then just go with the HTML Validator. It does that one task very well. If your site is CSS based, you can validate your CSS file too. I'd suggest CSSCheck or once again Web Developer. Then we get to links. Any broken links on your site? It's annoying, but sites come and sites go, and invariably you will end up with broken links. Try out the Online Link Checker, or the LinkChecker add-on for Firefox. Accessibility is also important, I'd suggest trying the OCAWA accessibility validator. There are other tools and add-ons around, but that will get you started. If you need more testing options, Web Developer has some accessibility functionality, and there is the Firefox Accessibility Extension as well. Want an overall evaluation of the speed of your site? Try out the Web Page Analyzer. It will let you know how fast your site is running on various bandwidths, and make suggestions for speeding it up. I would suggest sticking with Firefox for most of your testing purposes, because of the wealth of testing tools available. There is however, an Internet Explorer Developer Toolbar. In my experience, it doesn't work as intuitively or as well as Firefox's, but it does work. This isn't everything you need to know to evaluate a site, but I hope it helped get you moving in the right direction. Good tools always make a task go smoother.  Good luck.

A List Apart Design Survey

A List Apart - The Survey, 2008

Calling all designers, developers, information architects, project managers, writers, editors, marketers, and everyone else who makes websites. It is time once again to pool our information so as to begin sketching a true picture of the way our profession is practiced worldwide.

It's a very well written survey in my opinion. If you are a design professional, go help them out and take the survey.

I took the Survey!

Syndicate content