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

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

Myth:Accessibility = less

andTechnological Restrictions

@webinterface

Designing withprogressive enhancement

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

@webinterface

User Experience

Browser CapabilitisBasic Advanced

@webinterface

Think and Design about Device Agnostic

Think about Interactivity

@webinterface

Content is design for Readability

Think about Design (Color, Contrast)

Semantics

@webinterface

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“AccessibleExperience

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

@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

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

Enhancing Forms

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

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

Fluid Layout

@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

Last Words

@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

@webinterfacepeter.rozek@ecx.io