Accessibility Through Responsive Design - Accessible Media, Web ...

linencharmMobile - Wireless

Dec 10, 2013 (3 years and 10 months ago)

83 views

Accessibility Through

Responsive Design

Justin Stockton

2

Email:
jstockton@devis.com

Twitter: @
poorgeek


Topics


Accessibility as availability


Approaches to mobile development


What is responsive design
?


Fluid Grids


Flexible Media


Media Queries


Approaches to testing

3

Disability Employment App Challenge

4


Presented through
Challenge.gov

in summer
of 2012


Sponsored by Department
of
Labor’s Office
of
Disability Employment
Policy (ODEP)


Build
accessible websites
and apps to help
employers and people with
disabilities

https://accessjobs.devis.com
/


Proof of Concept!

5

Our Goals


Very focused and simple to use


Accessible (508 and WCAG 2.0 compliant)


Easy for employers to manage


Adding markup to existing job postings includes
them in our search


Challenge ourselves to achieve a more
universal design

6

Smartphone Ownership


Survey conducted by Pew Internet and
American Life Project, July
-
August
2012


http://www.pewinternet.org/Reports/2012/Smart
phone
-
Update
-
Sept
-
2012/
Findings.aspx


45% of Americans (16+) now own
smartphones (~107 million people)


Increased from 35% in May 2011 (increase of
~24 million people)

7

Tablet Ownership


Survey conducted by Pew Internet and
American Life Project, July
-
Sept 2013


http://pewinternet.org/Reports/2013/Tablets
-
and
-
ereaders/
Findings.aspx


3
5% of Americans (16+) now own tablet
computers, up from 4% in September 2010

8

Why is this Meaningful?


21% of cell phone owners primarily use their
phone to access the internet


http://www.pewinternet.org/Reports/2013/Cell
-
Internet/Summary
-
of
-
Findings.aspx

9

Refining Our Definition of Accessibility


We have a responsibility to ensure that the
web is usable for everyone


Accessibility as “availability”


T
aking a device

agnostic approach to
accessible web design and making it available
to as many people as possible on as many
devices as possible


10

APPROACHES TO MOBILE
DEVELOPMENT

11

“No Mobile” Approach

12


Website that does not offer
a tailored mobile experience
(either app or website)


Can still be viewable on
most devices, but not
particularly usable


Not common, but still a
problem




What’s Wrong With Traditional Mobile
Approaches?


Features left out for mobile users


Might make sense, but too often due to
assumptions instead of user studies


Content parity


Same content should be available everywhere


If redirects are not properly set up, sharing links
can be problematic


Maintaining several code bases


13

Native Mobile Applications


Barrier to entry


Device and even OS version


Accessibility


Different considerations and techniques compared
to web design


varies based on platform


L
ess of an issue for web applications

14

Mobile Websites


“Browser sniffing”


Method that identifies which browser and
operating system you are using


Requires maintaining a list of browsers and
operating systems


Some websites only serving mobile to
W
ebkit
-
based browsers, regardless of whether other
browsers could render them


Accessibility


Disabling zoom

15

Mobile Websites and Native Apps

Are Not Evil


Both offer experience tailored to mobile
devices


Native applications can take advantage of
advanced device capabilities


Web browsers are catching up


16

RESPONSIVE DESIGN

17

New Approach
-

Responsive Design


Proposed by Ethan
Marcotte

on
A List Apart

in
May 2010


http://www.alistapart.com/articles/responsive
-
web
-
design/


One website for all
devices


Optimized for different contexts (not devices)
using:


Fluid grids


Flexible media


CSS Media
Queries

18

Grid Systems

19


A way
of organizing
different pieces of
information
along
vertical and
horizontal axes


Have existed in
some form since
medieval times

Fluid Grids


Fluid grid = width of boxes is defined in
percentage rather than fixed units (pixels,
em
)


Can grow or shrink as the screen width changes


Allows for utilizing all available space


Avoids issue of horizontal scrolling

20

Fluid Grids on Access Jobs

21

Semantic Grid Code Example

.span4 {


width: 33%

}


Traditional grid markup in HTML:


<article class=“span4”>

</article>

22

Flexible Media


Similar concept to fluid grids, but applied to
images and movies


Dimensions of media can change depending
on screen size


Not used much on Access Jobs


Logo


Screenshots

23

Flexible Media Code Example

img
, object {


max
-
width: 100%;

}



Can result in problems in older browsers that don’t
support max
-
width (Internet Explorer 7)


Set width to 100%


Flickr documented how to deal with poor image scaling
using proprietary Microsoft CSS filters


http://
code.flickr.net
/2008/11/12/on
-
ui
-
quality
-
the
-
little
-
things
-
client
-
side
-
image
-
resizing/

24

Responsive Images


Desire has arisen to serve different images
based on media queries


Existing images look blurry on displays with high
pixel density


If images are going to be viewed at small sizes, no
point in serving large resolution images


Tricky because bandwidth != screen size

25

Several Approaches


New attribute for HTML
image

element



srcset



New HTML
picture

element


Both allow specifying additional image
sources depending on different criteria


Still in “proposed” status, not part of
specification


W3C Responsive Images Community Group


26

Media Queries


Part of CSS3 specification


Extends existing
media type
functionality that
allowed style sheets for print, screen, etc.


Gives more granular control as to when
different CSS rules are applied


Based on
media features

such as screen
width/height, screen orientation, pixel density,
etc…

27

Media Query Code Example

.job {



display: block;

}


@media screen and (
min
-
width: 650px
) and (
max
-
width: 960px
) {



.job {




margin
: 0.52%;




display
: inline
-
block;




width
: 48.6111%;



}

}

28

Breakpoints


Breakpoints are defined resolution points
(typically width) specified in media queries at
which different CSS styles are applied


Breakpoints used
on Access
Jobs:


Below
650 (small screen
)


650
-
960 (tablet
)


Above
960 (desktop
)


Should be
chosen based on
your content
rather
than
known
resolutions of popular devices


29

Media Queries In Action

30

Media Query Support


Mobile browsers


iOS

Safari (3.2+)


Android Browser (2.1+)


Desktop browsers


Internet Explorer (9+)


Firefox (3.5+)


Chrome (4+)


Safari (4+)


Full list at
http
://caniuse.com/css
-
mediaqueries

31

How To Handle Lack of

Media Query Support


Respond.js


Adds support for min/max
-
width to IE 6
-
8


Mobile
-
first approach for other browsers


Default CSS = single column layout


Introduce additional complexity inside media
queries (unsupported browsers will just ignore
this)


Can still target with browser
-
specific style
sheets if this approach is undesirable

32

Responsive Design and Accessibility


Responsive design does not make a site
accessible, so care must be taken to comply with
existing accessibility guidelines


Besides improving availability:


Flexible layouts handle zooming/scaling very well


No horizontal scroll bars


Lowers barrier to entry for assistive technology


Inexpensive mobile devices now come with built
-
in assistive
technology


Freedom of choice for assistive technology



33

APPROACHES TO TESTING

34

Testing


Need to take a pragmatic approach


testing on every
device is unrealistic


Examine web analytics to find appropriate devices to
target


Take advantage of devices owned by yourself and
coworkers


Consider starting a local device lab


Simulators/Emulators are available for
iOS

(Mac Only),
Android


Desktop browsers are typically multi
-
platform


If not, virtualization can be used


Browserstack.com


http://
www.modern.ie
/

35

Mobile Testing
and Debugging


Don’t need to manually retest on each device


Adobe Edge Inspect


Mixture


Remote inspection


Web Inspector Remote


Adobe Edge Inspect


Remote Web Inspector
(
iOS
/Mac)



36

Testing Access Jobs


Physical Device Testing


iPhone,
iPad
, Android Phones


Desktop Testing


Testing multiple versions of IE using VMs


http://www.modern.ie/en
-
us/virtualization
-
tools


Testing breakpoints


Manually (resizing browser)


http://
responsivepx.com
/


37

Any Questions?

Email:
jstockton@devis.com

Twitter: @
poorgeek


38