Successfully reported this slideshow.
Accessible Design with HTML5     Developing Websites for Everyone                               Raj Lal                   ...
Agenda  About         Business   4 Key Areas   7 Steps in  Accessibility Case                     HTML5
About Accessibility
About Accessibility  Accessibility is about making web pages                Easier to Use
About Accessibility                      Easier to Access             For Everyone                      Latest Technology ...
Easier to Access• Screen readers• Audio browsers• Only keyboard or mouse• Limited bandwidth• Old browsers, computers• Mobi...
DisabledSeniors CitizensLow literacy levelTemporary illnessAdvanced UsersFor Everyone
Latest Technology Available         HTML5 CSS3 JavaScript
The Business Case
The Business Case              Search Engine Optimization              Higher Search Engine Ranking              Senior Ci...
4 Key Areas
4 Key Areas          Hearing         Mobility         Cognitive              Visual
1/4 Hearing                Problem       Cannot hear media                Solution  Make it PERCEIVABLE
1/4 HearingPERCEIVABLE  Text alternative to all non-text content  Alternative for media using subtitles  Transcribed text ...
2/4 Mobility                      ProblemDifficulty with Mouse, Keyboard                      Solution         Make it OPE...
2/4 MobilityOPERABLE  All function accessible from keyboard alone  No auto refresh, allow stop time based contents  Naviga...
3/4 Cognitive                       Problem     Difficulty with Text content                       SolutionMake it UNDERST...
3/4 CognitiveUNDERSTANDABLE  High color contrast 4.5:1  Use San serif fonts & allow resize  Avoid auto-play of media, anim...
4/4 Visual                      Problem Cannot see the content or color                       Solution            Make it ...
4/4 VisualROBUST   Broken HTML tag can cause difficulty in screen reader   Follow HTML standard specifications   Use synta...
W3C’s The POUR PrinciplePerceivable   Operable   Understand   Robust                             able
7 Steps in HTML5
Step 1: Make Progressive Enhancements
Step 1: Progressive Enhancement                              HTML CSS                              JavaScript             ...
Step 1: Progressive EnhancementDesign in a Progressive enhancement wayAll content available by HTML aloneUse semantically ...
Step 1: Example    <h1>Top Level Heading</h1>    <section>     <h1>Second Level Heading</h1>     <p>An <strong>important</...
Step 1: Comparison                                      Bad Example <div class="depth0"> <a href="#" name="d26">  <img id=...
Step 1: Comparison                                           Bad Example <font size=”14px” color=”#000”> <b>Welcome to the...
Step 2: Allow Content Navigation
Step 2: Allow content navigation  Accessible navigation sidebar  Option to skip to main content  Menus accessible from key...
Step 2: Layout        OLD      HTML5
Step 2: Layout with Role                       <header role="banner">                       <nav role="navigation">       ...
Step 3: Makes FORMS Accessible
Step 3: Make Forms AccessibleUse „label” tag for describing form elementsAssociate labels with controls using "for" attrib...
Step 3: HTML code                                   Good example <ul class="group"> <li><input type="radio" id="EHTML" val...
Step 3: HTML code                                    Good example <fieldset>   <legend tabindex="10"><b>Personal Details</...
Step 4: Accessible Images
Step 4: Make Images AccessibleUse ”alt” attribute for alternative text for the imageUse “title” attribute for tooltipUse r...
Step 5: Accessible Media
Step 5: Make Media AccessibleMedia player features navigable by keyboardClosed captions with timed text filesSwitchable si...
Step 6: Know HTML5 Animations
Step 6: Know HTML5 Animations                                CSS3               Canvas &         Animation  SVG &        J...
Step 6: Know HTML5 Animations    Animation: SVG•    2D vector graphics using XML•    Object retained in the memory•    Ful...
HTML CODE<svg id="svgElement"width="800px" height="600px"viewBox="0 0 800 600"><rect x="0" y="0" width="100%" height="100%...
Step 6: Know HTML5 Animations    Animation: Canvas: Context 2D•    Bitmap drawing area•    Rectangles, lines, arcs, paths•...
Step 6: Know HTML5 Animations    Animation: CSS3•   Styles for Individual elements•   Use CSS3 animation if available•   B...
Step 6: Know HTML5 AnimationsAnimation: CSS3var elem = $(„myelement);             JS CODEelem.addEventListener(click,funct...
Step 7: Make Content Easy
Step 7: Make Content EasyFont size should always be relative , never fixedLinks should be underlined and of different colo...
Step 7: Make Content EasyAvoid long pages and minimize scrollingTest navigation with Keyboard tabSpelling help in SearchCo...
Thank You    Raj LalTwitter @ iRajLal
Nächste SlideShare
Wird geladen in …5
×

Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal

11.883 Aufrufe

Veröffentlicht am

Learn how to design an HTML5 application which supports people with disabilities, and know why its a good business decision. An accessible web application gives maximum reach to your application's information, functionalities and benefits, by allowing multiple input methods, different interaction models, and customization based on special needs and limited device supports. The four major disabilities that effect user capabilities are visual, hearing, mobility (difficulty in using the mouse), and cognitive disabilities, which are related to learning abilities. Know how to use the latest technologies to accommodate these users in the user interface.

Veröffentlicht in: Technologie, Design

Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal

  1. 1. Accessible Design with HTML5 Developing Websites for Everyone Raj Lal Senior Engineer
  2. 2. Agenda About Business 4 Key Areas 7 Steps in Accessibility Case HTML5
  3. 3. About Accessibility
  4. 4. About Accessibility Accessibility is about making web pages Easier to Use
  5. 5. About Accessibility Easier to Access For Everyone Latest Technology Available
  6. 6. Easier to Access• Screen readers• Audio browsers• Only keyboard or mouse• Limited bandwidth• Old browsers, computers• Mobile / touch devices
  7. 7. DisabledSeniors CitizensLow literacy levelTemporary illnessAdvanced UsersFor Everyone
  8. 8. Latest Technology Available HTML5 CSS3 JavaScript
  9. 9. The Business Case
  10. 10. The Business Case Search Engine Optimization Higher Search Engine Ranking Senior Citizens spend 2x time buying online Affluent customers may not be tech savvy Its also a Law (section 508)
  11. 11. 4 Key Areas
  12. 12. 4 Key Areas Hearing Mobility Cognitive Visual
  13. 13. 1/4 Hearing Problem Cannot hear media Solution Make it PERCEIVABLE
  14. 14. 1/4 HearingPERCEIVABLE Text alternative to all non-text content Alternative for media using subtitles Transcribed text and Sign language
  15. 15. 2/4 Mobility ProblemDifficulty with Mouse, Keyboard Solution Make it OPERABLE
  16. 16. 2/4 MobilityOPERABLE All function accessible from keyboard alone No auto refresh, allow stop time based contents Navigate with proper use of Headings & Anchors Joysticks, Voice recognition or audio feedback
  17. 17. 3/4 Cognitive Problem Difficulty with Text content SolutionMake it UNDERSTANDABLE
  18. 18. 3/4 CognitiveUNDERSTANDABLE High color contrast 4.5:1 Use San serif fonts & allow resize Avoid auto-play of media, animation Avoid auto refresh, or flashy graphics Use multiple visual cues, std. icons & audio feedback
  19. 19. 4/4 Visual Problem Cannot see the content or color Solution Make it ROBUST
  20. 20. 4/4 VisualROBUST Broken HTML tag can cause difficulty in screen reader Follow HTML standard specifications Use syntactically correct HTML & validate web page Proper “lang” attributes in the markup Use “acronym” and “abbr” tag with proper usage
  21. 21. W3C’s The POUR PrinciplePerceivable Operable Understand Robust able
  22. 22. 7 Steps in HTML5
  23. 23. Step 1: Make Progressive Enhancements
  24. 24. Step 1: Progressive Enhancement HTML CSS JavaScript HTML CSS HTML
  25. 25. Step 1: Progressive EnhancementDesign in a Progressive enhancement wayAll content available by HTML aloneUse semantically structured HTMLAll presentation elements in the style sheet
  26. 26. Step 1: Example <h1>Top Level Heading</h1> <section> <h1>Second Level Heading</h1> <p>An <strong>important</strong> text in <em>section</em> element </p> </section>
  27. 27. Step 1: Comparison Bad Example <div class="depth0"> <a href="#" name="d26"> <img id="vh_div16indic" src="pix/closed.gif" alt="Closed"> Security </a> </div> <span id="vh_div16"></span> Good example <li class="closed"><a href="#">Security</a></li>
  28. 28. Step 1: Comparison Bad Example <font size=”14px” color=”#000”> <b>Welcome to the site</b></font> <td style="width:180px" id="left-column">… Good example <style type="text/css"> <!-- td#left-column {width: 180px;} --> </style> <h1>Welcome to the site</h1> <table><tr><td id="left-column">…
  29. 29. Step 2: Allow Content Navigation
  30. 30. Step 2: Allow content navigation Accessible navigation sidebar Option to skip to main content Menus accessible from keyboard Proper nesting of headings, h1, h2, h3, etc.
  31. 31. Step 2: Layout OLD HTML5
  32. 32. Step 2: Layout with Role <header role="banner"> <nav role="navigation"> <section role=“main”> <footer role=“toolbar”> <footer role=“button”> … HTML5 Accessible HTML5
  33. 33. Step 3: Makes FORMS Accessible
  34. 34. Step 3: Make Forms AccessibleUse „label” tag for describing form elementsAssociate labels with controls using "for" attributeCreate a logical tab order with “tabindex”For tabbed interface use aria-hidden and aria-pressedUse “fieldset” and “legend” to group form elementsUse aria-live=“assertive” in the form for validation
  35. 35. Step 3: HTML code Good example <ul class="group"> <li><input type="radio" id="EHTML" value="html" checked> <label for="EHTML">HTML</label></li> <li><input type="radio" id="ETEXT" value="text" > <label for="ETEXT">Text</label></li> </ul>
  36. 36. Step 3: HTML code Good example <fieldset> <legend tabindex="10"><b>Personal Details</b> </legend> <label for="name">Name:</label> <input id="name" type="text" size="30" tabindex="11"> <br> <label for="id">ID Number:</label> <input id="id" type="text" size="10" tabindex="12"> </fieldset>
  37. 37. Step 4: Accessible Images
  38. 38. Step 4: Make Images AccessibleUse ”alt” attribute for alternative text for the imageUse “title” attribute for tooltipUse role=“presentation” to ignore the imageUse blank ”alt” for decorative imagesUse meaningful name for src=“meaningful.png”
  39. 39. Step 5: Accessible Media
  40. 40. Step 5: Make Media AccessibleMedia player features navigable by keyboardClosed captions with timed text filesSwitchable sign translation videoTranscripts, caption and sign language
  41. 41. Step 6: Know HTML5 Animations
  42. 42. Step 6: Know HTML5 Animations CSS3 Canvas & Animation SVG & JavaScript JavaScript
  43. 43. Step 6: Know HTML5 Animations Animation: SVG• 2D vector graphics using XML• Object retained in the memory• Full DOM support• SVG elements can be styled• Check Modernizr.svg Modernizr.inlinesvgPerform better when smallernumber of elements and large surface
  44. 44. HTML CODE<svg id="svgElement"width="800px" height="600px"viewBox="0 0 800 600"><rect x="0" y="0" width="100%" height="100%" rx="10" ry="10" style="fill: white; stroke: black;" /><circle id="circle0" cx="40" cy="40" r="40"style="fill: orange; stroke: black; stroke-width: 1;" /></svg>
  45. 45. Step 6: Know HTML5 Animations Animation: Canvas: Context 2D• Bitmap drawing area• Rectangles, lines, arcs, paths• Stateless• No DOM support, single element• Check Modernizr.canvasPerform better when large number of objects and surface issmall
  46. 46. Step 6: Know HTML5 Animations Animation: CSS3• Styles for Individual elements• Use CSS3 animation if available• Better than JavaScript based animation• Check Modernizr.csstransitionsCan perform better with GPU acceleration
  47. 47. Step 6: Know HTML5 AnimationsAnimation: CSS3var elem = $(„myelement); JS CODEelem.addEventListener(click,function loop() {elem.style.left = „100px;}, false);#myelement CSS{…-ms-transition: opacity 1s ease;transition: opacity 1s ease;}
  48. 48. Step 7: Make Content Easy
  49. 49. Step 7: Make Content EasyFont size should always be relative , never fixedLinks should be underlined and of different colorUse Anchor links, easily navigable by screen readersMeaningful link text , avoid using “click here” or “more”
  50. 50. Step 7: Make Content EasyAvoid long pages and minimize scrollingTest navigation with Keyboard tabSpelling help in SearchColor in CSS with foreground & background colorSimple and Machine (Screen reader) readablewords like “Home page”
  51. 51. Thank You Raj LalTwitter @ iRajLal

×