2. About me
• Mark Palmer
• Accessibility Consultant with User Vision
• Background in:
– System testing
– Web design and development
– Management of development team implementing
accessibility
3. What is HTML5?
• HTML5 is a language for structuring content on the web
• Greater semantic structure
• Native support for media content rather than using plugins
• Audio and Video support
• 2D Drawing API – Canvas
• Drag and drop API
• New form elements
• Backwards compatible
4. Background to HTML5?
• In 1998, W3C decided not to continue with HTML.
• XML was considered to be the best way forward for the web
• Creation of XHTML 1.0 – HTML using XML syntax rules
• Work began on XHTML 2.0 spec which would have seen a
dramatic change in the language
– More logical
– Better designed
– BUT was less backwards compatible
• WHATWG (Web Hypertext Application Technology Working
Group) developed HTML5 spec in response to XHTML 2.0 and
it’s failings.
5. Background (2)
• HTML5 is a language for structuring content on the
web
• Greater semantic structure
• Native support for media content rather than using
plugins
• Audio and Video support
• 2D Drawing API – Canvas
• Drag and drop API
• New form elements
• Backwards compatible
6. Key differences
• Less strict in terms of syntax
– Generally case insensitive
– No need to put quotes around attribute values
– No requirement to self-close elements such as <img />
– Simplified doctype - <!DOCTYPE html>
7. Key differences (2)
– Simplified HTML element
•From <html xmlns="http://www.w3.org/1999/xhtml" lang="en"
xml:lang="en">
•To <html lang="en">
– A number of elements are dropped - <acronym>,
<applet>, <frameset>, <frame>, <font>, <s>, <strike>, <u>,
<big>, and <center>
8. Semantics
• Greater semantic markup using new elements
– <article>
– <aside>
– <header>
– <footer>
– <nav>
– <section>
11. Semantics (4)
• Using a combination of nested <section> elements
and <h1> to <h6> headings, we can create a much
more structurally complex hierarchy.
<section>
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<section>
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
</section>
</section>
12. Form elements
• Selection of new input types and inbuilt validation
Validation ‘date’ input type ‘range’ input type
13. Form elements (2)
• Selection of new input types and inbuilt validation
Color picker ‘search’ input type ‘email’ input type
14. Navigation
• In HTML5, we can wrap links around block level
elements
• Less tabbing for user
• Larger clickable areas
• Useful but not without it’s issues
<a href="/about.php">
<h3>What is SUPA?</h3>
<img alt="Usability Professionals
Association" src="/images/site/usability
_professionals_association.gif">
<p>The Scottish Usability Professionals
Association (SUPA) is a chapter of the
Usability Professionals Association.</p>
</a>
15. Canvas
• <canvas> element is intriguing.
• Can be used to create graphical elements ‘on the fly’.
• Potential for accessibility issues
– No DOM
– Only browsers supporting the <canvas> element can
display it
– Keyboard accessibility
16. Video and Audio
• <video> and <audio> elements should eventually be
supported across all browsers.
• Potential for huge accessibility benefits
– Provision of captions/subtitles
– Keyboard accessibility of media player
– Currently official support for these is however vague or
non-existent in the specification
17. Concerns
• Inconsistent support across browsers
• Confusion around implementation of accessibility
features in audio and video elements
• Lack of clarity from assistive technology vendors as
to what they will and won't support
• Still greater support for ARIA – an older “new”
technology
• ‘Pave the cowpaths’ - When a practice is already
widespread among authors, consider adopting it
rather than forbidding it or inventing something new.
19. Summary
• HTML5 offers greater potential for creating
accessible content
– Built in rather than bolted on
• HTML5 Forms will greatly reduce the number of
inaccessible custom solutions in use
• Accessible audio and video elements could
revolutionise access to media for disabled people.
• However……
– Browser and assistive technology support inconsistent and
not clearly defined
– The Spec is fluid and hotly contested. The road ahead to
full implementation is not smooth
20. Further Reading
• http://dev.w3.org/html5/spec/single-page.html
• HTML5 accessibility support by browser -
http://html5accessibility.com/
• HTML5 elements index - http://html5doctor.com/
• A preview of HTML5 (2007) -
http://www.alistapart.com/articles/previewofhtml5
21. Contact Us
If you have any questions, please don’t hesitate to
contact us:
User Vision
55 North Castle Street
Edinburgh, EH2 3QA
United Kingdom
Phone: (+44) 0131 225 0859
Email: markpalmer@uservision.co.uk
Hinweis der Redaktion
User Vision - Course for NSS
User Vision - Course for NSS User Vision - Course for NSS
User Vision - Course for NSS User Vision - Course for NSS
User Vision - Course for NSS User Vision - Course for NSS
User Vision - Course for NSS User Vision - Course for NSS
User Vision - Course for NSS User Vision - Course for NSS
User Vision - Course for NSS User Vision - Course for NSS
User Vision - Course for NSS User Vision - Course for NSS
User Vision - Course for NSS User Vision - Course for NSS
User Vision - Course for NSS User Vision - Course for NSS
User Vision - Course for NSS User Vision - Course for NSS
User Vision - Course for NSS User Vision - Course for NSS
User Vision - Course for NSS User Vision - Course for NSS
User Vision - Course for NSS User Vision - Course for NSS
User Vision - Course for NSS User Vision - Course for NSS
User Vision - Course for NSS User Vision - Course for NSS
User Vision - Course for NSS User Vision - Course for NSS
User Vision - Course for NSS User Vision - Course for NSS
User Vision - Course for NSS User Vision - Course for NSS
User Vision - Course for NSS User Vision - Course for NSS
User Vision - Course for NSS User Vision - Course for NSS
