Result of final year project

HTML 5 support for an accessible user-video-interaction on the Web. ACCESSIBLE HTML5 MEDIA PLAYER

Lourdes Moreno, Assistant Professor, LaBDA Group, Computer science department, Universidad Carlos III de Madrid

Multimedia content must be accessible for people with disabilities according to standards like the Web Content Accessibility Guidelines (WCAG) and User Agent Accessibility Guidelines (UAAG) of WAI

HTML5 offers access in the embedded media player to be a huge step forward. The new standard introduces the latest commands (such as <video> and <audio>), which can create and label controls letting keyboard shortcuts to access them, and screen readers to tell the user which controls are available. Some HTML5 elements provide support for some UAAG 2.0 guidelines. However, the inclusion of caption and audio description, have not yet been included in the new standard because this is still under development. Problems have been detected in the current versions of most browsers in the support of <video> and <audio> labels. Unfortunately, none of the current browser implementations are fully accessible by keyboard and screen-reader. Others complications arise because the various browsers can' t agree on what video codecs they' re going to support, so actually using HTML5 <video> on the web is currently much more difficult than it should be.

The current version of HTML5 provides some playback controls for the video: play/pause, full screen toggle, volume and audio element controller toolbar. These controls are very basic, not allowing the user to have full control of the video. Following WCAG 2.0 and UAAG 2.0 guidelines, these native controls of HTML 5 are not enough. It must have the following controls: end (stop), caption on/off, search captions for text strings and select caption language if closed captioning is available, audio description on/off, rewind/forward seconds, volume up/ down, screen reader full access and keyboard full access of controls.


In order to build the controls as complement HTML5 support for interaction requirements included in UAAG 2.0, the accessible player have been developed with combination of HTML5 and JavaScript technology solution.

Accessible HTML5 Media Player

Si desea los subtitulos en formato texto en español(.txt) haga click aquí
Si desea los subtitulos en formato texto en inglés(.txt) haga click aquí

Controles de video por teclado

  • Play/Pause: tecla p
  • Parar: tecla e
  • Retroceder 5 segundos: tecla r
  • Avanzar 5 segundos: tecla f
  • Subir volumen 10%: tecla u
  • Bajar volumen 10%: tecla d
  • Silencio audio de video: tecla v
  • Silencio Audio descripción: tecla a
  • Silencio video: tecla m
  • Mostrar ayuda: tecla i
  • Subtitulos Si/No: tecla c
  • Subtitulos en español/spanish: tecla z
  • Subtitulos en inglés/english: tecla x