Accessibility Through Responsive Design

Justin Stockton 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 4 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

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 – phone-Update-Sept-2012/Findings.aspx 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 – and-ereaders/Findings.aspx and-ereaders/Findings.aspx 35% of Americans (16+) now own tablet computers, up from 4% in September

Why is this Meaningful? 21% of cell phone owners primarily use their phone to access the internet – Internet/Summary-of-Findings.aspx Internet/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 12 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

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 Webkit- based 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 – design/ design/ One website for all devices Optimized for different contexts (not devices) using: – Fluid grids – Flexible media – CSS Media Queries 18

Grid Systems 19 A way of organizing different pieces of information along vertical and horizontal axes Have existed in some form since medieval times

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: 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 – things-client-side-image-resizing/ things-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; screen and (min-width: 650px) and (max- width: 960px) {.job { margin: 0.52%; display: inline-block; width: %; } 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) – (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 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 35

Mobile Testing and Debugging Don’t need to manually retest on each device – Adobe Edge Inspect Adobe Edge Inspect – Mixture Mixture Remote inspection – Web Inspector Remote Web Inspector Remote – Adobe Edge Inspect Adobe Edge Inspect – Remote Web Inspector (iOS/Mac) Remote Web Inspector 36

Testing Access Jobs Physical Device Testing – iPhone, iPad, Android Phones Desktop Testing – Testing multiple versions of IE using VMs Testing breakpoints – Manually (resizing browser) –

Any Questions? 38