Demystify Accessibility

© 2014 IBM Corporation

Demystifying AccessibilityBest practices to build Accessible Eclipse applications from Day One!

Shikha Aggarwal,

Developer, IBM Rational Publishing Engine

[email protected]

Nithya Rajagopalan, Development Lead, IBM Rational Publishing [email protected]


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



What is Accessibility?

Accessible [ak-ses-uh-buhl]adjective1. 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



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


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


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


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


Accessibility in Eclipse applications

Eclipse accessibility API is provided in the org.eclipse.swt.accessibility package


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


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)


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.

SampleButton 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);


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.


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


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.


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"; } });


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


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


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.


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

SWT Accessibility API


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


Useful Links

–SWT Accessiblity APIs–Designing Accessible Plugins in Eclipse–Creating Accessible Eclipse Applications


Thank You

Demystify Accessibility

Technology

Transcript of Demystify Accessibility