This is my first session of the day Wednesday morning, the first day of the CSUN conference proper. I’m hoping to get a good overview of HTML5 accessibility features while at the conference this week, so I’m looking forward to this session. This particular presentation is about the features available in HTML5 that you can use to improve the accessibility of your websites. Session will include code examples and demonstrations, which I will do my best to capture in this post.
Introductions, he’s the staff contact for the HTML Accessibility Task Force
Open Web Platform
HTML5 Accessibliity / Demos
- Improved Semantics
A description of the HTML Accessibility Task Force. They have a mandate to develop accessibility solutions, including technical reports, extension specifications, and provide integration paths. They are about reaching consensus between groups.
A very busy graphic describing the “Open Web Platform” which includes virtually any industry or device that needs to connect to the Internet. Since the web is meant to connect everyone, it needs to be as accessible as possible.
Tim Berners-Lee: The web is the great equalizer!
- Added structured access through improved semantics.
- Ability to bring desktop paradigms into the browser
- More options for creating text equivalents for graphics
- Native support for synchronized captions, sign language, internationalization and more.
Mark presented a page of code, pretty standard for a blog. He then ran through the page with VoiceOver.
HTML5 Has Much Improved Semantics!
It allows you to describe your document structure with sectioning elements, including <section>, <nav>, <article>, <aside>, <header>, <footer>. You don’t really have to do anything special except use a variety of new sectioning elements. What makes a useful aside? A pull quote, comments, etc.
More information about new semantic elements: color, date, datetime, email, month, number, range, search, tel, time, url, week
Not all of these will necessarily make it into the HTML5 spec.
New attributes for the input element, including autocomplete, autofocus, autosave, list, max/min/step, maxlength, pattern, required, spellcheck.
These will help build forms much easier, particularly the task of form validation.
ARIA Landmark roles include: application, banner, complementary, contentinfo, form, main, navigation, presentation
The ARIA specification was built to provide expose the accessibility API (roles, states, and properties) to accessible technology. It was designed to allow dynamic web pages to be accessible and provide a more consistent experience for all users.
- Accessibility for dynamic content (can be reparative, too)
- Wired into accessibility APIs (roles, states, and properties)
- Programmatically link elements with labels and descriptions (aria-label, aria-labelledby, aria-describedby)
Back to the code sample, only this time Mark replaced most of the <div> elements with a selection of the landmarks noted above. By marking up the search field, the OS (Mac in this case) used system styles for the search bar and button. The demonstration highlighted how VoiceOver announces each section, and using the rotor control, allows the user to directly choose from the various page elements.
One of the things I noticed as Mark was editing his code is that using HTML5 makes hand-coding of web pages and identification of code segments much easier. If you’ve ever had to deal with multiple nested <divs>, this is definitely something you’ll appreciate.
Much of the benefits come when you view an HTML5-coded page on different platforms. For example, iOS will bring up a numeric keypad when entering digits telephone number field. For dates and hours, the OS will present the appropriate pickers, like a calendar or a clock.
- Added <figure> and <figcaption> to allow grouping of images with their description.
- Provides equivalent interactivity and behavior for dynamic and/or bitmap images <canvas>
- Provide extended descriptions for complex images <longdesc>
- Provide detailed guidance to authors ALT Guidance (188.8.131.52)
- Canvas allows interaction with pixels on a page, but…they’re just pixels in a box. Solution: specify regions
- How do we define roles/states/properties? Solution: map tose regions to Fallback Content.
- How do we indicate focus? Solution: drawFocusIfNeeded()
Mark gave a demonstration of canvas that showed a list of two elements with checkboxes. What makes this interesting is that those elements were literally just pixels painted onto the screen, but used fallback content.
Unfortunately, Mark’s presentation was rather long, and he was unable to complete his presentation and we missed out on seeing his slides on media.