David
5th Mar 2007, 12:23 am
I just implemented some additional accessibility features to CADTutor and thought I'd share what I'd found.
I wanted to add a skipnav link as the first item after <body>. There are a number of techniques for doing this so that it's visible to assistive technologies but invisible to ordinary users. However, I liked the idea of making it visible on demand so I used the technique described here (http://www.samhastings.com/resources/pure-css-skiplinks.php). This allows any user to TAB to the skipnav link and it only appears when focus is triggered. In addition, I added an accesskey to the link so that it can be triggered using a keyboard. There's a very useful article here (http://clagnut.com/blog/193/).
Different browsers react in different ways. If you go to any page at CADTutor.net in IE7 and use the ALT+2 key combination, you will see the skipnav link in focus, then press Enter to activate the link and jump to the content. In Firefox, using SHIFT+ALT+2 jumps straight to content. In Opera, using SHIFT+ESCAPE and then 2 jumps straight to content. See here (http://juicystudio.com/article/access-key-companion.php) for more information.
Oh, and just in case you were wondering why left:-9999px; and not display:none; take a look at this (http://www.nickfitz.co.uk/2007/02/14/why-left-9999px-is-better-for-accessibility-than-display-none/).
I'd be interested to know what you think.
I wanted to add a skipnav link as the first item after <body>. There are a number of techniques for doing this so that it's visible to assistive technologies but invisible to ordinary users. However, I liked the idea of making it visible on demand so I used the technique described here (http://www.samhastings.com/resources/pure-css-skiplinks.php). This allows any user to TAB to the skipnav link and it only appears when focus is triggered. In addition, I added an accesskey to the link so that it can be triggered using a keyboard. There's a very useful article here (http://clagnut.com/blog/193/).
Different browsers react in different ways. If you go to any page at CADTutor.net in IE7 and use the ALT+2 key combination, you will see the skipnav link in focus, then press Enter to activate the link and jump to the content. In Firefox, using SHIFT+ALT+2 jumps straight to content. In Opera, using SHIFT+ESCAPE and then 2 jumps straight to content. See here (http://juicystudio.com/article/access-key-companion.php) for more information.
Oh, and just in case you were wondering why left:-9999px; and not display:none; take a look at this (http://www.nickfitz.co.uk/2007/02/14/why-left-9999px-is-better-for-accessibility-than-display-none/).
I'd be interested to know what you think.