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
Prochain SlideShare
Chargement dans…5
×

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

11 853 vues

Publié le

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.

Publié dans : Technologie, Design
7 commentaires
8 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
11 853
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 180
Actions
Partages
0
Téléchargements
75
Commentaires
7
J’aime
8
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Section 508: information technology is accessible to people with disabilities. 
  • Presentation elements which change the visual content (for eg. bold, italics)
  • A text-to-speech reader also understands the tags &lt;strong&gt; or &lt;em&gt; but it treats text output with those tags very differently to the way a visual browser responds. The TTS reader adjusts vocal tone or volume, rather than contrast or text style, which conveys the same meaning but through a different medium.
  • Use List instead of DIVsIndentation without spacer.gif use &lt;Ul&gt;
  • Use List instead of DIVsIndentation without spacer.gif use &lt;Ul&gt;
  • for good navigation in screen reader
  • for good navigation in screen reader
  • A text-to-speech reader also understands the tags &lt;strong&gt; or &lt;em&gt; but it treats text output with those tags very differently to the way a visual browser responds. The TTS reader adjusts vocal tone or volume, rather than contrast or text style, which conveys the same meaning but through a different medium.
  • A text-to-speech reader also understands the tags &lt;strong&gt; or &lt;em&gt; but it treats text output with those tags very differently to the way a visual browser responds. The TTS reader adjusts vocal tone or volume, rather than contrast or text style, which conveys the same meaning but through a different medium.
  • for good navigation in screen reader
  • for good navigation in screen reader
  • Use List instead of DIVsIndentation without spacer.gif use &lt;Ul&gt;
  • Use List instead of DIVsIndentation without spacer.gif use &lt;Ul&gt;
  • for good navigation in screen reader
  • for good navigation in screen reader
  • for good navigation in screen reader
  • for good navigation in screen reader
  • for good navigation in screen reader
  • for good navigation in screen reader
  • for good navigation in screen reader
  • for good navigation in screen reader
  • for good navigation in screen reader
  • for good navigation in screen reader
  • for good navigation in screen reader
  • for good navigation in screen reader
  • for good navigation in screen reader
  • for good navigation in screen reader
  • 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

    ×