Introduction
I was curious to find out how to make an application more accessible. You can look at popular applications like YouTube or Netflix; they all have accessibility features like VoiceOver and dynamic fonts. I decided to create this example for a fruit calorie counter. It contains a list of fruits with the fruit name, fruit calories, and a favorite button.
Where to Start
Before diving into implementation details, I want to highlight some information about the existing accessibility features and what I will be focusing on.
Existing Accessibility Features
Apple provides a variety of tools; here are the most important ones:
- VoiceOver: A screen reader that allows visually impaired users to interact with their devices.
- Dynamic Type: Support for adjustable text sizes. Users can choose larger text sizes in the system settings, and apps should respond appropriately by scaling text and UI elements.
- Contrast and Color: Ensuring sufficient contrast between text and background to make content readable for users with visual impairments.
- Switch Control: A feature that allows users with limited mobility to control their device using adaptive accessories.
- AssistiveTouch: A feature that helps users with physical disabilities perform actions that would otherwise require gestures.
- Labels and Hints: Using accessibility labels and hints to provide descriptive text for UI elements, which helps VoiceOver users understand what an element does.
Focus Areas
I will be focusing on Labels and Hints, VoiceOver, and Dynamic Type.
Implementation
First Step
The first step would be to mark yourUIElement.isAccessibilityElement = true
to enable your component’s visibility for VoiceOver.
Second Step
The second step would be to define accessibilityElements
for UI components that you want to access for VoiceOver. VoiceOver will read elements from top to bottom.
override var accessibilityElements: [Any]? {
get {
return [
nameLabel as Any,
caloriesLabel as Any,
favouriteButton as Any
]
}
set { }
}
Third Step
The third step would be to add an accessibilityLabel
; it will help identify the control or view.
favouriteButton.accessibilityLabel = "favourite"
Fourth Step
The fourth step would be to add an accessibilityHint
; it describes the result of performing an action on the element.
favouriteButton.accessibilityHint = favouriteButton.isSelected ? "makes favourite" : "removes favourite"
Adding Dynamic Type to Font Size
If you run your application and go to the Accessibility Inspector
and Run Audit
for it, you will probably see an error like Dynamic font sizes are unsupported
. This means if you go and change the Text Size for your entire system, your application’s font size will not change.
To fix it, you need to add adjustsFontForContentSizeCategory = true
- it indicates whether the corresponding element should automatically update its font when the device’s UIContentSizeCategory
is changed.
nameLabel.adjustsFontForContentSizeCategory = true
caloriesLabel.adjustsFontForContentSizeCategory = true
If you need a custom font in your application, you need to transform the custom font to Dynamic Type
by using UIFontMetrics.default.scaledFont
.
Now you can actually test it from the Accessibility Inspector
settings page.
Caveats
The last thing is to make the table view automatically calculate row size because your content can potentially be clipped, as it happened to me 😊 You just need to add UITableView.automaticDimension
to the heightForRowAt
method of UITableViewDelegate
.