Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-29 2012 @iRajLal
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-29 2012 @iRajLal

  • 4,657 views
Uploaded on

Learn how to design an interface that supports people with disabilities—and explains why it’s a good business decision. ...

Learn how to design an interface that supports people with disabilities—and explains why it’s a good business decision.

You’ll learn how to use the latest technologies to accommodate disabled users in the user interface, and see how an Accessible Interface 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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
4,657
On Slideshare
3,989
From Embeds
668
Number of Embeds
46

Actions

Shares
Downloads
62
Comments
2
Likes
4

Embeds 668

http://irajlal.blogspot.com 240
http://irajeshlal.blogspot.com 235
http://aakanshaindia.blogspot.com 31
http://irajeshlal.blogspot.in 28
http://irajlal.blogspot.in 24
http://www.linkedin.com 12
http://aakanshaindia.blogspot.in 9
http://irajlal.blogspot.fr 7
http://abtasty.com 7
http://irajlal.blogspot.com.br 6
http://www.pinterest.com 5
http://irajeshlal.blogspot.com.au 4
http://irajeshlal.blogspot.de 4
http://www.scoop.it 4
http://irajeshlal.blogspot.jp 3
https://twitter.com 3
http://irajeshlal.blogspot.be 3
http://irajlal.blogspot.kr 3
http://irajeshlal.blogspot.ca 3
http://irajeshlal.blogspot.mx 3
http://pinterest.com 2
http://irajlal.blogspot.dk 2
http://rajlal.wordpress.com 2
http://irajeshlal.blogspot.co.uk 2
http://irajeshlal.blogspot.se 2
http://irajeshlal.blogspot.ch 2
http://irajlal.blogspot.de 2
http://www.iphone-entreprise.com 2
http://irajeshlal.blogspot.co.il 1
https://si0.twimg.com 1
http://irajlal.blogspot.ca 1
http://irajlal.blogspot.co.nz 1
http://irajlal.blogspot.it 1
http://www.pearltrees.com 1
http://irajlal.blogspot.sg 1
http://irajlal.blogspot.com.au 1
http://www.copyscape.com 1
http://irajeshlal.blogspot.ru 1
http://irajlal.blogspot.ch 1
http://irajeshlal.blogspot.nl 1
http://irajlal.blogspot.be 1
http://irajlal.blogspot.nl 1
http://irajeshlal.blogspot.tw 1
http://irajeshlal.blogspot.com.es 1
http://irajlal.blogspot.co.uk 1
https://www.linkedin.com 1

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
  • About AccessibilityWhy is it important & Who is our customerAccessible Color and TextAccessible Web and W3C’s POURHow Assistive devices WorksAccessible Website with HTML5
  • HEARING: not being able to hear audio, video or any other kind of sound COGNITIVE: problem with the content itself MOBILITY: means inability to use mouse or keyboard. VISUAL: unable to see the content or distinguish color
  • HEARING: not being able to hear audio, video or any other kind of sound COGNITIVE: means inability to use mouse or keyboardMOBILITY: means inability to use mouse or keyboard. VISUAL: unable to see the content or distinguish color
  • HEARING: not being able to hear audio, video or any other kind of sound COGNITIVE: means inability to use mouse or keyboardMOBILITY: means inability to use mouse or keyboard. VISUAL: unable to see the content or distinguish color
  • And their importance in accessibility
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • And their importance in accessibility
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • And their importance in accessibility
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • And their importance in accessibility
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • ARIA uses a set of roles, states and properties to exposes your web page to the Accessibility APIs. These roles, states and properties are assigned on a webpage’s elements and they get exposed to the AT.
  • ARIA uses a set of roles, states and properties to exposes your web page to the Accessibility APIs. These roles, states and properties are assigned on a webpage’s elements and they get exposed to the AT.
  • ARIA uses a set of roles, states and properties to exposes your web page to the Accessibility APIs. These roles, states and properties are assigned on a webpage’s elements and they get exposed to the AT.
  • ARIA uses a set of roles, states and properties to exposes your web page to the Accessibility APIs. These roles, states and properties are assigned on a webpage’s elements and they get exposed to the AT.
  • ARIA uses a set of roles, states and properties to exposes your web page to the Accessibility APIs. These roles, states and properties are assigned on a webpage’s elements and they get exposed to the AT.
  • ARIA uses a set of roles, states and properties to exposes your web page to the Accessibility APIs. These roles, states and properties are assigned on a webpage’s elements and they get exposed to the AT.
  • ARIA uses a set of roles, states and properties to exposes your web page to the Accessibility APIs. These roles, states and properties are assigned on a webpage’s elements and they get exposed to the AT.
  • ARIA state is a dynamic property of an HTML element which represents data associated with the object but do not affect the essential nature of the element. There are two types of ARIA states, Global and Widget state
  • ARIA properties are similar to ARIA states but are relatively static in the web page and acts as additional properties to the HTML element.This will make the input field required in the form for Accessible devices.
  • ARIA properties are similar to ARIA states but are relatively static in the web page and acts as additional properties to the HTML element.This will make the input field required in the form for Accessible devices.
  • ARIA properties are similar to ARIA states but are relatively static in the web page and acts as additional properties to the HTML element.This will make the input field required in the form for Accessible devices.
  • ARIA properties are similar to ARIA states but are relatively static in the web page and acts as additional properties to the HTML element.This will make the input field required in the form for Accessible devices.
  • And their importance in accessibility
  • ARIA properties are similar to ARIA states but are relatively static in the web page and acts as additional properties to the HTML element.This will make the input field required in the form for Accessible devices.
  • ARIA properties are similar to ARIA states but are relatively static in the web page and acts as additional properties to the HTML element.This will make the input field required in the form for Accessible devices.
  • ARIA properties are similar to ARIA states but are relatively static in the web page and acts as additional properties to the HTML element.This will make the input field required in the form for Accessible devices.
  • ARIA properties are similar to ARIA states but are relatively static in the web page and acts as additional properties to the HTML element.This will make the input field required in the form for Accessible devices.
  • ARIA properties are similar to ARIA states but are relatively static in the web page and acts as additional properties to the HTML element.This will make the input field required in the form for Accessible devices.
  • And their importance in accessibility
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.

Transcript

  • 1. AccessibleDesignRaj LalNokia Inc.
  • 2. AgendaAbout Target Color & How Website Users Text Access. Web Works
  • 3. About Accessibility
  • 4. Accessibility is about making things Easy 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. Users Tech Savvy Disabled Users 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 Light Green Yellow Blue-Green Orange Blue Red Violet PurpleDark
  • 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 AccessibilityAccessible Not Accessible
  • 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 • W3C’s 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 Keyboards Visual, Cognitive, MobilityAnti-glare filter Visual, Cognitive, MobilityBraille Keyboards BlindRefreshable Braille display BlindColor/ Brightness keys Visual, CognitiveTrackballs / D-Pads MobilityHeadphones Cognitive, Hearing
  • 24. Assistive Technology SWSoftware UserText Enlarging sw Visual, CognitiveText/Audio Browser Visual, BlindScreen Readers Visual, Blind, CognitiveBraille sw Translator BlindSpeech Recognition Visual, Blind, Cognitive, MobilityVirtual Keyboards MobilityCaptioning Text Cognitive, Hearing, DeafShow Sound Cognitive, 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 Eye Roles States Properties AssistiveTechnology ARIA Platform HTML Accessibility APIs Mac OSX Accessibility Protocol Linux IAccessible2 Windows 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 – What’s This• Interface Widget Roles
  • 30. ARIA RolesRole type Role name Role nameLandmark application formroles banner main complementary navigation contentinfo search
  • 31. ARIA Roles Role type Role name Role name Structural article listitem roles columnheader math definition note directory presentation document region group row heading rowheader img separator list toolbar
  • 32. ARIA Roles Role type Role name Role name Interface standalone widget spinbutton Widget Roles alert status alertdialog tab button tabpanel checkbox textbox dialog timer gridcell tooltip link treeitem log composite
  • 33. ARIA Roles Role type Role name Role name Interface marquee widget Widget Roles menuitem combobox menuitemcheckbox grid menuitemradio listbox option menu progressbar menubar radio radiogroup scrollbar tablist slider Tree / treegrid
  • 34. ARIA States • Dynamic Properties • Global States • Widget States
  • 35. ARIA State Attribute type Global Widget ARIA states aria-busy listitem aria-disabled math aria-grabbed note aria-hidden presentation aria-invalid region row rowheader separator toolbar
  • 36. ARIA Properties • Relatively Static Properties
  • 37. ARIA PropertiesAttribute type Global WidgetARIA aria-atomic aria-Properties aria-controls autocomplete aria-describedby aria-haspopup aria-dropeffect aria-label aria-flowto aria-level aria-haspopup aria-multiline aria-label aria- aria-labelledby multiselectable
  • 38. ARIA PropertiesAttribute type Global WidgetARIA aria-live aria-orientationProperties aria-owns aria-readonly aria-relevant aria-required aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext
  • 39. 3. W3C’s POUR Principle
  • 40. The POUR PrincipalPerceivable Operable Understanda Robust ble
  • 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 JavaScript HTML 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 Contact About
  • 51. Accessible HTML5 Home page <header role="banner"> <nav role="navigation"> <section role=“main”> <footer role=“contentinfo”> … HTML5 Accessible HTML5
  • 52. Accessible HTML5 Contact Form
  • 53. Accessible HTML5 Form HTML5• 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.