Friday, August 31st, 2007

WCAG 1.0 Accessible News Slider

Category: Accessibility, jQuery

Everyone’s throwing up JavaScript functionality left and right, most of the time without giving any thought to accessibility. Not so for Brian Reindel who has created an accessible news slider component which meets the requirements of the W3C’s Web Content Accessibility Guidelines 1.0.

Brian really gave the development of this jQuery plugin some good thought as attested by his overview of the functionality:

  • The JavaScript is only 2KB compressed.
  • The XHTML and JavaScript were developed specifically to meet the WCAG 1.0, and this will always be the number one priority of the plugin. It is suggested that if you modify the XHTML, you do so keeping this in mind.
  • Users with color vision deficiency, or color blindness
    The plugin does not use color as a primary indicator of a change in state for the slider. Instead, the “previous” and “next” arrows are either visible or hidden, depending on the location of the news slider. There is also an indicator that communicates the total number of news stories in the slider.
  • Users with limited or poor vision, but who do not use a screen reader
    If the user chooses to resize the text via the browser file menu, the slider will flex vertically to accommodate the larger text, and still function. This is primarily a function of the CSS, and it is suggested you maintain a variable font size on your site in order to take advantage of this capability.
  • Users that are legally blind, and who browse Web pages with a screen reader
    Since screen readers actually read through the code, it is important that the XHTML be formatted free of confusion. The appropriate skip links and title tags have been included for navigation and messaging. The important thing to remember is that screen readers like JAWS ignore elements with the display property set to “none”, or with the visibility property set to “hidden”. This helps significantly in managing the presentation to several categories of disabled users.
  • Users that browse with the keyboard and an adaptive device such as a mouth stick
    When developing a Web component to be accessible, this is the most difficult group of disabled users to accommodate. If you have ever tried to browse by tabbing through a Web page, it can be frustrating. Although the core functionality of the news slider is partially accessible with a keyboard, the “View All” link was added as a catch-all mechanism.
  • Users who have turned off JavaScript or CSS
    The key was to make sure that not only were all the news stories readable with JavaScript or CSS turned off, but that the appropriate messaging was displayed to the user to inform them of the implications. Although not a category that I think fits explicitly under accessibility, it is a component of the WCAG 1.0 checkpoints, and strides were taken to make sure the plugin met these requirements.

You can download the plugin here and you’ll need to pick up a copy of jQuery v1.1.3.1 or higher in order to use it.

Posted by Rey Bango at 7:00 am

4.3 rating from 42 votes


Comments feed TrackBack URI

Really cool example! I would use it in my feature projects.

Comment by Nik Chankov — August 31, 2007

Good plugin, though If you click on a scroll arrow while it is scrolling in Firefox then the page jumps to the top as the href is set to #. This could be fixed by setting the href to javascript:void(0), or changing the event handlers.

Comment by Dave — August 31, 2007

Hi Dave,

Rey had pointed that out to me yesterday. It is an easy fix (a couple of return false) statements. I am in the process of fixing it and will upload the update shortly.

Thanks Rey :)


Comment by Brian — August 31, 2007

Leave a comment

You must be logged in to post a comment.