SlideShare a Scribd company logo

Accessibility Standards and the Mobile Web

M
mmaertens

How does the increasing preponderance of mobile device affect web accessibility? This talk focuses on the specific concerns that are raised when dealing with mobile devices. How does this affect decisions about responsive web design when we use a single codebase for different kinds of devices? What guidance do the recently released draft guidelines on WCAG 2.0 and the mobile web provide us? Marco Maertens

1 of 15
Download to read offline
Mobile Web
Accessibility
Marco Maertens @marcomaertens
EvoHaX Accessibility Hackathon Philly Tech Week 2015
April 17, 2015
2
Mobile Accessibility?
• There is no mobile Web. Just one Web
• Is there mobile accessibility?
• Large overlap between mobile concerns
and accessibility
• Mobile has made us think not just about
mobile
3
What Are Some Mobile Accessibility Differences?
• Touchscreen
• Screen size
• Easily adjustable orientation
• Use context
• AT implementation
4
What is (W3C WAI) WCAG?
• An effort of the W3C
• Focused on Web accessibility
• Standards set by wide consultation
(world wide)
• The basis of many legal requirements
• Original and future basis of US
Section 508
5
WCAG 2.0 Mobile Accessibility Mapping document
• A draft. Did a mention it’s a draft?
• Not a change to WCAG 2.0.
• Applies to mobile devices
• Targeted to web sites and web apps.
Hybrid and native apps can benefit, too!
6
Perceivable
• Minimizing content
• Sufficient size (targets, fonts) to avoid
unnecessary zoom
• Zoom/magnification may be necessary
• Consider user may need to pan
• Contrast – even more important because of
context
7
8
9
Operable
• Don’t forget keyboards, yes keyboards
• Touch-size minimum
• Gestures
• Mouseup/touchend
• Keyboard equivalents
10
11
Understandable
• Screen orientation
• Consistent layout
• But differences in orientation or
size OK (important)
• Provide clear indication that element is
actionable
12
13
Robust
• Data-type keyboards: a double-edged
sword
• Use standard elements and controls
14
15
Appendix A: The Four Principles of WCAG 2.0
Perceivable - Information and user interface components must be
presentable to users in ways they can perceive.
This means that users must be able to perceive the information being
presented (it can't be invisible to all of their senses)
Operable - User interface components and navigation must be operable.
This means that users must be able to operate the interface (the interface
cannot require interaction that a user cannot perform)
Understandable - Information and the operation of user interface must be
understandable.
This means that users must be able to understand the information as well as
the operation of the user interface (the content or operation cannot be
beyond their understanding)
Robust - Content must be robust enough that it can be interpreted reliably
by a wide variety of user agents, including assistive technologies.
This means that users must be able to access the content as technologies
advance (as technologies and user agents evolve, the content should
remain accessible)

Recommended

Introduction to mobile accessibility, 2015
Introduction to mobile accessibility, 2015Introduction to mobile accessibility, 2015
Introduction to mobile accessibility, 2015Henny Swan
 
Breaking silos - all bad things must come to an end
Breaking silos - all bad things must come to an endBreaking silos - all bad things must come to an end
Breaking silos - all bad things must come to an endHenny Swan
 
Web and mobile accessibility
Web and mobile accessibilityWeb and mobile accessibility
Web and mobile accessibilityHenny Swan
 
Introduction to mobile accessibility - AccessU 2013
Introduction to mobile accessibility - AccessU 2013Introduction to mobile accessibility - AccessU 2013
Introduction to mobile accessibility - AccessU 2013Henny Swan
 
Mobile Accessibility (MobA11y)
Mobile Accessibility (MobA11y)Mobile Accessibility (MobA11y)
Mobile Accessibility (MobA11y)Henny Swan
 
Mobile Accessibility Best Practices & Trends
Mobile Accessibility Best Practices & TrendsMobile Accessibility Best Practices & Trends
Mobile Accessibility Best Practices & TrendsAidan Tierney
 
Introduction to mobile accessibility
Introduction to mobile accessibilityIntroduction to mobile accessibility
Introduction to mobile accessibilityJon Gibbins
 

More Related Content

What's hot

Web and Mobile App Accessibility Testing
Web and Mobile App Accessibility TestingWeb and Mobile App Accessibility Testing
Web and Mobile App Accessibility TestingTechWell
 
CSUN 2017 - ACT Now: Accessibility Conformance Testing for WCAG
CSUN 2017 - ACT Now: Accessibility Conformance Testing for WCAGCSUN 2017 - ACT Now: Accessibility Conformance Testing for WCAG
CSUN 2017 - ACT Now: Accessibility Conformance Testing for WCAGMary Jo Mueller
 
Usability Testing for People w/ Disabilities
Usability Testing for People w/ DisabilitiesUsability Testing for People w/ Disabilities
Usability Testing for People w/ DisabilitiesInteractive Accessibility
 
Accessibility in Agile Projects
Accessibility in Agile ProjectsAccessibility in Agile Projects
Accessibility in Agile ProjectsAdrian Redden
 
NeoKeys - how it works on - and why it is critical to - touchscreen devices -...
NeoKeys - how it works on - and why it is critical to - touchscreen devices -...NeoKeys - how it works on - and why it is critical to - touchscreen devices -...
NeoKeys - how it works on - and why it is critical to - touchscreen devices -...www.webhub.mobi by Yuvee, Inc.
 
Web accessibility
Web accessibilityWeb accessibility
Web accessibilityAGILEDROP
 
Web accessibility workshop 2
Web accessibility workshop 2Web accessibility workshop 2
Web accessibility workshop 2Vladimir Tomberg
 
Web accessibility workshop 3
Web accessibility workshop 3Web accessibility workshop 3
Web accessibility workshop 3Vladimir Tomberg
 
Web accessibility workshop 1
Web accessibility workshop 1Web accessibility workshop 1
Web accessibility workshop 1Vladimir Tomberg
 
Understanding Web Accessibility
Understanding Web AccessibilityUnderstanding Web Accessibility
Understanding Web AccessibilityAndrea Dubravsky
 
Web accessibility workshop 2
Web accessibility workshop 2Web accessibility workshop 2
Web accessibility workshop 2Vladimir Tomberg
 

What's hot (20)

Is Testing With A Screen Reader Enough?
Is Testing With A Screen Reader Enough?Is Testing With A Screen Reader Enough?
Is Testing With A Screen Reader Enough?
 
Web and Mobile App Accessibility Testing
Web and Mobile App Accessibility TestingWeb and Mobile App Accessibility Testing
Web and Mobile App Accessibility Testing
 
CSUN 2017 - ACT Now: Accessibility Conformance Testing for WCAG
CSUN 2017 - ACT Now: Accessibility Conformance Testing for WCAGCSUN 2017 - ACT Now: Accessibility Conformance Testing for WCAG
CSUN 2017 - ACT Now: Accessibility Conformance Testing for WCAG
 
Challenges with VPATs
Challenges with VPATsChallenges with VPATs
Challenges with VPATs
 
Usability Testing for People w/ Disabilities
Usability Testing for People w/ DisabilitiesUsability Testing for People w/ Disabilities
Usability Testing for People w/ Disabilities
 
WCAG 2.1 Mobile Accessibility
WCAG 2.1 Mobile AccessibilityWCAG 2.1 Mobile Accessibility
WCAG 2.1 Mobile Accessibility
 
ATIA Workshop - iOS Accessibility
ATIA Workshop - iOS AccessibilityATIA Workshop - iOS Accessibility
ATIA Workshop - iOS Accessibility
 
Accessibility in Agile Projects
Accessibility in Agile ProjectsAccessibility in Agile Projects
Accessibility in Agile Projects
 
NeoKeys - how it works on - and why it is critical to - touchscreen devices -...
NeoKeys - how it works on - and why it is critical to - touchscreen devices -...NeoKeys - how it works on - and why it is critical to - touchscreen devices -...
NeoKeys - how it works on - and why it is critical to - touchscreen devices -...
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
Accessibility for Web
Accessibility for WebAccessibility for Web
Accessibility for Web
 
Web accessibility
Web accessibilityWeb accessibility
Web accessibility
 
Web accessibility workshop 2
Web accessibility workshop 2Web accessibility workshop 2
Web accessibility workshop 2
 
Week 4 - tablet app design
Week 4 - tablet app designWeek 4 - tablet app design
Week 4 - tablet app design
 
Web accessibility workshop 3
Web accessibility workshop 3Web accessibility workshop 3
Web accessibility workshop 3
 
Accessibility
AccessibilityAccessibility
Accessibility
 
EU policies in e-inclusion
EU policies in e-inclusionEU policies in e-inclusion
EU policies in e-inclusion
 
Web accessibility workshop 1
Web accessibility workshop 1Web accessibility workshop 1
Web accessibility workshop 1
 
Understanding Web Accessibility
Understanding Web AccessibilityUnderstanding Web Accessibility
Understanding Web Accessibility
 
Web accessibility workshop 2
Web accessibility workshop 2Web accessibility workshop 2
Web accessibility workshop 2
 

Similar to Accessibility Standards and the Mobile Web

Original Access U 2013 - 508 Refresh
Original Access U 2013 - 508 RefreshOriginal Access U 2013 - 508 Refresh
Original Access U 2013 - 508 RefreshBarry Johnson
 
Wipa Seminar WCAG 2.0
Wipa Seminar WCAG 2.0Wipa Seminar WCAG 2.0
Wipa Seminar WCAG 2.0Roger Hudson
 
Web Content Accessibility Guidelines
Web Content Accessibility GuidelinesWeb Content Accessibility Guidelines
Web Content Accessibility GuidelinesPurnimaAgarwal6
 
Ideas 5 - Roger Hudson - Understanding WCAG 2.0
Ideas 5 - Roger Hudson - Understanding WCAG 2.0Ideas 5 - Roger Hudson - Understanding WCAG 2.0
Ideas 5 - Roger Hudson - Understanding WCAG 2.0awia
 
Universal Usability
Universal UsabilityUniversal Usability
Universal UsabilityNaviyaMariya
 
Web Accessibility Overview
Web Accessibility OverviewWeb Accessibility Overview
Web Accessibility OverviewWill Jayroe
 
WCAG 2.1 and POUR
WCAG 2.1 and POURWCAG 2.1 and POUR
WCAG 2.1 and POURAlena Huang
 
Accessibility testing kailash 26_nov_ 2010
Accessibility testing kailash 26_nov_ 2010Accessibility testing kailash 26_nov_ 2010
Accessibility testing kailash 26_nov_ 2010Kailash More
 
Web accessibility for municipalities - How to meet compliance requirements an...
Web accessibility for municipalities - How to meet compliance requirements an...Web accessibility for municipalities - How to meet compliance requirements an...
Web accessibility for municipalities - How to meet compliance requirements an...Intelliware Development Inc.
 
Web Accessibility and Design
Web Accessibility and DesignWeb Accessibility and Design
Web Accessibility and Designcolinbdclark
 
Accessibility Quick Wins
Accessibility Quick WinsAccessibility Quick Wins
Accessibility Quick WinsJeff Reynolds
 
ATAGTR2017 SPEAKING EYE for differently abled people to see the web content
ATAGTR2017 SPEAKING EYE for differently abled people to see the web contentATAGTR2017 SPEAKING EYE for differently abled people to see the web content
ATAGTR2017 SPEAKING EYE for differently abled people to see the web contentAgile Testing Alliance
 
Making Web Easily Accessible with Web Accessibility
Making Web Easily Accessible with Web AccessibilityMaking Web Easily Accessible with Web Accessibility
Making Web Easily Accessible with Web AccessibilityMultidots Solutions Pvt Ltd
 
Universal Usability
Universal UsabilityUniversal Usability
Universal UsabilityRakeshBRoy
 
How to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility SummitHow to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility SummitRachel Cherry
 

Similar to Accessibility Standards and the Mobile Web (20)

WCAG
WCAGWCAG
WCAG
 
Original Access U 2013 - 508 Refresh
Original Access U 2013 - 508 RefreshOriginal Access U 2013 - 508 Refresh
Original Access U 2013 - 508 Refresh
 
Wipa Seminar WCAG 2.0
Wipa Seminar WCAG 2.0Wipa Seminar WCAG 2.0
Wipa Seminar WCAG 2.0
 
Web Content Accessibility Guidelines
Web Content Accessibility GuidelinesWeb Content Accessibility Guidelines
Web Content Accessibility Guidelines
 
Ideas 5 - Roger Hudson - Understanding WCAG 2.0
Ideas 5 - Roger Hudson - Understanding WCAG 2.0Ideas 5 - Roger Hudson - Understanding WCAG 2.0
Ideas 5 - Roger Hudson - Understanding WCAG 2.0
 
Universal Usability
Universal UsabilityUniversal Usability
Universal Usability
 
Web Accessibility Overview
Web Accessibility OverviewWeb Accessibility Overview
Web Accessibility Overview
 
WCAG 2.1 and POUR
WCAG 2.1 and POURWCAG 2.1 and POUR
WCAG 2.1 and POUR
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
Accessibility and JS: side-by-side
Accessibility and JS: side-by-sideAccessibility and JS: side-by-side
Accessibility and JS: side-by-side
 
Accessibility testing kailash 26_nov_ 2010
Accessibility testing kailash 26_nov_ 2010Accessibility testing kailash 26_nov_ 2010
Accessibility testing kailash 26_nov_ 2010
 
Web accessibility for municipalities - How to meet compliance requirements an...
Web accessibility for municipalities - How to meet compliance requirements an...Web accessibility for municipalities - How to meet compliance requirements an...
Web accessibility for municipalities - How to meet compliance requirements an...
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
Week 3 Lecture: Accessibility
Week 3 Lecture: AccessibilityWeek 3 Lecture: Accessibility
Week 3 Lecture: Accessibility
 
Web Accessibility and Design
Web Accessibility and DesignWeb Accessibility and Design
Web Accessibility and Design
 
Accessibility Quick Wins
Accessibility Quick WinsAccessibility Quick Wins
Accessibility Quick Wins
 
ATAGTR2017 SPEAKING EYE for differently abled people to see the web content
ATAGTR2017 SPEAKING EYE for differently abled people to see the web contentATAGTR2017 SPEAKING EYE for differently abled people to see the web content
ATAGTR2017 SPEAKING EYE for differently abled people to see the web content
 
Making Web Easily Accessible with Web Accessibility
Making Web Easily Accessible with Web AccessibilityMaking Web Easily Accessible with Web Accessibility
Making Web Easily Accessible with Web Accessibility
 
Universal Usability
Universal UsabilityUniversal Usability
Universal Usability
 
How to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility SummitHow to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility Summit
 

Recently uploaded

Biometrics Technology Intresting PPT
Biometrics Technology Intresting PPTBiometrics Technology Intresting PPT
Biometrics Technology Intresting PPTPraveenKumarThota7
 
NANOG 90: 'BGP in 2023' presented by Geoff Huston
NANOG 90: 'BGP in 2023' presented by Geoff HustonNANOG 90: 'BGP in 2023' presented by Geoff Huston
NANOG 90: 'BGP in 2023' presented by Geoff HustonAPNIC
 
Practical SEO for WordPress Bloggers.pdf
Practical SEO for WordPress Bloggers.pdfPractical SEO for WordPress Bloggers.pdf
Practical SEO for WordPress Bloggers.pdfNile Flores
 
ConFoo 2024 - Sylius 2.0, top-notch eCommerce for customizable solution
ConFoo 2024 - Sylius 2.0, top-notch eCommerce for customizable solutionConFoo 2024 - Sylius 2.0, top-notch eCommerce for customizable solution
ConFoo 2024 - Sylius 2.0, top-notch eCommerce for customizable solutionŁukasz Chruściel
 
Reactive programming with Spring Webflux.pptx
Reactive programming with Spring Webflux.pptxReactive programming with Spring Webflux.pptx
Reactive programming with Spring Webflux.pptxJoão Esperancinha
 
DNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff Huston
DNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff HustonDNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff Huston
DNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff HustonAPNIC
 
ConFoo 2024 - Need for Speed: Removing speed bumps in API Projects
ConFoo 2024  - Need for Speed: Removing speed bumps in API ProjectsConFoo 2024  - Need for Speed: Removing speed bumps in API Projects
ConFoo 2024 - Need for Speed: Removing speed bumps in API ProjectsŁukasz Chruściel
 
Information Technology Project to Create a Business
Information Technology Project to Create a BusinessInformation Technology Project to Create a Business
Information Technology Project to Create a Businessmbowl010
 
Seagate HDD Firmware Repair Tool Datasheet 2024
Seagate HDD Firmware Repair Tool Datasheet 2024Seagate HDD Firmware Repair Tool Datasheet 2024
Seagate HDD Firmware Repair Tool Datasheet 2024Dolphin Data Lab
 
WAN-IFRA: World Press Trends Outlook 2023-2024
WAN-IFRA: World Press Trends Outlook 2023-2024WAN-IFRA: World Press Trends Outlook 2023-2024
WAN-IFRA: World Press Trends Outlook 2023-2024Damian Radcliffe
 

Recently uploaded (10)

Biometrics Technology Intresting PPT
Biometrics Technology Intresting PPTBiometrics Technology Intresting PPT
Biometrics Technology Intresting PPT
 
NANOG 90: 'BGP in 2023' presented by Geoff Huston
NANOG 90: 'BGP in 2023' presented by Geoff HustonNANOG 90: 'BGP in 2023' presented by Geoff Huston
NANOG 90: 'BGP in 2023' presented by Geoff Huston
 
Practical SEO for WordPress Bloggers.pdf
Practical SEO for WordPress Bloggers.pdfPractical SEO for WordPress Bloggers.pdf
Practical SEO for WordPress Bloggers.pdf
 
ConFoo 2024 - Sylius 2.0, top-notch eCommerce for customizable solution
ConFoo 2024 - Sylius 2.0, top-notch eCommerce for customizable solutionConFoo 2024 - Sylius 2.0, top-notch eCommerce for customizable solution
ConFoo 2024 - Sylius 2.0, top-notch eCommerce for customizable solution
 
Reactive programming with Spring Webflux.pptx
Reactive programming with Spring Webflux.pptxReactive programming with Spring Webflux.pptx
Reactive programming with Spring Webflux.pptx
 
DNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff Huston
DNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff HustonDNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff Huston
DNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff Huston
 
ConFoo 2024 - Need for Speed: Removing speed bumps in API Projects
ConFoo 2024  - Need for Speed: Removing speed bumps in API ProjectsConFoo 2024  - Need for Speed: Removing speed bumps in API Projects
ConFoo 2024 - Need for Speed: Removing speed bumps in API Projects
 
Information Technology Project to Create a Business
Information Technology Project to Create a BusinessInformation Technology Project to Create a Business
Information Technology Project to Create a Business
 
Seagate HDD Firmware Repair Tool Datasheet 2024
Seagate HDD Firmware Repair Tool Datasheet 2024Seagate HDD Firmware Repair Tool Datasheet 2024
Seagate HDD Firmware Repair Tool Datasheet 2024
 
WAN-IFRA: World Press Trends Outlook 2023-2024
WAN-IFRA: World Press Trends Outlook 2023-2024WAN-IFRA: World Press Trends Outlook 2023-2024
WAN-IFRA: World Press Trends Outlook 2023-2024
 

Accessibility Standards and the Mobile Web

  • 1. Mobile Web Accessibility Marco Maertens @marcomaertens EvoHaX Accessibility Hackathon Philly Tech Week 2015 April 17, 2015
  • 2. 2 Mobile Accessibility? • There is no mobile Web. Just one Web • Is there mobile accessibility? • Large overlap between mobile concerns and accessibility • Mobile has made us think not just about mobile
  • 3. 3 What Are Some Mobile Accessibility Differences? • Touchscreen • Screen size • Easily adjustable orientation • Use context • AT implementation
  • 4. 4 What is (W3C WAI) WCAG? • An effort of the W3C • Focused on Web accessibility • Standards set by wide consultation (world wide) • The basis of many legal requirements • Original and future basis of US Section 508
  • 5. 5 WCAG 2.0 Mobile Accessibility Mapping document • A draft. Did a mention it’s a draft? • Not a change to WCAG 2.0. • Applies to mobile devices • Targeted to web sites and web apps. Hybrid and native apps can benefit, too!
  • 6. 6 Perceivable • Minimizing content • Sufficient size (targets, fonts) to avoid unnecessary zoom • Zoom/magnification may be necessary • Consider user may need to pan • Contrast – even more important because of context
  • 7. 7
  • 8. 8
  • 9. 9 Operable • Don’t forget keyboards, yes keyboards • Touch-size minimum • Gestures • Mouseup/touchend • Keyboard equivalents
  • 10. 10
  • 11. 11 Understandable • Screen orientation • Consistent layout • But differences in orientation or size OK (important) • Provide clear indication that element is actionable
  • 12. 12
  • 13. 13 Robust • Data-type keyboards: a double-edged sword • Use standard elements and controls
  • 14. 14
  • 15. 15 Appendix A: The Four Principles of WCAG 2.0 Perceivable - Information and user interface components must be presentable to users in ways they can perceive. This means that users must be able to perceive the information being presented (it can't be invisible to all of their senses) Operable - User interface components and navigation must be operable. This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform) Understandable - Information and the operation of user interface must be understandable. This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding) Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)

Editor's Notes

  1. There is no mobile Web. Just one Web Is there mobile accessibility? Mobile devices do present new considerations When do we need to think about these considerations? Think of tablets Think of what else we don’t know about yet Large overlap between mobile concerns and accessibility Mobile has made us think not just about mobile
  2. Touchscreen Lack of cursor Target size Screen size Easily adjustable orientation Use context (but…) AT implementation (VoiceOver/TalkBack)
  3. http://www.w3.org/TR/mobile-accessibility-mapping/ A draft. Did a mention it’s a draft? Not a change to WCAG 2.0. Applies to mobile devices Handhelds Tablets But also wearables (glasses, watches, fitness tracking devices), car displays, airplane seatback sets, refrigerator screens, etc. Targeted to web sites and web apps. Hybrid and native apps can benefit, too!
  4. Minimizing content [vision, motor control, cognitive] e.g. Hidden menus, smaller images Sufficient size (targets, fonts) to avoid unnecessary zoom [vision] Font sizes are perceived smaller on a phone Zoom/magnification may be necessary [vision] Make sure to allow pinch-to-zoom with a correct viewport metatag <meta name="viewport" content="width=device-width, initial-scale=1.0"> Consider user may need to pan [vision, motor control, cognitive] Contrast – even more important because of context [vision] Font size is perceived smaller on phones, so guidelines, should be more generous than the WCAG guidelines of 1.2em and 1.5em
  5. Don’t forget keyboards, yes keyboards [vision, motor control, cognitive] Touch-size minimum 9mm (but don’t specify physical units); even more important [vision, motor control] Gestures – should be simple (conflict with expected system gestures) [vision, motor control, cognitive] Mouseup/touchend reduces unintended interactions [vision, motor control, cognitive] Orientation/shake/etc. should have keyboard equivalents [vision, motor control, cognitive]
  6. Screen orientation [vision, motor control, cognitive] Support changes when possible Consistent layout [cognitive] But differences in orientation or size OK (important) Provide clear indication that element is actionable [vision, motor control, cognitive] No indication from hover state or cursor change
  7. Data-type keyboards: a double-edged sword [vision, motor control, cognitive] Use standard elements and controls so built-in accessibility will work with it. [vision, hearing, motor control, cognitive]