Tutorial: Accessible JavaScript scroller

Last revision: 13th April 2005

A change to my main style sheet has indicated a problem with the method. If a font-size, other than 100%, is stated in the body tag then the scroller fails to inherit the font-size correctly. Visually this causes to the scroller to restart early. However if the font-size is not set in the body tag the code works as outlined. Thanks to Sascha Ebach for catching this one.

An accessible horizontal text scroller or ticker

A vertical text scroller is now under development

Developed on request for Trenton from Webcredible

Ever needed a horizontal text scroller but couldn't use one for accessibility reasons? This scroller is, as far as I'm aware, completely accessible.

Ever needed a horizontal text scroller but couldn't use one for accessibility reasons? This scroller is, as far as I'm aware, completely accessible.

It comes with a dynamically generated start / stop and a show all button. It also changes font-size as the user changes their preferences.

Conditions tested:

  1. JavaScript off, CSS on
    1. Scroller stationery
    2. Displays all the text
    3. Keeps width and extends height
    4. No controls displayed
  2. JavaScript off, CSS off
    1. Scroller stationery
    2. Displays all the text
    3. Natural width and height
    4. No controls displayed
  3. JavaScript on, CSS off
    1. Scroller moves
    2. Displays all the text
    3. Natural width and height
    4. Controls displayed and work
    5. Horizontal scrollbar appears
  4. JavaScript on, CSS unsupported
    • Unknown

Top of page

Browsers and platforms tested:

  • Windows 2000:
    1. Opera v7.11
    2. Mozilla v1.4
    3. Internet Explorer v3 (degrades well)
    4. Internet Explorer v4 (degrades well)
    5. Internet Explorer v5.01 - (nowrap fails I'll add a <nobr> if this is an issue)
    6. Internet Explorer v5.5
    7. Internet Explorer v6.02
    8. Netscape v2.0 (degrades well)
    9. Netscape v4.7 (degrades well)
    10. Netscape v6.2
    11. Netscape v7.0
  • Macintosh OSX:
    1. Netscape v7.0
    2. Mozilla v1.4?
    3. Safari v1
    4. Opera v6

Download the demo files:

If you choose to use this scroller I would be appreciate an email stating on which site it was used (so I can link it as an example). It also would be nice to have a link back but it's not expected.

Version 4. The complete set of files for the Accessible Scroller in a zip file [2.85KB].

Download a free zip reader. Though the file should be readable as a compressed folder in Windows without downloading the reader.

Top of page