Transcript Accessibility Through Responsive Design Ben Wetzel Justin Stockton Materials Available Online www.devis.com/presentations/csun-2013 Justin Stockton Application Developer – Devis Email: [email protected] Twitter: @poorgeek.

Accessibility Through Responsive
Design
Ben Wetzel
Justin Stockton
Materials Available Online
www.devis.com/presentations/csun-2013
2
Justin Stockton
Application Developer – Devis
Email: [email protected]
Twitter: @poorgeek
3
Ben Wetzel
Application Developer – Devis
Email: [email protected]
Twitter: @bensashi
4
Overview
•
•
•
•
Access Jobs
Elements of Responsive design
Additional Considerations
Testing Basics
5
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
6
accessjobs.devis.com
Proof of Concept!
7
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
8
Smartphone Ownership
• August 2012 - 45% of Americans (16+) now
own smartphones (~107 million people)
• Increased from 35% in May 2011 (increase of
~24 million people)
• Surveys done by Pew Internet and American
Life Project
• http://www.pewinternet.org/Reports/2012/S
martphone-Update-Sept-2012/Findings.aspx
9
Tablet Ownership
• August 2012 - 25% of Americans (16+) now
own tablet computers, up from 4% in
September 2010
• Increase of around 50 million owners in 2
years
– Census defines adults as 18+, so real numbers
would be somewhat higher
• http://www.pewinternet.org/Reports/2012/Ta
blet-Ownership-August-2012/Findings.aspx
10
Why is this Meaningful?
• 17% of cell phone owners primarily use their
phone to access the internet
– ~36 million people
• If websites are not accessible or usable on
mobile, a huge population is excluded
• http://pewinternet.org/Reports/2012/CellInternet-Use-2012.aspx
11
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
12
“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
13
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
14
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
– Some apps like Kindle on iOS are not accessible
15
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
– Many mobile websites disable zooming
16
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
17
We Can Do Better
18
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
19
Grid Systems
• A way of visually
laying out different
pieces of
information along
vertical and
horizontal axes
• Have existed in
some form since
medieval times
20
Fluid Grids
• Fluid grid = width of content areas 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 with fixed
width sites on smaller displays
21
Fluid Grids on Access Jobs
22
Fluid Grids on Access Jobs
• Used the Semantic Grid System library
• Allowed us to avoid presentation class names
in HTML markup
– Best Practice to keep presentation (CSS) and
structure (HTML) separate
23
Semantic Grid Code Example
article {
.column(9);
}
Traditional grid markup in HTML:
<article class=“column-9”>
</article>
24
Flexible Media
• Similar concept to fluid grids, but applied to
images and movies
• Width of media can change depending on
screen size
• Examples of flexible media on Access Jobs
– Logo
– Screenshots
25
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/
26
Responsive Images
• Need 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
• May also want to provide user control for this
– HD video toggle on Youtube
27
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
28
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…
29
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%;
}
}
30
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
31
Media Queries In Action
32
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
33
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
34
Responsive Design and Accessibility
• Responsive does not equal accessible, so care
must be taken to comply with existing
accessible development 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
35
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
• Either locally or through something like Browserstack.com
• http://www.modern.ie/
36
Mobile Testing and Debugging
• Don’t need to manually retest on each device
– Adobe Edge Inspect
– Mixture
• Remote inspection
– Web Inspector Remote
– Edge Inspect
– Remote Web Inspector (iOS/Mac)
37
Testing Access Jobs
• Physical Device Testing
– iPhone, iPad, Android Phones, Blackberry
• Desktop Testing
– Testing multiple versions of IE through IE
Developer Tools
• Testing breakpoints
– Manually (resizing browser)
– http://responsivepx.com/
38
Beyond Access Jobs
• Content-specific considerations
– Responsive data tables
• Reading order
– Making sure reading order always matches visual
order
39
Takeaways
• Responsive design is the most future-friendly
approach to universal – not just mobile –
design
• Focus is on the content and optimizing for
different contexts, not chasing latest devices
• By giving up some control over a consistent
appearance, we ensure our content is
available to the largest audience
40
Ben Wetzel
[email protected]
Justin Stockton
[email protected]
ANY QUESTIONS?
COME TALK TO DEVIS AT BOOTH 713-A
41