UX and Accessibility


Published on

User experience is complex and multifaceted. One of those facets is making services usable to people in different situations. The needs of people with disabilities, both apparent and not, must be considered on our mobile and web platforms if we are to provide good service and abide by federal and state regulations. Cervone looks at some of the common accessibility issues people may have with mobile sites and websites and how to address those issues while still creating a visually stimulating and interactive environment for all.

Published in: Education, Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

UX and Accessibility

  1. 1. FrankCervone, Ph.D.Vice Chancellor for Information Services and CIOPurdue University CalumetInternet Librarian 2012
  2. 2. EffectiveEfficientSafeUsefulEasy to learnEasy to rememberSatisfying/rewardingFun/EnjoyableEntertainingHelpfulMotivatingAesthetically pleasingMotivatingUsability goals differ from user experiencegoals
  3. 3. Understand theunderlying problembefore attempting tosolve itDont hurt anyoneMake things simple andintuitiveAcknowledge that theuser is not like youHave empathyAdapted from Hess,W. (2010). Guiding Principles for UX Designers, UXMagazine, March 10, 2010
  4. 4. Images courtesy of baddesign.com
  5. 5. Attributes of an object that indicate how to use somethingImages courtesy of baddesign.com
  6. 6. Inform user about what has been or needs to be done Sound Highlighting Animation
  7. 7. Restrict the possible actions that can be performedHelp prevent selecting incorrect options
  8. 8. InterfacesSimilar operations andsimilar elements forsimilar tasksConsistent interfacesEasier to learnEasier to useVideo courtesy of baddesign.com
  9. 9. Original instructions Suggested instructionsImages courtesy of baddesign.com
  10. 10.  It’s the right thing to do TheAmericans with DisabilitiesAct (ADA) 42 U.S.C. § 12101 Title III of the ADA prohibits discriminationagainst an individual "on the basis of disability in the full and equalenjoyment of the goods, services, facilities,privileges, advantages, or accommodations of anyplace of public accommodation…."
  11. 11. As defined by the ADA Amendments Actof 2008:“With respect to an individual, a physical ormental impairment that substantially limitsone or more major life activities of suchindividual; a record of such an impairment orbeing regarded as having such animpairment…”
  12. 12.  Seeing Hearing Eating Sleeping Walking Standing Lifting Bending Speaking Breathing Learning Reading Thinking Communicating Working
  13. 13. • Many accessibility techniques focus on visualdisabilities• Need to remember all categories ofdisabilities• Visual (including blind, low vision, and color blind)• Cognitive learning• Auditory• Motor/Physical• Speech
  14. 14.  An adjustment or auxiliary aid Does not cause a fundamental alteration inthe nature or core function of a program orservice Does not impose an undue financial oradministrative burden to the institution
  15. 15.  Equitable use Flexibility in use Simple and intuitive Perceptible information Tolerance for error Low physical effort Size and space for approach and use
  16. 16.  If you do not provide reasonableaccommodations, you could be breaking thelaw In higher education, section 504 of the 1973RehabilitationAct protects the rights ofindividuals Federal financial assistance from the U.S.Department of Education Enforced by the Office of Civil Rights (OCR)
  17. 17. • Use relative font sizes on web pages• Provide alternative image text• Use meaningful names for links• Explicitly state information• Provide skip links
  18. 18.  Ensure font size isexpressed inpercentages or ems Do not express in pointsor pixels Why? Allows users to make thetext larger or smaller asdesired
  19. 19.  Accessibility requires text equivalents for allmeaningful graphics and objects (i.e., video) Text should be meaningful Graphics with text must use an "alt tag“ toprovide access to the text Graphics used only for positioning should belabeled with alt=" " (quote, space, quote)
  20. 20.  NOT ALT=”Six cute kittens” ALT=“Six inquisitivekittens, three with tuxedomarkings on the left andthree with black fur on theright”© All rights reserved by Romana.R
  21. 21.  "Click here" is meaningless in most contexts Particularly troublesome when movingthrough a page by tabbing Best practice is similar considerations to thatof the ALT tag Text should be meaningful Express clearly where the link will go or whatwill happen after selection
  22. 22.  Indentation or color alone is not sufficient toconvey meaning Is not meaningful to assistive technology Don’t rely on indicating required fields bymaking them bold Explicitly state required fields are "required"
  23. 23.  Skip links allow assistive software to bypassinformation repeated on every page Skip links are typically implemented by1. Placing a link before the repeated information suchas<a href="#content"><img src="empty.gif" height="1" border="0"alt="Skip Main Navigation" width=“1"></a>2. Placing an anchor at the beginning of actual content<a name="content"></a> The image can be transparent Won’t affect visual display Page readers will indicate "skip main navigation".
  24. 24.  Forms need to be logical and consistent Question or description for input field shouldbe on the same line as the input field itself Place labels consistently on the same side ofthe input field Explicitly identify what information isrequired Make the word “Required” part of the label foreach mandatory field
  25. 25.  Specify column header rows in tables Use styles in documents Use short titles in headings Ensure all heading styles are in the correct order Use simple table structure Avoid using blank cells for formatting Structure layout tables for easy navigation Avoid using repeated blank characters Avoid image watermarks Include closed captions for any audio
  26. 26.  Including information a screen reader alreadyprovides Misusing the tabindex attribute Overusing access keys/Creating conflicts withkeyboard shortcuts
  27. 27.  Using alt text “image of a down arrow thatlinks within thisWeb page” on an anchor link Duplicates information the screen reader provides A better option Simple alt text “down arrow” Shortens amount of time to discover purpose oflink More accurate and faster
  28. 28.  Can confuse the order in which theTab keymoves in a form. Makes the form more difficult to navigate Often occurs as the result of coding errors Most often when some elements are included inthe sequence, but others are left out Incorrect tab order Makes it difficult for a person listening to a webpage Can obscures what part of a page the section is in
  29. 29.  Adding access keys may seem helpful However, assistive technology often relies onkeyboard shortcuts Users often are very familiar with these shortcuts Conflicts between access keys of the assistivetechnology and keyboard shortcuts create User confusion Unexpected outcomes
  30. 30.  Checking for color contrast http://www.accesskeys.org/tools/color-contrast.html View in various colorblindness scenarios http://colorfilter.wickline.org/
  31. 31.  WebAccessibilityAccessTool http://wave.webaim.org/ WebAccessibilityChecker http://achecker.ca/
  32. 32.  Creating accessible Powerpoint presentations http://office.microsoft.com/en-us/powerpoint-help/creating-accessible-powerpoint-presentations-HA102013555.aspx http://webaim.org/techniques/powerpoint/ Checking accessibility of a Powerpointpresentation http://office.microsoft.com/en-us/powerpoint-help/check-for-accessibility-issues-HA010369192.aspx
  33. 33.  Creating accessibleWord documents http://office.microsoft.com/en-us/word-help/creating-accessible-word-documents-HA101999993.aspx http://webaim.org/techniques/word/
  34. 34.  Manual captioning software http://ncam.wgbh.org/invent_build/web_multimedia/tools-guidelines/magpie
  35. 35.  Frank CervoneVice Chancellor for Information Services and CIOPurdue University Calumetfcervone@purduecal.edu