Where are the Elements of Surprise
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.
Responsive design is an additional
way that you can apply to solving
Responsive Web design, mobile
first and accessibility are ways of
making a site flexible.
Accessibility = less
A device-agnostic approach also
takes into account infinite
combinations of screen resolution,
input method, browser capability
Learn from people
about their needs and
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.
A simple example about the
combinations of Responsiveness,
Mobile First and Accessibility.
Automatically adjust to user’s device
Designing first for mobile focuses on key features and accessibility
Inherent inclination to follow web standards
Scalable and operable
and accessible markup
there is no accessible
You use it fully with keyboard
You use it with user defined colours
You use it with Screenreader
for a Screenreader with
Using WAI-ARIA to be optimized
for a Screenreader.
You can use it the same way as without a
A Screenreader gets additional information about
actual state and how it works.
@webinterface Source: http://hanshillen.github.io/jqtest/#goto_dialog
Fully accessible with keyboard:
Your personal details were successfully updated
You can change your details at anytime in the user account section.
Design patterns alertdialog
<div role="dialog" aria-label="Password Confirmation“ aria-
Dialog role is used when the user is expected to
Alertdialog role is used to announce the
contents of a dialog to the user.
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
The viewport must
Do not add parameters like:
„You are not your user.
Watch people interact
with your site“
Peep Laja, @conversionxl
Not building for browsers
Not building for devices
Building for users
responsiveness and mobile first
efforts on delivering quality user
Designing for accessibility,
is not about disability,
is not about restrictions,
is create a pleasurable digital
„Design the Priority
not the Layout!“
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
John Allsopp, A dao of webdesign
Image from: https://responsivedesign.is