One of the complaints of Web 2.0 aficionados is the lack of accessible Web components. Although the argument typically revolves around screen readers, those who wish to conform to WCAG Priority 1 guidelines have much to say as well. Checkpoint 6.3 requires that your site operate when JavaScript is disabled. As much as I disagree with the premise, the reality is that if you must conform, your Web site or Web application will be lacking certain functionality.
The workaround is often to provide equivelant content in an alternative, and rather mundane presentation. This can be more costly and time consuming than building accessible functionality within an existing widget. That was the thought behind building this news slider with jQuery. It reacts similar to the news slider featured on Yahoo! News, however, it has been built from the top-down to be accessible if your user is browsing with a screen reader, or if JavaScript is disabled.
I am not a designer by trade, so the presentation is not in finished form. Making modifications should be relatively straightforward, and requires only that one variable change in the script. The rest of the changes can be made to the CSS. As with my last tutorial, all the explanation is within the JavaScript source file. Obfuscation and removal of comments would put the script around 1-2 KB. You will also need the latest jQuery JavaScript library.
I do not go into detail describing the CSS or HTML. It is rather self explanatory. The slider should work in IE 6+, Firefox 1.5+, and Safari 1.3+. I have not tested it in Opera 9 yet, but if you experience difficulty, let me know, and I will take a look.
UPDATE:
The Accessible News Slider for jQuery is now a plugin. Please click here to get the updated code.
Click here for the full example.
Click here to access the JavaScript file directly.
sorry for that news but we cannot say that it’s really accessible. Yes, there is equivalent when javascript is disabled but that not enough. There is still some problem for screenreader user or colorblind people.
Frist, at the beginning or the end of the scroll you just change the color of the image so if i don’t see this color change i can’t understand that i am at the top or at the end. Furthermore, you still provide the link with the same alt value on the alt attribut, so for screenreader user the same link as before is still here.
There is a reading order issus and keyboard navigation issue, for exemple if i use my keyboard to navigate link by link, i go trough the element then i come to the next arrow link. If i activate it all the element in the scroller desappear.
Brian- Great work!
We just went over some wireframes yesterday that need this exact functionality, so I might hit you up for some customization assistance when the time comes.
-Rob
goetsu –
Those are some awesome points. The most obvious of which that I completely overlooked is the ability to “tab” through if the user is navigating by the keyboard alone. Let me address some of your concerns.
The tab index can easily be modified to skip the navigation arrows. Currently, you can tab through the articles, and they will appear in the viewable space in the proper order. I will fix this so that you can tab through all the articles first before you come to the arrows (this would be the best compromise).
The color contrast on the arrows is really a choice of the designer… making sure that they are high contrast enough so that color blind users understand the difference between the two states. The Yahoo! News slider provides a convention with circles that illustrate where you are, however, all their news stories are usually in a set of 3. I did not want to limit the number of stories that a user could scroll. I may add another convention that illustrates you are indeed at the end of the slider for a particular block of news stories.
For the screen readers, I did provide skip links that are a convention for skipping the arrow images and navigation. This was purposely to avoid issues with changing the alt text or managing that piece of navigation.
Again, thanks for your valued feedback. It was very helpful.
Brian
Hi Rob – thanks!
We can definately work through some of the issues goetsu pointed out.
Brian
Works with Opera 9.01. Tested :)
Thanks Vladimir!
[...] Brian Reindel has written on the accessible jQuery News Slider. [...]
Hi Brian, great work man! It doesn’t look like you’ve made this into a plugin. Can you do that? Also, i posted about it on the jQuery list to get you some more traffic here.
Rey
Hi Rey, thanks for the feedback!
For the next revision of this, I am going to make some more accessibility updates, and then hopefully move it into a plugin. I started experimenting with plugins for jQuery about a month ago, but have not been able to devote the time necessary to fully understand the process. If you have got some tutorial URLs you could post here, I would be greatful.
Brian
With JS off, I see all the images at once so it doesn’t seem to work without JS to me.
Of course, I had to activate NoScript to submit this comment lol.
Hi BillyG,
Thanks for the feedback.
That is exactly how it should react if you turn JavaScript off — you will see each news story and image floating next to each other. This is the graceful degradation component of accessibility.
Brian
[...] Vor einiger Zeit habe ich vom YUI Karussell Widget berichtet mit der es möglich ist dynamisch Bilder oder Text anzuzeigen und wie in einem Karussell nachzuladen. Nun besteht ein ähnliches Plugin auch für die kleine und effiziente JavaScript Bibliothek jQuery und nennt sich “Accessible News Slider“. [...]
[...] Brian Reindel has written on the accessible jQuery News Slider. [...]
[...] http://blog.reindel.com/2007/03/12/the-accessible-jquery-news-slider [...]
Hey wonderful job on this plugin. Just a question, what is the best way to change the width of each news item (make it longer for more text) without making the slider have two rows.
I’ve been trying to change the css file, but whenever I change the item classes, the whole thing goes out of proportion and just doesn’t look pretty.
Hi goldlilys,
There is an option called newsWidth in the code. You will have to change this option, as well as the CSS. The next version of the plugin will automatically detect the values in the CSS and draw the slider appropriately… I hope :)
Brian
[...] http://blog.reindel.com/2007/03/12/the-accessible-jquery-news-slider [...]