SlideShare una empresa de Scribd logo
1 de 19
Many Devices – One Standard:
Mobile Accessibility with WCAG 2.1
KATHLEEN WAHLBIN AND SHADI ABOU-ZAHRA
13/14/2019
Mobile Challenges
Small Screens Touch Screens
Device
Orientation
Senor Input
Environmental
Conditions
3/14/2019 2
Mobile Web vs.
Native
Application
3/14/2019 3
Native apps run as a software
application and work with the device’s
built-in features — like the camera,
microphone, location services, etc.
Web apps run in the browser and are
much easier to maintain because they
have a common code base across
multiple platforms
Mobile Accessibility Policies
US Section 508: WCAG 2.0
Europe: EN 301 549 (WCAG 2.1)
Other local developments with risk of standards
fragmentation
3/14/2019 4
WCAG 2.0 to ICT
“Guidance on Applying WCAG 2.0 to Non-Web
ICT” - currently only applicable to 2.0 not 2.1
w3.org/TR/wcag2ict/
3/14/2019 5
UAAG & Mobile
Key is to support the accessibility settings and
features on the device within the application
w3.org/TR/IMPLEMENTING-UAAG20/mobile
3/14/2019 6
EN 301 549 & Mobile Applications
Clause 9: Web Content (WCAG 2.1)
Clause 10: Non-Web Documents (WCAG2ICT)
Clause 11: Non-Web Software (WCAG2ICT)
https://www.etsi.org/deliver/etsi_en/301500_3015
99/301549/02.01.02_60/en_301549v020102p.pdf
3/14/2019 7
What is
WCAG 2.1?
All of WCAG 2.0
5 New SCs at Level A
7 New SCs at Level AA
5 New SCs at Level AAA
3/14/2019 8
WCAG 2.1 for Mobile
Provides additional guidance for mobile
Important to understand the user need
Thinking about mobile accessibility up front is key
w3.org/WAI/standards-guidelines/wcag/new-in-21/
w3.org/WAI/people-use-web/user-stories/#retiree
3/14/2019 9
1.3.4 Orientation (AA)
Content does not restrict its view and operation to a
single display orientation, such as portrait or landscape,
unless a specific display orientation is essential.
Comic with cerebral palsy who uses a wheelchair:
◦ Problem: I can't rotate my tablet — it's attached to
my wheelchair.
◦ Works well: The application works whether I attach
my tablet horizontally or vertically.
3/14/2019 10
Product Feature
2.1.4 Character Key Shortcuts (A)
If a keyboard shortcut is implemented in content using only
letter (including upper- and lower-case letters),
punctuation, number, or symbol characters, then at least
one of the following is true: Turn off, Remap or Active only
on focus
Reporter with repetitive stress injury who uses voice
recognition software:
◦ Problem: When I was using my mail app with voice commands,
it kept deleting the messages instead of opening them.
◦ Note: There was a shortcut key for delete that was triggered by
something he was saying, and no way to turn off the shortcut
keys.
◦ Works well: In my spreadsheet application, there's a setting to
turn off or modify character key shortcuts.
3/14/2019 11
Product Feature
2.5.1 Pointer Gestures (A)
All functionality that uses multipoint or path-based
gestures for operation can be operated with a single
pointer without a path-based gesture, unless a
multipoint or path-based gesture is essential.
Comic with cerebral palsy who has limited movement
in fingers:
◦ Problem: I can't move my fingers like that. I need
another way to zoom in the map.
◦ Works well: Good thing there are buttons to zoom in
and out.
3/14/2019 12
Interaction Design
2.5.4 Motion Actuation (A)
Functionality that can be operated by device motion or user
motion can also be operated by user interface components
and responding to the motion can be disabled to prevent
accidental actuation, except when: Supported Interface or
Essential
Comic with cerebral palsy who uses a wheelchair:
◦ Problem: I can't shake my phone; it's connected to my
wheelchair. So there needs to be another way to activate that
feature, like a button.
◦ Problem: I have tremors, so I need to turn off motion activation
— and then be able to do stuff without motion actuation.
◦ Works well: My friend has this cool application that looks like a
physical spin lock. She rotates the phone to turn to the
combination. I can use the same application by typing the
numbers directly.
3/14/2019 13
Interaction Design
2.5.2 Pointer Cancellation (A)
For functionality that can be operated using a single
pointer , at least one of the following is true: No Down-
Event, Abort or Undo, Up Reversal, Essential
Politician with motor disabilities and low vision:
◦ Problem: I went to hit the "Mute" button and accidentally
touched the "End Call" button instead. It hung up
immediately.
◦ Works well: In another web conferencing application, if I
accidentally touch the "End Call" button, I can just slide my
finger off the "End Call" button and it won't end the call.
3/14/2019 14
Interaction Design
1.4.11 Non-Text Contrast (AA)
The visual presentation of the following have a contrast
ratio of at least 3:1 against adjacent color(s): User
Interface Components and Graphical Objects.
Retiree with low contrast sensitivity:
◦ Problem: I couldn't use the "Order Form" — there were no
text boxes. After a long call with customer service, I learned
there were text box borders that were too light for me to
see.
◦ Works well: It's easy for me to see all the icons and buttons
and everything — even in the sunlight.
3/14/2019 15
Design
2.5.5 Target Size (AAA)
The size of the target for pointer inputs is at least 44 by
44 CSS pixels except when: Equivalent, Inline, User
Agent Control or Essential
Retiree with hand tremor (and big fingers):
◦ Problem: The buttons are so small, I hit "Cancel" when
going for "Submit". Then I have to start all over again.
◦ Works well: This website buttons are big enough that I
don't hit the wrong button even when I'm riding on the
bumpy bus.
3/14/2019 16
Design
2.5.3 Label in Name (A)
For user interface components with labels that include
text or images of text , the name contains the text that
is presented visually.
Reporter with repetitive stress injury who uses voice
recognition software:
◦ Problem: It understood most of my voice commands until I
got to the Send button. I kept saying 'Send' and it didn't
work.
─ Note: It was visually labelled 'send' but the 'name' in the
code was 'submit'. It would have worked if the 'name'
started with 'send’.
◦ Works Well: All controls can be activated with simple voice
command.
3/14/2019 17
Content
4.1.3 Status Messages (AA)
In content implemented using markup languages, status
messages can be programmatically determined
through role or properties such that they can be
presented to the user by assistive technologies without
receiving focus.
Accountant who is blind and uses a screen reader:
◦ Problem: I selected a class for the conference, but I can't
tell if it got added to my schedule.
◦ Works well: When I add a meeting to my calendar, I hear a
confirmation.
3/14/2019 18
Development
Questions?
193/14/2019

Más contenido relacionado

La actualidad más candente

Mobile App Design & Tools
Mobile App Design & ToolsMobile App Design & Tools
Mobile App Design & ToolsDeepak Modak
 
Mobile App Design Best Practices - Usable Interfaces for Tiny Places
Mobile App Design Best Practices - Usable Interfaces for Tiny PlacesMobile App Design Best Practices - Usable Interfaces for Tiny Places
Mobile App Design Best Practices - Usable Interfaces for Tiny PlacesApigee | Google Cloud
 
Application Design - Part 2
Application Design - Part 2Application Design - Part 2
Application Design - Part 2Kelley Howell
 
UI design for mobile apps
UI design for mobile appsUI design for mobile apps
UI design for mobile appsIvano Malavolta
 
UXPA2019 I am the LAAW! The Lean Accessibility Audit Workshop
UXPA2019  I am the LAAW!   The Lean Accessibility Audit WorkshopUXPA2019  I am the LAAW!   The Lean Accessibility Audit Workshop
UXPA2019 I am the LAAW! The Lean Accessibility Audit WorkshopUXPA International
 
Design Document - Readiness Assessment by Chatbot
Design Document - Readiness Assessment by ChatbotDesign Document - Readiness Assessment by Chatbot
Design Document - Readiness Assessment by ChatbotKelli Fleming
 
Is This a Button? A Question Your Users Should Never Ask.
Is This a Button? A Question Your Users Should Never Ask.Is This a Button? A Question Your Users Should Never Ask.
Is This a Button? A Question Your Users Should Never Ask.Andrew Malek
 
Heuristic evaluation
Heuristic evaluationHeuristic evaluation
Heuristic evaluationjanine Risk
 
UX Design for Mobile Interfaces
UX Design for Mobile InterfacesUX Design for Mobile Interfaces
UX Design for Mobile InterfacesAndi Galpern
 
Designing Around Dialogs
Designing Around DialogsDesigning Around Dialogs
Designing Around Dialogsblider
 
User interface design for touch screen displays
User interface design for touch screen displaysUser interface design for touch screen displays
User interface design for touch screen displaysNew Vision Display
 
App for that April 15 2013
App for that April 15 2013App for that April 15 2013
App for that April 15 2013Tracy Smith
 
From Prototyping to Optimization; UX/UI a continuous process
From Prototyping to Optimization; UX/UI a continuous processFrom Prototyping to Optimization; UX/UI a continuous process
From Prototyping to Optimization; UX/UI a continuous processArabNet ME
 
Mobile tech at bootcamp2018
Mobile tech at bootcamp2018Mobile tech at bootcamp2018
Mobile tech at bootcamp2018KBehnke
 
Even more accessible! What WCAG 2.1 means for designers - Web Directions Summ...
Even more accessible! What WCAG 2.1 means for designers - Web Directions Summ...Even more accessible! What WCAG 2.1 means for designers - Web Directions Summ...
Even more accessible! What WCAG 2.1 means for designers - Web Directions Summ...Intopia
 
User Experience Masterclass 101 with Mark Swaine
User Experience Masterclass 101 with Mark SwaineUser Experience Masterclass 101 with Mark Swaine
User Experience Masterclass 101 with Mark SwaineMark N Swaine
 
How to manage your Design Process and Heuristic Evaluation Presentation
How to manage your Design Process and Heuristic Evaluation PresentationHow to manage your Design Process and Heuristic Evaluation Presentation
How to manage your Design Process and Heuristic Evaluation PresentationBella Dwi Jayanti
 

La actualidad más candente (20)

Mobile App Design & Tools
Mobile App Design & ToolsMobile App Design & Tools
Mobile App Design & Tools
 
Mobile App Design Best Practices - Usable Interfaces for Tiny Places
Mobile App Design Best Practices - Usable Interfaces for Tiny PlacesMobile App Design Best Practices - Usable Interfaces for Tiny Places
Mobile App Design Best Practices - Usable Interfaces for Tiny Places
 
Application Design - Part 2
Application Design - Part 2Application Design - Part 2
Application Design - Part 2
 
UI design for mobile apps
UI design for mobile appsUI design for mobile apps
UI design for mobile apps
 
UXPA2019 I am the LAAW! The Lean Accessibility Audit Workshop
UXPA2019  I am the LAAW!   The Lean Accessibility Audit WorkshopUXPA2019  I am the LAAW!   The Lean Accessibility Audit Workshop
UXPA2019 I am the LAAW! The Lean Accessibility Audit Workshop
 
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?
 
Design Document - Readiness Assessment by Chatbot
Design Document - Readiness Assessment by ChatbotDesign Document - Readiness Assessment by Chatbot
Design Document - Readiness Assessment by Chatbot
 
Usability basics
Usability basicsUsability basics
Usability basics
 
Is This a Button? A Question Your Users Should Never Ask.
Is This a Button? A Question Your Users Should Never Ask.Is This a Button? A Question Your Users Should Never Ask.
Is This a Button? A Question Your Users Should Never Ask.
 
Accessible Responsive Web Design
Accessible Responsive Web DesignAccessible Responsive Web Design
Accessible Responsive Web Design
 
Heuristic evaluation
Heuristic evaluationHeuristic evaluation
Heuristic evaluation
 
UX Design for Mobile Interfaces
UX Design for Mobile InterfacesUX Design for Mobile Interfaces
UX Design for Mobile Interfaces
 
Designing Around Dialogs
Designing Around DialogsDesigning Around Dialogs
Designing Around Dialogs
 
User interface design for touch screen displays
User interface design for touch screen displaysUser interface design for touch screen displays
User interface design for touch screen displays
 
App for that April 15 2013
App for that April 15 2013App for that April 15 2013
App for that April 15 2013
 
From Prototyping to Optimization; UX/UI a continuous process
From Prototyping to Optimization; UX/UI a continuous processFrom Prototyping to Optimization; UX/UI a continuous process
From Prototyping to Optimization; UX/UI a continuous process
 
Mobile tech at bootcamp2018
Mobile tech at bootcamp2018Mobile tech at bootcamp2018
Mobile tech at bootcamp2018
 
Even more accessible! What WCAG 2.1 means for designers - Web Directions Summ...
Even more accessible! What WCAG 2.1 means for designers - Web Directions Summ...Even more accessible! What WCAG 2.1 means for designers - Web Directions Summ...
Even more accessible! What WCAG 2.1 means for designers - Web Directions Summ...
 
User Experience Masterclass 101 with Mark Swaine
User Experience Masterclass 101 with Mark SwaineUser Experience Masterclass 101 with Mark Swaine
User Experience Masterclass 101 with Mark Swaine
 
How to manage your Design Process and Heuristic Evaluation Presentation
How to manage your Design Process and Heuristic Evaluation PresentationHow to manage your Design Process and Heuristic Evaluation Presentation
How to manage your Design Process and Heuristic Evaluation Presentation
 

Similar a Many Devices, One Standard: Mobile Accessibility with WCAG 2.1

Redesigning the metro ticketing system
Redesigning the metro ticketing systemRedesigning the metro ticketing system
Redesigning the metro ticketing systemnilaysanghavi
 
Wp quality bar tedy
Wp quality bar   tedyWp quality bar   tedy
Wp quality bar tedyAgate Studio
 
13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design
13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design 13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design
13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design BugRaptors
 
Android notifications. testing guideline
Android notifications. testing guidelineAndroid notifications. testing guideline
Android notifications. testing guidelineTechMagic
 
Create your own sixth sense device
Create your own sixth sense deviceCreate your own sixth sense device
Create your own sixth sense deviceFaheem Nazir
 
Ubercool, pixel perfct & slick design… that just doesn't work
Ubercool, pixel perfct & slick design… that just doesn't workUbercool, pixel perfct & slick design… that just doesn't work
Ubercool, pixel perfct & slick design… that just doesn't workSamuel Bednar
 
Mobile UX Workshop General Assembly
Mobile UX Workshop General AssemblyMobile UX Workshop General Assembly
Mobile UX Workshop General AssemblyDoralin Kelly
 
Vodafone 360-Open Heuristic Evaluation
Vodafone 360-Open Heuristic EvaluationVodafone 360-Open Heuristic Evaluation
Vodafone 360-Open Heuristic EvaluationJames Griffin
 
Guidelines for Android application design.pptx
Guidelines for Android application design.pptxGuidelines for Android application design.pptx
Guidelines for Android application design.pptxdebasish duarah
 
Mobile App Testing Checklist
Mobile App Testing ChecklistMobile App Testing Checklist
Mobile App Testing ChecklistManoj Lonar
 
Best UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdf
Best UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdfBest UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdf
Best UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdfHarssh Trivedi
 
Phone companion test
Phone companion testPhone companion test
Phone companion testTekObserver
 
Mobile app ux_principles
Mobile app ux_principlesMobile app ux_principles
Mobile app ux_principlessolomon kitumba
 
Mobile App UX Principles: Improving User Experience and Optimising Conversion
Mobile App UX Principles: Improving User Experience and Optimising ConversionMobile App UX Principles: Improving User Experience and Optimising Conversion
Mobile App UX Principles: Improving User Experience and Optimising ConversionMatthieu Tran-Van
 

Similar a Many Devices, One Standard: Mobile Accessibility with WCAG 2.1 (20)

Redesigning the metro ticketing system
Redesigning the metro ticketing systemRedesigning the metro ticketing system
Redesigning the metro ticketing system
 
WCAG 2.1 Mobile Accessibility
WCAG 2.1 Mobile AccessibilityWCAG 2.1 Mobile Accessibility
WCAG 2.1 Mobile Accessibility
 
Manual for IWB.pptx
Manual for IWB.pptxManual for IWB.pptx
Manual for IWB.pptx
 
Wp quality bar tedy
Wp quality bar   tedyWp quality bar   tedy
Wp quality bar tedy
 
13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design
13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design 13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design
13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design
 
Tell me Feedback with Screenshot
Tell me Feedback with ScreenshotTell me Feedback with Screenshot
Tell me Feedback with Screenshot
 
Geminate Screenshot Feedback
Geminate Screenshot FeedbackGeminate Screenshot Feedback
Geminate Screenshot Feedback
 
New to the touch
New to the touchNew to the touch
New to the touch
 
Android notifications. testing guideline
Android notifications. testing guidelineAndroid notifications. testing guideline
Android notifications. testing guideline
 
Create your own sixth sense device
Create your own sixth sense deviceCreate your own sixth sense device
Create your own sixth sense device
 
Ubercool, pixel perfct & slick design… that just doesn't work
Ubercool, pixel perfct & slick design… that just doesn't workUbercool, pixel perfct & slick design… that just doesn't work
Ubercool, pixel perfct & slick design… that just doesn't work
 
Mobile UX Workshop General Assembly
Mobile UX Workshop General AssemblyMobile UX Workshop General Assembly
Mobile UX Workshop General Assembly
 
Vodafone 360-Open Heuristic Evaluation
Vodafone 360-Open Heuristic EvaluationVodafone 360-Open Heuristic Evaluation
Vodafone 360-Open Heuristic Evaluation
 
Guidelines for Android application design.pptx
Guidelines for Android application design.pptxGuidelines for Android application design.pptx
Guidelines for Android application design.pptx
 
Mobile App Testing Checklist
Mobile App Testing ChecklistMobile App Testing Checklist
Mobile App Testing Checklist
 
Best UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdf
Best UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdfBest UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdf
Best UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdf
 
Phone companion test
Phone companion testPhone companion test
Phone companion test
 
Mobile app ux_principles
Mobile app ux_principlesMobile app ux_principles
Mobile app ux_principles
 
Mobile App UX Principles: Improving User Experience and Optimising Conversion
Mobile App UX Principles: Improving User Experience and Optimising ConversionMobile App UX Principles: Improving User Experience and Optimising Conversion
Mobile App UX Principles: Improving User Experience and Optimising Conversion
 
Mobile app ux_principles
Mobile app ux_principlesMobile app ux_principles
Mobile app ux_principles
 

Más de Interactive Accessibility

Más de Interactive Accessibility (12)

Demystifying Mobile: Designing with Accessibility in Mind
Demystifying Mobile: Designing with Accessibility in MindDemystifying Mobile: Designing with Accessibility in Mind
Demystifying Mobile: Designing with Accessibility in Mind
 
Mitgating Legal Risk for Web and Mobile Accessibility
Mitgating Legal Risk for Web and Mobile AccessibilityMitgating Legal Risk for Web and Mobile Accessibility
Mitgating Legal Risk for Web and Mobile Accessibility
 
Achieving Proactive Accessibility Compliance
Achieving Proactive Accessibility ComplianceAchieving Proactive Accessibility Compliance
Achieving Proactive Accessibility Compliance
 
Mobile Accessibility in WCAG 2.1 and Beyond
Mobile Accessibility in WCAG 2.1 and BeyondMobile Accessibility in WCAG 2.1 and Beyond
Mobile Accessibility in WCAG 2.1 and Beyond
 
Mobile Accessibility on the Move
Mobile Accessibility on the MoveMobile Accessibility on the Move
Mobile Accessibility on the Move
 
ATIA Workshop - iOS Accessibility
ATIA Workshop - iOS AccessibilityATIA Workshop - iOS Accessibility
ATIA Workshop - iOS Accessibility
 
Challenges with VPATs
Challenges with VPATsChallenges with VPATs
Challenges with VPATs
 
Accessible Web Content & Intellectual Disabilities
Accessible Web Content & Intellectual DisabilitiesAccessible Web Content & Intellectual Disabilities
Accessible Web Content & Intellectual Disabilities
 
eBook Accessibility Promises & Challenges
eBook Accessibility Promises & ChallengeseBook Accessibility Promises & Challenges
eBook Accessibility Promises & Challenges
 
2013 Accessibility Trends
2013 Accessibility Trends2013 Accessibility Trends
2013 Accessibility Trends
 
Introduction to WAI-ARIA
Introduction to WAI-ARIAIntroduction to WAI-ARIA
Introduction to WAI-ARIA
 
Usability Testing for People w/ Disabilities
Usability Testing for People w/ DisabilitiesUsability Testing for People w/ Disabilities
Usability Testing for People w/ Disabilities
 

Último

Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 

Último (20)

Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 

Many Devices, One Standard: Mobile Accessibility with WCAG 2.1

  • 1. Many Devices – One Standard: Mobile Accessibility with WCAG 2.1 KATHLEEN WAHLBIN AND SHADI ABOU-ZAHRA 13/14/2019
  • 2. Mobile Challenges Small Screens Touch Screens Device Orientation Senor Input Environmental Conditions 3/14/2019 2
  • 3. Mobile Web vs. Native Application 3/14/2019 3 Native apps run as a software application and work with the device’s built-in features — like the camera, microphone, location services, etc. Web apps run in the browser and are much easier to maintain because they have a common code base across multiple platforms
  • 4. Mobile Accessibility Policies US Section 508: WCAG 2.0 Europe: EN 301 549 (WCAG 2.1) Other local developments with risk of standards fragmentation 3/14/2019 4
  • 5. WCAG 2.0 to ICT “Guidance on Applying WCAG 2.0 to Non-Web ICT” - currently only applicable to 2.0 not 2.1 w3.org/TR/wcag2ict/ 3/14/2019 5
  • 6. UAAG & Mobile Key is to support the accessibility settings and features on the device within the application w3.org/TR/IMPLEMENTING-UAAG20/mobile 3/14/2019 6
  • 7. EN 301 549 & Mobile Applications Clause 9: Web Content (WCAG 2.1) Clause 10: Non-Web Documents (WCAG2ICT) Clause 11: Non-Web Software (WCAG2ICT) https://www.etsi.org/deliver/etsi_en/301500_3015 99/301549/02.01.02_60/en_301549v020102p.pdf 3/14/2019 7
  • 8. What is WCAG 2.1? All of WCAG 2.0 5 New SCs at Level A 7 New SCs at Level AA 5 New SCs at Level AAA 3/14/2019 8
  • 9. WCAG 2.1 for Mobile Provides additional guidance for mobile Important to understand the user need Thinking about mobile accessibility up front is key w3.org/WAI/standards-guidelines/wcag/new-in-21/ w3.org/WAI/people-use-web/user-stories/#retiree 3/14/2019 9
  • 10. 1.3.4 Orientation (AA) Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential. Comic with cerebral palsy who uses a wheelchair: ◦ Problem: I can't rotate my tablet — it's attached to my wheelchair. ◦ Works well: The application works whether I attach my tablet horizontally or vertically. 3/14/2019 10 Product Feature
  • 11. 2.1.4 Character Key Shortcuts (A) If a keyboard shortcut is implemented in content using only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true: Turn off, Remap or Active only on focus Reporter with repetitive stress injury who uses voice recognition software: ◦ Problem: When I was using my mail app with voice commands, it kept deleting the messages instead of opening them. ◦ Note: There was a shortcut key for delete that was triggered by something he was saying, and no way to turn off the shortcut keys. ◦ Works well: In my spreadsheet application, there's a setting to turn off or modify character key shortcuts. 3/14/2019 11 Product Feature
  • 12. 2.5.1 Pointer Gestures (A) All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture, unless a multipoint or path-based gesture is essential. Comic with cerebral palsy who has limited movement in fingers: ◦ Problem: I can't move my fingers like that. I need another way to zoom in the map. ◦ Works well: Good thing there are buttons to zoom in and out. 3/14/2019 12 Interaction Design
  • 13. 2.5.4 Motion Actuation (A) Functionality that can be operated by device motion or user motion can also be operated by user interface components and responding to the motion can be disabled to prevent accidental actuation, except when: Supported Interface or Essential Comic with cerebral palsy who uses a wheelchair: ◦ Problem: I can't shake my phone; it's connected to my wheelchair. So there needs to be another way to activate that feature, like a button. ◦ Problem: I have tremors, so I need to turn off motion activation — and then be able to do stuff without motion actuation. ◦ Works well: My friend has this cool application that looks like a physical spin lock. She rotates the phone to turn to the combination. I can use the same application by typing the numbers directly. 3/14/2019 13 Interaction Design
  • 14. 2.5.2 Pointer Cancellation (A) For functionality that can be operated using a single pointer , at least one of the following is true: No Down- Event, Abort or Undo, Up Reversal, Essential Politician with motor disabilities and low vision: ◦ Problem: I went to hit the "Mute" button and accidentally touched the "End Call" button instead. It hung up immediately. ◦ Works well: In another web conferencing application, if I accidentally touch the "End Call" button, I can just slide my finger off the "End Call" button and it won't end the call. 3/14/2019 14 Interaction Design
  • 15. 1.4.11 Non-Text Contrast (AA) The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s): User Interface Components and Graphical Objects. Retiree with low contrast sensitivity: ◦ Problem: I couldn't use the "Order Form" — there were no text boxes. After a long call with customer service, I learned there were text box borders that were too light for me to see. ◦ Works well: It's easy for me to see all the icons and buttons and everything — even in the sunlight. 3/14/2019 15 Design
  • 16. 2.5.5 Target Size (AAA) The size of the target for pointer inputs is at least 44 by 44 CSS pixels except when: Equivalent, Inline, User Agent Control or Essential Retiree with hand tremor (and big fingers): ◦ Problem: The buttons are so small, I hit "Cancel" when going for "Submit". Then I have to start all over again. ◦ Works well: This website buttons are big enough that I don't hit the wrong button even when I'm riding on the bumpy bus. 3/14/2019 16 Design
  • 17. 2.5.3 Label in Name (A) For user interface components with labels that include text or images of text , the name contains the text that is presented visually. Reporter with repetitive stress injury who uses voice recognition software: ◦ Problem: It understood most of my voice commands until I got to the Send button. I kept saying 'Send' and it didn't work. ─ Note: It was visually labelled 'send' but the 'name' in the code was 'submit'. It would have worked if the 'name' started with 'send’. ◦ Works Well: All controls can be activated with simple voice command. 3/14/2019 17 Content
  • 18. 4.1.3 Status Messages (AA) In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus. Accountant who is blind and uses a screen reader: ◦ Problem: I selected a class for the conference, but I can't tell if it got added to my schedule. ◦ Works well: When I add a meeting to my calendar, I hear a confirmation. 3/14/2019 18 Development