SlideShare une entreprise Scribd logo
1  sur  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

Contenu connexe

Tendances

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
 

Tendances (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
 

Similaire à 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
 

Similaire à 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
 

Plus de Interactive Accessibility

Plus 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
 

Dernier

Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions
 
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAzure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAndikSusilo4
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Paola De la Torre
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...HostedbyConfluent
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphNeo4j
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhisoniya singh
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsMemoori
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptxLBM Solutions
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 

Dernier (20)

Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
 
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAzure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & Application
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptx
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 

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