Skip to content

A Brief Overview of Accessibility

Jump to bottom
Foxbolts edited this page May 21, 2025 · 11 revisions

Overview

Firefox iOS should strive to implement accessibility for new features, as well as add missing accessibility for existing features. This document will show you the few easy steps to take to ensure that this is done well.

Apple's Built-in Accessibility

Many Apple UI elements have accessibility built in (UIButton, UISwitch, UILabel, etc). This means that their isAccessibiltyElement property is set to true by default. If you're creating a custom element and want it to be accessible for VoiceOver, you want to make sure to enable this.

Accessibility Tools

accessibilityLabel

Many Apple UI elements have some default behaviour for reading accessibility. For example, a UILabel will read its contents. However, some elements may not have text, or you wish for VoiceOver to read something specific. This is where .accessibilityLabel comes into play. Anything set here is what VoiceOver will read. This always needs to be localized.

accessibilityTrait

Many standard Apple UI elements have specific traits enabled on them. For example, a UIButton will read "Description of button, button". That "button" is added by the UIAccessibilityTrait.button that a UIButton has. If you wish to set specific traits on an element, you would do this using the .accessibilityTrait call on that object, and then either pass in a singular trait or a collection of traits. These traits should be reflective of the element.

Always review traits that are read on Voice Over elements. For example:

  • If there's a click gesture listener on an image, that image should probably have the .button trait.
  • Clicks that brings the users outside the application should probably have the .link trait.
  • Section headers should have the .headers trait.
  • Useful article about accessibility traits in mobile: Deque Article Always try to think as a user that can't rely on visual cues, if the context is clear enough to be interacted with and understood.

accessibilityHint

Hints can be turned off by the users, but aren't less useful to give more context as to what an element on the screen does. For example, we give hint to the user when they scroll in the tab tray, to indicate how many tabs are visible in their view port in respect to their total number of tabs. Another example, a switch might read "Toggle logo, switch, on". By setting the accessibilityHint to something like, "Toggles the logo on the homepage cycling wallpapers", VoiceOver will read this additional phrase after phrase (which contains the accessibility label, hint and traits), giving more context about UI element.

VoiceOver UIImage Recognition

One awesome feature of iOS is that it has image recognition. The VoiceOver Image Recognition feature can be enabled by navigating to Settings > Accessibility > VoiceOver > VoiceOver Recognition > Image Descriptions > ON. After it reads your accessibilityLabel content, it will follow with a description of the image. This feature can be tested by navigating to the Photos app and verifying the difference in image description with the feature turned on and off.

This may be useful in many aspects of web browsing, but, if you're trying to control how your UI is represented by VoiceOver, you may want to disable this. This is done using the .accessibilityTraits = .none on the UIImageView itself.

Dynamic Type

Dynamic Type is an essential accessibility feature in iOS that allows users to adjust the size of the text system-wide based on their reading preferences. Supporting Dynamic Type ensures that users with visual impairments or different reading needs can comfortably interact with the Firefox iOS app.

Supporting Dynamic Text

Enable adjustsFontForContentSizeCategory on UILabel, UITextView, UIButton, and any custom text-containing views to ensure that the view automatically updates its font size when the user changes their preferred text size in iOS settings.

let label = UILabel()
label.text = "Supports Dynamic Type"
label.adjustsFontForContentSizeCategory = true

Using FXFontStyles for your text style, size, and weight should allow your fonts to automatically dynamically resize

Supporting Dynamic Icons

Similar to text, we often want to scale icons or other assets with Dynamic Type, and the simplest way to do this is with UIFontMetrics like so:

let dynamicWidth = max(UIFontMetrics.default.scaledValue(for: 16), 16)
let dynamicHeight = max(UIFontMetrics.default.scaledValue(for: 16), 16)

This scales the width/height values of 16 based on the user's current Dynamic Type setting while ensuring that the resulting value is never smaller than 16.

Adapting Layouts to Support Dynamic Type

Supporting Dynamic Type isn’t just about scaling fonts — it also means ensuring your layout can gracefully adapt when text and related elements grow or shrink. Larger text sizes can wrap onto multiple lines or require more vertical space, especially at accessibility sizes.

Although there is no one "size fits all" for adapting layouts, you should definitely keep this in mind when making changes to or adding new UI.

Some techniques to consider that may help with adaptive layouts:

  • Avoid fixed heights for views containing text.
  • Use Auto Layout constraints that allow labels and icons to grow naturally.
  • Set numberOfLines = 0 for multi-line labels so they can expand as needed.
  • UIStackView can be especially helpful, as they automatically reflow content with minimal code.

Additional Information

accessibilityIdentifier

This is a confusingly named trait of any UI object and is an identifier used for UI tests, generally. It is not part of user facing accessibility features for iOS. UI should be built in a testable way, so accessibilityIdentifiers should be added to required objects. An easy way of organizing reusable identifiers can be found in our AccessibilityIdentifiers struct.

Grouping Elements

Custom UI elements often needs to be grouped together, so the user can quickly know the content of a cell without having to navigate all elements inside that element. A good example could be the Pocket cells. There's an image, a title and a description. As a user, it's much more preferable to have the whole cell selectable with Voice Over, and having the title + description read back to back than having to swipe two times to have the title, then the description being read out loud. In that case, the labels in those cells need their accessibilityElement turned off, and the parent cell needs it's accessibilityElement turned on, and its accessibility label can be set as the combined text of the title and the description.

Larger Accessibility Sizes

In addition to standard Dynamic Type sizes, iOS offers 5 larger accessibility sizes specifically designed for users with low vision or other reading difficulties. These sizes significantly increase text and UI element sizes for improved readability.

To enable larger accessibility sizes, go to iOS Settings > Accessibility > Display & Text Size > Larger Text and enable Larger Accessibility Sizes.

Clone this wiki locally