October 16, 2014

HTML5: Accessible Real-Time Collaboration Apps

Building accessible web based collaboration applications, introducing a practical example

HTML5 opens up lots of opportunities in web app development. The leap is moving from web pages to interactive applications. Local storage, multimedia support and canvas are just some of the building blocks that can be used. Web browsers are evolving on a daily basis introducing real time functionalities and communication support. A great example is given by the WebRTC standard; web apps can offer unified collaboration functionalities that in the past could be achieved only with native applications or external browser plugins.

Accessibility of HTML has been always an important topic and today it is becoming more and more relevant; software vendors, service providers and developers should take into account also these challenges and needs: The requirement is to address accessibility not just of “well known” web pages but taking into account aspects such as interactivity, responsiveness and much more.

Current Status and Challenges

Web accessibility is not a new topic and lots of work has been done so far by W3C (NewsAlert) and the Web Accessibility Initiative with WAI-ARIA. The Accessible Rich Internet Applications Suite, WAI-ARIA, defines a way to make web content and web applications accessible to people with disabilities. It helps with dynamic content and advanced user interface controls. It addresses accessibility challenges by defining ways for functionality to be provided to assistive technologies. WAI-ARIA is already supported in several browsers and the W3C candidate recommendation version 1.0 can be found here:

Assistive technologies in the case of visually impaired or blind people require interaction with screen readers and dedicated end user peripherals, such as braille screens. In this specific case we can identify two main types of challenges:

  1. Technical integration with assistive technologies
  2. User experience factors

Technical integration can be addressed following the WAI ARIA recommendation and paying attention to tab indexes and focus transitions. Talking about user experience, instead, we need to address different aspects depending on application, interaction, user device, and habits.

Mida Solutions develops Unified Collaboration solutions. Among others, we offer an attendant console application that is used by operators that need to handle high amounts of phone calls. Attendant consoles are generally used in large enterprises, public administrations and public/private organizations. This application allows operators to respond to incoming phone calls, offer a live phone welcome service, transfer calls to internals, see in real time colleagues availability, search on corporate directories and in case set up conference calls. Real time interactions, fast application response are fundamental aspects of an attendant console application. Interestingly, often these services are run by visually impaired or blind operators.

Mida Solutions attendant console, named Mida OperatorConsole, has been fully developed using HTML5 and related emerging real time web technologies. Several reasons are behind this choice, such as readiness with emerging collaboration protocols such as Web-RTC, clientless deployment, ubiquitous access, migration to emerging Software as a Service (SaaS (News Alert)) collaboration offerings.

We had the challenge and pleasure to test and run our web app product with visually impaired operators. Our success stories and active deployment confirm that today it is possible to build a real time web attendant console application fully interoperable with assistive technologies. Our R&D team had to address multiple aspects, the most interesting ones are here shortly described to share our experiences.

Adaptive Cascading Style Sheets (CSS (NewsAlert)) provide a simple and easy framework to build applications that can change colours, font size and contrasts. CSS provides all features to address the needs of visually impaired people working with high contrast user interfaces and screen magnifiers.

All application actions and functions shall be accessible from keyboard shortcuts. Generally operators handle many calls and therefore they prefer keyboard commands rather than mouse interactions. Furthermore visually impaired users don’t like to deal with “mouse intensive” applications, especially in real-time. This aspect is challenging because web browsers override some shortcuts. Despite the large amount of actions supported by an attendant console we succeeded to address also this requirement mapping all actions on easy to reach keyboard shortcuts.

Integration with screen readers is also an interesting topic. Some vocalizers support only specific browsers, e.g. Internet Explorer, and therefore the web app has to assure full support of all functionalities in all major releases of the most common browsers. Furthermore, following WAI ARIA recommendation gave us other great advantages. Finally, we also paid attention to tab indexes and focus transitions, thus driving the vocalizer to read timely and aiming only at relevant information. In our opinion this was one of the most interesting results achieved with our web app.

Last but not least, desktop notification are relevant for operators working on multiple tasks. Our application tackles this aspect from different angles, depending on user habits and role. Operators dealing only with the attendant console can easily manage call notifications keeping the web app in full screen and receiving an acoustic alert every time a new call is received. Operators managing multiple tasks and applications on their desktop can leverage on the WAI ARIA alerts, screen readers and web browser built-in HTML5 notifications, that seamlessly integrates with standard OS notification panels.


Our practical experience tells that today it is possible to build accessible web based collaboration applications. While we can rely on a set of technologies, recommendation standards and advanced browser support specifically built for needs today, we do believe this is a great opportunity for service providers, developers and users. Please contact [email protected] for more info.

Ronny Tittoto received the PhD in 2004 in electronic engineering from Padova University, Italy. He has been working as product manager and strategic business developer for major telecommunication service assurance companies, such as NeTest and Anritsu (NewsAlert). Currently he is business manager at Mida Solutions, focusing on unified collaboration and its application to enterprise and transportation vertical markets.

Edited by Stefania Viscusi


HTML 5 Demos and Examples

HTML 5 experimentation and demos I've hacked together. Click on the browser support icon or the technology tag to filter the demos.... Learn More

HTML5 GAMES is the largest and most comprehensive directory of HTML5 games on the internet... Learn More

The HTML5 test

How well does your browser support HTML5?... Learn More

Working Draft (WHATWG)

This is the Editor’s Draft from WHATWG. You can use it online or print the available PDF version... Learn More

HTML5 Flip Book

Free jQuery and HTML5 flip book maker for PDF to online page turning book conversion... Learn More