Accessibility Through Responsive Design

Accessibility Through Responsive DesignLet the audience know this is to be very informal and conversational please ask questions at any timeSomething to get the audience involved earlyShow of hands, who owns an internet-capable mobile device? Who uses it as their primary device? (this might be better later when we start talking about growth of mobile)1Justin Stockton2

Email: jstockton@devis.comTwitter: @poorgeek

2TopicsAccessibility as availabilityApproaches to mobile developmentWhat is responsive design?Fluid GridsFlexible MediaMedia QueriesApproaches to testing3Disability Employment App Challenge4

Presented through Challenge.gov in summer of 2012Sponsored by Department of Labors Office of Disability Employment Policy (ODEP)Build accessible websites and apps to help employers and people with disabilitiesChallenge.gov = GSA managed4https://accessjobs.devis.com/

Proof of Concept!5

Spell out URLTalk about what it isEmphasize proof of concept nature of Access JobsJob postings are using data from the Veterans Job Bank targeted at VeteransHave Justin demo website as I talk about the basic functionalityJob search engine for people with disabilitiesProvides information and recruiting resources for employers5Our GoalsVery focused and simple to useAccessible (508 and WCAG 2.0 compliant)Easy for employers to manageAdding markup to existing job postings includes them in our searchChallenge ourselves to achieve a more universal design6These were the goals we had in mind, but we wanted to challenge ourselves and add something to our application that made it unique and took accessibility to a higher level.6Smartphone OwnershipSurvey conducted by Pew Internet and American Life Project, July-August 2012http://www.pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012/Findings.aspx45% of Americans (16+) now own smartphones (~107 million people)Increased from 35% in May 2011 (increase of ~24 million people)7Pew Research CenterBased on population estimates from US Census Bureau in 2011, that is an increase of around 50 million owners in 2 yearsCensus defines adults as 18+, so real numbers would be somewhat higherShow of hands who owns a tablet or other mobile computing device (smartphone, etc.)Keep your hand up if you do the majority of your personal web browsing on a mobile device

7Tablet OwnershipSurvey conducted by Pew Internet and American Life Project, July-Sept 2013http://pewinternet.org/Reports/2013/Tablets-and-ereaders/Findings.aspx35% of Americans (16+) now own tablet computers, up from 4% in September 20108Original iPad released April 3, 20108Why is this Meaningful?21% of cell phone owners primarily use their phone to access the internethttp://www.pewinternet.org/Reports/2013/Cell-Internet/Summary-of-Findings.aspx9Refining Our Definition of AccessibilityWe have a responsibility to ensure that the web is usable for everyoneAccessibility as availabilityTaking a deviceagnostic approach to accessible web design and making it available to as many people as possible on as many devices as possible

10Not just a moral responsibility, but a business responsibility bad mobile experience = lost customers10Approaches to Mobile Development11No Mobile Approach12Website that does not offer a tailored mobile experience (either app or website)Can still be viewable on most devices, but not particularly usableNot common, but still a problem

Kickstarter is a bad example since they did just launch an iOS app, BUT they are an example of a prominent website with no mobile versionHaving to zoom in/out and pan around = BAD USER EXPERIENCEHaving to zoom for text size but then scrolling since it now exceeds screen widthNot always an issue of ignorance, but budget or other shortcomings however, mobile can no longer be ignored, given the stats discussed12Whats Wrong With Traditional Mobile Approaches?Features left out for mobile usersMight make sense, but too often due to assumptions instead of user studiesContent paritySame content should be available everywhereIf redirects are not properly set up, sharing links can be problematicMaintaining several code bases

13Content ParityThematic Consistency of Resource Identified by a URI identified as a mobile best practice by World Wide Web ConsortiumBasically means content should be accessible via a URI regardless of device13Native Mobile ApplicationsBarrier to entryDevice and even OS versionAccessibilityDifferent considerations and techniques compared to web designvaries based on platformLess of an issue for web applications14Accessibility not a problem of indifference necessarily, but education14Mobile WebsitesBrowser sniffingMethod that identifies which browser and operating system you are usingRequires maintaining a list of browsers and operating systemsSome websites only serving mobile to Webkit-based browsers, regardless of whether other browsers could render themAccessibilityDisabling zoom15Non-webkit mobile browsers = Opera, FirefoxOpera switching to webkitZoom disabled via maximum-scale=1.0 in meta content tag15Mobile Websites and Native Apps Are Not EvilBoth offer experience tailored to mobile devicesNative applications can take advantage of advanced device capabilitiesWeb browsers are catching up

16They just fall short16Responsive Design17New Approach - Responsive DesignProposed by Ethan Marcotte on A List Apart in May 2010http://www.alistapart.com/articles/responsive-web-design/One website for all devicesOptimized for different contexts (not devices) using:Fluid gridsFlexible mediaCSS Media Queries1818Grid Systems19

A way of organizing different pieces of information along vertical and horizontal axesHave existed in some form since medieval timesFluid GridsFluid grid = width of boxes is defined in percentage rather than fixed units (pixels, em)Can grow or shrink as the screen width changesAllows for utilizing all available spaceAvoids issue of horizontal scrolling20Fluid Grids on Access Jobs21

For those of you who cant see this, we have a multi-column layout on Access Jobs that is flexible as the screen width changes. Once the screen width gets below a certain size, the layout actually changes to a single column layout with the various sections stacked on top of each other.21Semantic Grid Code Example.span4 {width: 33%}

Traditional grid markup in HTML:

22Flexible MediaSimilar concept to fluid grids, but applied to images and moviesDimensions of media can change depending on screen sizeNot used much on Access JobsLogoScreenshots23Flexible Media Code Exampleimg, object {max-width: 100%;}

Can result in problems in older browsers that dont support max-width (Internet Explorer 7)Set width to 100%Flickr documented how to deal with poor image scaling using proprietary Microsoft CSS filtershttp://code.flickr.net/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/24Can use IE fix in specific IE-only stylesheet24Responsive ImagesDesire has arisen to serve different images based on media queriesExisting images look blurry on displays with high pixel densityIf images are going to be viewed at small sizes, no point in serving large resolution imagesTricky because bandwidth != screen size25Several ApproachesNew attribute for HTML image element srcsetNew HTML picture elementBoth allow specifying additional image sources depending on different criteriaStill in proposed status, not part of specificationW3C Responsive Images Community Group

26Media QueriesPart of CSS3 specificationExtends existing media type functionality that allowed style sheets for print, screen, etc.Gives more granular control as to when different CSS rules are appliedBased on media features such as screen width/height, screen orientation, pixel density, etc27Media Query Code Example.job { display: block;}

@media screen and (min-width: 650px) and (max-width: 960px) { .job { margin: 0.52%; display: inline-block;width: 48.6111%; }}28Ive highlighted the actual media query in bold28BreakpointsBreakpoints are defined resolution points (typically width) specified in media queries at which different CSS styles are appliedBreakpoints 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

29Media Queries In Action

30What does that look like in action? We go from displaying several job listings on each line to only 1 per line at the smallest screen sizes30Media Query SupportMobile browsersiOS Safari (3.2+)Android Browser (2.1+)Desktop browsersInternet Explorer (9+)Firefox (3.5+)Chrome (4+)Safari (4+)Full list at http://caniuse.com/css-mediaqueries31How To Handle Lack of Media Query SupportRespond.jsAdds support for min/max-width to IE 6-8Mobile-first approach for other browsersDefault CSS = single column layoutIntroduce additional complexity inside media queries (unsupported browsers will just ignore this)Can still target with browser-specific style sheets if this approach is undesirable32Responsive Design and AccessibilityResponsive design does not make a site accessible, so care must be taken to comply with existing accessibility guidelinesBesides improving availability:Flexible layouts handle zooming/scaling very wellNo horizontal scroll barsLowers barrier to entry for assistive technologyInexpensive mobile devices now come with built-in assistive technologyFreedom of choice for assistive technology

33Besides improving availability33Approaches to Testing34TestingNeed to take a pragmatic approach testing on every device is unrealisticExamine web analytics to find appropriate devices to targetTake advantage of devices owned by yourself and coworkersConsider starting a local device labSimulators/Emulators are available for iOS (Mac Only), AndroidDesktop browsers are typically multi-platformIf not, virtualization can be usedBrowserstack.comhttp://www.modern.ie/35Mobile Testing and DebuggingDont need to manually retest on each deviceAdobe Edge InspectMixtureRemote inspectionWeb Inspector RemoteAdobe Edge InspectRemote Web Inspector (iOS/Mac)

36Testing Access JobsPhysical Device TestingiPhone, iPad, Android PhonesDesktop TestingTesting multiple versions of IE using VMshttp://www.modern.ie/en-us/virtualization-toolsTesting breakpointsManually (resizing browser)http://responsivepx.com/

37Any Questions?Email: jstockton@devis.comTwitter: @poorgeek

38We were honored that our approach to this application led to winning the grand prize Remember to thank attendees and DOL/ODEP for challenge

COME TO OUR BOOTH38