Keyboard Accessibility for Web Applications
One of the things I really enjoyed working on (and continue to enjoy working on) is keyboard access in the new Yahoo! Mail. As a fan of using the keyboard, I wanted to make sure that using Mail felt natural and was easy to move around the application. This is much harder than it looks because we have to establish a balance between a web page model and an application model. Todd Kloots, from the...
What does Accessibility mean?
If you were to ask people that question, I suspect most would say that accessibility is about making sure something — in our context, a web site or web application — that works for those who are physically disabled. Maybe they're blind or maybe they're a quadriplegic and unable to use a keyboard or mouse in the traditional sense. Accessibility is a spectrum That definition of acce...
Making Elements Focusable with Tabindex
After reading James Edwards' latest article on Sitepoint, Accessible JavaScript: Beyond the Mouse, I was intrigued by one section: "... if we want to capture input from the keyboard, we'll need to use elements that can accept the focus: primarily links and form controls ... " I quickly thought about simply adding the tabindex attribute to an element and after some preliminary t...
A reason to build sites progressively
Sometimes it's nice to see other developers build sites well enough that it works in your favour. In this particular example, I had to call my dentist to reschedule an appointment but the site was down. Now, I remember the site being Flash-based so I didn't hold out much hope that the Google cache would reveal anything special. Luckily, they used JavaScript to replace real content on the page wi...
Make Your Language Clear
When writing instructions for your users, it's important that the messaging is clear. Here's a quick example when adding a user as a contact on Flickr: When I first read this I thought to myself, "Who's Mark? I'm not adding Mark as a contact." It took me a couple seconds to realize that mark was a verb and not a noun. Including the contact's actual name as in, "Mark John Smith as a friend?" wou...
Microsoft Office and Usability
Jensen Harris is a Lead Program Manager on the Microsoft Office "user experience" team. It's been a pleasure to read his blog and the effort the team has been putting into the new version of Office. He talks about many of the usability issues and new features that will be in Office 12 but also uncovers things that are already within the application. With going solo, I've been using Outlook much m...
The Expectations of Links
When developing a web page, the user's expectation of what a link does is well understood. Clicking on a link will take you to another page. Within a web application, like Google Mail or Basecamp, links have much more power. They can perform changes, log you out of the application or even delete records. On one hand, should links even have this kind of power? Links are easily acted upon by search...
Colour (Color) Contrast Check
I had put together a JavaScript-based colour contrast checker a while back but I thought I'd revisit the code and hopefully improve on it. And that I have. Check out the Colour Contrast Checker. I've improved it by adding some nice HTML sliders and revising the interface. I had also noticed a small bug in detecting my thresholds which has now (hopefully) been fixed. For those not familiar, what...
The Usable Page Title
We almost forget about it. It's an afterthought, really. The <title> sitting up there in the <head>. It doesn't really add anything to the design of the page. But there are times when a user interacts with the page title. It appears at the top of the window, it appears when printing, it appears in search results and it's used when people bookmark your site. How can we help the user? El...
Creating Accessible Alternatives of Corporate Site
After hearing of the Odeon fiasco in the UK, it's nice to know that it couldn't (shouldn't?) happen in Canada. The Canadian Intellectual Property Office states: Another category of user to benefit from exceptions is persons with a "perceptual disability." This term refers to someone who has difficulty reading or hearing. Persons with a perceptual disability, or at the request of a person with a ...
Colour Contrast Check
Based on a tool that I use fairly often from HP, I wanted to make something that was easier for myself to use. Plus, it improves on some bugs that exist in the HP version. My Colour Contrast Check Tool. ...
An argument against multicolumn web design
Michael Barrett at Abouthalf dot com argues in defense of single column web layouts. The key argument is as it always should be: develop as is appropriate for the medium. ...
Colour-blindness and web development
Dave over at Mezzoblue talks about Colour Bland. It goes into a more in-depth discussion on colour-blindness issues in web development. ...
Fluid or Fixed?
The eternal debate! Okay, maybe not so eternal but when you work with designers that develop their sites in Photoshop and often come from a print background, the question often comes up. A survey done last year determined that it doesn't take people any longer or quicker to find information on a page. More importantly to note, however, is that "Users prefer fluid". ...
Instant Page Validation
Favelets or Bookmarklets are little javascript-based bookmarks that can come in quite handy. My personal favorite is: javascript:void(window.open('http://validator.w3.org/check?uri='+window.location,'','')); I've added this to my Links bar and if I need to validate a page, I just click the button. ...
Top of Page
Top of Page links are quite common on a number of sites. In fact, most of the government sites that I do mandate that the link appear at the bottom of the page. I've seen some developers include it every few paragraphs. I've just assumed, "Yeah, that's a good idea" and then I actually stopped to think about it. The conclusion I came to was to NOT use them and I have a couple reasons why. Why dupl...
XHTML compliant Flash
A List Apart article gets into the nitty gritty of implementing Flash using XHTML code. ...
Making Usable and Accessible Forms
For anybody who has made a web site, you have likely needed to create a form. A form can be a pretty straightforward thing but did you know that you can make your forms easier to use but following a couple easy steps? Here is our first example: Username: Username: <input type="checkbox" name="chk1" value="true"> As you can see, it's a pretty straightforwar...