Mystery Meat 2.0
- Ted Drake, Intuit Accessibility
- Poonam Tathavadkar, TurboTax
- CSUN 2017
- Slides: slideshare.net/7mary4
This presentation was created for the CSUN 2017 conference. It introduces several hidden interactions available within Android and iOS. Learn how these work and how to make them accessible.
Blue Bell Ice Cream is a classic example still live on the web.
The user must hover over the different images to see what they represent. It uses an image map and lacks alt text.
Android Touch and Hold
A.K.A.: Android’s Right Click or Android Long Press to Add context-speciï¬c menus
- Default: Touch and hold
- With TalkBack:
Double tap and hold to long press
Mint Transactions
This short video shows how you can use the touch and hold/long press to quickly change category or merchant name within the Mint application
Developers
- onLongClick: Called when a view has been clicked
and held - Deï¬ne and Show your menu
- Not for vital interactions.
- This is a short
cut.
It is possible to modify the default notiï¬cation to the user
iOS 3D Touch
iOS 3D Touch was introduced on the iPhone 6S. It detects the pressure a person applies to the screen with their ï¬nger. I light touch is seen as a tap. A medium touch will
trigger a peek view. A continued ï¬rm touch will launch the peek’s content into a full screen.
This also allows a person to trigger a shortcut menu on app icons.
- Peek:
Quick glance at relevant information and
actions - Pop:
Open full content previewed in the Peek - Quick Actions:
Custom task list from app icon
User Experience: A light press opens a hovering window so you can “Peek” at the content. When you press just a little bit harder, you will “Pop” into the actual content you’d just been
previewing in a Peek.
Developer info
Quick Actions
This short video shows how 3d touch is also available via the app’s icon for quick tasks.
Pressing and holding the ItsDeductible icon will trigger a menu with customized tasks. App Icon Developer resources
Developers
- Use accessibilityHint to suggest what’s
contained within the Peek - Don’t make peek the only way to perform an
action - Standard components – Accessible by default
- iOS 9: An Introduction to 3D Touch
- Quick Actions
- A peek at 3D Touch (WWDC 2016)
Swipe Revealed Actions
Alternative actions allow users to quickly make changes without having to open a detail screen. For instance, they can delete a transaction or change an email’s status. The standard interface is to display the options when a user swipes a row to the left. For voiceOver users, the options are announced as alternate actions
It’s Deductible Actions
This short video shows how the alternative actions menu is used in standard mode and how VoiceOver announces the options.
In iOS, editActionsForRowAtIndexPath deï¬nes the actions to display in response to swiping the speciï¬ed row
- Accessible by default
- Deï¬ne:
- Target Action and Response
- Visible Text
- Background color
Swipe Based Navigation
TurboTax uses a custom swipe based navigation between views. It lacks button or suggestions to move back and forth. User testing has showed it to be effective for
sighted users, but required some extra work for accessibility.
Default Experience With VoiceOver
The default experience on Turbo Tax uses a custom swipe gesture that lacks navigation buttons.
TurboTax detects a user’s Screen Reader/Switch Control status to show navigation buttons on Android and iOS
This video shows the default and VoiceOver/SwitchControl experience.
Notice in the standard experience how the screen tracks the user’s ï¬nger movement. This is not a standard swipe gesture, so it will not work with VoiceOver enabled.
We detect VoiceOver and SwitchControl is running to display alternate back and continue buttons
Swipe Navigation
- Animated transition between views
- Next and Back flow with every screen
- Eliminates navigation buttons
- No buttons? Accessibility?
- Have I reached the end of the screen?
Instead of a basic swipe gesture, this interface tracks the movement of the ï¬nger across the screen. This allows the animation to match the user’s ï¬nger speed for a more
natural transition.
However, the ï¬nger touch is intercepted by VoiceOver, so the custom navigation does not work when VoiceOver is enabled.
Detect Accessibility ON
UIAccessibility kit provides two methods
True == Show Navigation Buttons
These booleans always return true or false. We use this to insert navigation buttons into the screen.
State Change Notiï¬cation
This does not solve for the more complex of when the user decides to turn it on/off in the middle of the flow of the application for changes to take place dynamically.
For that as well, iOS has great support. Fires an accessibilityChanged event that helps detect changes even when the user is in the middle of the flow and chooses to
turn voice over on/off.
User enables VoiceOver while on a screen
Detect the status change
- UIAccessibilitySwitchControlStatusDidChange
- UIAccessibilityVoiceOverStatusChanged
- Refresh screen and insert navigation buttons
TurboTax Helper Function
- How can we refactor code to detect any
accessibility related settings and address them
together? - Helper function to the rescue!
- NSNotiï¬cationCenter adds observers to track any
settings that may require us to show buttons. - This is an OR logic. Example – if voice over OR
switch control status changed, display buttons.
Code speciï¬cs
- Boolean is assigned a value – true if buttons need to be shown.
- Consider a React Native project, all this happens in the native code side (Objective C). This boolean is then handed over to the JAVASCRIPT side since it is not feasible
for Javascript to get information directly from the device.