Your SlideShare is downloading. ×
HTML5 Accessibility
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 Accessibility

1,118

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,118
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • 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
  • Transcript

    • 1. HTML5 and AccessibilityMark Palmer
    • 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>
    • 9. Semantics (2)• From
    • 10. Semantics (3)• To
    • 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 validationValidation ‘date’ input type ‘range’ input type
    • 13. Form elements (2)• Selection of new input types and inbuilt validationColor 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 ProfessionalsAssociation" src="/images/site/usability_professionals_association.gif"><p>The Scottish Usability ProfessionalsAssociation (SUPA) is a chapter of theUsability 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 wont 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.
    • 18. Concerns
    • 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 UsIf you have any questions, please don’t hesitate tocontact us: User Vision 55 North Castle Street Edinburgh, EH2 3QA United Kingdom Phone: (+44) 0131 225 0859 Email: markpalmer@uservision.co.uk

    ×