EGL Development User Group - Group home

Building Accessible Applications with EGL Rich UI

  
When developing Rich Internet Applications, it is important to make the applications accessible to everyone. Due to the fact that EGL Rich UI applications are generated into standard HTML and Javascript, the applications comply with accessibility standards and can be used with utilities such as screen readers, etc. The following are some specific details on working with screen readers, tab indices, and relative sizes in an EGL Rich UI application.

Screen Readers
When working with widgets that map directly to basic HTML controls (e.g. button, checkbox, etc), no additional work is required to enable a screen reader, as the readers are already able to interpret standard HTML tags. In addition to the basic widgets provided by the HTML specification, Rich Internet Applications commonly contain more complex widgets that are rendered using generic HTML tags such as the DIV tag. To make these complex widgets accessible to a screen reader, the W3C organization has defined the Accessible Rich Internet Applications (WAI-ARIA) specification (http://www.w3.org/TR/wai-aria/). This specification defines the 'Role' attribute for all tags, which can be used to instruct a screen reader on how a widget should be interpreted (e.g. "checkbox"). All widgets found in an EGL Rich UI application contain the fields "ariaRole", which can be used to instruct a screen reader on how to interpret the widget.


Another common aspect of Rich Internet Applications is the usage of widgets that update their content as the application is running, without re-rendering the entire page (e.g. stock prices, etc). To support these widgets, the ARIA specification defines the 'Live' attribute, which can be used to instruct a screen reader to re-read a widget's content after it has been updated. All widgets found in an EGL Rich UI application contain the fields "ariaLive", which can be used to instruct a screen reader on how often to re-read a widget after its content has changed.

Tab Index
When developing an application, it is important to consider a user that does not have a mouse or other pointing device. To support these users, the application should enable tabbing so that the application can be used with only a keyboard. All widgets found in an EGL Rich UI application contain the field "tabIndex", which can be used to indicate the Tab order for the widget in the running application.


Relative Sizes
When developing Rich Internet Applications, it is a good idea to size elements using relative values, so that the application will render correctly on different size monitors or at different resolutions. To specify that a widget should take up a certain percentage of the screen in an EGL Rich UI application, you can set size attributes using a value with a percentage (e.g. width = "50%").

Font sizes should also be specified using relative units (e.g. em) instead of fixed units (e.g. px), so that the browser can adjust the font size to the users preferences. You can specify font sizes with different sizes and units (e.g. em, pt, etc) using the "fontSize" attribute found on all widgets in an EGL Rich UI application.