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

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

Pat

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.

Wolfgang

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

Appleology

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…

Wolfgang

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!

Johannes

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

Patrick

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

Forgot to say: nice work :-)

Oliver

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

goetsu

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

Wolfgang

Fantastic work;)

adrmis

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.

goetsu

Sehr geil. Danke

Martin Labuschin

Really fantastic !!!! Thanks.

Richard

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

Milos

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

pierro

really cool! thanks to share!

zhaiduo

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

Cabcom

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

Tony

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

Ty

Nice! thanx. We used this script.

7act

Great job! -----

MADchilis

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.

Backspace

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/

Backspace

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.

molily

nice , thanks for sharing :)

kusaeni

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

Morishani

Fantastischer und geiler Newsticker.... Gratulation

MyNeXX

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

Iker

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 !

lizuka

IE, what's that?

mobrien

IE = internet explorer

lizuka

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?

andre

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.

Wolfgang

ffff

boss

Commenting is not available in this channel entry.