• Like

Accessible Responsive Web Design

  • 4,650 views
Uploaded on

Does responsive design make a website more or less accessible? In this session you will learn best practices and techniques for accessible responsive design. …

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.

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
4,650
On Slideshare
0
From Embeds
0
Number of Embeds
10

Actions

Shares
Downloads
111
Comments
1
Likes
17

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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!