I’ve been questioning the use of access keys for a while, all our sites including those that have been tested with positive results by AbilityNet use them.  The characters used are a mash of the government standard keys (1 through to 0) and obvious choices for the skip links (N = skip to navigation, S = skip to content).

How on earth can I say for sure that these don’t collide with existing browser and assistive technologies use of keyboard shortcuts? It seemed to me skip links and tabbing does work, they are practical and unobstrusive.

With a quick search I found various opinions and guidance on the subject of which widely agreed.

A good example is an article by Nomensa’s Alastair Campbell, What are Access Keys? (Note the date).

Although access keys are intended to improve site navigation, it is shown they actually can interfere with web accessibility. In terms of implementing a common standard, it would require a universal understanding of access keys to be applied to every site. Joe Clark, an accepted expert on accessibility, says access keys are: “severely compromised in practical application…” he continues to add, “If you add access keys, then, you are really coding for a future utopia”.

So do I stop implementing access keys on our Government and commercial websites?

With proper documentation for clients and content editors fellow developers to follow, you have a better chance at seeing your interface stay beautiful. Future designers and developers who work on the interface will have an easier time adapting, thus making their lives easier and potentially saving time and money.

Looks to be an interesting read from A List Apart on the type of documentation I’ve been trying to write for some time.

W3C Interaction Domain technologies enable millions of people every day to browse the Web and to author Web content. Industry uses these technologies for purposes such as distributing information within an organization and creating new business opportunities.

“Combining the various XML markups and Web APIs developed by W3C into an integrated system is the next big challenge. We are already seeing the fruits of this work on both desktop and mobile platforms – and the future is even more exciting” Chris Lilley, Interaction Domain Leader

New inline elements include time, meter, and progress. New embedding elements include video and audio. New interactive elements include details, datagrid, and command.

HTML 5 is part of the future of the Web. Its new elements enable clearer, simpler markup that makes pages more obvious. Div and span still have their places, but those places are much more restricted than they used to be. Many pages will no longer need to use them.

A few CSS3 selectors are already making their way into modern web browsers. Of the browsers tested thus far, Konqueror is the clear leader in implementation, with the Gecko (Mozilla, etc) engine not too far behind.

The basic idea is to make an extra dummy input text field in your form, and using CSS to make it invisible to the real human users.

Thereby, if a post is sent to your php script handling the request and this extra text field contains information, you know that the submit must be spam, and the script can ignore the post.

It works in all the major browsers – Mozilla Firefox 1.5+, Opera 9+, IE6+ and Safari. On older browsers, it’ll degrade and your visitors won’t notice a thing. Looks lovely.

A successfull bulletproof image-based button should:

• Automatically grow horizontally to fit any amount of text
• Grow horizontally and vertically if text size is increased or if the text wraps to multiple lines
• Retain its appearance within reasonable limits
• Be able to have rounded (or other non-square) corners
• Have no unclickable areas
• Be readable when images are disabled

A bag-full of mark-up required but pretty neat.

More site settings as the British Dyslexia Association see things.

It’s important for web designers and developers to know how to write good ALT and TITLE attributes. Practices like these should be employed into each web page element as it’s created.

Alternate text is not meant to be used as a tool tip, or more specifically, to provide additional information about an image. The title attribute, on the other hand, is meant to provide additional information about an element…. Many people seem to confuse these two attributes. – Roger Johansson

As Roger notes, we should be including accessibility features when initially creating web pages rather than going back to add it later.

1. Part I – Traditional HTML Semantics
2. Part II – Standardizing Vocabularies
3. Part III – Directions in HTML Semantics

Quite an eye opener and as the tag goes, from little things, big things grow.

So why do you put up with static CSS files then?!

Not only is Web 2.0 not just about looks, it’s also originally about clean code and putting the power of design in the hands of the coder.

We have no idea why it’s taken so long for this to get through, but for some reason, people still aren’t getting it. Dynamic web languages exist for a reason. Use them. Everywhere.

- from the NeoSmart files, Dynamic CSS Style-Sheets and Web Design. A new door opens, thanks NeoSmart for such a great article.

The new standards will play a large role in connecting databases with the Web and they “will support the ability to query, transform, and access XML data and documents.” – Eight New Standards from W3C.

They include: Reseting white space or cross-browser normalization, Making the absolute relative, Containing the float and The off-left technique.

Your CSS can be elegant. Your DOM scripting can connect seamlessly.

You’ll have made a significant first step towards improved accessibility. And you might even pick up some extra search engine traffic. It’s time to treat markup as a craft, and give it the love and attention it deserves.

Google Web Toolkit – Build AJAX apps.

In this article, I’d like to provide a little gratification to those attempting to make their web applications accessible. To achieve this, I’ll talk about some of the more basic, solvable issues relating to JavaScript accessibility, as we take an introduction to device-independent scripting.

The article Beyond the Mouse then leads to Making Elements Focusable with Tabindex from Snook.ca

In the spring of 2006, a group of designers intimately familiar with the organization and development of design pattern resources discussed the current and future role of design patterns in the real world. We talked about defining and documenting patterns, the context required to communicate how patterns should be applied, what it takes to develop a design language, and how disparate lists of patterns could converge. The first question we answered was “What are Design Patterns?” You can find this conversation thread on Luke Wroblewski’s blog.

The functional comparison between <input type="submit" value="Submit"> and <button type="submit">Submit</button> are identical but the button offers way more flexibility in terms of styling with CSS.

The majority of browsers do not force any particular design on the button element, leaving it a raw ingot which we can cast and shape to our liking.

For me, Aaron has helped free my buttons. The article shows some nice tidy ways to get creative with the button, so please, submit to his article and enjoy.

• File size! File size! File size! Prototype & Scriptaculous can add upwards of 100k to a page unless you gzip the js files. I simply wanted a solution that was more light weight, than heavy weight. (Using the compressed version of Jquery, along with my ThickBox code, the total file size is around 20k)
• Lightbox made me feel like I was in a box. I wanted the ability to load (with AXAH) structural markup in the lightbox, as well as images. (A little slice of flexibility over here, please.)
• I needed a small abstract pattern for creating custom dialog boxes.
• And lastly, I wanted to demonstrate the simplicity and power of Jquery.

So if you are looking for an alternative to the current batch of Lightbox variations built on a completely different platform, this is the one for you.

Check out that one ThickBox