SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript that requires a mouse click - avoid?

    Hi all

    I've just been reading an AbilityNet publication about accessible websites which says -

    'Don't use JavaScript that requires a mouse for it to work.'

    Now, I've wrestled with PHP as an alternative and gave up because I just couldn't get it to work. So I have a few of questions following from this which I'm hoping someone here can help me with -

    1. Does this AbilityNet statement mean that if I put buttons in my header that the user clicks on to (e.g.) increase font size, remove all graphics, these must not use JavaScript to make them work? I ask this because I've come across a few sites where such buttons are used.

    2. Is it sufficient for accessibility purposes that I have made stylesheets which the user can access using browser tools such as those built into Firefox and IE7?

    3. My existing set-up (using JavaScript to run the buttons) means that my alternate stylesheets like 'bigtext.css' don't contain the full set of instructions that my main stylesheet 'main.css' does - they only contain font instructions. If I get rid of the JavaScript, will I need to 'beef up' all my stylesheets to contain a full set of instructions?

    Thank you.

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Frisbee View Post
    'Don't use JavaScript that requires a mouse for it to work.'
    This is just another way to say that interactive features should be device independent. You should be able to use a keyboard (or assistive technologies that replace keyboards) as well as a mouse, trackball, etc.

    Quote Originally Posted by Frisbee View Post
    1. Does this AbilityNet statement mean that if I put buttons in my header that the user clicks on to (e.g.) increase font size, remove all graphics, these must not use JavaScript to make them work? I ask this because I've come across a few sites where such buttons are used.
    No, that's not what the statement says. The statement says that a user should be able to use these features by, e.g., navigating to the buttons and activating them using their keyboard. That's fully possible with any normal HTML button or link.

    On the other hand, if the feature requires JavaScript to work, then the buttons should not be in the markup but be created by JavaScript. That way, only those who can use the features will see the buttons.

    The best way would be to provide a server-side function that does the same thing (albeit adding a round-trip to the server). Then you could add JavaScript that does the same thing, but faster, if available. This is known as progressive enhancement.

    Quote Originally Posted by Frisbee View Post
    2. Is it sufficient for accessibility purposes that I have made stylesheets which the user can access using browser tools such as those built into Firefox and IE7?
    I'm not sure what you're asking, but alternative style sheeets do not solve all accessibility problems. IMHO you don't need to provide a style switcher mechanism on your site – that should be handled by the user agent. Some onus is on the user, as well. If they need style switching features, they should use a browser that supports it.

    Quote Originally Posted by Frisbee View Post
    3. My existing set-up (using JavaScript to run the buttons) means that my alternate stylesheets like 'bigtext.css' don't contain the full set of instructions that my main stylesheet 'main.css' does - they only contain font instructions. If I get rid of the JavaScript, will I need to 'beef up' all my stylesheets to contain a full set of instructions?
    No, you can use multiple style sheets at the same time. You can have a basic style sheet that is always used, which defines the page layout. Then you can have a number of alternate style sheets that provide different colour schemes. Then you can have a number of alternate style sheets that provide different font families (serif vs. sanserif, for instance).

    Instead of using alternate style sheets to provide different font sizes, I think it's better to use relative units for text sizing and allow users to enlarge or reduce the text size with the built-in functions of their browsers.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks AC - Is it easy to create buttons using JavaScript? That would be a useful thing - not much point people seeing the buttons on my page if they haven't got Java for any reason.

    On point 2. - one of the concerns raised in the AbilityNet document is that not everyone will have the latest or most capable browser and that this may not simply be due to their lack of technical understanding, but more to do with the age of their machine. It concerns me that without the buttons on my page, and if their browser does not give them an alternative way to access the different styles, they are stuck.

    I have tried to be semantic in my markup and have validated all the css and html. I've also gone through the AbilityNet checklist to make sure I meet as many of their aims as possible. Just this issue of access to the style sheets that is still bugging me.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •