Accessible JavaScript Newsticker
Recently we had a forum post by Heiko in which he asked whether anyone knew a JavaScript or Java based newsticker. Actually I didn’t know any, so I decided to code one on my own.
Personally I don’t like conventional newstickers because of several reasons. First of all they are quite questionable from a usability point of view — the scrolling text distracts the user from the actual content. Secondly most of the implementations are not accessible, since they either use Java applets or JavaScript that does not degrade gracefully. And last but not least most implementations take up an impressive amount of CPU performance.
So I made up my mind and came up with a solution that more or less eliminates those downsides. The markup is actually nothing remarkable — just a simple unordered list and a wrapper div with a unique id.
<div id="newsticker">
<ul>
<li>Newsticker text 01</li>
<li>Newsticker text 02</li>
<li>Newsticker text 03</li>
</ul>
</div>
Since many web developers already use the Prototype JavaScript Framework, and I also wanted to use Scriptaculous for some nice animations I also used Prototype for my ticker. So if you are interested you can either take a look at my sample ticker or download the source code. Btw of course you may use the script on your site. So have fun :)
Note: Even though I’m quite familiar with JavaScript there is of course room for improvement. So if you have any suggestions feel free to post them. Thanks.
45 comments so far
Skip to comment form
Pat September 04, 2006 at 01:27 AM
awesome :D
could you write one that uses the moo.fx effects lib instead?
Rafael Fischmann September 04, 2006 at 01:28 AM
Wonderful, thanks a lot!!
Amit Karmakar September 04, 2006 at 01:36 AM
Great work. On another note though… isn’t this site very close to your design Link
Wolfgang September 04, 2006 at 01:41 AM
Yeah the author of the site was quite fond of the glow effect of my navigation bar and asked whether I he could implement it on his site too. It’s okay.
Appleology September 04, 2006 at 01:47 AM
Looks Great. Any way to integrate RSS feeds with it?
Amit Karmakar September 04, 2006 at 01:52 AM
Ah all good then :)
Wolfgang September 04, 2006 at 02:27 AM
@Appleology: You mean defining a RSS feed as the source? Sounds interesting. Some AJAX stuff :) However I’m not sure if it’s possible to access data on another server…
Heiko Klingele September 04, 2006 at 03:38 AM
Wow! Echt klasse das du dir die Mühe gemacht hast! Gut gelungen ! :)
Ist es denn auch möglich den Text von rechts nach links laufen zu lassen? Eventuell noch mit Trennzeichen (+++)?
Johannes September 04, 2006 at 04:05 AM
Wow, ich glaub ich bau mir sowas ein ;-). Vielen Dank!
Patrick September 04, 2006 at 05:21 AM
“@Appleology: You mean defining a RSS feed as the source? Sounds interesting. Some AJAX stuff :) However I’m not sure if it’s possible to access data on another server…”
You could always use sockets or cURL with PHP/ASP/Whatever to go and grab the RSS feed and post-process it in one file and then have the ticker grab the PHP file’s contents. Of course you would probably want some form of caching but that’s not too difficult.
Oliver September 04, 2006 at 05:34 AM
Perhaps you take a look at Link to get an idea of what it ‘can’ look like. The script is using LastRSS Link
I am using LastRSS to show my del.icou.us Bookmarks (via RSS) on my site.
Link is probably interesting too.
Oliver September 04, 2006 at 05:34 AM
Forgot to say: nice work :-)
goetsu September 04, 2006 at 06:52 AM
nice work but this is not fully accessible i can’t stop the animation (with keyboard and mouse)witch is a basic accessibility requirement
Wolfgang September 04, 2006 at 07:00 AM
Good point — the ticker should be stoppable via hitting Esc or some other key.
adrmis September 04, 2006 at 07:18 AM
Fantastic work;)
Thomas Jacobs September 04, 2006 at 07:34 AM
Indeed a very nice piece of work, thanks a lot and keep up the good work!
Folletto Malefico September 04, 2006 at 12:16 PM
A newsticker? :D
Whops. Just ask! :D
Link
Supports Internet Explorer 5.01-6.0, Firefox 1.x, Safari 2.0 and Opera 8, and it’s completely standalone. :)
Did it a while ago for my design for Nielsen Media Research Italia :)
goetsu September 04, 2006 at 09:04 PM
not just with a key like esc (who know the keyboard shortcut for specfic website) or an onmouseover stop (some people don’t use mouse at all), a visual link to stop the animation is needed.
Martin Labuschin September 05, 2006 at 12:24 AM
Sehr geil. Danke
Richard September 05, 2006 at 02:30 AM
Really fantastic !!!!
Thanks.
Milos September 05, 2006 at 07:40 AM
Cool! …ach, Trackbacks kann man bei der nicht absetzen, oder?
Tom S. Weber September 05, 2006 at 05:11 PM
Nice work!
But what about keeping up a newsticker entry by just hovering it? That could be useful if the newsticker text is too long and the itnervals too quick.
pierro September 05, 2006 at 06:08 PM
wirklich ein sehr nettes script ! ich selber verstehe nicht recht viel von der programmierung, lese mich dennoch etwas um die welt — und vielleicht ist ja diese page etws fuer dich
(wenn du selbige nicht gar schon kennst)
Link
basiert auf die yahoo_libary
Link
zhaiduo September 07, 2006 at 05:07 PM
really cool! thanks to share!
George E. Papadakis September 07, 2006 at 10:47 PM
Here is another Ticker thingy using Core.
Link
Sean Hayford O'Leary September 08, 2006 at 10:38 AM
This is really awesome. And with a little CSS, it makes a great slideshow script too.
Cabcom September 09, 2006 at 11:05 AM
Super Script aber unter IE wird leider ein fehler ausgegeben bzw. das Script nicht geladen. Folgende Fehlerbezeichung spuckt der IE aus:
Zeile 6
Class ist undefiniert
Zeile 305
“)” erwartet
kannst du vieleicht eine lösung zaubern ? =)
greez
Tony September 09, 2006 at 04:43 PM
This is great, thanks Wolfgang. I have integrated my favorite blog feeds to create my own RSS ticker with the help of MagpieRSS.
For those interested, you can view it here. Keep in mind that it is parsing 21 blog feeds so it will take some time to load.
Ty September 11, 2006 at 10:13 AM
Very nice…
The idea has been integrated into this little demo of the innerFade plugin for jQuery.
Link
Scoop by T.
7act September 12, 2006 at 11:30 PM
Nice! thanx. We used this script.
MADchilis September 13, 2006 at 06:50 AM
Great job!
——-
Nikola Majksner September 22, 2006 at 12:04 AM
Great job, but i have problem in opera 9, when i click on toggle or close button, box is not closing for me.
Backspace September 22, 2006 at 03:03 AM
For those who don’t want to use scriptaculous and prototype. I came across a jquery option for this.
Backspace September 22, 2006 at 03:07 AM
Hmm… seems like the links aren’t working in your comments Wolfgang. Anyway, here is the URL to that jquery option.
InnerFade – http://medienfreunde.com/lab/innerfade/
molily September 24, 2006 at 02:48 AM
Personally, I don’t feel well with calling this newsticker accessible. In my opinion you should rethink that accessibility issue. Accessibility requires more than progressive enhancement or rather degradability when JavaScript is switched off or not available.
For example, Element.hide() sets the CSS display property to »none«. As you should know, elements with display:none are not accessible to most of the screen reader users. As far as I can tell, those users can’t read the whole text.
As it was said before, it should be possible to stop the ticker and toggle the items manually. You’ll find these requirements in the WCAG.
It surely isn’t trivial to develop an actual accessible JavaScript ticker. In my humble opinion, such an attempt is pretty futile, because the whole »push« concept of tickers in principle impedes content accessibility. Therefore it’s only possible to create a basically accessible ticker (i.e. content is still present when JS is disabled), as you successfully did. But to my mind, trying to work around all other accessibility issues is unreasonable. That is, your script is fine as it is, but it has some accessibility drawbacks which are difficult to avoid or perhaps irresolvable.
By the way, I can hardly read the text on this page due to the weak color contrast. That’s kind of ironic as we’re talking about accessibility.
kusaeni September 24, 2006 at 02:09 PM
nice , thanks for sharing :)
Morishani September 26, 2006 at 10:20 PM
Nice, simple, accessible – Thats all we need in that kind of ‘script’.
Good job, thanks for sharing.
MyNeXX September 27, 2006 at 01:14 AM
Fantastischer und geiler Newsticker….
Gratulation
Iker October 05, 2006 at 03:15 AM
Thanks for sharing!! I´m using it and works fine. Good job.
lizuka October 24, 2006 at 12:22 AM
hello, I like your news ticker. the only drawback is that the fade effect doesn’t seem to work on IE. nice work all the same !
mobrien November 02, 2006 at 02:53 AM
IE, what’s that?
lizuka November 02, 2006 at 08:29 AM
IE = internet explorer
andre November 16, 2006 at 07:39 AM
What about the words Like: André – Percepção – That we use here in Brazil. On this script, the special characters appear incorrectly. Is there a way to fix that?
Wolfgang November 16, 2006 at 03:56 PM
Well that must be an encoding issue – if you use the same encoding (most likely this will be utf-8) in both HTML and JavaScript files, there shouldn’t be any problems.
boss December 28, 2006 at 08:18 AM
ffff