AccessibleDesignRaj LalNokia Inc.
AgendaAbout   Target   Color &    How      Website        Users     Text     Access.                            Web       ...
About Accessibility
Accessibility is about making things    Easy to Use by Everyone
AboutAccessible = ClearAccessible = UsableAccessible = UnobtrusiveAccessible = Multiple Ways to Interact
Who are the Users ?
User with special needsHearing                   MobilityCognitive                 Visual
Not so Tech Savvy users • Parents • Seniors Citizens • Low literacy level • Using Old Computers/ Browsers • Limited Bandwi...
Tech Savvy users • Prefer Keyboard only • Temporary Disabled • Mobile User, Tablets, e-Readers • In extenuating circumstan...
Users        Tech        Savvy     Disabled        Users             Not so           Tech-Savvy
Users = All of Us • 20% of user 80% of Time • 80% of the user 20% of the Time
Accessible Color & Text
Color                                   Light              Green    Yellow Blue-Green                      Orange       Bl...
3 Rules for Visual Accessibility1. Exaggerate lightness differences between   foreground and background colors2. Choose da...
Visual AccessibilityAccessible              Not                        Accessible
3 Rules for Visual Accessibility
8 Guidelines for Accessible Text• Highest Possible Contrast for main content• Use Color contrasts for Title or highlighted...
8 Guidelines for Accessible Text• Use Regular Serif/San Serif fonts• Cursive, decorative fonts, italic case, use sparingly...
How Accessible Web Works ?
3 Elements of Accessible Web • Assistive Technology(AT) • ARIA & Accessibility API • W3C’s POUR Principle
1. Assistive Technology
Assistive Technology Users • Visually Impaired • Blind • Cognitive, Learning Disability • Deaf • Hearing Impaired • Mobili...
Assistive TechnologyHardware                   UserLarge Monitors             Visual, Cognitive, MobilityLarge Print Keybo...
Assistive Technology SWSoftware                UserText Enlarging sw       Visual, CognitiveText/Audio Browser      Visual...
2. ARIA & Accessibility APIs
Accessible Rich Internet Applications • ARIA helps Assistive Technology(AT) • ARIA Make Web content Accessible to AT • ARI...
How ARIA WorksVoiceOverWindows Eye                          Roles    States Properties AssistiveTechnology                ...
ARIA• Uses a set of Roles, States, and Properties• Roles, States & Properties assigned to HTML• Exposes web page to Access...
ARIA Roles• Landmark Roles – Where Am I• Structural Roles – What’s This• Interface Widget Roles
ARIA RolesRole type   Role name       Role nameLandmark    application     formroles       banner          main           ...
ARIA Roles Role type    Role name      Role name Structural   article        listitem roles        columnheader   math    ...
ARIA Roles Role type      Role name           Role name Interface      standalone widget   spinbutton Widget Roles   alert...
ARIA Roles Role type      Role name          Role name Interface      marquee            widget Widget Roles   menuitem   ...
ARIA States • Dynamic Properties • Global States • Widget States
ARIA State Attribute type Global          Widget ARIA states    aria-busy       listitem                aria-disabled   ma...
ARIA Properties • Relatively Static Properties
ARIA PropertiesAttribute type Global             WidgetARIA           aria-atomic        aria-Properties     aria-controls...
ARIA PropertiesAttribute type Global          WidgetARIA           aria-live       aria-orientationProperties     aria-own...
3. W3C’s POUR Principle
The POUR PrincipalPerceivable   Operable   Understanda   Robust                              ble
Perceivable • Text alternative to all non-text content • Alternative for media using subtitles • Transcribed text and Sign...
Operable • Function accessible from keyboard alone • No auto refresh, allow time based contents • Proper use of Headings &...
Understandable • High color contrast 4.5:1 • Use San serif fonts & allow resize • Avoid auto-play of media, animation • Av...
Robust• Broken HTML tag can cause difficulty with AT• Follow HTML standard specifications• Syntactically correct HTML & va...
Developing an Accessible Website using HTML5
Accessible Website • Progressive Enhancement with ARIA • Developing an Accessible Website   - Homepage   - About Page   - ...
Progressive EnhancementGood Design Is Unobtrusive- Dieter Rams
Progressive Enhancement                     HTML CSS                     JavaScript          HTML CSS HTML
Progressive Enhancement• Design in a Progressive enhancement way• All content available by HTML alone• Use semantically st...
Accessible Website with HTML5                 Home       Contact          About
Accessible HTML5 Home page              <header role="banner">              <nav role="navigation">              <section ...
Accessible HTML5 Contact Form
Accessible HTML5 Form  HTML5• Use label tag for describing form elements• Associate labels with controls using for attribu...
Accessible HTML5 Form ARIA• Use role=main and keep one form in one page• Use aria-required for required fields• Use aria-l...
Accessible About Page• Accessible Image• Accessible Text and Links• Accessible Media
Accessible ImageUse alt attribute for alternative text for the imageUse title attribute for tooltipUse role=presentation t...
Accessible Text and Links• Font size should always be relative , never fixed• Links should be underlined and of different ...
Accessible Media• Media player features navigable by keyboard• Closed captions with timed text files• Switchable sign tran...
Reference • W3C ARIA   http://dev.w3.org/html5/markup/aria/aria.html • Accessible Design   http://www.lighthouse.org/acces...
thank youRaj Lal@ iRajLalNokia Inc.
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-29 2012 @iRajLal
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-29 2012 @iRajLal
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-29 2012 @iRajLal
Próximos SlideShares
Carregando em…5
×

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

7.251 visualizações

Publicada em

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.

Publicada em: Tecnologia

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

  1. 1. AccessibleDesignRaj LalNokia Inc.
  2. 2. AgendaAbout Target Color & How Website Users Text Access. Web Works
  3. 3. About Accessibility
  4. 4. Accessibility is about making things Easy to Use by Everyone
  5. 5. AboutAccessible = ClearAccessible = UsableAccessible = UnobtrusiveAccessible = Multiple Ways to Interact
  6. 6. Who are the Users ?
  7. 7. User with special needsHearing MobilityCognitive Visual
  8. 8. Not so Tech Savvy users • Parents • Seniors Citizens • Low literacy level • Using Old Computers/ Browsers • Limited Bandwidth
  9. 9. Tech Savvy users • Prefer Keyboard only • Temporary Disabled • Mobile User, Tablets, e-Readers • In extenuating circumstances - Limited attention, sound, light
  10. 10. Users Tech Savvy Disabled Users Not so Tech-Savvy
  11. 11. Users = All of Us • 20% of user 80% of Time • 80% of the user 20% of the Time
  12. 12. Accessible Color & Text
  13. 13. Color Light Green Yellow Blue-Green Orange Blue Red Violet PurpleDark
  14. 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. 15. Visual AccessibilityAccessible Not Accessible
  16. 16. 3 Rules for Visual Accessibility
  17. 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. 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. 19. How Accessible Web Works ?
  20. 20. 3 Elements of Accessible Web • Assistive Technology(AT) • ARIA & Accessibility API • W3C’s POUR Principle
  21. 21. 1. Assistive Technology
  22. 22. Assistive Technology Users • Visually Impaired • Blind • Cognitive, Learning Disability • Deaf • Hearing Impaired • Mobility, Physically handicapped
  23. 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. 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. 25. 2. ARIA & Accessibility APIs
  26. 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. 27. How ARIA WorksVoiceOverWindows Eye Roles States Properties AssistiveTechnology ARIA Platform HTML Accessibility APIs Mac OSX Accessibility Protocol Linux IAccessible2 Windows MSAA
  28. 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. 29. ARIA Roles• Landmark Roles – Where Am I• Structural Roles – What’s This• Interface Widget Roles
  30. 30. ARIA RolesRole type Role name Role nameLandmark application formroles banner main complementary navigation contentinfo search
  31. 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. 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. 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. 34. ARIA States • Dynamic Properties • Global States • Widget States
  35. 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. 36. ARIA Properties • Relatively Static Properties
  37. 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. 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. 39. 3. W3C’s POUR Principle
  40. 40. The POUR PrincipalPerceivable Operable Understanda Robust ble
  41. 41. Perceivable • Text alternative to all non-text content • Alternative for media using subtitles • Transcribed text and Sign language
  42. 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. 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. 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. 45. Developing an Accessible Website using HTML5
  46. 46. Accessible Website • Progressive Enhancement with ARIA • Developing an Accessible Website - Homepage - About Page - Contact Form
  47. 47. Progressive EnhancementGood Design Is Unobtrusive- Dieter Rams
  48. 48. Progressive Enhancement HTML CSS JavaScript HTML CSS HTML
  49. 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. 50. Accessible Website with HTML5 Home Contact About
  51. 51. Accessible HTML5 Home page <header role="banner"> <nav role="navigation"> <section role=“main”> <footer role=“contentinfo”> … HTML5 Accessible HTML5
  52. 52. Accessible HTML5 Contact Form
  53. 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. 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. 55. Accessible About Page• Accessible Image• Accessible Text and Links• Accessible Media
  56. 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. 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. 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. 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. 60. thank youRaj Lal@ iRajLalNokia Inc.

×