Accessible News Slider

A jQuery Plugin by Brian Reindel

Accessible News Slider is a JavaScript plugin built for the jQuery library.
It meets the accessibility requirements as outlined by WCAG 1.0.

[ v.1.4 ] released December 29, 2008

Overview

• The JavaScript is only 2 KB packed. The CSS, 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 source, 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 "back" and "next" navigation is either visible or hidden. There is also an indicator that communicates the total number of news items.
• 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 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.
• 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. 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. Hitting the "Enter" key while focused on the hidden "Skip to News" anchor will mimic the same behavior, since it is assumed the user is tabbing through content.
• Users who have turned off JavaScript or CSS
  The key was to make sure that not only were all the news items 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.
• Users who have turned off images
  This was another difficult group to contend with, but text anchor links are now a complement to image navigation. Images, or no images, the news slider still functions appropriately.

Release Notes

December 29, 2008, v1.4 Release

• Tested jQuery Version:
  v.1.2.6
• Tested Browsers:
  Windows: IE 6+, FF 2+, Opera 9+, Safari 3+ | Mac: Safari 3+, FF 2+, Opera 9+ (Thanks Matthijs!)
• License:
  Unrestricted. This script is free for both personal and commercial use.
• Note:
  A slideBy option was added. This allows developers to modify the CSS, and then easily change how many news items should slide past the viewable area. Please view the examples to see a demonstration.
• Note:
  The slider now works without images enabled.
• Note:
  Skip links were reinserted so as to demonstrate the best possible placement.
• Note:
  The CSS, XHTML and JavaScript were all revamped completely, and the concept of themes was made that much easier. Two themes are included with this release.
• Next Release:
  The big push for the next release will be a vertical scroll option. I hope to have this completed within a month's time. I did quite a bit of research on this, and an accessible vertical version does not look to be possible. This is mostly due to issues with resizing text and overflow properties.

August 30, 2007, v1.3 Release

• Tested jQuery Version:
  v.1.1.3.1
• Tested Browsers:
  Windows: IE 6+, FF 1.5+, Opera 9+ | Mac: Safari 2+, FF 1.5+, Opera 9+
• Note:
  The newsWidth option was eliminated. The news slider now calculates the width of each news item automatically. It made sense that a developer should only have to adjust the CSS, instead of needing to specify any dimensions through the plugin options.
• Next Release:
  This is the final release of the Accessible News Slider (no longer applicable).

July 15, 2007, v1.2 Release

• Tested jQuery Version:
  v.1.1.3.1
• Tested Browsers:
  Windows: IE 6+, FF 1.5+, Opera 9+ | Mac: Safari 2+, FF 1.5+, Opera 9+
• Note:
  The JavaScript, CSS, and XHTML were completely revamped for efficiency. The additional features did not increase the weight of the script as a result.
• Note:
  The skip link functionality was removed from the JavaScript. It makes sense that this would be printed out through server-side logic or statically in the XHTML.
• Note:
  The news headline now has View All/View Less functionality, and remains visible on the page.
• Next Release:
  The next release will be focused primarily on improving the newsWidth option. The goal is that you will not need to make a change to the CSS when editing this option.

Examples

Theme: Candy Coated
The following theme demonstrates the default slideBy option, which is to slide two news items per scroll. It also uses the default speed. The speed values for each news slider are identical to the speed settings available in jQuery's animate() method.

Theme: Business as Usual
The following theme is geared primarily toward a more conservative looking Web site, like a traditional news outlet. The speed is slower, and the CSS in conjunction with the slideBy option has been modified to allow for sliding three news items per scroll.

jQuery (and JavaScript) Resources

• Web Reference: Offical jQuery Web site
• Web Reference: Learning jQuery
• Web Reference: jQuery for Designers
• Book: jQuery in Action
• Book: Learning jQuery
• Book: jQuery Reference Guide
• Book: Professional JavaScript Frameworks
• Book: Beginning JavaScript and CSS Development with jQuery
• Book: Practical Rails with jQuery Projects (Practical Projects)
• Book: JavaScript: The Definitive Guide
• Book: Pro JavaScript Techniques
• Book: Beginning JavaScript with DOM Scripting and Ajax

Download

The following ZIP download contains all of the necessary files, including a packed version of jQuery v.1.2.6. The plugin file is not packed, but there are several free utilities available for compressing JavaScript source code. Please note: I would like to devote more attention to this plugin, but I don't have time to offer support. If you have questions, I strongly encourage you to visit the jQuery Google Group.
Download the Accessible News Slider