HTML5 Accessibility

HTML5 and Accessibility

Mark Palmer

About me

• Mark Palmer
• Accessibility Consultant with User Vision
• Background in:
– System testing
– Web design and development
– Management of development team implementing
accessibility

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

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.

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

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>

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>

Semantics

• Greater semantic markup using new elements
– <article>
– <aside>
– <header>
– <footer>
– <nav>
– <section>

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>

Form elements

• Selection of new input types and inbuilt validation

Validation ‘date’ input type ‘range’ input type

Form elements (2)

• Selection of new input types and inbuilt validation

Color picker ‘search’ input type ‘email’ input type

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>

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

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

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.

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

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

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

HTML5 Accessibility

More Related Content

What's hot (20)

Viewers also liked (9)

Similar to HTML5 Accessibility (20)

More from User Vision (20)

Recently uploaded (20)

HTML5 Accessibility

Editor's Notes