1.AccessibleDesignRaj LalNokia Inc.

2. AgendaAbout Target Color &HowWebsiteUsers Text Access.Web Works 3. About Accessibility 4. Accessibility is about making thingsEasy to Use by Everyone 5. AboutAccessible = ClearAccessible = UsableAccessible = UnobtrusiveAccessible = Multiple Ways to Interact 6. Who are the Users ? 7. User with special needsHearing MobilityCognitive Visual 8. Not so Tech Savvy users Parents Seniors Citizens Low literacy level Using Old Computers/ Browsers Limited Bandwidth 9. Tech Savvy users Prefer Keyboard only Temporary Disabled Mobile User, Tablets, e-Readers In extenuating circumstances - Limited attention, sound, light 10. UsersTechSavvy DisabledUsers Not so Tech-Savvy 11. Users = All of Us 20% of user 80% of Time 80% of the user 20% of the Time 12. Accessible Color & Text 13. Color LightGreenYellow Blue-GreenOrange Blue RedVioletPurpleDark 14. 3 Rules for Visual Accessibility1. Exaggerate lightness differences between foreground and background colors2. Choose dark colors with hues from the bottom half against light colors from top3. Avoid contrasting hues from adjacent parts of the hue circle 15. Visual AccessibilityAccessibleNotAccessible 16. 3 Rules for Visual Accessibility 17. 8 Guidelines for Accessible Text Highest Possible Contrast for main content Use Color contrasts for Title or highlighted text Use large types, minimum 16 points Minimum 25% Spacing between lines 18. 8 Guidelines for Accessible Text Use Regular Serif/San Serif fonts Cursive, decorative fonts, italic case, use sparingly Use San Serif fonts for small text Avoid close letter spacing 19. How Accessible Web Works ? 20. 3 Elements of Accessible Web Assistive Technology(AT) ARIA & Accessibility API W3Cs POUR Principle 21. 1. Assistive Technology 22. Assistive Technology Users Visually Impaired Blind Cognitive, Learning Disability Deaf Hearing Impaired Mobility, Physically handicapped 23. Assistive TechnologyHardware UserLarge Monitors Visual, Cognitive, MobilityLarge Print KeyboardsVisual, Cognitive, MobilityAnti-glare filterVisual, Cognitive, MobilityBraille KeyboardsBlindRefreshable Braille display BlindColor/ Brightness keys Visual, CognitiveTrackballs / D-PadsMobilityHeadphones Cognitive, Hearing 24. Assistive Technology SWSoftwareUserText Enlarging sw Visual, CognitiveText/Audio BrowserVisual, BlindScreen ReadersVisual, Blind, CognitiveBraille sw Translator BlindSpeech RecognitionVisual, Blind, Cognitive, MobilityVirtual Keyboards MobilityCaptioning Text Cognitive, Hearing, DeafShow SoundCognitive, Hearing, Deaf 25. 2. ARIA & Accessibility APIs 26. Accessible Rich Internet Applications ARIA helps Assistive Technology(AT) ARIA Make Web content Accessible to AT ARIA uses HTML and CSS Tags ARIA is a W3C Initiative & part of HTML5 Most of ARIA is embedded in JS libraries 27. How ARIA WorksVoiceOverWindows EyeRolesStates Properties AssistiveTechnology ARIA PlatformHTMLAccessibility APIsMac OSX Accessibility ProtocolLinux IAccessible2Windows MSAA 28. ARIA Uses a set of Roles, States, and Properties Roles, States & Properties assigned to HTML Exposes web page to Accessibility APIs AT uses Accessibility APIs to access Webpage 29. ARIA Roles Landmark Roles Where Am I Structural Roles Whats This Interface Widget Roles 30. ARIA RolesRole type Role name Role nameLandmarkapplication formroles bannermaincomplementary navigationcontentinfo search 31. ARIA Roles Role typeRole nameRole name Structural articlelistitem rolescolumnheader mathdefinition notedirectorypresentationdocument regiongrouprowheadingrowheaderimgseparatorlist toolbar 32. ARIA Roles Role typeRole name Role name Interfacestandalone widget spinbutton Widget Roles alert statusalertdialog tabbuttontabpanelcheckboxtextboxdialogtimergridcelltooltiplinktreeitemlog composite 33. ARIA Roles Role typeRole nameRole name Interfacemarqueewidget Widget Roles menuitem comboboxmenuitemcheckbox gridmenuitemradiolistboxoption menuprogressbarmenubarradioradiogroupscrollbartablistslider Tree / treegrid 34. ARIA States Dynamic Properties Global States Widget States 35. ARIA State Attribute type GlobalWidget ARIA statesaria-busy listitemaria-disabled matharia-grabbednotearia-hiddenpresentationaria-invalidregionrowrowheaderseparatortoolbar 36. ARIA Properties Relatively Static Properties 37. ARIA PropertiesAttribute type Global WidgetARIA aria-atomicaria-Properties aria-controlsautocomplete aria-describedby aria-haspopup aria-dropeffectaria-label aria-flowtoaria-level aria-haspopuparia-multiline aria-label aria- aria-labelledbymultiselectable 38. ARIA PropertiesAttribute type GlobalWidgetARIA aria-live aria-orientationProperties aria-owns aria-readonly aria-relevant aria-required aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext 39. 3. W3Cs POUR Principle 40. The POUR PrincipalPerceivable Operable Understanda Robustble 41. Perceivable Text alternative to all non-text content Alternative for media using subtitles Transcribed text and Sign language 42. Operable Function accessible from keyboard alone No auto refresh, allow time based contents Proper use of Headings & Anchors Joysticks, Voice recognition or audio feedback 43. 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 Multiple visual cues, icons, audio for feedback 44. 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 45. Developing an Accessible Website using HTML5 46. Accessible Website Progressive Enhancement with ARIA Developing an Accessible Website - Homepage - About Page - Contact Form 47. Progressive EnhancementGood Design Is Unobtrusive- Dieter Rams 48. Progressive Enhancement HTML CSS JavaScriptHTML CSS HTML 49. 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 50. Accessible Website with HTML5 Home ContactAbout 51. Accessible HTML5 Home pageHTML5Accessible HTML5 52. Accessible HTML5 Contact Form 53. Accessible HTML5 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 54. Accessible HTML5 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 55. Accessible About Page Accessible Image Accessible Text and Links Accessible Media 56. 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 57. 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 page 58. Accessible Media Media player features navigable by keyboard Closed captions with timed text files Switchable sign translation video Transcripts, caption and sign language SVG animation is more accessible than Canvas 59. Reference W3C ARIA http://dev.w3.org/html5/markup/aria/aria.html Accessible Design http://www.lighthouse.org/accessibility/design Dieter Rams 10 good design Principals http://en.wikipedia.org/wiki/Dieter_Rams 60. thank youRaj Lal@ iRajLalNokia Inc.