jQueryTools Accessible? Created Jun 6, 2009

haven't thought about these issues on the initial release. Can you perhaps investigate this and give me some suggestions what to do? I would appreciate this.

Thanks.

Fortunately if the tools are W3C compliant they are probably 508 compliant. A good test for 508 compiance is to view the webpage without a stylesheet and see if the "content flow" of the document still makes sense. If you can understand everything on the page and nothing is missing (for example crucial tooltips or ALT tags for images) then you are OK.

The problems are mostly:

• purely javascript created content
• videos

Since the jquery tools uses standard HTML to hold content, and then just uses jquery to make it "pretty" I would say all the jquery tools are accessible. For example the tooltips appear directly after the element in the "flow" of the document so they are properly placed, even if the stylesheet is not applied. Expose is 508 compliant as long as you don't RELY on it to indicate anything by color, and tabs/scrollable both use standard lists.

The only troublesome one might be the overlay, because it depends on where you place it in your HTML document for whether it makes sense or not to be there, with no stylesheet. None of the jquery tools require you to use "display:none" initially, which is good because some screen readers for blind people ignore display:none when they scan the HTML.

So from my experience I would say these tools are accessible. Flowplayer itself would probably be the only unaccessible one ;)

But that's rich media and not expected to be accessible.

great! thank you for this good answer. I began to understand accessibility now. It's up to the page author to make them accessible and jQuery Tools will not "unaccess" them. good to know that.

Hi Tero

Just to add to this conversation, I have already written a script to go through a document and check for the class of panes.

When it finds something that is going to become a set of tabs I then extract what I want to use as the title and only then, create the tabs.

Perhaps an interesting way of extending the tabs functionality would be to include this kind of flexibility.

// Check for tabbed areas
$(".panes").each(function(){
	
	var tabsIndex;
	
	// Get an index value for tab set 
	tabsIndex = $(this).prevAll().length;
	
	// Create list with unique id
	$(this).before('<ul class="tabs" id="tabs-' + tabsIndex + '"></ul>');
	
	// For each panel heading create a tab and append it to the list
	$(this).find(".panel h2").each(function() {
		var tabTitle = $(this).text();
		$("#tabs-" + tabsIndex).append('<li><a href="#">' +  tabTitle + '</a></li>');
	});
	
});

//initiate tabs
$("ul.tabs").tabs("div.panes > div.panel"); 

The reason I have gone about it this way is that the list items for the tabs are not really necessary (this might not always be the case though) in the flow of the document.

Anyway, just chipping in...

hubub

Yes. Interesting idea. Anyway this solution relies on the <h2> tags inside the panes and their selector needs to be supplied in the configuration. Of course we can use h2 as the default selector but in overall this does not make this very much easier to understand / configure. Another drawback is that users must use the same title for the tab and the h2 tab. I don't see the construction of the tabs is very much of a redundant work.

Thanks.

>>great! thank you for this good answer. I began to understand accessibility now. It's up to the page author to make them accessible and jQuery Tools will not "unaccess" them. good to know that.<<

Hi Tero, no, that's not quite accurate. I think the original poster was referring to how well JQuery Tools degrades if for example javascript is turned off, this one thing alone should always be tested when producing a javascript framework.

For example your slider/scroller does not degrade gracefully if javascript is turned off, the area just goes blank instead of showing the contents inline or in a (css) scrollable box - a good example of an accessible jquery slider would be something likehttp://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/ which has progressive enhancement built in. Sure there are not the nicetys that the JQuery Tools version has such as the navigator and the alpha fade animation but you can still view the contents of the scroller with js turned off.

Same with the tab box still being able to view the contents and jump to a section with js turned off using normal anchor hashes

Do you think you could look into making the next version of JQuery Tools more progressive epecially the scroller, degrade gracefully? I love JQuery Tools but would feel this is the one deal breaker for using in my projects currently.

Would appreciate your feedback on this.