Accessibility Through
Responsive Design
Justin Stockton
Email: jstockton@devis.com
Twitter: @poorgeek
2
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
• 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
4
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/Tabletsand-ereaders/Findings.aspx
• 35% 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/CellInternet/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”
• Taking 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
• 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
12
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
• Less 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 Webkitbased 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-webdesign/
• One website for all devices
• Optimized for different contexts (not devices)
using:
– Fluid grids
– Flexible media
– CSS Media Queries
18
Grid Systems
• A way of organizing
different pieces of
information along
vertical and
horizontal axes
• Have existed in
some form since
medieval times
19
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-littlethings-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 (maxwidth: 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