Your SlideShare is downloading. ×
0
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
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

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

9,572

Published on

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 …

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.

Published in: Technology, Design
7 Comments
7 Likes
Statistics
Notes
No Downloads
Views
Total Views
9,572
On Slideshare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
65
Comments
7
Likes
7
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
  • 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 <strong> or <em> 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 <Ul>
  • Use List instead of DIVsIndentation without spacer.gif use <Ul>
  • for good navigation in screen reader
  • for good navigation in screen reader
  • A text-to-speech reader also understands the tags <strong> or <em> 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 <strong> or <em> 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 <Ul>
  • Use List instead of DIVsIndentation without spacer.gif use <Ul>
  • 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
  • Transcript

    1. Accessible Design with HTML5 Developing Websites for Everyone Raj Lal Senior Engineer
    2. Agenda About Business 4 Key Areas 7 Steps in Accessibility Case HTML5
    3. About Accessibility
    4. About Accessibility Accessibility is about making web pages Easier to Use
    5. About Accessibility Easier to Access For Everyone Latest Technology Available
    6. Easier to Access• Screen readers• Audio browsers• Only keyboard or mouse• Limited bandwidth• Old browsers, computers• Mobile / touch devices
    7. DisabledSeniors CitizensLow literacy levelTemporary illnessAdvanced UsersFor Everyone
    8. Latest Technology Available HTML5 CSS3 JavaScript
    9. The Business Case
    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. 4 Key Areas
    12. 4 Key Areas Hearing Mobility Cognitive Visual
    13. 1/4 Hearing Problem Cannot hear media Solution Make it PERCEIVABLE
    14. 1/4 HearingPERCEIVABLE Text alternative to all non-text content Alternative for media using subtitles Transcribed text and Sign language
    15. 2/4 Mobility ProblemDifficulty with Mouse, Keyboard Solution Make it OPERABLE
    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. 3/4 Cognitive Problem Difficulty with Text content SolutionMake it UNDERSTANDABLE
    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. 4/4 Visual Problem Cannot see the content or color Solution Make it ROBUST
    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. W3C’s The POUR PrinciplePerceivable Operable Understand Robust able
    22. 7 Steps in HTML5
    23. Step 1: Make Progressive Enhancements
    24. Step 1: Progressive Enhancement HTML CSS JavaScript HTML CSS HTML
    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. 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. 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. 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. Step 2: Allow Content Navigation
    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. Step 2: Layout OLD HTML5
    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. Step 3: Makes FORMS Accessible
    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. 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. 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. Step 4: Accessible Images
    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. Step 5: Accessible Media
    40. Step 5: Make Media AccessibleMedia player features navigable by keyboardClosed captions with timed text filesSwitchable sign translation videoTranscripts, caption and sign language
    41. Step 6: Know HTML5 Animations
    42. Step 6: Know HTML5 Animations CSS3 Canvas & Animation SVG & JavaScript JavaScript
    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. 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. 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. 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. 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. Step 7: Make Content Easy
    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. 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. Thank You Raj LalTwitter @ iRajLal

    ×