W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > October to December 2012

Re: Accessible CSS / JS Bootstrap framework

From: Bryan Garaventa <bryan.garaventa@whatsock.com>
Date: Wed, 7 Nov 2012 09:58:48 -0800
Message-ID: <0BB2AE30C1C14BA6A459BC3E9C06A646@WAMPAS>
To: "Ian Sharpe" <isforums@manx.net>, <w3c-wai-ig@w3.org>
Oh, I get it. Such as adding the class 'modal' to a link, which 
automatically configures a modal to open when activated.

This is actually very easy to setup using AccDC if you wish.

For example, to do this for an accessible calendar picker, all you would 
need is the following script to run on any given page.

$A.bind(window, 'load', function(){
// Parse all A tags that include the class 'calendarPicker'
$A.query('a.calendarPicker', function(i, o){
// Set a calendar picker and bind it with the associated Input tag
setCalendar(o.id, o, $A.query('input[name=' + o.id + ']')[0]);

Which could be part of a global script file and run as a general parser on 
all pages.

Then, devs need only use the following HTML syntax to make accessible date 

<input title="Set departure date" type="text" name="departureDate" />
<a href="#" class="calendarPicker" id="departureDate"> Departure Calendar 

<input title="Set return date" type="text" name="returnDate" />
<a href="#" class="calendarPicker" id="returnDate"> Return Calendar </a>

So basically, every A tag with a class of 'calendarPicker' is parsed, then 
the ID of that A tag is matched with the Name attribute of the associated 
Input tag in order to store date strings when returned.

Then, simply add a general calendar class to the global style sheet, and you 
will have global calendar pickers that are fully accessible, and styled to 
look like whatever you like.

Also, since the calendar picker is programmed to render each calendar view 
as an AccDC Object, the ID for this object is associated with the ID of the 
triggering element as well. Meaning that you can apply any of the AccDC Core 
API methods on the object at runtime if desired, like so:
etc. There's over a hundred different methods and properties that can be 
directly applied in this manner.

You can do the same thing with most of the AccDC module types as well, such 
as modals, banners, tooltips, popups, menus, tree controls, sliders, 
accordions, carousels, and slideshows.

In the case of the modals/banners/tooltips/popups, these are declared as 
AccDC Objects in the archive, but these could easily be converted to do the 
same by wrapping an invocation statement around each, and assigning 
variables to control the ID property and resource path assignment.

If you would like to use AccDC, and need any help, just let me know.

----- Original Message ----- 
From: "Ian Sharpe" <isforums@manx.net>
To: "'Bryan Garaventa'" <bryan.garaventa@whatsock.com>; <w3c-wai-ig@w3.org>
Sent: Tuesday, November 06, 2012 11:29 PM
Subject: RE: Accessible CSS / JS Bootstrap framework

> Thanks Brian and Steve for these suggestions. However, I was really after 
> a
> framework which also includes layouts and the notion of a theme rather 
> than
> specifically an accessible widget library.
> I do obviously appreciate that it is entirely possible to create such a
> thing based on either of the widget toolkits you suggest, or jQuery UI for
> example which also seems to incorporate accessibility to some degree, but 
> I
> was hoping that by including a default theme or style as well, it could
> significantly reduce the burden on authors to understand anything about
> accessibility.
> Whether this is a good thing or a bad thing in general is perhaps a 
> subject
> for another thread, but on the whole, if an author could simply create a 
> UI
> using html and CSS classes which the framework turns into something 
> visually
> appealing then it is worth investigating.
> Obviously I understand that the author still needs to create the content 
> and
> mark it up using the appropriate styles etc, as well as design the site in
> such a way that it makes sense, but if they didn't have to worry about
> whether for example a date picker is accessible and just added a
> "datepicker" class to a textbox or whatever to produce an accessible date
> picker, that would certainly be helpful. And obviously the end result is a
> reasonable looking, visually appealing site.
> Cheers
> Ian
> -----Original Message-----
> From: Bryan Garaventa [mailto:bryan.garaventa@whatsock.com]
> Sent: 07 November 2012 00:11
> To: Ian Sharpe; 'David Woolley'; w3c-wai-ig@w3.org
> Subject: Re: Accessible CSS / JS Bootstrap framework
> I have had some recent experience with Twitter Bootstrap, in addition to
> Backbone.js, and others, as part of the Readium project I was working on,
> and there were definite accessibility issues that I had to program around.
> If you are interested in a web toolkit and framework that I am positive is
> accessible, you are welcome to use AccDC at http://whatsock.com/ Which is
> fully WCAG2.0 and Section-508 compliant out of the box.
> It was recently awarded the Above and Beyond Accessibility Award from the
> United States Department of Labor, who performed their own analysis for 
> 508
> accessibility as well.
> ----- Original Message -----
> From: "Ian Sharpe" <isforums@manx.net>
> To: "'David Woolley'" <forums@david-woolley.me.uk>; <w3c-wai-ig@w3.org>
> Sent: Tuesday, November 06, 2012 3:50 PM
> Subject: RE: Accessible CSS / JS Bootstrap framework
>> Hi David
>> Apologies for the unspecific nature of the query but the reason I ask is
>> because I've just spent a while googling for an accessible equivilent to
>> twitter's bootstrap with no joy myself.
>> My understanding is that such frameworks provide layouts and widgets
>> through
>> a combination of CSS and JS which simplify the development of a web-based
>> UI. If anyone knows the correct name for such things that might be 
>> helpful
>> but this isn't anything particularly new and I was hoping that somebody
>> may
>> be aware of an accessible equivilent.
>> I've already noticed a few other similar frameworks, most based on
>> twitter's
>> bootstrap gaining favor and feel this could help in terms of
>> accessibility.
>> If something like bootstrap continues to gain traction and could be made
>> fully accessible, then it is likely, although by no means certain, that
>> those who use it directly or build upon it will also be accessible. Best
>> of
>> all, the users don't need to know anything about accessibility.
>> Obviously there is more to accessibility than simply ensuring that a site
>> is
>> accessible in any conventional sense but this would seem to be an
>> interesting development from an accessibility point of view.
>> Cheers
>> Ian
>> -----Original Message-----
>> From: David Woolley [mailto:forums@david-woolley.me.uk]
>> Sent: 06 November 2012 23:18
>> To: w3c-wai-ig@w3.org
>> Subject: Re: Accessible CSS / JS Bootstrap framework
>> Ian Sharpe wrote:
>>> Does anyone know of a fully accessible CSS / JS bootstrap framework
>>> similar to twitter bootstrap for example please? Or is twitter
>>> bootstrap itself fully accessible?
>> I hadn't come across the term before, so I googled it.  It doesn't appear
>> to
>> be generic term, but simply part of the name of the "twitter"
>> product.  If that is right, you need to provide a generic definition.
>> Unfortunately, the Wikipedia article didn't enlighten me as to the
>> defining
>> characteristics.  In particular, I couldn't find any description of how 
>> it
>> constrained, or for that matter, abused, HTML.
>> The Wikipedia example didn't appear to accessible, but I don't know if
>> that
>> is because it allows bad practice or forces it (I was looking at how it
>> used
>> label).  <http://en.wikipedia.org/wiki/Twitter_Bootstrap>
>> I would suspect pages don't work well CPU load) on older PCs, but it is
>> possible they degrade well when the scripting is disabled.
>> --
>> David Woolley
>> Emails are not formal business letters, whatever businesses may want.
>> RFC1855 says there should be an address here, but, in a world of spam,
>> that
>> is no longer good advice, as archive address hiding may not work.
Received on Wednesday, 7 November 2012 17:59:19 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 20:36:42 UTC