HTML5 Accessibility
Eventually all browsers across the board will offer full support for HTML5 with assistive technologies, but as of today that is simply not the case. Despite moving in the right direction with regards to improving how we use the Internet, browsers continue to lag behind. Unsurprisingly, Firefox leads the way at the moment. Surprisingly, Internet Explorer is next in line ahead of Safari, then Google Chrome with Opera really lagging behind.
The good at the moment is that web developers have really taken to HTML5 or are at the least giving some of the new features a go. Splitting content into clearly specified elements such as <header>, <footer>, <nav>, etc is much better that having div tags everywhere with ID's and classes. Forms are also greatly enhanced to give us much greater clarity with them. Instead of just having text we now have phone number fields, email fields, URL fields, etc. This is all great news as a starting point to make more sites and applications accessible to everyone is by having semantic markup.
The problem at the moment though is that using HTML5 isn't going to give us what we need right now. Sure, the elements split up content nicely when looking at the code, but there is almost zero support for HTML5 semantics when it comes to assistive technologies such as screen readers. All the elements such as <header> and <footer> are nothing more than div tags in the page. They are semantically useless.
Until browsers and assistive technologies catch up with the speed of HTML growth and have full and proper implementations, the only way we can get around this is by using the Roles Model WAI-ARIA where we can define the element. Why does this work for the time being? ARIA has relatively decent support with screen readers and other assistive technologies and these roles can be shown to someone who is using the appropriate technology. These landmark roles simply add a new means to navigate page content for users with supporting assistive technology. The good thing is that they can be used on semantically neutral elements such as the div tag or to HTML5 elements that have implied semantics such as <header> or <footer>, to help fill in current gaps in accessibility support.
<ul role="menubar">
or <nav role="navigation">
A List Apart published an article ARIA and Progressive Enhancement last year showing full testing details. Google, BBC and Yahoo all implement ARIA landmarks to their sites which is a good sign that popular sites are doing what they can within the limits set by browsers and assistive technologies.
If you head over to the HTML5 accessibility site you can view the current ratings of how browsers stand up to HTML5 accessibility.
How Scoring is calculated:
- 37 new HTML5 features listed. Each feature = 10 points, total = 370 points.
- Each feature implemented without any accessibility support = -10 points
- Each feature implemented with partial support = -5 points
Standings as of today:
325/370
280/370
180/370
155/370
110/370