1.Accessible Design with HTML5Developing Web for AccessibilityRaj LalSenior Engineer

2. GOAL: Accessibility with HTML51. What 2. Why3. How 3. 1. What is Web Accessibility ?Making Content & Feature of your Web pageEasily available to Everyone1 4. Content & FeatureCommunication Interaction Text Login Link ContactImagesSearch MediaRegistrationAnimation1 5. Easily AvailableEasy to Find, Understand and Use by:Browsers AssistiveSearchDevices Technologies Engines1 6. By Everyone Disabled, Temporary disabled Not so tech savvy users Senior Citizens, Parents Advanced Users, Mobile Users Low literacy level Users in extenuating circumstances1 7. By Everyone1 8. Why Accessibility ? 1. What2. Why 3. How 1. WHAT2 9. The Business Case Seniors Section 508 SEO = Traffic2 10. Seniors Seniors folks Population is 117 Million withannual spending power of 2 Trillion dollars 1/4 consumer is baby boomer (born 1946-1964) 57% working-age adults benefit Assistive Tech1. WHAT2 Book: Marketing to leading edge boomers and seniors , * Recent study: http://msdn.microsoft.com/en-us/library/windows/desktop/gg712257.aspx 11. Section 508 SupportDisabled Users2 12. Section 508Hearing MobilityCognitive Visual2 13. SEO Legal & General Group (L&G) Doubled numberof visitors http://www.legalandgeneral.com Within 24 hours search engine traffic saw a 25% increase, eventuallygrowing to 50%. Significant improvement in Google rankings for all target keywords Site visitors receiving quotations doubled within 3 months CNET - 30% increase in traffic from Google after CNET started providing transcripts1. WHAT2 http://www.w3.org/WAI/bcase/resources.html 14. How to HTML5 for Accessibility 1. What2. Why 3. How 1. WHAT 15. How to HTML5 for AccessibilityProgressive ARIA Pour HTML5 Enhance Accessibility Principle Semantics 1. WHAT3 16. Progressive EnhancementHTML CSSJavaScriptHTML CSS HTML 1. WHAT3 17. Progressive Enhancement Design in a Progressive enhancement way All content available by HTML alone Use semantically structured HTML All presentation elements in the style sheet Load JavaScript after the page is loaded 1. WHAT3 18. ARIA Accessibility APIsARIA = Accessible Rich Internet ApplicationsPart of HTML5 Specification1. WHAT3 19. ARIA Accessibility APIs ARIA helps Assistive Technology(AT) ARIA Make Web content Accessible to AT ARIA uses HTML and CSS Tags Most of ARIA is embedded in JS libraries1. WHAT3 20. How ARIA WorksVoiceOverWindows Eye Roles States Properties AssistiveTechnology ARIA PlatformHTMLAccessibility APIs1. WHATOSX Accessibility ProtocolMacLinux IAccessible23Windows MSAA 21. ARIA Accessibility APIs Uses a set of- Roles- States and- Properties 1. WHAT3 22. ARIA Roles Landmark Roles Where Am I Structural Roles Whats This Interface Widget Roles1. WHAT3 23. ARIA Roles Role type Role name Role name Landmarkapplication form roles bannermain complementary navigation contentinfo search 1. WHAT3 24. ARIA Roles Role typeRole nameRole name Structural articlelistitem rolescolumnheader mathdefinition notedirectorypresentationdocument regiongrouprowheadingrowheader 1. WHATimgseparator3list toolbar 25. ARIA RolesRole typeRole name Role nameInterfacestandalone widget spinbuttonWidget Roles alert status alertdialog tab buttontabpanel checkboxtextbox dialogtimer gridcelltooltip 1. WHAT linktreeitem log composite3 26. ARIA Roles Role typeRole nameRole name Interfacemarqueewidget Widget Roles menuitem comboboxmenuitemcheckbox gridmenuitemradiolistboxoption menuprogressbarmenubarradioradiogroup 1. WHATscrollbartablistslider Tree / treegrid3 27. ARIA States Dynamic Properties Global States Widget States 1. WHAT3 28. ARIA StatesAttribute type GlobalWidgetARIA statesaria-busy listitem aria-disabled math aria-grabbednote aria-hidden presentation aria-invalid region row rowheader 1. WHAT separator3 toolbar 29. ARIA PropertiesAttributeGlobalWidgetARIA aria-atomic aria-autocompleteProperties aria-controls aria-haspopup aria- aria-label describedby aria-level aria-dropeffect aria-multiline aria-flowto aria-multiselectable aria-haspopup 1. WHAT aria-label3 aria-labelledby 30. ARIA Properties Attribute typeGlobalWidget ARIA Properties aria-live aria-orientation aria-owns aria-readonly aria-relevant aria-required aria-sort aria-valuemax aria-valuemin aria-valuenow 1. WHAT aria-valuetext3 31. W3C POUR PrinciplePerceivableOperable Understand Robustable 1. WHAT3 32. Perceivable Text alternative to all non-text content Alternative for media using subtitles Transcribed text and Sign language 1. WHAT3 33. Operable Function accessible from keyboard alone No auto refresh, allow time based contents Proper use of Headings & Anchors Joysticks, Voice recognition or audio feedback 1. WHAT3 34. Understandable High color contrast 4.5:1 Use Sans serif fonts & allow resize Avoid auto-play of media, animation Avoid auto refresh, or flashy graphics Multiple visual cues, icons, audio for feedback 1. WHAT3 35. Robust Broken HTML tag can cause difficulty with AT Follow HTML standard specifications Syntactically correct HTML & validate page Proper lang attributes in the markup Use abbr tag with proper usage 1. WHAT3 36. HTML5 SemanticsSemantics are 30 new HTML elements whichdescribe the content of the page 1. WHAT3 37. Accessible HTML5 WebsiteHome FormContent 1. WHAT3 38. Accessible Home Page Accessible HTML5 1. WHATHTML53 39. Accessible Form 1. WHAT3 40. Accessible FormHTML5 Use label tag for describing form elements Associate labels with controls using for attribute Create a logical tab order with tabindex Use placeholder, type=email, url, text Use fieldset and legend to group form elements 1. WHAT3 41. Accessible Form ARIA Use role=main and keep one form in one page Use aria-required for required fields Use aria-live=assertive in the form for validation Use aria-describedby for adding help to fields 1. WHAT3 42. Accessible Content Accessible Image Accessible Text and Links1. WHAT3 43. Accessible ImageUse 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 1. WHAT3 44. Accessible Text and Links 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 Color in CSS with foreground & background color Simple and Machine readable words like Home page1. WHAT3 45. ReferenceWAI ARIA: http://www.w3.org/WAI/intro/ariaWCAG: http://www.w3.org/TR/WCAG/POUR PRINCIPLE: http://webaim.org/articles/pour/ 1. WHAT3 46. Thank You Raj LalTwitter @ iRajLal