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.

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

3. @webinterface
Accessibility =
Dark Side

4. @webinterface
Mobile First
Responsive

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

10. @webinterface
Designing with
progressive enhancement

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

12. @webinterface
User
Experience
Browser Capabilitis
Basic Advanced

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.

22. @webinterface
type=“email“ type=“url“
Source: http://diveintohtml5.it/forms.html

23. @webinterface
type=“email“
type=“url“
Accessible
Experience
Semantically
Mobile First
Responsive First

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

26. @webinterface
Perceivable
Robust
Operable
Understandable
Source: http://www.w3.org/TR/WCAG20/

27. @webinterface
Inclusion
Soziologie:
Diversity as normality
Web:
Diversity of the Devices is
normality
Accessibility:
Flexibility and universal
UI-design

28. @webinterface
Benefits of Inclusion

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

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

32. @webinterface
What is Accessibility?

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

35. @webinterface
What is Accessible
JavaScript?

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

40. @webinterface Source: http://www.webpagetest.org/

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. @webinterface
Enhancing Forms

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

48. @webinterface
Think about interaction

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" />

56. @webinterface
Fluid Layout

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%;

59. @webinterface
Last Words

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.

67. Thanks
@webinterface
…dear Ellen

68. @webinterface
peter.rozek@ecx.io