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
Accessibility =  
Dark Side

@webinterface
Mobile First
Responsive

@webinterface
Where are the Elements of Surprise
between
Accessibility 
Mobile 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
Myth: 
Accessibility = less
and 
Technological Restrictions

@webinterface
Designing with 
progressive enhancement

@webinterface Source: http://www.amazon.de/

@webinterface
User
Experience
Browser Capabilitis
Basic Advanced

@webinterface
Think and Design about
Device Agnostic

Think about
Interactivity
@webinterface
Content is design for
Readability
Think about Design
(Color, Contrast)
Semantics

Design is like Water
@webinterface

Interactivity is like Water
@webinterface

@webinterface
A device-agnostic approach also
takes into account infinite
combinations of screen resolution,
input method, browser capability
and more…

@webinterface
Learn from people
about their needs and
preferences.

@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“
Accessible 
Experience
Semantically
Mobile First
Responsive First

@webinterface Source: http://www.smashingmagazine.com/2014/05/....
In <form> Not in <form>

Semantically
Mobile First
Responsive First
@webinterface
In <form>
Accessible 
Experience

@webinterface
Perceivable
Robust
Operable
Understandable
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
Benefits of Inclusion

@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
Device
Agnostic
Technical  
Solution
Inclusion
Strategy
Progressive
enhancement

@webinterface
In the context  
of the Accessibility  
is not new.

@webinterface
What is Accessibility?

@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 Operable
Perceivable Understandable
WCAG 2.0 and the 4 Principles

@webinterface
What is Accessible
JavaScript?

@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 Source: http://www.webpagetest.org/

@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 Fields
aria-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: name@domain.de
</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: 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“

@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>

@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

@webinterface
Think about interaction

@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
The viewport must
permit zooming

@webinterface
Do not add parameters like:
“maximum-scale=1.0”  
or  
“user-scalable=no”

@webinterface
Optimal code looks like this:
<meta  
name="viewport"
content="width=device-width,  
initial-scale=1.0" />

@webinterface
Browser zoom and fluid
experience with Flexbox
flex-wrap: wrap;

@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
Not building for browsers
Not building for devices
Building for users

@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

@webinterface
Making Flexibility  
Your Goal.

Thanks
@webinterface
…dear Ellen

@webinterface
peter.rozek@ecx.io

jQuery: Accessibility, Mobile und Responsive

More Related Content

Viewers also liked

Similar to jQuery: Accessibility, Mobile und Responsive

More from Peter Rozek

Recently uploaded

jQuery: Accessibility, Mobile und Responsive