d'bug shares Web development advice, including CSS, JavaScript, PHP, Java, .NET and Ruby on Rails tips and tricks.

Accessible News Slider for jQuery v.1.1 - now a plugin and more accessible

• Posted by Brian
• Posted on March 17th, 2007
• View Comments

After some good feedback from the Web development community, I have revamped the Accessible News Slider. It has been converted into a jQuery plugin, and I am releasing it as version 1.1. The code is not obfuscated, but if you choose to do so, it will come in around 2 KB. The only comments I will make regarding implementation are in the HTML file. These should be sufficient.

In order to get a better understanding of why this plugin is accessible, I have categorized the accessibility features by the users that would need them. This should also help clear up any confusion regarding the presentation of certain elements in the HTML, as well as the JavaScript. If you have never used a jQuery plugin before, or are unfamiliar with the jQuery library, then I suggest you visit www.jquery.com.

1. Users with color vision deficiency, or color blindness
   The plugin no longer uses color as a primary indicator of change in the state of 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.
2. 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 now flex vertically to accommodate the larger text. 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.
3. 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 HTML 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.
4. 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. I did not provide a “View Less” link, as it would have added (what I consider to be) unnecessary additional weight to the script.
5. 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 checkpoints, and strides were taken to make sure the plugin met these requirements.

BUG FIX: 3/18/07
Fixed a bug where after sliding, clicking “View All” makes the menu disappear.

Click here to view the demo.

Click here to download the plugin.

Feedback is welcome.

Tags: accessible news slider, jquery, plugin