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">
    <li>Newsticker text 01</li>
    <li>Newsticker text 02</li>
    <li>Newsticker text 03</li>

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.


awesome :D could you write one that uses the moo.fx effects lib instead?


Wonderful, thanks a lot!!

Rafael Fischmann

Great work. On another note though… isn’t this site very close to your design Link

Amit Karmakar

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.


Looks Great. Any way to integrate RSS feeds with it?


Ah all good then :)

Amit Karmakar

@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…


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 (+++)?

Heiko Klingele

Wow, ich glaub ich bau mir sowas ein ;-). Vielen Dank!


“@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.


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 Bookmarks (via RSS) on my site. Link is probably interesting too.


Forgot to say: nice work :-)


nice work but this is not fully accessible i can’t stop the animation (with keyboard and mouse)witch is a basic accessibility requirement


Good point — the ticker should be stoppable via hitting Esc or some other key.


Fantastic work;)


Indeed a very nice piece of work, thanks a lot and keep up the good work!

Thomas Jacobs

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 :)

Folletto Malefico

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.


Sehr geil. Danke

Martin Labuschin

Really fantastic !!!! Thanks.


Cool! …ach, Trackbacks kann man bei der nicht absetzen, oder?


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.

Tom S. Weber

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


really cool! thanks to share!


Here is another Ticker thingy using Core. Link

George E. Papadakis

This is really awesome. And with a little CSS, it makes a great slideshow script too.

Sean Hayford O'Leary

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


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 <a href="" title="My Feeder">here</a>. Keep in mind that it is parsing 21 blog feeds so it will take some time to load.


Very nice… The idea has been integrated into this little demo of the innerFade plugin for jQuery. Link Scoop by T.


Nice! thanx. We used this script.


Great job! -----


Great job, but i have problem in opera 9, when i click on toggle or close button, box is not closing for me.

Nikola Majksner

For those who don't want to use scriptaculous and prototype. I came across a jquery option for this.


Hmm... seems like the links aren't working in your comments Wolfgang. Anyway, here is the URL to that jquery option. InnerFade -


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.


nice , thanks for sharing :)


Nice, simple, accessible - Thats all we need in that kind of 'script'. Good job, thanks for sharing.


Fantastischer und geiler Newsticker.... Gratulation


Thanks for sharing!! I´m using it and works fine. Good job.


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 !


IE, what's that?


IE = internet explorer


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?


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.




Commenting is not available in this channel entry.