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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (9)

Similar to HTML5 Accessibility

Similar to HTML5 Accessibility (20)

More from User Vision

More from User Vision (20)

Recently uploaded

Recently uploaded (20)

HTML5 Accessibility

Editor's Notes