[WG: Accessibility] Reminder: Accessibility WG Teleconference Thursday at 2:00PM EDT
Matt Clare
Matt.Clare at BrockU.CA
Wed Dec 10 21:20:09 PST 2014
Hi Sakai Accessibility List,
This is your reminder that the next teleconference for the Accessibility WG will be today Thursday December 11, 2014 at 2:00PM EDT (18:00 UTC).
Friends and soon-to-be-friends welcome.
We'll be using Apereo's Calliflower account for this call
Default Dial-in Number:+1-323-375-2185
Conference Code: 8600146
Find a Dial in number in your city:
https://apps.calliflower.com/account/call_in_numbers?organizer=328940
Skype:
Add ‘calliflowerskype’ as a contact in Skype. You can then call
Calliflower directly from Skype with the Skype dialing pad.
Agenda/Etherpad:
https://kumu.brocku.ca/pad?pID=g.zEm3N4n9HUd8BfKg$895
Agenda/JIRAs:
- https://jira.sakaiproject.org/browse/SAK-19124 (your contributions apprecaited)
Response:
The preferred libraries in use in Sakai can be implemented to meet a high standard of accessibility. The block element structures and Accessible Rich Internet Applications (ARIA) roles have to be properly created and labelled.
Important Elements of Modal Dialog:
• The AIRA dialog role should be used to mark up any dynamic dialog or window that separates content or UI from the rest of the web application or page.
• A title block element should be associated with the modal div should have an ARIA attribute of aria-labelledby="ID"
• Keyboard focus must be properly assigned.
• Tab order should be contained by the dialog
• Upon closing, return focus to the activating element
A general description of these principles can be found at https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role
Reference implementations can be found for the following libraries
• jquery-ui http://access.aol.com/aegis/#goto_dialog
• bootstrap https://paypal.github.io/bootstrap-accessibility-plugin/demo.html
Important Elements of Tool Tips
Best practices for tooltips are less established, but we would suggest
• The content of the modal div should be derived from the title attribute of the triggering item
• The triggering item should be associated with tooltip modal div should through an ARIA attribute of aria-labelledby="ID"
• Tab focus on trigger item should trigger and then shift focus to the tooltip content, this can be done by making sure the activating item is an anchor tag, and targets the id of the modal div, so focus is placed on it.
• Give the modal div a tabindex="-1" so that it can’t be accidentally tab’ed into.
• Upon closing, return focus to the activating element.
Reference implementations can be found for the following libraries
• jquery-ui http://jqueryui.com/tooltip/
• qtip2 http://qtip2.com/guides#style.builtin (Sakai-based example is the welcome tutorial)
• bootstrap http://getbootstrap.com/javascript/#tooltips
Modal/Alert/Notification Options
Only example in Sakai currently is pnotify-based notifications.
Growl/Pnotify
https://sciactive.github.io/pnotify
- Created https://jira.sakaiproject.org/browse/SAK-28179 (coming out of https://jira.sakaiproject.org/browse/SAK-22813)
Matt's JIRA Filter https://jira.sakaiproject.org/issues/?filter=14292
Next call, Jan 8, 2014
Matt Clare
Manager, eLearning
Centre for Pedagogical Innovation
Part-time Instructor
Interactive Arts and Sciences
Brock University, Niagara Region, Ontario, Canada
http://brocku.ca/pedagogical-innovation 905 688 5550 xt 4539 Office: SBH321
More information about the accessibility
mailing list