SALE: Save 50% on all my books and bundles >>

Fixing Bookworm

Paul Hudson    @twostraws   

In project 11 we built Bookworm, an app that lets users store ratings and descriptions for books they had read, and we also introduced a custom RatingView UI component that showed star ratings from 1 to 5.

Again, most of the app does well with VoiceOver, but that rating control is a hard fail – it uses tap gestures to add functionality, so users won’t realize they are buttons, and it doesn’t even convey the fact that they are supposed to represent ratings. For example, if I tap one of the gray stars, VoiceOver reads out to me, “star, fill, image, possibly airplane, star” – it’s really not useful at all.

That in itself is a problem, but it’s extra problematic because our RatingView is designed to be reusable – it’s the kind of thing you can take from this project and use in a dozen other projects, and that just means you end polluting many apps with poor accessibility.

We can fix this with three modifiers, each added below the current tapGesture() modifier inside RatingView. First, we need to add one that provides a meaningful label for each star, like this:

.accessibility(label: Text("\(number == 1 ? "1 star" : "\(number) stars")"))

Second, we can remove the .isImage trait, because it really doesn’t matter that these are images:

.accessibility(removeTraits: .isImage)

And finally, we should tell the system that each star is actually a button, so users know it can be tapped. While we’re here, we can make VoiceOver do an even better job by adding a second trait, .isSelected, if the star is already highlighted.

So, add this final modifier beneath the previous two:

.accessibility(addTraits: number > self.rating ? .isButton : [.isButton, .isSelected])

It only took three small changes, but this improved component is much better than what we had before.

Hacking with Swift is sponsored by RevenueCat

SPONSORED Building in-app subscriptions are hard – especially cross-platform. RevenueCat makes it simple. With their native SDKs, you can implement a custom subscription model for your app in hours, not months.

Explore the docs to learn more

Sponsor Hacking with Swift and reach the world's largest Swift community!

Snapthread is a casual video editor and slideshow maker that makes discovering, compiling and sharing your favorite memories effortless.

BUY OUR BOOKS
Buy Pro Swift Buy Swift Design Patterns Buy Testing Swift Buy Hacking with iOS Buy Swift Coding Challenges Buy Swift on Sundays Volume One Buy Server-Side Swift (Vapor Edition) Buy Advanced iOS Volume One Buy Advanced iOS Volume Two Buy Advanced iOS Volume Three Buy Hacking with watchOS Buy Hacking with tvOS Buy Hacking with macOS Buy Dive Into SpriteKit Buy Swift in Sixty Seconds Buy Objective-C for Swift Developers Buy Server-Side Swift (Kitura Edition) Buy Beyond Code

Was this page useful? Let us know!

Average rating: 5.0/5