WebAIM - Web Accessibility In Mind

E-mail List Archives

Fw: Accessible CSS / JS Bootstrap framework

for

From: Bryan Garaventa
Date: Nov 7, 2012 1:40PM

I thought I'd pass this on in case it's of interest to other devs. I need to
write up a more formal way of doing this, but it's a good idea for
implementing accessible bootstrap behaviors.

----- Original Message -----
From: "Bryan Garaventa"
To: < <EMAIL REMOVED> >
Sent: Wednesday, November 07, 2012 9:58 AM
Subject: Re: Accessible CSS / JS Bootstrap framework


> 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
> pickers.
>
> <input title="Set departure date" type="text" name="departureDate" />
> <a href="#" class="calendarPicker" id="departureDate"> Departure Calendar
> </a>
>
> <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:
> $A.reg.returnDate.close();
> $A.reg.returnDate.open();
> 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" < <EMAIL REMOVED> >
> To: "'Bryan Garaventa'" < <EMAIL REMOVED> >;
> < <EMAIL REMOVED> >
> 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
>>
>>