Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

jQuery: Accessibility, Mobile und Responsive

767 views

Published on

Where are the Elements of Surprise between Accessibility, Mobile First and Responsive Design.

Published in: Internet
  • Be the first to comment

jQuery: Accessibility, Mobile und Responsive

  1. 1. jQuery Conference 2015 in Berlin Accessibility, 
 Mobile 
 and Responsive @webinterface jQuery Image from: http://www.kinderfilmwelt.de
  2. 2. Peter Rozek Work at ecx.io (Digital Agency) Skills: UX Usability Accessibility Frontend @webinterface
  3. 3. @webinterface Accessibility = 
 Dark Side
  4. 4. @webinterface Mobile First Responsive
  5. 5. @webinterface Where are the Elements of Surprise between Accessibility
 Mobile First
 Responsive Design
  6. 6. @webinterface Designing for Responsiveness, Mobile First and for Accessibility are not the same thing. A responsive site is designed and coded to respond to devices with different screen sizes. Is not automatically accessible.
  7. 7. @webinterface Responsive design is an additional way that you can apply to solving accessibility issues.
  8. 8. @webinterface Responsive Web design, mobile first and accessibility are ways of making a site flexible.
  9. 9. @webinterface Myth:
 Accessibility = less and
 Technological Restrictions
  10. 10. @webinterface Designing with
 progressive enhancement
  11. 11. @webinterface Source: http://www.amazon.de/
  12. 12. @webinterface User Experience Browser Capabilitis Basic Advanced
  13. 13. @webinterface Think and Design about Device Agnostic
  14. 14. Think about Interactivity @webinterface Content is design for Readability Think about Design (Color, Contrast) Semantics
  15. 15. @webinterface
  16. 16. Design is like Water @webinterface
  17. 17. Interactivity is like Water @webinterface
  18. 18. @webinterface A device-agnostic approach also takes into account infinite combinations of screen resolution, input method, browser capability and more…
  19. 19. @webinterface Learn from people about their needs and preferences.
  20. 20. @webinterface Accessibility is often as part of person`s need. Mobile First is opportunity, focus and innovation. Responsive Design is clear goals, frequent communication, and solid collaboration. User Experience build personas of what users are like and what they want and need.
  21. 21. @webinterface A simple example about the combinations of Responsiveness, Mobile First and Accessibility.
  22. 22. @webinterface type=“email“ type=“url“ Source: http://diveintohtml5.it/forms.html
  23. 23. @webinterface type=“email“ type=“url“ Accessible
 Experience Semantically Mobile First Responsive First
  24. 24. @webinterface Source: http://www.smashingmagazine.com/2014/05/.... In <form> Not in <form>
  25. 25. Semantically Mobile First Responsive First @webinterface In <form> Accessible
 Experience
  26. 26. @webinterface Perceivable Robust Operable Understandable Source: http://www.w3.org/TR/WCAG20/
  27. 27. @webinterface Inclusion Soziologie: Diversity as normality Web: Diversity of the Devices is normality Accessibility: Flexibility and universal 
 UI-design
  28. 28. @webinterface Benefits of Inclusion
  29. 29. @webinterface Automatically adjust to user’s device Designing first for mobile focuses on key features and accessibility Capabilities Progressive enhancement Inherent inclination to follow web standards Scalable and operable
  30. 30. @webinterface Device Agnostic Technical 
 Solution Inclusion Strategy Progressive enhancement
  31. 31. @webinterface In the context 
 of the Accessibility 
 is not new.
  32. 32. @webinterface What is Accessibility?
  33. 33. @webinterface Essential things about the documentation. WCAG (Web Content Accessibility Guidelines) WAI-ARIA (Accessible Rich Internet Applications)
  34. 34. Image from: http://www.ew.com/@webinterface Robust Operable Perceivable Understandable WCAG 2.0 and the 4 Principles
  35. 35. @webinterface What is Accessible JavaScript?
  36. 36. @webinterface Without semantically and accessible markup there is no accessible Javascript! Source: http://www.w3.org/TR/wai-aria/
  37. 37. @webinterface What is Accessible JavaScript? You use it fully with keyboard You use it with user defined colours You use it with Screenreader
  38. 38. @webinterface Accessible JavaScript for a Screenreader with WAI-ARIA Source: http://www.w3.org/TR/wai-aria/
  39. 39. @webinterface Using WAI-ARIA to be optimized for a Screenreader. You can use it the same way as without a Screenreader. A Screenreader gets additional information about actual state and how it works. Source: http://www.w3.org/WAI/intro/aria
  40. 40. @webinterface Source: http://www.webpagetest.org/
  41. 41. @webinterface Accordion header: role=tab aria-selected (is header selected or not) aria-expanded (is selected header open or not) optional: aria-controls Accordion content: role=tabpanel aria-labelledby (with header) aria-hidden (is content visible open or not) 
  42. 42. @webinterface Enhancing Forms
  43. 43. @webinterface <label for=“lastName“> Last Name * </label> <input id=“lastName“ type=“text“ aria-required=“true“> Required Fields aria-required
  44. 44. @webinterface <label for=“emailAddress“> E-Mail Address * </label> <input id=“emailAddress“ type=“email“ aria-describedby=“emailFormat“ aria- required=“true“> Input-level Instructions and Expected Data Format <div class=“instruction“ id=“emailFormat“> Example: name@domain.de </div> aria-describedby
  45. 45. @webinterface <label for=“emailAddress“> E-Mail Address * </label> <input id=“emailAddress“ type=“email“ aria-describedby=“emailFormat“ aria- required=“true“ aria-invalid=“true“> Validation and Error Messaging <div class=“instruction“ id=“emailFormat“> Example: name@domain.de </div> <div role=“alert“> <label for=“emailAddress“ class=“error“> Please enter a valid email address. </label> </div> aria-invalid and role=“alert“
  46. 46. @webinterface Button controlled input with live feedback aria-live="assertive" and aria-controls <label for="number">Current value</label> <input id="number" type="text" role="alert" aria-live="assertive" readonly value=„0"> <button type=„button" title="add 10" aria-controls=„number“> Add </button> <button type=„button" title="subtract 10" aria-controls=„number"> Subtract </button>
  47. 47. @webinterface Button controlled input with live feedback $('[aria-controls="number"]').on('click', function() { var button = $(this); $('#number').val(function(i, oldval) { return button.is('[title*="add"]') ? parseInt(oldval, 10) + 10 : parseInt(oldval, 10) - 10; }); }); JavaScript
  48. 48. @webinterface Think about interaction
  49. 49. @webinterface Source: http://hanshillen.github.io/jqtest/#goto_dialog Fully accessible with keyboard:
  50. 50. @webinterface <div role=„alertdialog“ aria-labelledby="dialogTitle“ aria-describedby=„dialogDesc“> <h2 id=„dialogTitle"> Your personal details were successfully updated </h2> <p id=„dialogDesc"> You can change your details at anytime in the user account section. </p> <button>Close</button> </div> Design patterns alertdialog <div role="dialog" aria-label="Password Confirmation“ aria- describedby="dialogDesc"> Source: http://www.w3.org/TR/wai-aria-practices/#dialog_modal
  51. 51. @webinterface Dialog role is used when the user is expected to provide data. Alertdialog role is used to announce the contents of a dialog to the user.
  52. 52. @webinterface User should either explicitly dismiss the dialog (for example, selecting "Cancel" or pressing ESC) or close it by taking a positive action, such as selecting "OK" or "Submit". When the dialog is displayed, focus should be placed on an active element within the dialog. Modals Focus Management Source: http://juicystudio.com/article/custom-built_dialogs.php
  53. 53. @webinterface The viewport must permit zooming
  54. 54. @webinterface Do not add parameters like: “maximum-scale=1.0” 
 or 
 “user-scalable=no”
  55. 55. @webinterface Optimal code looks like this: <meta 
 name="viewport" content="width=device-width, 
 initial-scale=1.0" />
  56. 56. @webinterface Fluid Layout
  57. 57. @webinterface Browser zoom and fluid experience with Flexbox flex-wrap: wrap;
  58. 58. @webinterface Use em, viewport units or % for layout, not pixels. width: 60em; width: 60vw; width: 60%;
  59. 59. @webinterface Last Words
  60. 60. @webinterface „You are not your user. Watch people interact with your site“ Peep Laja, @conversionxl
  61. 61. @webinterface Not building for browsers Not building for devices Building for users
  62. 62. @webinterface Focus accessibility, responsiveness and mobile first efforts on delivering quality user experiences.
  63. 63. @webinterface Designing for accessibility, 
 is not about disability, 
 is not about restrictions, 
 is create a pleasurable digital experiences.
  64. 64. @webinterface „Design the Priority 
 not the Layout!“ Ethan Marcotte Image from: http://www.space538.org/events/ethan-marcotte
  65. 65. „It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all. The journey begins by letting go of control, and becoming flexible.“ @webinterface John Allsopp, A dao of webdesign Image from: https://responsivedesign.is
  66. 66. @webinterface Making Flexibility 
 Your Goal.
  67. 67. Thanks @webinterface …dear Ellen
  68. 68. @webinterface peter.rozek@ecx.io

×