4 iOS display settings to check your app with

This article showcases iOS display settings that people expect native mobile apps to adapt to and support their individual needs. Note that web content displayed inside native mobile apps generally does not respond to iOS settings. Most people will not be able to make a distinction and may not understand when webviews don’t reflect their display preferences.

Let’s look at four display settings. These features used to be considered accessibility-only but are now so widely used that they have moved to the Settings app > Display & Brightness.

  1. Dark mode
  2. Text scaling
  3. Display zoom
  4. Orientation

Screenshots taken on an iPhone 16e running iOS 26.4.

Dark mode

Dark mode is an expected feature these days. If your app doesn’t support dark mode, some people may struggle with reading the typical dark text on a light background. Even if they can make it work, a subset of people will have a much better experience when your app supports dark mode which can reduce eye strain.

It’s just as important to continue supporting light mode because other users may struggle to read light text on a dark background. Allowing your app to adapt to user preferences is key. Also consider providing a setting in your app that allows users to override the iOS appearance for your app in case there is a conflict.

Supporting dark mode means making sure your color combinations for text, controls and meaningful icons meet color contrast requirements on all screens with both a light and dark background.

Setting dark mode in iOS

Settings app > Display & Brightness > Appearance > Select the Dark radio button

We can also add an action button to the iOS Control Panel for toggling dark mode on and off quickly. Access the control panel by pulling down from the top right of the screen. Tap the “+” icon and look for the dark mode toggle to add to the screen.

Screenshot of the iOS Display & Brightness screen in dark mode with the Dark button highlighted.
iOS Dark mode settings
Screenshot of the iOS Control Panel with two controls highlights, one for adding to the Control Panel and one for toggling dark mode. There is also an arrow in the up right pointing down to indicate that you open the Control Panel by dragging down from the top right of the screen.
iOS Control Panel

Dark mode example

Comparing light mode to dark mode in the NPR native mobile app:

Screenshot of a list of headlines with thumbnail images in dark text on a light background.
Light mode
Screenshot of a list of headlines with thumbnail images in light text on a dark background.
Dark mode

Text scaling

Enabling Dynamic Type for the text in native mobile apps gives people a lot of control over their experience. A common customer complaint is that the font size in an app is too small to read. If the app doesn’t support Dynamic Type, it won’t respond to peoples’ iOS text settings to view the text larger.

iOS provides two levels of text resizing. In Display settings, text size can be set up to 135% from the default 100%. In Accessibility settings, the text size scale can be increased to 310%. Yes, we should support every level of text resize though some text may not resize like labels in navigation.

Supporting text scaling means ensuring that all screens and content respond to iOS font settings while reflowing larger text and ensuring text is not truncated with ellipsis or cutoff by a container that doesn’t scroll.

Setting text size in iOS

  1. Settings app > Display & Brightness > Text Size > Adjust slider up to 135%
  2. Settings app > Accessibility > Text Size > Larger Text > Switch Larger Accessibility Sizes on > Adjust slider up to 310%
Screenshot of the iOS Text size screen with Text size set to 135% all the way to the right on the highlighted slider. A note above the slider says larger sizes are available in Accessibility Settings.
135% text scaling – Largest regular scale text size
Screenshot of the iOS Larger Text screen with Larger accessibility sizes enabled and font size set to the maximum 310%
310% text scaling – Largest accessibility text size

We can also add a slider to the iOS Control Panel for scaling font size quickly. Access the control panel by pulling down from the top right of the screen. Tap the “+” icon and look for the text scale slider to add to the screen.

Text scaling example

Comparing 100% text size to an example of 310% text size with headlines truncated in the NPR native mobile app:

Screenshot of a list of headlines with thumbnails in the NPR app at default text size. The full text of each headline is visible.
100% text scaling – iOS default
Screenshot of a list of headlines with thumbnails in the NPR app 310% text size. The two visible headlines are truncated with ellipsis after a couple of words.
310% text scaling – iOS largest accessibility text size

Display zoom

This is a setting that developers have no control over and it often gets enabled when people set up a new iPhone. During setup they are asked if they want to view “Larger Text” which is a display zoom setting. The result of enabling “Larger Text” is that everything on the screen gets larger—not just the text—whether or not text scaling is supported.

Supporting display zoom Larger Text includes allowing screens and overlays like bottom sheets to expand and scroll as the display size increases. People may combine Larger Text display zoom with accessibility font sizes.

Setting display zoom in iOS

Settings app > Display & Brightness > Display Zoom > Select the Larger Text radio button

Screenshot of the iOS Display Zoom screen with the Default size selected
iOS Default display zoom
Screenshot of the iOS Display Zoom screen with the Larger Text size selected. Everything on the screen is larger than the default size.
iOS Larger Text display zoom

Display zoom example

Comparing Default display zoom to Larger Text display zoom in the NPR native mobile app at 100% text size:

Screenshot of the NPR app with default display zoom set at 100% text size.
Default display zoom at 100% text size
Screenshot of the NPR app at Larger Text display zoom with 100% text size. Everything on the screen is larger than default.
Larger Text display zoom at 100% text size

Orientation

Orientation isn’t an iOS user setting but it is a native mobile app developer setting. By default, iOS apps are intended to work in both portrait and landscape orientations. Landscape orientation has to be intentionally disabled. Preventing people from using an app in landscape orientation may prevent them from using it at all. Some people have their devices fixed in landscape orientation and have a difficult time using apps that don’t support all orientations.

Orientation example

The NPR app doesn’t support landscape orientation. Comparing portrait orientation to landscape orientation in the USAA native mobile app:

Screenshot of the USAA native mobile login screen in portrait orientation
Portrait orientation
Screenshot of the USAA native mobile login screen in landscape orientation where the single column of content has reflowed into two columns.
Landscape orientation

Conclusion

This list isn’t exhaustive of all the possible display settings in iOS that people may use to interact with your native mobile app. The four settings we explored cover a range of user preferences and accessibility needs, but this is always evolving and changing. Our goal should be to make sure our iOS apps are adapting to users’ preferences where it can.

YNAB adds a Home screen to its iOS mobile app; but is it accessible?

I’m a longtime YNAB (You Need a Budget) customer. I use their monthly planning software every day to track my expenses and manage my budget. I’ve written about their webapp accessibility previously and noted over the years that they have made updates to improve the experience for disabled users, such as adding dark mode support.

Yesterday when I opened the app, I noticed it looked different. The bottom tab bar navigation changed and the new first tab was called “Home” with a screen that looks something like a dashboard.

YNAB home screen showing money available to assign, top priority of savings and a September summary of budgeting and spending

Whenever I see something new in an app I use frequently, I like to turn on the VoiceOver (VO) screen reader on my iPhone 12 mini and explore the interface. I found a few critical issues where VO users simply cannot access some controls, as well as a few other Level A failures that should be addressed soon.

I did notice that YNAB put out an updated release this morning to Version 25.26 which has fixed some other issues, such as the “Transaction” button not having an accessible name of “Add Transaction” even though it relies on the plus icon for sighted users to understand the button’s purpose.

Let’s look at one of the critical issues YNAB should resolve to make the new “Home” screen more accessible.

Assistive technology users cannot select options from the ellipsis button context menu

In the upper right of the screen is a circular button with an ellipsis icon in the middle. The button doesn’t have an accessible name but does announce the “button” trait/role so VO users know its interactive and the “pop up button” attribute so VO users know the button will open a menu.

screenshot of the ellipsis button on the YNAB Home screen. VoiceOver caption panel shows an announcement of button, pop up button.

When I double-tap the unnamed button, a context menu opens with four available actions: Open Plan, Hide Amounts, Support and Settings & Privacy. When the menu appears on screen, focus moves to the first item in the list, “Open Plan”. While the “Open Plan” control is missing the button trait/role, it can be double-tapped by VO users to activate.

Unfortunately, assistive technology (AT) users cannot access the other three controls below “Open Plan”. When a VO user swipes to go to the next option in the list, focus moves outside the list to a button with an accessible name of “Dismiss context menu”. VO users cannot swipe to other content on the screen because focus is trapped. Their only option is to dismiss the menu to continue.

screenshot of the YNAB home screen with the ellipsis context menu expanded to show four options. VoiceOver is stuck on an invisible button announcing Dismiss context menu, button.

I tried accessing the menu options using a Bluetooth keyboard and Voice Control speech input but was unable to select any of the menu options using those AT methods. This menu is actually a keyboard trap as keyboard users cannot close the menu to continue on the “Home” screen and have to restart the app. Here’s a video of the VO interaction with the ellipsis button and context menu

The overall accessibility of the new “Home” screen is pretty good but the design seems to break down when there are more complex controls. It’s great that YNAB has an accessibility statement on its website; I’d like to see a link to that in the mobile app too, along with the new Accessibility Nutrition Labels listed in the App Store.

Accessibility testing spreadsheet version 2

I’ve updated the spreadsheet I use for tracking accessibility audits with three big additions.

Download the accessibility testing spreadsheet (Updated 26 January 2024)

WCAG 2.2 success criteria added

I’ve added the six new WCAG 2.2 level A and AA success criteria (SC) to the “WCAG Success Criterion” column in each component’s tab. This brings the total number of SCs for an audit to 55. (4.1.1 Parsing is deprecated but still included for 2.1.) Each new SC is highlighted in light green and includes “NEW in 2.2” in its name.

If you’re not ready to test for WCAG 2.2 SCs, just mark them as N/A.

WCAG failure tracking

I’ve added rudimentary tracking of the number of WCAG violations found for each component which is displayed on the “Scope” tab in the a new “WCAG Violations” column. Each cell counts the number of “Fails” selected in the “Status” column of each component’s tab.

On the “Overview” tab, you can see a running total of all WCAG violations found for all components in the audit.

Prioritizing issues

I’ve also added a “Priority” column to each component’s tab. Each SC can be assigned a priority on a five-point scale:

  1. Critical – Blockers that prevent someone from completing a task, e.g. a button that cannot be used with a keyboard​
  2. High – Issues that present a significant barrier to someone completing a task, e.g. application times out without allowing the user to extend it
  3. Medium – (Most issues) Issues that present a barrier to some users from fully accessing the information or interface, e.g. text has poor color contrast​
  4. Low – Issues that present an unnecessary barrier but do not prevent a user from completing a task, e.g. image text that isn’t sufficiently descriptive​
  5. Best Practice – Issues that present some accessibility barriers but are not considered failures under the Web Content Accessibility Guidelines (WCAG), e.g. using a button instead of a link to open a webpage in a browser

If you have any questions about the spreadsheet or additions you’d like to see, please contact me.