accessible responsive web design
DESCRIPTION
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.TRANSCRIPT
Web Accessibility
RESPONSIVE WEB DESIGNNovember 7, 2013
© 2013 Interactive Accessibility11/8/2013 1
11/8/2013 © 2013 Interactive Accessibility 2
Kathleen WahlbinEmail: [email protected]: 978-443-0798http://www.interactiveaccessibility.com
The Accessibility Experts ™
RESPONSIVE DESIGN
Mobile, Tablets, Laptops, & Desktops
11/8/2013 © 2013 Interactive Accessibility 3
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
Not Just a Problem on Mobile…
• The lines are blurring…
11/8/2013 © 2013 Interactive Accessibility 5
The Old Reality…
• Big screen• Fast internet connection• Powerful processor• Efficient input (keyboard/mouse)• Desk with chair
11/8/2013 © 2013 Interactive Accessibility 6
The New Reality….
7
Aging Eyes
One handed
Fat fingers
Busy Eyes and Hands
Outside light
Noisy, public spaces
11/8/2013 © 2013 Interactive Accessibility
Majority of Interactions are Digital
11/8/2013 © 2013 Interactive Accessibility 8
Source: http://www.google.com/think/research-studies/the-new-multi-screen-world-study.html
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 9
Sources: W3C Schools, nngroup.com
• iPhone– 5 1136 x 640– 4S 640 x 960– 3GS 320 x 480
• iPad: – 1st / 2nd 1024 x 768– 3rd 2048 x 1536– Mini 1024 x 768
• Android– Phones 320 or 360 wide (typically)– Tablets 800 wide
11/8/2013 © 2013 Interactive Accessibility 10
Sources: Mobilemoxie.comMediag.comOnbile.comDeveloper.android.com
Mobile Screen Resolution
And
roid
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
What is Responsive Web Design (RWD)?
11/8/2013 © 2013 Interactive Accessibility 12
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
11/8/2013 © 2013 Interactive Accessibility 13
Same set of code
Responsive Design – 1024px Desktop
11/8/2013 © 2013 Interactive Accessibility 14
Responsive Design - 768px Tablet
11/8/2013 © 2013 Interactive Accessibility 15
Responsive Design – 360px Mobile
11/8/2013 © 2013 Interactive Accessibility 16
What is the Difference Between RWD & Mobile Website?
11/8/2013 © 2013 Interactive Accessibility 17
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
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
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
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
Responsive Sites
11/8/2013 © 2013 Interactive Accessibility 22
RWD CHALLENGES & OPPORTUNITIES
Is Responsive Design Accessible?
11/8/2013 © 2013 Interactive Accessibility 23
Is RWD Good for Accessibility?
11/8/2013 © 2013 Interactive Accessibility 24
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
Is RWD Good for People with Disabilities?
11/8/2013 © 2013 Interactive Accessibility 26
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
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
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
TECHNIQUES FOR RESPONSIVE DESIGN
5 Practical Tips
11/8/2013 © 2013 Interactive Accessibility 30
Mobile First
• Build for less-capable devices / browsers first
• Enhance for more advanced platforms/browsers
• Design for smallest screen resolution
11/8/2013 © 2013 Interactive Accessibility 31
Source: http://www.abookapart.com/products/mobile-first
Reduce Cognitive & Visual Load
• Layout• Images• Line and letter spacing (leading / kerning)• Readable typefaces• Responsive typography
11/8/2013 © 2013 Interactive Accessibility 32
Use Images that Work Across Devices
• Challenges: – Image clarity, designing images to work on all devices and
screen resolutions– Download image size
• Solutions:– Image optimization– Icon fonts– New HTML picture element (www.responsiveimages.org)– Image replacement with polyfills or media queries
11/8/2013 © 2013 Interactive Accessibility 33
Follow Web Standards
• No more platform hacks• Custom controls minimized• Mouse-only functions eliminated
11/8/2013 © 2013 Interactive Accessibility 34
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
How do you hold your device?
11/8/2013 © 2013 Interactive Accessibility 36
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
What are the Easy Touch Zones?
11/8/2013 © 2013 Interactive Accessibility 38
Source: http://www.lukew.com/ff/entry.asp?1649
Touch Interface
• Different interpretations of optimal target size– Apple: 44 px– Microsoft: 26-34px– Nokia: 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
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
11/8/2013 © 2013 Interactive Accessibility 40
Reference: http://developer.android.com/design/style/metrics-grids.html
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
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
Questions?
11/8/2013 © 2013 Interactive Accessibility 43
Thank you!
11/8/2013 © 2013 Interactive Accessibility 44
Kathy WahlbinEmail: [email protected]: 978-443-0798http://www.interactiveaccessibility.com
@wahlbin