Keyboard accessibility in web applications: part 1

One of the most important features to implement on your web sites for ensuring accessibility is keyboard controls, but this gets rapidly more complicated when the complexity increases, and you start getting into scripted web applications. But help is at hand. In this detailed three part series, web developer Mihai Sucan offers a complete solution for providing keyboard accessibility to complex web applications, using his canvas-based painting application as a starting point.

( Read the article )

In an article that discusses adding keyboard shortcuts to the browser for whose manufacturor the author themselves work, I expected an overview of those shortcuts better avoided to map due to the browser reassigning them to itself, if any.

Apart from that, (re)drawing on mousemove may seem to increase theoretical accuracy, what it does achieve is an increase in real processor usage. Whether the accuracy of a drawing tool is benefitted depends on how often the mousemove event is communicated to the javascript event engine. Processor-hungry methods like painting, can cause window redraws to appear choppy or jittery.

For simple object movements (drag-drop style), a less processor-hungry method merely stores the mouse coordinates, and outsources the actual moving to a method called on interval, using a frequency similar to that of film (21 frames per second), forcing fewer window redraws and thus resulting in a more fluid movement.

Thanks for your thoughtful comments.

Originally posted by OmegaJunior:

In an article that discusses adding keyboard shortcuts to the browser for whose manufacturor the author themselves work, I expected an overview of those shortcuts better avoided to map due to the browser reassigning them to itself, if any.

I wrote the article in a more browser-neutral manner. In the following article parts you will see I deal with browser compatibility issues equally, in Webkit (Safari/Chrome), Firefox, Opera and even Internet Explorer. Unfortunately, due to the nature of the Web application (it uses HTML 5 Canvas), it does not work in Internet Explorer. Nonetheless, the keyboard compatibility layer was tested and known to work in MSIE as well.

Browsers allow an important number of ways to customize keyboard shortcuts, as such, providing a list of shortcuts better avoid becomes moot in the context of the article. Opera has made changes to their list of default keyboard shortcuts - they have removed most of all the single-key shortcuts (like 1, 2, Z, X, and more). Thus, Opera tried to align its own set of keyboard shortcuts to those in other Web browsers - a good choice.

It would've been a good note to say something along the lines "you should avoid using commom keyboard shortcuts used by Web browsers. Check the documentation provided by your browser vendor to see the list of common keyboard shortcuts".

Originally posted by OmegaJunior:

Apart from that, (re)drawing on mousemove may seem to increase theoretical accuracy, what it does achieve is an increase in real processor usage. Whether the accuracy of a drawing tool is benefitted depends on how often the mousemove event is communicated to the javascript event engine. Processor-hungry methods like painting, can cause window redraws to appear choppy or jittery.

That is true and not very true. It really depends. Browsers are quite efficient in code execution. JavaScript is not a real performance issue, especially in these simple code examples. Additionally, Canvas rendering is sufficiently fast for such simple operations.

Originally posted by OmegaJunior:

For simple object movements (drag-drop style), a less processor-hungry method merely stores the mouse coordinates, and outsources the actual moving to a method called on interval, using a frequency similar to that of film (21 frames per second), forcing fewer window redraws and thus resulting in a more fluid movement.

I have made performance optimizations for resource constrained devices in the open-source PaintWeb project. More specifically, I made optimizations for the OLPC XO laptops.

In PaintWeb most of the drawing tools now use a timer-based approach to drawing. So, now mouse movements only store the coordinates, and every few miliseconds the Canvas is updated.

I wrote a blog post about the performance optimizations implemented in PaintWeb.

Presenting performance optimization tips was beyond the purpose of this article. I might write about this in the future, hehe.

Thanks again for expressing your valid concerns.