Over the last two years, there’s been a lot of discussion about the potential of HTML5 accessibility: no more plug-ins, accessible video, accessible drag-and-drop functionality and better assistive technology support due to WAI-ARIA integration. Yet hidden away from the spotlight are a few other features that I’m really looking forward to as HTML5 continues to be developed and adopted.
This month I’m going to look at a few of the lesser-known benefits that are likely to have a significant impact on people with disabilities and the online community in general.
Simplified captioning
Captioned video is starting to become more prevalent on the web in large part due to YouTube’s automated captioning process. However, one of the reasons captioned video has been held back is the fact that there are so many different captioning formats for digital media.
This can be highlighted by looking at my favourite media player, the D-link Boxee Box, which has to support a truckload of different formats including AQTitle, ASS/SSA, CC, JACOsub, MicroDVD, MPsub, OGM, PJS, RT, SMI, SRT, SUB, VOBsub and VPlayer just to make sure that most captioned digital media can be played back.
This is understandably a headache for both consumers and developers who have tried to ensure that accessible online media is produced and that consumers are able to watch it.
While HTML5 isn’t currently delivering a unified caption format as such, there is WebVTT (Web Video Text Tracks) which can help. WebVTT is a file format intended for marking up external text tracks such as captions. It was initially part of the Web Hypertext Application Technology Working Groupand the W3C HTML5 specifications, but the W3C was concerned that HTML5 should be independent of any chosen captioning format so it’s not currently part of the specification. The implementation and coding techniques of WebVTT and its interesting journey into HTML5 recognition is discussed in this excellent WevVTT article by Ian Devlin.
The exciting part about developments such as WebVTT and other HTML5 video initiatives is that they have the potential to deliver easier caption implementation regardless of video format, providing scalability on different browsers and platforms, the ability to tie the text better into assistive technologies and to use the text for different purposes, such as descriptive text for audio description. There’s still a lot of movement and change in HTML5 video accessibility but it’s great that so much work is taking place.
Frames no more
In addition to what has been added to HTML5 to help accessibility, it’s worth noting that a few elements have been taken out of previous HTMLversions as well. Most notably, frame-related elements including frame, frameset andnoframes. It is great to see that the iWeb pages from the 1990s have finally been retired.
The end of mobile websites? The power of auto-customisation
Last year Derek Featherstone presented at the Edge of the Web conference in Perth,talking about the many benefits of HTML5 and WAI-ARIA.
One of the demonstrations that I found amazing was the creation of the Simply Accessiblewebsite that could auto-customise itself depending on the amount of screen real estate available in the Web browser. This meant that the website looked great on the large conference screen in a high resolution, but also reformatted itself in an effective way for mobile phone users.
Derek demonstrated that as the browser was stretched, the website preceded to prioritise its menus, news items, general content and special features to ensure that no matter what device was being used, the content was automatically presented in an intuitive way. No horizontal scroll bar, no new CSS templates and no problems in navigating the information.
While I appreciate that an auto-customised website may not be seen by many as the most exciting visual example of the power of HTML5, from an accessibility point of view it is examples like this that show the potential to not only significantly help people with disabilities, but make it relatively easy for the developer to do so. With the use of some of the new label elements, information on a website could be effectively categorised and structured according to what the user is most likely to need.
As our reliance on the mobile web continues to evolve, HTML5 and WAI-ARIA can ensure that everyone can access content whether it’s on a big screen, mobile screen or no screen at all.
Getting started
While HTML5 is still in development, there are ways to implement some of its great accessibility features now. In a Sitepoint article written to complement his visit to Australia,Derek made the following points on using HTML5 and WAI-ARIA elements for such purposes:
- We can use the new elements (article, section, aside, header, footer, nav to name a few) in our websites and apps right now.
- We can trick browsers that don’t natively understand those elements exist by using the HTML5 shiv. Yes, it uses JavaScript and no, that’s not a reason not to use it. Yes, you need to consider the “JavaScript off” scenario, but we’ll talk more about that later.
- We must know that the semantics of HTML5 are NOT expressed or interpreted right now by existing assistive technologies. That’s okay—support will be coming, but it will take some time.
- While we’re waiting for support for emerging technologies such as HTML5, we need to find solutions that work now.
One way to identify some working solutions is to find out how the HTML5 implementation is going across the browsers. A good resource is HTML5 Accessibility.com, which provides a comparison of popular web browsers, the elements of HMTL5 supported and a score out of 100. According to this measurement, Firefox currently has the best HTML5 accessibility support score on Windows, while Safari ranks best for Mac systems.
For more information on HTML5, the W3C has many comprehensive resources.
Top of page