BigBlueButton Accessibility Instructions
Contents
How to develop accessible extensions, modules, and plugins for the BigBlueButton Flash client
Accessibility is an important part of the BigBlueButton application. Not only does it allow users with disabilities to run and participate in meetings, it's also mandated by law that if we CAN make it accessible, we HAVE to. For our purposes, disabilities fall into three main categories: Visual, Auditory, and Motor. This guide focuses mostly on Visual and Motor, simply because of the nature of BigBlueButton and what the CDOT team has run into so far.
With Visual and Motor disabilities there is a common concern of the user being able to navigate through the application, since use of a mouse may not be possible. You'll accommodate this by including your code in the tab order, and also by providing shortcut keys for all user functionality in your code. The rule is, if you can do it with a mouse, you need to be able to do it with a keyboard.
Some Visual disabilities require the user to have a screen reader, which is what it sounds like: an application that reads out the content of the screen to the user. In Flash, this is done mainly through the accessibilityDescription property. The rule here is, all relevant data on the screen must have an accessibilityDescription.
Tab Order
This guide will start with the assumption that you are building an entirely new module. If you are adding functionality to existing BBB code, you can skip the code in "Linking in your module," although it's still good information to know.
Linking in your module
BigBlueButton already has an established core tab order, with each module given a baseTabIndex property. The convention is to establish your module's baseTabIndex in an Options class. For an example, examine the ChatOptions class at dev\bigbluebutton\bigbluebutton-client\src\org\bigbluebutton\modules\chat\model\ChatOptions.as.
Within the Options class, declare the baseTabIndex instance variable like so:
[Bindable] public var baseTabIndex:int;
In the constructor, make a link to your module's entry in BigBlueButton's config.xml. You can add a baseTabIndex property to the config entry if you want, to allow customization later. This code includes a default value in the event that baseTabIndex is not defined in your module config:
public function ChatOptions() {
var cxml:XML = BBB.getConfigForModule("ChatModule");
if (cxml != null) {
if (cxml.@baseTabIndex != undefined) {
baseTabIndex = cxml.@baseTabIndex;
}
else{
baseTabIndex = 701;
}
}
}
public function getBaseIndex():int{
return baseTabIndex;
}
The core BigBlueButton modules have baseTabIndex values 100 elements apart, to accommodate future growth. Replace 701 in the else clause with another, more suitable number that reflects a logical place for your module.
For the existing default baseTabIndex values of the core BigBlueButton client, check \dev\bigbluebutton\bigbluebutton-client\README.
Lastly, determine which mxml file in your module is the "main" file. Continuing with the example of the Chat module, this is dev\bigbluebutton\bigbluebutton-client\src\org\bigbluebutton\modules\chat\views\ChatWindow.mxml.
