Pro HTML5 Accessibility is an exhaustive book. Author Joshue O Connor is senior accessibility consultant with National Council for the Blind of Ireland’s Centre for Inclusive Technology and a stalwart of many W3C working groups.
Don’t be afraid of the title. The book doesn’t assume that you’re a professional accessibility expert – quite the opposite; the first 100 pages don’t really deal with HTML5 at all, but survey the landscape of disability, assitive technologies and W3C WAI-ARIA. The last chapters of the book usefully survey testing methodologies and tools which will be invaluable to the lone developer told “oh, and it must be accessible/ DDA-/508-compliant, too”.
Joshue does an admirable job of explaining how to use HTML5/ARIA to make sites accessible, and gives a thorough overview of how current browsers communicate new widgets (date pickers, sliders, video controls etc) to assistive technology now, rather than in some glorious unspecified future.
He writes engagingly, too: “Remember that the <div>
and <span>
elements are semantically neutral elements. They have no meaning, poor things, and are merely empty hooks—ciphers for you to do with what you will. They cheer up to no end when you give them meaning. Existential crisis averted!”
I also appreciated Joshue’s pragmatism: “Good semantics are really important, but real-world accessibility is very nuanced—particularly for new content and element types. However, bear in mind that an unencoded ampersand (which will throw a validation error) never resulted in an inaccessible webpage.”
However, I didn’t understand “Having some heading structure, rather than none, on a web document is far more important than merely ensuring the headings are ordered in the correct way.” Surely “merely ensuring the headings are ordered in the correct way” is exactly the same as “having some heading structure rather than none”?
It’s also unclear to me why the author chose to markup buttons to control a video player as
<div id="back" tabindex="0">
<img src="player/back_button.png" role="button" alt="Jump Back" />
</div>
rather than simply use a <button>
element which by default has a role of button and is focussable. But it doesn’t much matter; it gets the job done.
There are some errors which the technical editor should have picked up. Chapter 3 says “JavaScript has some event handlers that can be activated only by using the mouse, such as onClick”, which isn’t strictly true. The same chapter also says “IE 9 doesn’t support the <video>
element”, which is just wrong: it does. A cursory code-test would have shown that chapter 5’s example <img scr="myserver/usful_andgroovy_image.png">
won’t work, as there is no scr
attribute (it’s obviously a typo for src
).
The most significant failing of the book isn’t the author’s fault: it’s the lack of love for presentation that I’ve found endemic in all Apress books lately. For example, the tables in chapter 5 could easily have been formatted for a more attractive presentation, but they look exactly as a basic Word document. Similarly, the multi-page bulleted lists could easily have been a single, multi-column page.
It looks as if Apress just doesn’t care about quality, which is incomprehensible from a publisher. In a publishing environment where ebooks have advantages such as portability, searchability, updateability in case of errors, dead-tree publishers need to work hard to ensure their products remain competitive. They need to play to the traditional strengths of print: beautiful layouts, colours, good design and high-quality paper. We see these in books from Five Simple Steps, Smashing Magazine and A Book Apart. I’ve only seen a PDF of this book, but a previous physical Apress book I own has a paper quality redolent of 1970s East German toilet paper. Certainly Apress has expended no effort at all to lay out the pages for a pleasant read.
That rant aside, the content of this book will be invaluable to a developer new to the world of accessibility, trying to use modern web standards.
10 Responses on the article “Review: Pro HTML5 Accessibility by Joshue O Connor”
About the role=button structure you showed above. It doesn’t get the job done, because the tabindex has to be declared on the element, which has declared the semantic information.
If a element is focusable and this element is focused a screenreader will announce the semantics of this element, not of his children.
So, I’m really not sure, whether anything is right in this book.
Nice review, Bruce! I looked over the IE9 gaffe. For anyone interested, here’s my review from a few months back.
Alexander, I agree with you in that a native element should have been used. But all-in-all, this is a great book.
Many thanks to Bruce for the very balanced review. Alexander is right about the role=”button” needing to be declared explicitly on the element. Also Bruce is right that using a <button> element would have been better with the native semantics that it has. In toto, these and other errata are very useful to me. The next edition will be better. Aun aprendo.
I’m still confused by properly Role =” I do not know what its usefulness, well I will study now
Just as a follow on, I’ve submitted some errata to Apress and hopefully they will deal with it. Small typos in code notwithstanding, Bruce’s first comment about JavaScript and ‘onClick’ is totally my bad, as using onClick is obviously preferred for keyboard accessibility (and the examples in Chapter 3 do use it) – that’s just an error on my part that I missed before going to press.
[Re] ARIA and role button on IMG. I had a good reason at the time for coding the example as I did, because it is legal to do so. The example may have done with an
aria-activedescendant
on the parent (not in above code), but it’s academic now. User agent support is always a concern and at the time, this may have been the best way to do it, to support JAWS for example.So it’s up to a developer to walk this road in their own way, to the best of their knowledge. For ‘hand rolled’ or custom buttons (hence not using a native button element..it all comes back to me now).. Yes, it would be probably best to put the role on the parent <div> that has a
tabindex="0"
to make it keyboard accessible, but you must test with as broad a range of AT/Browser combinations as possible. Then decide what are the common denominators that work best. What first of all seems simple often turns out not to be.Finally, in terms of HTML5 <video> and IE9. At time of writing (well over a year ago now), I just couldn’t easily get my video player to work in IE9, IIRC. Hence my comment about lack of support. Things may have improved but from what I saw at the time many devs had problems supporting <video> natively in IE9.
I’ve found a little error at page 74 of this book. Also if it’s an example function, it’ll throw an error if executed. In fact, line 9 should be
someOtherFunction();
instead of
someFunction();
otherwise the function will call itself and on the next iteration the first “if” condition will access to a property of an undefined variable.
A trivial question: Why the author refers to the “” elements calling them “”?
Sorry for the double comment. A trivial question: Why the author refers to the “a” elements calling them “ahref”?
Thanks for the excellent review. I’m considering this book along with two others: “Web Accessibility” (2006, Friends of Ed) and “Accessibility Handbook” (2012, O’Reilly). Do any of these three stand out as the best point of entry?
Michael, full disclosure: I wrote the introduction to “Web Accessibility” (2006, Friends of Ed) and tech-edited it. Nevertheless, Joshue’s book is far more up-to-date than it, so buy his instead! I haven’t read (or heard of) the O’Reilly one.
One very minor quibble – “However, bear in mind that an unencoded ampersand (which will throw a validation error) never resulted in an inaccessible webpage.”
Unencoded ampersands are largely entirely legal in HTML5, provided they are unambiguous. However the point about accessibility versus strict compliance is well made.
Ambiguous ampersands defined in the W3 spec.
Bare ampersands covered on Grok Five (site very much in progress)
Join the discussion.