Building Accessible Applications with EGL Rich UI
bsvihovec 110000N29Y Visits (2370)
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 (htt
An example application that uses the "ariaRole" field is provided as part of the attached project, in the file AraiaRoleDemo.egl.
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.
An example application that uses the "ariaLive" field is provided as part of the attached project, in the file LiveRegionDemo.egl.
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.
An example application that uses the "tabIndex" field is provided as part of the attached project, in the file TabIndexDemo.egl.
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.
An example application that uses relative sizes and units is provided as part of the attached project, in the file Rela
Note: The attached project, AccessibilityDemo, requires the com.