Demystify Accessibility

1. Demystifying Accessibility
Best practices to build Accessible Eclipse applications from Day One!
© 2014 IBM Corporation
Nithya Rajagopalan,
Development Lead, IBM Rational Publishing Engine
nithya_rajagopalan@in.ibm.com
Shikha Aggarwal,
Developer, IBM Rational Publishing Engine
shikha.aggarwal@in.ibm.com

2. © 2014 IBM Corporation
Agenda
 Introduction to Accessibility
Why is Accessibility important to your business?
 Testing for Accessibility
 Eclipse Accessibility
 Best practices with code samples
 Demo of a working accessible application
 Discussion

3. © 2014 IBM Corporation
Introduction to Accessibility
What is Accessibility?
Accessible [ak-ses-uh-buhl]
adjective
1. Easy to approach, reach, enter, speak with, or use.
2. That can be used, entered, reached, etc.
3. Obtainable; attainable.
Accessibility means making something usable by
everyone—including people with disabilities.
Examples of improving accessibility
–Ramps
– curb cuts
– accessible doors
International symbol of
accessibility

4. © 2014 IBM Corporation
Introduction to Accessibility
What is Software Accessibility?
Software is being used in every aspect of life including education, employment,
government, commerce, health care, recreation, and more.
The content and functionality on your website should be available to anyone, regardless of
disability, location or connection speed

5. © 2014 IBM Corporation
Why is Accessibility important?
According to the World Health Organization, more than 750 million people
worldwide have a disability and over 54 million are in the United States.
Reasons to produce Accessible products
– Social Responsibility
• Organization’s commitment to people with disabilities
– Business Case
• People with disabilities who want and need to use technology have an estimated
$175 billion in disposable income
• In many cases, they are the untapped market
– Legal Case
• Commitment to comply with worldwide regulations and standards
• US Section 508 is the standard that has been most critical
• Your Organization checklists will include all of the requirements necessary to
conform to this regulation

6. © 2014 IBM Corporation
Accessibility Assistive Tools
Disability issues
Low Vision
– Cannot use the mouse for input, cannot see the screen
– Assistive Technology - Need magnification and color contrast
– Software should render well for High Contrast mode(Left ALT + left Shift + PrtSc )
Blind
– Rely only on audio for navigation
– Assistive technology - Need audio output
– Software should be compatible for screen readers like Freedom Scientific's JAWS TM
– Need alternate text (Alt+Text)
Mobility
– Do not have very good motor skills to use Mouse
– Keyboard shortcuts should be present for all actions

7. © 2014 IBM Corporation
Measuring Accessibility
Accessibility Testing
– Testing for Eclipse applications
• Keyboard shortcuts
• Screen readers like Freedom Scientific's JAWS TM
• Voice recognition software like IBM ViaVoice TM
• Contrast mode
– Testing for Web applications
• Rational Policy Tester Accessibility Edition
Checklist compliance
– Organization checklists
– Web accessibility - Web Content Accessibility Guidelines (WCAG) 2.0 conformance
level AA

8. © 2014 IBM Corporation
Accessibility in Eclipse applications
Eclipse accessibility API is provided in the org.eclipse.swt.accessibility package

9. © 2014 IBM Corporation
Basic Accessibility considerations in Code
 Keyboard shortcuts
 Tab Order
 Alternate Text
 Colours
 Associating Labels and Controls
 Logical Groups
 Setting Focus
 Setting background color for high contrast mode
 Using Accessible APIs

10. © 2014 IBM Corporation
Keyboard Accessibility
 Support for direct keyboard shortcuts or Mneumonics
– Used for frequently used menu items. (Example - Ctrl+S for Save)
Menu Strings Samples
»menu.file = &File
»menu.file.new = &New
»menu.file.save = &Save
– For less frequently used menu items use mneumonics
• Place an ampersand (&) before the mnemonic character (such as Copy)
Plugin.properties
com.ibm.rational.rpe.studio.command.openTemplate = Open Document &Template...
Plugin.xml
<command
categoryId="com.ibm.rational.rpe.studio"
description="%com.ibm.rational.rpe.studio.command.description.openTemplate"
id="com.ibm.rational.rpe.studio.commands.TemplateSelectionCommand"
name="%com.ibm.rational.rpe.studio.command.openTemplate">
</command>
 Support for accelerators (Using CTRL, ALT or SHIFT keys)

11. © 2014 IBM Corporation
Tab Order
 For most GUI systems, the default tab order is the order in which the controls are added to
the GUI component hierarchy.
 Typically the order should follow the physical placement of the visual controls. Often a
left−to−right, top−to−bottom order is used, but other orders may be more effective
depending on the actual layout.
 Methods to override the behaviour
»org.eclipse.swt.widgets.Composite getTabList
»setTabList methods.
 Sample
Button b1 = new Button(shell, SWT.PUSH); b1.setText("Button1");
Button b2 = new Button(shell, SWT.PUSH); b2.setText("Button2");
Button b3 = new Button(shell, SWT.PUSH); b3.setText("Button3");
Control[] controls = new Control[] { b2, b1, b3 };
shell.setTabList(controls);

12. © 2014 IBM Corporation
Colors & Fonts
 Using Eclipse defined SWT colors and JFace fonts rather than using custom colors and
fonts.
private void setBackground(Control control)
{
control.setBackground( WorkbenchColors.getSystemColor(SWT.COLOR_YELLOW));
}
Font labelFont = JFaceResources.getBannerFont();
 Best practice is to inherit system colors and font sizes, which standard widgets do without
modification
 If you still want to override the system colors and have a color that you set yourself, you
must have a way to adjust it for different color settings.

13. © 2014 IBM Corporation
Associating Labels and Controls
 Custom Labels and Controls should be used consistently for Screen Reader to read out
CLabel fontLabel = getWidgetFactory().createCLabel(composite,
StudioMessageBundle.getInstance().getMessage("tabbed.properties.view.font.font.label"))
gridData = new GridData(SWT.BEGINNING, SWT.CENTER, false, false, 1, 1);
fontLabel.setLayoutData(gridData);
CCombo fontCombo = getWidgetFactory().createCCombo(composite1, SWT.LEFT);
gridData = new GridData(SWT.FILL, SWT.CENTER, false, false, 2, 1);
fontCombo.setLayoutData(gridData);
 While SWT tries to use native widgets as much as possible, it can not fulfill all common
requirements with the native widgets. Therefore some widgets extend the capabilities of
the native platform. These are part of the org.eclipse.swt.custom package and usually start
with the additional prefix C to indicate that they are custom widgets, e.g. CCombo.
 Example - Compared to the Combo class, the CCombo class provides the ability to set the
height of the widget.
 In such cases, the right associations should be set

14. © 2014 IBM Corporation
Logical Groups
 A Group name in association with the widget name gives better context to the user
Group group = new Group (shell, SWT.NONE);
group.setText ("Contact preference");
Button button1 = new Button (group, SWT.RADIO);
Button1.setText ("Standard ground mail");
Button button2 = new Button (group, SWT.RADIO);
Button2.setText ("email");
Button button3 = new Button (group, SWT.RADIO);
Button3.setText ("Telephone");
Button button4 = new Button (group, SWT.RADIO);
Button4.setText ("Do not contact")
 The group widget allows related widgets to be identified by an additional label for
clarification when reading. The name of the group will be read in addition to the name of
the widget with focus.

15. © 2014 IBM Corporation
Setting Focus
 For the elements which do not take focus, e.g Composite, we need to set focus explicitly
on the selected element.
 When a UI element is in focus, it will be read out.
 Useful for dialogs that pop-up a while after they have been triggered
 group.setFocus();
 In addition accessibility listener should be added to the element.
group.getAccessible().addAccessibleListener(new AccessibleAdapter()
{
public void getName(AccessibleEvent e)
{
e.result = "Group Label";
}
});

16. © 2014 IBM Corporation
Ensuring Visibility in High Contrast mode
 A Label will be visible in normal mode and in High Contrast mode, if it has both the
background colour and the foreground colour set. The background colour should be set to
white so that black characters are visible in normal mode. The foreground colour should be
set to black so that the same characters will be visible in white colour in high contrast
mode. .
imageLabel = new Label(group, SWT.None);
imageLabel.setImage(getIcon());
imageLabel.setLayoutData(new GridData(GridData.HORIZONTAL_ALIGN_CENTER | GridData.GRAB_HORIZONTAL));
imageLabel.setBackground(RCPCommonImageLibrary.getColor(RCPCommonImageLibrary.WHITE_COLOR));
imageLabel.setForeground(RCPCommonImageLibrary.getColor(RCPCommonImageLibrary.BLACK_COLOR));
 Visibility in High Contrast mode

17. © 2014 IBM Corporation
Alternate Text
 Use Images just for aesthetic purposes and using labels overs images for informative text
Composite workArea = new Composite(parent, SWT.BORDER);
setBackground(workArea);
Label topLabel = new Label(workArea, SWT.NONE);
topLabel.setImage(AccessibilityPlugin.getDefault().getImageRegistry().get(AccessibilityPlugin.LOGIN_IMAGE));
Label titleLabel = new Label(workArea, SWT.NONE);
setLabelColors(titleLabel);
titleLabel.setText("Welcome to RPE!");
 Use System images as they are already compatible with High contrast mode
– Example - SWT.ICON_INFORMATION, SWT.ICON_ERROR

18. © 2014 IBM Corporation
Using the AccessibleListener
 Interface provided by eclipse.
 Classes that implement this interface provide methods that deal with the events that are
generated when an accessibility client sends a message to a control.
 For example in the following code getName method sets the result on event which can be
used by accessibility client.
group.getAccessible().addAccessibleListener(new AccessibleAdapter()
{
public void getName(AccessibleEvent e)
{
e.result = "Group Label";
}
});
 The accessible of the tree control is retrieved and an AccessibleListener is created and
added. The method getName is provided. The results are passed back in the
AccessibleEvent member result
 Any control can be given a name which can be retrieved by the assistive technology.

19. © 2014 IBM Corporation
SWT Accessibility API
 3 types of interfaces/classes:
– Listeners – Interfaces that provide methods that handle accessibility events.
– Adapters – Default implementations of Listeners provided by SWT.
– Events – Instances of these classes are sent from accessibility clients to accessible
objects.
– Examples of Listeners:
• AccessibleActionListener, AccessibleAttributeListener, AccessibleListener
:
– Examples of Adapters:
• AccessibleAdapter, AccessibleActionAdapter, AccessibleAttributeAdapter
– Examples of Events:
• AccessibleEvent, AccessibleSelectionEvent, AccessibleAttributeEvent

20. Best Practices for developing Accessible Eclipse applications
 Ensure Keyboard shortcuts for all context menu items during design
 Check your code for White Background for all controls to be visible in high
contrast.
 Create UI elements in the desired Tab order
 Ensure all images have alternate text using the AccessibleListener
 Use APIs provided by Eclipse Accessibility Framework to inherit
Accessibility features of Eclipse
© 2014 IBM Corporation

21. © 2014 IBM Corporation
Useful Links
–SWT Accessiblity APIs
–Designing Accessible Plugins in Eclipse
–Creating Accessible Eclipse Applications

22. © 2014 IBM Corporation
Thank You