Never stop improving your accessibility.

WWDC25

Whether it’s virtual or in person, the accessibility labs have become one of my favorite parts of WWDC. You can gain such incredible insight into how to improve your app when people who are experts at the features in question look at how your app implements them (or doesn’t implement them 😬). Every single time I’ve received suggestions for improvements that I wouldn’t have found on my own. Plus the people running the labs I’ve been a part have been so kind. I really urge you to try one if you haven’t before.

It did give me a burst of pride when they said they had to work really hard to find something to improve with the accessibility of Please Don’t Rain. I thought it would be helpful to outline the changes I made, since they were more involved than I originally thought they would be.

Contrast Issue

The feedback I got related to my old nemesis, dark mode, and my charts.

Here’s an example:

A LineMark chart in dark mode.

For the “Rain 20%” title the color is .secondary and I’m using the default for the chart axis colors.

One of the Apple employees conducting the lab said she used dark mode exclusively by necessity and mentioned that the readability of the chart axis labels wasn’t great for her. The contrast could definitely be improved. I told her I’d make it a priority once I got home.

Details

The header is just displayed using Text, but how do we change the styling for the chart axis labels?

Here’s how I was displaying the X axis for my charts. All of the styling is just using defaults.

AxisMarks(values: .stride(by: .hour, count: 3)) { _ in
    AxisTick()
    AxisGridLine()
    AxisValueLabel(format: myDateFormatStyle.hour())
}

myDateFormatStyle is a Date.FormatStyle that is created with both a Calendar appropriate for the time zone in question and the time zone.


let myTimeZone = TimeZone(identifier: "Pacific/Honolulu") ?? TimeZone.current

var myCalendar = Calendar(identifier: .gregorian)
myCalendar.timeZone = myTimeZone

let myDateFormatStyle = Date.FormatStyle(calendar: myCalendar, timeZone: myTimeZone)

I know might be asking, “Why pass in the time zone if the Calendar is configured to use that time zone?” The answer can be seen using the newest version of Xcode’s Playgrounds.

Here I’m only specifying the Calendar when creating a Date.FormatStyle. If you look closely at the properties you can see an issue. The time zone inside the calendar property is correct and is listed as Honolulu. However, the timeZone property is using the default values for the device it’s running on. Since I wasn’t in Honolulu’s time zone when I ran this it causes a mismatch, which we never want.

The LineMark chart now has a brighter X axis label marks.

There’s no way to manipulate the axis the way we want with the current code. In order to do that we’re going to need to manually specify how the Dates will be formatted.

AxisMarks(values: .stride(by: .hour, count: 3)) { oneDate in
    AxisTick()
    AxisGridLine()
    AxisValueLabel {
        if let foundDate = oneDate.as(Date.self) {
            Text(foundDate.formatted(myDateFormatStyle.hour()))
                .foregroundStyle(colorScheme == .dark ?
                                 Color(white: 0.85) : .secondary)
        }
    }
}

There’s several changes that have been made:

  • We’re now using a parameter from the closure, which we’re calling oneDate.
  • We attempt to cast oneDate as a Date and if successful it’s displayed.
  • If dark mode is in use we’ll make the white a little brighter to help with contrast.

Results

With the change in place for the X axis you can see a different in contrast as opposed to the labels for the Y axis, which I hadn’t changed yet.

The LineMark chart now has a brighter X axis label marks.

Also, the times in the X axis labels will still be properly aligned with the time zone in question.

Accessibility Nutrition Labels

If you’re a developer of an app, now’s a great time to set up your Accessibility Nutrition Labels so they’ll be ready when they go live later this year.

Here is what I’ve got for Please Don’t Rain.

An accessibility nutrition label showing the accessibility features of Please Don’t Rain.

Conclusion

If this post was helpful to you I’d love to hear about it! I’m @chriswu.com on Bluesky and @MuseumShuffle@mastodon.social on Mastodon.

iOS Dev Happy Hour banner

Also, whether you’re interested in becoming an iOS developer or you’re a veteran of the App Store, iOS Dev Happy Hour is a great place to meet and connect with other iOS Developers. Join us at our monthly event!

Our social media accounts: