jQuery: Accessibility, Mobile und Responsive
•
2 likes•1,000 views
The document summarizes a presentation on accessibility, mobile design, and responsive design given at the 2015 jQuery Conference in Berlin. It discusses how these topics are related but not the same, and provides examples of how to design for them individually and together. Key points include that responsive design helps with accessibility but does not ensure it, and that content should be accessible on any device without barriers.
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (18)
Similar to jQuery: Accessibility, Mobile und Responsive
Similar to jQuery: Accessibility, Mobile und Responsive (20)
More from Peter Rozek
More from Peter Rozek (17)
Recently uploaded
Recently uploaded (20)
jQuery: Accessibility, Mobile und Responsive
- 1. jQuery Conference 2015 in Berlin Accessibility, Mobile and Responsive @webinterface jQuery Image from: http://www.kinderfilmwelt.de
- 2. Peter Rozek Work at ecx.io (Digital Agency) Skills: UX Usability Accessibility Frontend @webinterface
- 5. @webinterface Where are the Elements of Surprise between Accessibility Mobile First Responsive Design
- 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. @webinterface Responsive design is an additional way that you can apply to solving accessibility issues.
- 8. @webinterface Responsive Web design, mobile first and accessibility are ways of making a site flexible.
- 9. @webinterface Myth: Accessibility = less and Technological Restrictions
- 13. @webinterface Think and Design about Device Agnostic
- 14. Think about Interactivity @webinterface Content is design for Readability Think about Design (Color, Contrast) Semantics
- 15. @webinterface
- 16. Design is like Water @webinterface
- 17. Interactivity is like Water @webinterface
- 18. @webinterface A device-agnostic approach also takes into account infinite combinations of screen resolution, input method, browser capability and more…
- 19. @webinterface Learn from people about their needs and preferences.
- 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. @webinterface A simple example about the combinations of Responsiveness, Mobile First and Accessibility.
- 24. @webinterface Source: http://www.smashingmagazine.com/2014/05/.... In <form> Not in <form>
- 25. Semantically Mobile First Responsive First @webinterface In <form> Accessible Experience
- 27. @webinterface Inclusion Soziologie: Diversity as normality Web: Diversity of the Devices is normality Accessibility: Flexibility and universal UI-design
- 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
- 31. @webinterface In the context of the Accessibility is not new.
- 33. @webinterface Essential things about the documentation. WCAG (Web Content Accessibility Guidelines) WAI-ARIA (Accessible Rich Internet Applications)
- 34. Image from: http://www.ew.com/@webinterface Robust Operable Perceivable Understandable WCAG 2.0 and the 4 Principles
- 36. @webinterface Without semantically and accessible markup there is no accessible Javascript! Source: http://www.w3.org/TR/wai-aria/
- 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. @webinterface Accessible JavaScript for a Screenreader with WAI-ARIA Source: http://www.w3.org/TR/wai-aria/
- 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
- 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)
- 43. @webinterface <label for=“lastName“> Last Name * </label> <input id=“lastName“ type=“text“ aria-required=“true“> Required Fields aria-required
- 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. @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. @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. @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
- 49. @webinterface Source: http://hanshillen.github.io/jqtest/#goto_dialog Fully accessible with keyboard:
- 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. @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. @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. @webinterface The viewport must permit zooming
- 54. @webinterface Do not add parameters like: “maximum-scale=1.0” or “user-scalable=no”
- 55. @webinterface Optimal code looks like this: <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- 57. @webinterface Browser zoom and fluid experience with Flexbox flex-wrap: wrap;
- 58. @webinterface Use em, viewport units or % for layout, not pixels. width: 60em; width: 60vw; width: 60%;
- 60. @webinterface „You are not your user. Watch people interact with your site“ Peep Laja, @conversionxl
- 61. @webinterface Not building for browsers Not building for devices Building for users
- 62. @webinterface Focus accessibility, responsiveness and mobile first efforts on delivering quality user experiences.
- 63. @webinterface Designing for accessibility, is not about disability, is not about restrictions, is create a pleasurable digital experiences.
- 64. @webinterface „Design the Priority not the Layout!“ Ethan Marcotte Image from: http://www.space538.org/events/ethan-marcotte
- 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. @webinterface Making Flexibility Your Goal.