Download as PPSX, PPTX
Uploaded byRaj Lal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
The document provides guidelines for developing accessible websites using HTML5, focusing on four key areas: hearing, mobility, cognitive, and visual accessibility. It outlines a seven-step process to enhance website accessibility, emphasizing techniques like progressive enhancement, proper HTML structure, and the use of alternative text for images and media. Additionally, it highlights the business case for accessibility, including compliance with laws and improved search engine optimization.
More Related Content
Similar to Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal
- 1. Accessible Design withHTML5 Developing Websites for Everyone Raj Lal Senior Engineer
- 2. Agenda About Business 4 Key Areas 7 Steps in Accessibility Case HTML5
- 3.
- 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. Disabled Seniors Citizens Low literacylevel Temporary illness Advanced Users For Everyone
- 8. Latest Technology Available HTML5 CSS3 JavaScript
- 9.
- 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.
- 12. 4 Key Areas Hearing Mobility Cognitive Visual
- 13. 1/4 Hearing Problem Cannot hear media Solution Make it PERCEIVABLE
- 14. 1/4 Hearing PERCEIVABLE Text alternative to all non-text content Alternative for media using subtitles Transcribed text and Sign language
- 15. 2/4 Mobility Problem Difficulty with Mouse, Keyboard Solution Make it OPERABLE
- 16. 2/4 Mobility OPERABLE 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 Solution Make it UNDERSTANDABLE
- 18. 3/4 Cognitive UNDERSTANDABLE 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 Visual ROBUST 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 POURPrinciple Perceivable Operable Understand Robust able
- 22. 7 Steps inHTML5
- 23. Step 1: MakeProgressive Enhancements
- 24. Step 1: ProgressiveEnhancement HTML CSS JavaScript HTML CSS HTML
- 25. Step 1: ProgressiveEnhancement Design in a Progressive enhancement way All content available by HTML alone Use semantically structured HTML All 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: AllowContent Navigation
- 30. Step 2: Allowcontent 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: Layoutwith Role <header role="banner"> <nav role="navigation"> <section role=“main”> <footer role=“toolbar”> <footer role=“button”> … HTML5 Accessible HTML5
- 33. Step 3: MakesFORMS Accessible
- 34. Step 3: MakeForms Accessible Use „label” tag for describing form elements Associate labels with controls using "for" attribute Create a logical tab order with “tabindex” For tabbed interface use aria-hidden and aria-pressed Use “fieldset” and “legend” to group form elements Use aria-live=“assertive” in the form for validation
- 35. Step 3: HTMLcode 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: HTMLcode 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: AccessibleImages
- 38. Step 4: MakeImages Accessible Use ”alt” attribute for alternative text for the image Use “title” attribute for tooltip Use role=“presentation” to ignore the image Use blank ”alt” for decorative images Use meaningful name for src=“meaningful.png”
- 39. Step 5: AccessibleMedia
- 40. Step 5: MakeMedia Accessible Media player features navigable by keyboard Closed captions with timed text files Switchable sign translation video Transcripts, caption and sign language
- 41. Step 6: KnowHTML5 Animations
- 42. Step 6: KnowHTML5 Animations CSS3 Canvas & Animation SVG & JavaScript JavaScript
- 43. Step 6: KnowHTML5 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.inlinesvg Perform better when smaller number 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: KnowHTML5 Animations Animation: Canvas: Context 2D • Bitmap drawing area • Rectangles, lines, arcs, paths • Stateless • No DOM support, single element • Check Modernizr.canvas Perform better when large number of objects and surface is small
- 46. Step 6: KnowHTML5 Animations Animation: CSS3 • Styles for Individual elements • Use CSS3 animation if available • Better than JavaScript based animation • Check Modernizr.csstransitions Can perform better with GPU acceleration
- 47. Step 6: KnowHTML5 Animations Animation: CSS3 var elem = $(„myelement'); JS CODE elem.addEventListener('click', function loop() { elem.style.left = „100px';}, false); #myelement CSS { … -ms-transition: opacity 1s ease; transition: opacity 1s ease; }
- 48. Step 7: MakeContent Easy
- 49. Step 7: MakeContent Easy Font size should always be relative , never fixed Links should be underlined and of different color Use Anchor links, easily navigable by screen readers Meaningful link text , avoid using “click here” or “more”
- 50. Step 7: MakeContent Easy Avoid long pages and minimize scrolling Test navigation with Keyboard tab Spelling help in Search Color in CSS with foreground & background color Simple and Machine (Screen reader) readable words like “Home page”
- 51. Thank You Raj Lal Twitter @ iRajLal
Editor's Notes
- #11 Section 508: information technology is accessible to people with disabilities.
- #26 Presentation elements which change the visual content (for eg. bold, italics)
- #27 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.
- #28 Use List instead of DIVsIndentation without spacer.gif use <Ul>
- #29 Use List instead of DIVsIndentation without spacer.gif use <Ul>
- #30 for good navigation in screen reader
- #31 for good navigation in screen reader
- #32 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.
- #33 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.
- #34 for good navigation in screen reader
- #35 for good navigation in screen reader
- #36 Use List instead of DIVsIndentation without spacer.gif use <Ul>
- #37 Use List instead of DIVsIndentation without spacer.gif use <Ul>
- #38 for good navigation in screen reader
- #39 for good navigation in screen reader
- #40 for good navigation in screen reader
- #41 for good navigation in screen reader
- #42 for good navigation in screen reader
- #43 for good navigation in screen reader
- #44 for good navigation in screen reader
- #45 for good navigation in screen reader
- #46 for good navigation in screen reader
- #47 for good navigation in screen reader
- #48 for good navigation in screen reader
- #49 for good navigation in screen reader
- #50 for good navigation in screen reader
- #51 for good navigation in screen reader