Does responsive design make a website more or less accessible? In this session you will learn best practices and techniques for accessible responsive design. Responsive web design (RWD) can be very good for accessibility but is also poses some new challenges and design considerations to provide an optimal experience for people with disabilities. When done properly, RWD can address many accessibility issues related to low vision and certain mobility impairments. While responsive web design was not created specifically to address accessibility, its aim is to craft sites to provide an optimal viewing experience and easy navigation for all users and thereby address some accessibility issues. RWD enables the website to adapt its layout to the format of the viewing environment through the use of fluid, proportion-based grids, flexible images and CSS3 media queries. Responsive sites adjust to the screen and presents in the most readable and usable way for that particular screen size and format. This can ensure that font size remains readable and at a high resolution for people with low vision. It also keeps interactive elements large and easier to operate for people with mobility impairments. In this session we will review what a responsive website is and talk about the challenges and opportunities for accessibility in regards to responsive web design.

1. Web Accessibility
RESPONSIVE WEB DESIGN
November 7, 2013
11/8/2013
© 2013 Interactive Accessibility
1

2. The Accessibility Experts ™
Kathleen Wahlbin
Email: KathyW@ia11y.com
Phone: 978-443-0798
http://www.interactiveaccessibility.com
11/8/2013
© 2013 Interactive Accessibility
2

3. Mobile, Tablets, Laptops, & Desktops
RESPONSIVE DESIGN
11/8/2013
© 2013 Interactive Accessibility
3

4. What is the Problem?
• Websites are not optimized for the many different
devices available
– Sizes
– Capabilities
– Interaction methods
• User experience less than ideal on many sites
11/8/2013
© 2013 Interactive Accessibility
4

5. Not Just a Problem on Mobile…
• The lines are blurring…
11/8/2013
© 2013 Interactive Accessibility
5

6. The Old Reality…
•
•
•
•
•
Big screen
Fast internet connection
Powerful processor
Efficient input (keyboard/mouse)
Desk with chair
11/8/2013
© 2013 Interactive Accessibility
6

7. The New Reality….
One handed
Outside light
Aging Eyes
Busy Eyes and Hands
Noisy, public spaces
Fat fingers
11/8/2013
© 2013 Interactive Accessibility
7

8. Majority of Interactions are Digital
Source: http://www.google.com/think/research-studies/thenew-multi-screen-world-study.html
11/8/2013
© 2013 Interactive Accessibility
8

9. History of Screen Resolution
•
•
•
•
Desktop resolution has increased
More people use high resolution
Many resolutions available
And of course, mobile devices
11/8/2013
© 2013 Interactive Accessibility
Sources: W3C Schools, nngroup.com
9

10. Mobile Screen Resolution
• iPhone
1136 x 640
640 x 960
320 x 480
– 1st / 2nd
– 3rd
– Mini
1024 x 768
2048 x 1536
1024 x 768
– Phones
– Tablets
320 or 360 wide (typically)
800 wide
• iPad:
• Android
Sources:
Mobilemoxie.com
Mediag.com
Onbile.com
Developer.android.com
11/8/2013
Android
– 5
– 4S
– 3GS
© 2013 Interactive Accessibility
10

11. We Need to Rethinking the Web
• Interaction models are changing
• Dependent on many factors
– Browsers
– Device capabilities
– Situation
• Screen resolution and size
11/8/2013
© 2013 Interactive Accessibility
11

12. What is Responsive Web Design (RWD)?
11/8/2013
© 2013 Interactive Accessibility
12

13. What is RWD?
• Technique of building a website or application for all devices
• One code base optimized for the medium and viewport size
• It’s about adopting a more flexible, device-agnostic approach
Same set of code
11/8/2013
© 2013 Interactive Accessibility
13

14. Responsive Design – 1024px Desktop
11/8/2013
© 2013 Interactive Accessibility
14

15. Responsive Design - 768px Tablet
11/8/2013
© 2013 Interactive Accessibility
15

16. Responsive Design – 360px Mobile
11/8/2013
© 2013 Interactive Accessibility
16

17. What is the Difference Between RWD & Mobile Website?
11/8/2013
© 2013 Interactive Accessibility
17

18. Mobile Site vs. RWD
• Mobile website is:
–
–
–
–
–
Hard coded for one or a few screen resolutions
Coded more simply
Not dynamically responsive to changing resolutions
Typically not appealing on larger screens / desktops
Separate from the desktop website – two code bases
• Whereas RWD is:
– One code base; one website
– Not hard-coded – responds to changing resolutions
– More dynamic code – looks at device resolution to determine space
available for laying out content in a grid
– Adaptive: may show elements, resize text/images, reflow elements as
resolution changes
– Looks fine on desktop
11/8/2013
© 2013 Interactive Accessibility
18

19. How is RWD Implemented?
• Fluid, flexible layout
– Uses relative sizing of grids, not fixed
– Based on columns that can be reflowed
– Allows grid layout to adjust to viewport size
• Media queries
– Target media types and media features
– Tests for max/min width & height on viewport and device,
device orientation, aspect radio, resolution
• Responsive images
– Relative widths (CSS) or dynamic replacement (JS)
11/8/2013
© 2013 Interactive Accessibility
19

20. Old Way vs. New Way
• CSS 2.1 – Media Types
<link href="screen.css“ … media="screen“>
• CSS 3 – Media Queries
@media screen and (max-width: 30em) {
// mobile styles here
}
11/8/2013
© 2013 Interactive Accessibility
20

21. Browser Compatibility
• RWD works in the following browsers
–
–
–
–
–
IE 9+
Opera 9.5+
Safari 3+
Firefox 3.5+
Chrome
• Can use other browsers with the use of JavaScript
coding
11/8/2013
© 2013 Interactive Accessibility
21

22. Responsive Sites
11/8/2013
© 2013 Interactive Accessibility
22

23. Is Responsive Design Accessible?
RWD CHALLENGES &
OPPORTUNITIES
11/8/2013
© 2013 Interactive Accessibility
23

24. Is RWD Good for Accessibility?
11/8/2013
© 2013 Interactive Accessibility
24

25. Benefits of RWD
• Automatically adjust to user’s device
• Inherent inclination to follow web standards
• Mobile first + progressive enhancement
– Designing first for mobile focuses on key features and
accessibility
– As screen sizes / resolution increase, add features, content, and
interaction modes
• Sites can also remember accessibility preferences
– Text size
– Spacing
– Video options, etc.
11/8/2013
© 2013 Interactive Accessibility
25

26. Is RWD Good for People with Disabilities?
11/8/2013
© 2013 Interactive Accessibility
26

27. Low Vision Users
• Users with low vision may
– Have a lower screen resolution
– Magnify the screen using browser settings
• Benefits
– Building experiences mobile first
– Images can be optimized
– Magnified screen adjusts to smaller viewport size (fluid layout)
• Some elements may be removed
• Elements are moved below (reflowed) to minimize / eliminate scrolling
• Adjusts within browser
• Challenges
– Permanence of place – as resolutions change, elements may move to an
unfamiliar place
– Sometimes text will be cut off in magnified page on desktop browsers
11/8/2013
© 2013 Interactive Accessibility
27

28. Blind Users
• Users who are blind will
– Use a screen reader
– Rely partially on memory and mental map of site structure for
navigation
• Benefits
– Having less content on a page can be easier to understand
and navigate
• Challenges
– Changing organization and navigation is harder to use
– Reading order may not match visual order
11/8/2013
© 2013 Interactive Accessibility
28

29. Mobility-Impaired Users
• Users with mobility impairments may
– Use alternative input devices – switches, voice
• Benefits
– Short pages and streamlined navigation easier to use
• Challenges
– Touch interaction can be difficult
11/8/2013
© 2013 Interactive Accessibility
29

30. 5 Practical Tips
TECHNIQUES FOR RESPONSIVE
DESIGN
11/8/2013
© 2013 Interactive Accessibility
30

31. Mobile First
• Build for less-capable
devices / browsers first
• Enhance for more
advanced
platforms/browsers
• Design for smallest screen
resolution
Source: http://www.abookapart.com/products/mobile-first
11/8/2013
© 2013 Interactive Accessibility
31

32. Reduce Cognitive & Visual Load
•
•
•
•
•
Layout
Images
Line and letter spacing (leading / kerning)
Readable typefaces
Responsive typography
11/8/2013
© 2013 Interactive Accessibility
32

33. Use Images that Work Across Devices
• Challenges:
– Image clarity, designing images to work on all devices and
screen resolutions
– Download image size
• Solutions:
–
–
–
–
11/8/2013
Image optimization
Icon fonts
New HTML picture element (www.responsiveimages.org)
Image replacement with polyfills or media queries
© 2013 Interactive Accessibility
33

34. Follow Web Standards
• No more platform hacks
• Custom controls minimized
• Mouse-only functions eliminated
11/8/2013
© 2013 Interactive Accessibility
34

35. Design for Different Input Methods
• Challenges for all users
– Touch zone size
– Fat finger syndrome – hard to select right icon
• Different input devices
– Switch device
– One handed
– Motor control
11/8/2013
© 2013 Interactive Accessibility
35

36. How do you hold your device?
11/8/2013
© 2013 Interactive Accessibility
36

37. Touch Zones
•
•
•
•
Position affects areas reached by thumb and fingers
Landscape vs. portrait position affects it too
Typical placement of fingers is a factor for RWD
Consider touch zones that are easy to reach
11/8/2013
© 2013 Interactive Accessibility
37

38. What are the Easy Touch Zones?
Source: http://www.lukew.com/ff/entry.asp?1649
11/8/2013
© 2013 Interactive Accessibility
38

39. Touch Interface
• Different interpretations of optimal target size
– Apple:
– Microsoft:
– Nokia:
44 px
26-34px
28 px / 1 cm x 1 cm
• MIT Touch Lab study
– Average index finger width is
1.6 – 2 cm = 45 – 57 px
– Thumbs: 2.5 cm = 72 px
11/8/2013
© 2013 Interactive Accessibility
39

40. Design Touch Targets
• A consideration as RWD resizes content, icons, spacing of
grouped items, and other targets
• Design large touch targets based on density-independent pixels
(dp)
– WARNING: pixel density changes per handset
– Good balance between information density and targetability of UI
Elements
– Spacing between UI elements should be 8 dp
Reference: http://developer.android.com/design/style/metrics-grids.html
11/8/2013
© 2013 Interactive Accessibility
40

41. Pros & Cons of RWD
• Pros
– Only have to maintain single site
– Don’t have to deal with mobile-specific URLs
– Address a wide variety of devices
• Cons
– Additional time needed to for design
– Devices constantly changing
– Designing the optimal experience / usability for all devices
take more time
– Have to consider performance across all devices
11/8/2013
© 2013 Interactive Accessibility
41

42. Is RWD Good for Accessibility?
• YES!!!
– Better usability
– Generally works better with assistive technology since code is
written to standards
– Optimize experience across devices and screen size
11/8/2013
© 2013 Interactive Accessibility
42

43. Questions?
11/8/2013
© 2013 Interactive Accessibility
43

44. Kathy Wahlbin
Email: KathyW@ia11y.com
Phone: 978-443-0798
http://www.interactiveaccessibility.com
@wahlbin
Thank you!