All you need to know Accessibility | iOS SDK | Swift

Why does Accessibility matter?

First thing first, it always feels good to know that even if your work is small but it’s making a huge difference in someone’s life. 🙂 There are millions of smartphone users all around the world with some sort of disability. Enabling accessibility into the software system ease them in interacting with it.

And on the other hand, if you’re working for any government agency you have to implement it because of 508 compliance (which says that any technology or software product must be accessible to all users).

Accessibility domains?

– Vision: a vision challenge that makes focusing difficult, color blindness or total blind.
– Hearing: difficulty hearing sound, partial hearing loss or maybe deaf.
– Physical and motor skills: difficulty when it comes to tapping the interface or holding a device.
– Learning and Literacy: hard to understand a complex user interface or hard to remember a sequence of step to do a certain task.

Image from Apple.

What is VoiceOver?

A screen reading tool that helps the user to interact with the application without seeing the screen. The feature is designed for those who have vision problems. Navigate to Settings/Accessibility/VoiceOver.

VoiceOver: Gestures?

Enable the VoiceOver to try this out.
– Single tap: Tap anywhere, VoiceOver will start speaking information as per the accessibility attributes (find more later).
– Swipe right or left: Try swipe right/left VoiceOver will navigate you through all items on the screen while reading them aloud. Right for forward/down and Left for reverse/up.
-Double Tap: is to tap on a selected item.
– Single swipe down: is to spell out the focused item.
– Three finger swipe: For page views to navigate forwards or backward

Accessibility attributes?

Core attributes that VoiceOver will use to provide information to the user.
– Label: way to identify the view (like settings button, profile image) VoiceOver will speak the same when the item will be selected.
– Traits: way to identify the element state, usage or behaviour (like a button is selected.) 
– Hint: way to describe the action of an element (like Go to detail).
– Frame: frame of the element within the screen.
– Value: The value of element like a slider bar.
– AccessibilityLanguage: The language code that the element label value, hint should be spoken. 

How to debug accessibility attributes?

Accessibility inspector is a tool given by Apple to debug your app (Navigate to Xcode/Open Developer Tool/Accessibility Inspector). Where developer can choose the target, enable the pointer to debug the view.

Accessibility Notification?

Animation or layout changes are a visual feedback to the user as a response of the action taken, Use announcements notification to provide an update (other options are layoutChanged, screenChanged delegates).

Target Touch Size?

As per Apple human interface guidelines it is recommended to maintain a tappable area of 44x44pt (minimum) for all controls in the application.

What is Dynamic Type?

Functionality that allows the users to dynamically adjust the size of text, images (choose their preferred text size). iOS app will adopt the text/image size as per user preference. (Apple Developer documentation)

Setup Smart Invert Colors?

Need to set `accessibilityIgnoresInvertColors` property to enable or prevent a control from inverting it’s colours. (Navigate to Setting/General/Accessibility/Display Accommodations/Invert Colors).

Thanks for reading this.

Quick Tips To Support Dark Mode In Your iOS App | iOS 13

All you need to know about Dark Mode on iOS 13

Overview? With iOS 13 and above people can adopt a dark appearance where Apple docs says user can use settings to make their devices automatically switch to dark mode when ambient is low and this will help you to put focus on your content.

Development Environment? As as iOS developer you’ve to use Xcode 11 with iOS 13 SDK and above, iOS will automatically update system controls such as switches, collection-views etc. If you are migrating your existing app to dark in that case you will have to adapt the colours. 

How to define colours for each mode?

System Colours? iOS 13 SDK includes new system colours so if you adapt these system colours your app will automatically support dark and light mode, You can use it via Storyboard as well as programmatically (Some example below)

Custom Colors? Yes it’s strongly recommended by Apple that use system colours to provide better UX and also to make sure the consistency across apps but using the asset you can define you colour choices. Once you define iOS will take care everything for you.

How to define Image for each mode?

Using the Assets you can specify which image you want to use for dark VS any other mode and just define the image and let iOS take care for you. 

How to detect dark mode programmatically?

On Load Detection? We can use overrideUserInterfaceStyle to check which mode is currently running on user device (Just make sure, this property only available on iOS 13 and above)

Runtime Detection? Can use traitCollectionDidChange to observe the changes, It is important to remember that trait-collection may be called for other trait changes (such as device rotation)

Set Dark Mode for Specific Screen? Yes you can, this property overrideUserInterfaceStyle is available for you to use (only iOS 13 and above)

How to support WKWebView?
Just need to create variable for the color and need to handle this in CSS.

:root {
    color-scheme: light dark;
        --h1-color: #333;
        --header-bg-clr: #FFF1FF;
        --header-txt-clr: white;
    }
    @media (prefers-color-scheme: dark) {
    :root {
        color-scheme: light dark;
        --h1-color: #333;
        --header-bg-clr: #FFF1FF;
        --header-txt-clr: white;
        }
    }

body { }
h1 { color: var(--h1-color); }
.header {
    background-color: var (--header-bg-clr);
    color: var(--header-txt-clr);
}

After Integrating this change you can use Safari to test (First you need to enable the developer menu option in Sarafi, Preferences, Advanced). Open wen inspector (using Command + Options + I) and you will see this screen with the option to toggle light/dark mode.