Small and Accessible News Slider in JQuery

January 24, 2009 in coding tools

The JavaScript is only 2 KB packed. The CSS, XHTML and JavaScript were developed specifically to meet the WCAG 1.0, and this will always be the number one priority of the plugin. It is suggested that if you modify the source, you do so keeping this in mind.

Why accessible? Because…

Users with color vision deficiency, or color blindness. The plugin does not use color as a primary indicator of a change in state for the slider. Instead, the “back” and “next” navigation is either visible or hidden. There is also an indicator that communicates the total number of news items.
Users with limited or poor vision, but who do not use a screen reader. If the user chooses to resize the text via the browser file menu, the slider will flex vertically to accommodate the larger text, and still function. This is primarily a function of the CSS, and it is suggested you maintain a variable font size in order to take advantage of this capability.
Users that are legally blind, and who browse Web pages with a screen reader
Users that browse with the keyboard and an adaptive device such as a mouth stick
Users who have turned off JavaScript or CSS
Users who have turned off images

It works in Windows: IE 6+, FF 2+, Opera 9+, Safari 3+

Demo: http://www.reindel.com/accessible_news_slider/
Download: http://www.reindel.com/accessible_news_slider/accessible-news-slider-1.4.zip
Link: http://www.reindel.com/accessible_news_slider/
Via: http://www.fluid-webdesign.com/blog/index.php/2009/01/accessible-news-slider-jquery-plugin/
More: javascript, jquery

Spread this KnowTe

Digg Del.icio.us Stumble Facebook Float Technorati Bump

Or search by time

Subscribe to KnowTeBook

LovedKnowTes

-->

Recommendation

Community Links

Learn a New Photoshop Trick with VunkySearch
One of the best ways to learn a new trick in Photoshop is to grab a tutorial that catches your eye and dive right in. VunkySearch offers just that kind of eye-pleasing, pick-up learning.
Jump-Start Your Freelance Career
Practical methods of getting new freelance business
The Inside Design
Web and Graphic Design Blog
Images Of Faces: What Do They Communicate?
Three principles of design that involve how we perceive images of people are attractiveness bias, face-ism ratio, and baby-face bias.
All Da Crazy and Fun Stuffs You Can Do in PHOTOSHOP
Because a little bit craziness is healthy for your life. And there are no boundaries to what you can do in Photoshop. So fire up your imagination and let’s check out what life has got to offer today.
Gotta' love HTML5 & CSS3
Creating a tabbed animated image gallery with only HTML & CSS
Missile Defense Agency Logo – A new twist to the tale!!
Here comes a new twist to the Missile Defense Agency logo design. A striking resemblance has also been observed between the new “MDA logo design” and the “Iranian Space Agency logo design”.
Cognitive Dissonance: How Contradictory Ideas Affect Design
The theory of cognitive dissonances suggests that people are motivated to reduce dissonance by changing or rationalizing attitudes and beliefs.
Create A Les Paul Guitar Vector
In depth tutorial, how to create a Gibson / Epiphone Les Paul Electric Guitar vector from scratch. Using Adobe Illustrator
JS Animation - fadeIn and fadeOut
Make animation of fade in and fade out online in javascript. Rewrite of jQuery fadeIn and fadeOut methods in less than 20 lines.
CSS Design Gallery
CSS design gallery for inspiration and ideas for your site…
web 2.0 templatesWeb 2.0 templates with simplicity, cleanliness, and elegance in design and the less number of columns and work great for all your needs and have all the great features of Web 2.0 technology.

Subscribe to RSS | Submit a Link

KnowTeBook.com

UserTalk

Small and Accessible News Slider in JQuery