Working Sample Widget: Accessible Slider


This is a working example of the recommendations put forth in the report “Interactive Scientific Graphics: Recommended Practices for Verbal Description”. On this page there is an interactive graphic that is controlled by a customized slider control. The slider has been programmed to update the Speech Log with the messages that should be spoken to a user that is employing a screenreader to access the information contained in the graphic. The Speech Log has been programmed using aria-live to speak the messages as they appear on the screen. At the time of publication (May 2014), the example has been tested and works best when accessed with Firefox using the NVDA or JAWS screenreaders. For more information about this project please see the Research Section of the DIAGRAM Center website.


Select the slider by clicking on it or tabbing onto it then press the u key for the list of available keyboard commands.

Interactive Graphic

Number of Dogs
Range: 0-200

Pets Dogs Cats 100 80

Speech Log

  • Interactions will be logged here

Ideas that work.The DIAGRAM Center is a Benetech initiative supported by the U.S. Department of Education, Office of Special Education Programs (Cooperative Agreement #H327B100001). Opinions expressed herein are those of the authors and do not necessarily represent the position of the U.S. Department of Education.


  Copyright 2019 I Benetech

Log in with your credentials

Forgot your details?