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
>>
>> -----Original Message-----
>> From: Bryan Garaventa [mailto: <EMAIL REMOVED> ]
>> Sent: 07 November 2012 00:11
>> To: Ian Sharpe; 'David Woolley'; <EMAIL REMOVED>
>> 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" < <EMAIL REMOVED> >
>> To: "'David Woolley'" < <EMAIL REMOVED> >; < <EMAIL REMOVED> >
>> 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: <EMAIL REMOVED> ]
>>> Sent: 06 November 2012 23:18
>>> To: <EMAIL REMOVED>
>>> 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.
>>>
>>>
>>
>>
>>
>