4 replies [Last post]
Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 37 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I was just running a site I'm working on through Watchfire and it raised this error for the nav links on 'About' & 'Financial Planning'.
The error was that onclick meant that non-mouse users wouldn't be able to access the links. But I tried it out in both FF & IE and you can tab through the links fine just as a person with a mouse could. However, adding onkeypress to the link, while satisfying the Watchfire checker, actually created a different behaviour in FF. Tabbing now just opens and closes the hidden menu without you being able to tab into it.
I guess it's one of those cases where you've got to let the actual functionality take precedence over a warning.
I'm also aware that this method doesn't provide any fallback if js is turned off but couldn't find a suitable, light alternative when I went looking for this initially.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Tags:
Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 40 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

WCAG Priorty 2 error - onclick without onkeypress

Build in a check for the key pressed, if its a tab don't toggle and allow the default behaviour to take place. In fact, its probably sensible to only capture the "space" and "enter" keys. All other keys should be let through for whatever (if any) default behaviour they have.

For JS off, make the link a proper link to a proper page - a page that will load with the menu open or at least gives the same set of links somewhere in its content.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 37 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

WCAG Priorty 2 error - onclick without onkeypress

Chris..S wrote:
Build in a check for the key pressed, if its a tab don't toggle and allow the default behaviour to take place. In fact, its probably sensible to only capture the "space" and "enter" keys. All other keys should be let through for whatever (if any) default behaviour they have.

Got any links to explain how you 'capture' keys using js?

Chris..S wrote:
For JS off, make the link a proper link to a proper page - a page that will load with the menu open or at least gives the same set of links somewhere in its content.

If the link actually goes somewhere though, how does the user with js turned on get to see the hidden menu appear?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 40 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

WCAG Priorty 2 error - onclick without onkeypress

Your "return false" prevents the default action associated with the event taking place. That means if javascript is working you only get the JS action. If its not working you get the normal browser action. Try putting something in the links in your page and using FF/Web Dev to disable javascript....

JS isn't my strong suit ...
for IE try: this.keyCode
for FF try: this.charCode

or better still use onKeyDown and this.keyCode

I am looking this up in my O'Reilly Dynamic HTML (which I'd recommend as the best reference you can get).

onKeyDown and onKeyUp return information on the physical key pressed

onKeyPress returns information on the character generated by pressing that key. ie. the character is the key as modified by the status of other keys (e.g. shift, caps lock, num lock, ctrl, alt, etc).

space should be 32 and enter 13.

To take a look at the events themselves, try this example page Its javascript isn't particularly efficient and browser response will slow down quite markedly as it tries to render details of all the events on the screen while still trying to process them.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 37 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

WCAG Priorty 2 error - onclick without onkeypress

Chris..S wrote:
Try putting something in the links in your page and using FF/Web Dev to disable javascript.

Yeah, it works fine actually.

I think I'm going to overlook the Priority 2 error on this one because it's flagging an issue that isn't actually a problem. The functionality works fine for both mouse & keyboard as it is and changing it to remove the warning reduces that functionality.
I could go further with the javascript to rectify that problem, but it just seems to be over-engineering when I'm not even proclaiming any sort of accessibility level on the site.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference