Status

WIP

Introduction

Web accessibility can be referred as improvement or new feature for next release of GateIn, we will make GateIn be able to usable by people of all abilities or disabilities. If you are not familiar with Accessibility term, there are several topics talk about that on Internet such as w3c, wikipedia, stackoverflow... This page outlines the best practices for making GateIn to be more accessible or building an accessible portal base on GateIn

Specification

HTML Validation

Now, if we validate GateIn portal by w3c Validator (http://validator.w3.org/), there are several errors which relate to element Id, HTML attribute, opening without any closing tags ... they should be corrected by template changes, or provide API for some cases

• HTML element IDs have special character such as starting by a number, have slash (/) in ID value: we can see that a component ID is automatically generated with a hash number, it's not validated by w3c validator, that mean Portal has to generate these ID with a prefix. We introduced "c_" as prefix for a component ID and "p_" for a portlet window ID
• HREF attribute in anchor tags are not valid: an URL which rendered in browser should be encoded before, Portal's containing several links have '&' as query string separator, we must change the character to '&' instead of
• script tag with invalid attributes: Sometime, we use 'language' attribute in script tag, it should be 'type'

Keyboard accessible

Ideally, a user can navigate to every meaning content in Portal by keyboard (tab or hotkey), specially when they're disabilities. There are some practices which we have to do to make Portal becomes Keyboard accessible

• Every elements can be interacted by mouse should be done with keyboard too.
• Make images in Portal page more reasonable
• An action request should be done regardless of JavaScript is enable or not

Every elements can be interacted by mouse should be done with keyboard

GateIn web UI has a lot of components which have mouse interaction such as mouseover, mouseout, click ... It makes GateIn becomes more usable, interactive. For example, there is a menu is showed when user over to the bar, and hidden when leave from there, or hight light some elements ...

Unfortunately, we didn't implement a same action for keyboard, that mean when user navigates to element by keyboard, no effect on the element. It's INACCESSIBLE.

We'll have to inject a similar action for particular keyboard event on an element. The following table will show you a list of keyboard event equivalents

GateIn introduces an easy way to inject an event to HTML element though JavascriptManager and expose as an API like following:

• public void addEventListener(String elementId, String eventName, String eventHandler)
  Inject a particular event handler to a HTML element with associated event
  • elementId: ID of HTML element
  • eventName: An associated event in HTML element (not need 'on' in the event) such as click, mouseover, mouseoout...
    it can contain multiple event name same as mouseover focus
  • eventHandler: An event handler will be bound to associated event

For example:

addEventListener("portletId", "mouseover", "eXo.portal.DragDrop.init");

or

addEventListener("portletId", "mouseover focus", "eXo.portal.DragDrop.init");

• public void addEventListener(String elementId, String eventName, String eventHandler, Map<String, String> dataCol)
  • elementId: ID of HTML element
  • eventName: An associated event in HTML element (not need 'on' in the event) such as click, mouseover, mouseoout...
  • eventHandler: An event handler will be bound to associated event
  • dataCol: A map of data collection, will be passed to event handler as data of event. The data value can be read through event.data

For example:

Map<String, String> data = new LinkedHashMap<String, String>();
data.put("key1", "value1");
data.put("key2", "value2");
String eventHandler = "eXo.core.display";
String eventName = "click";
String elementId = "eventId";
jsManager.addEventListener(elementId, eventName, eventHandler, data);

and JavaScript event handler

eXo.core.display = function() {
   var value1 = event.data.key1;
   var value2 = event.data.key2;
}

• public void addEventListener(String elementId, String eventName, String eventHandler, String jsonData)
  • elementId: ID of HTML element
  • eventName: An associated event in HTML element (not need 'on' in the event) such as click, mouseover, mouseoout...
  • eventHandler: An event handler will be bound to associated event
  • jsonData: An array of data collection as a json, will be passed to event handler as data of event. The data value can be read through event.data

For example:

String jsonData = "{key1:value1, key2:value2}";
String eventHandler = "eXo.core.display";
String eventName = "click";
String elementId = "eventId";
jsManager.addEventListener(elementId, eventName, eventHandler, jsonData);

and in Javascript event handler:

eXo.core.display = function() {
   var value1 = event.data.key1;
   var value2 = event.data.key2;
}

Make images in Portal page more reasonable

An action request should be done without JavaScript enable

Content can be presented in simpler layout

Make HTML elements more reasonable and accessible

All image elements should be reasonable

All submit, button elements should be reasonable

Today, we are using anchor element for button or submit purpose with div tag as HTML wrapper

Other new features

Beside these improvements, we'd like to introduce some new features that make GateIn and products based on more accessible such as Audio captcha or Accessible toolbar