jQuery: Accessibility, Mobile und Responsive
-
Upload
peter-rozek -
Category
Internet
-
view
633 -
download
1
Transcript of jQuery: Accessibility, Mobile und Responsive
jQuery Conference 2015 in Berlin
Accessibility, Mobile and Responsive
@webinterface
jQuery
Image from: http://www.kinderfilmwelt.de
Peter Rozek
Work at ecx.io (Digital Agency)
Skills: UX
Usability Accessibility
Frontend
@webinterface
@webinterface
Where are the Elements of Surprise between
AccessibilityMobile First
Responsive Design
@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.
@webinterface
Responsive design is an additional way that you can apply to solving accessibility issues.
@webinterface
Responsive Web design, mobile first and accessibility are ways of making a site flexible.
@webinterface Source: http://www.amazon.de/
Think about Interactivity
@webinterface
Content is design for Readability
Think about Design (Color, Contrast)
Semantics
@webinterface
A device-agnostic approach also takes into account infinite combinations of screen resolution, input method, browser capability and more…
@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.
@webinterface
A simple example about the combinations of Responsiveness, Mobile First and Accessibility.
@webinterface
type=“email“ type=“url“
Source: http://diveintohtml5.it/forms.html
@webinterface
type=“email“
type=“url“AccessibleExperience
Semantically
Mobile First
Responsive First
@webinterface Source: http://www.smashingmagazine.com/2014/05/....
In <form> Not in <form>
@webinterface
PerceivableRobust
OperableUnderstandable
Source: http://www.w3.org/TR/WCAG20/
@webinterface
Inclusion
Soziologie: Diversity as normality
Web: Diversity of the Devices is normality
Accessibility: Flexibility and universal UI-design
@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
@webinterface
Essential things about the documentation.WCAG (Web Content Accessibility Guidelines)
WAI-ARIA (Accessible Rich Internet Applications)
Image from: http://www.ew.com/@webinterface
Robust OperablePerceivable Understandable
WCAG 2.0 and the 4 Principles
@webinterface
Without semantically and accessible markup there is no accessible Javascript!
Source: http://www.w3.org/TR/wai-aria/
@webinterface
What is Accessible JavaScript?
You use it fully with keyboard
You use it with user defined colours
You use it with Screenreader
@webinterface
Accessible JavaScript for a Screenreader with
WAI-ARIA
Source: http://www.w3.org/TR/wai-aria/
@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
@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)
@webinterface
<label for=“lastName“> Last Name * </label> <input id=“lastName“ type=“text“ aria-required=“true“>
Required Fieldsaria-required
@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: [email protected]
</div>
aria-describedby
@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: [email protected]
</div>
<div role=“alert“><label for=“emailAddress“ class=“error“>
Please enter a valid email address.</label>
</div>
aria-invalid and role=“alert“
@webinterface
Button controlled input with live feedbackaria-live="assertive" and aria-controls
<form action="">
<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>
@webinterface
Button controlled input with live feedback
<form action="">
$('[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
@webinterface Source: http://hanshillen.github.io/jqtest/#goto_dialog
Fully accessible with keyboard:
@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
@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.
@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
@webinterface
Optimal code looks like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@webinterface
Use em, viewport units or % for layout, not pixels.
width: 60em;width: 60vw;width: 60%;
@webinterface
„You are not your user. Watch people interact with your site“
Peep Laja, @conversionxl
@webinterface
Focus accessibility, responsiveness and mobile first efforts on delivering quality user experiences.
@webinterface
Designing for accessibility, is not about disability, is not about restrictions, is create a pleasurable digital experiences.
@webinterface
„Design the Priority not the Layout!“Ethan Marcotte
Image from: http://www.space538.org/events/ethan-marcotte
„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