Crafting Accessibility on iOS

Part 3 Don't make me swipe

This is the third in a series of articles about things we learned while improving ChordBank’s accessibility for version 4.0. If you missed it, here’s part 1 and part 2.


Or, longer title: combine multiple labels and adjustable controls into a single element where possible.

A little about capos

Our capo feature lets users place a virtual capo on their guitar.

Capos allow players to play the same shapes at different places on the guitar’s neck to play different chords. Here is, for example, a photo of Ed Sheeran using one, taken from a random screenshot of his Wikipedia page:

A screenshot of Ed Sheeran's Wikipedia page, with Ed using a capo.

For example, here is an open E major chord. With a capo at the third fret, it becomes a G chord:

Playing an E shape chord without a capo, and with a capo at the third fret.

Designing Controls

Here is the UI that lets users add, remove, and change which fret the capo is on:

This works great: we’ve got a standard UIStepper control, a label next to it that clearly states what it does.

Should be no problem, right?

It works, yes. But it could be a bit better.

Here’s what that last setup would look like:

The adjust capo controls, without thinking through optimizations.

Imagine this from a visually impaired user’s perspective: they have to first swipe to the label that says “third fret”, but it’s just a label. Then they swipe to the stepper, which they actually can adjust.

Don’t make me swipe!

A better solution is to, where possible, integrate labels into the controls themselves.

A bit better

A naiive way to do this could be to simply hide that extra label, and update the accessibility label of the stepper itself:

The adjust capo controls, integrating the fret into the stepper.

This is better. But, because the stepper is way over there on the right, the user is going to have a hard time finding it by panning around with their finger.

The adjust capo controls, with a squiggly red line showing that it is difficult to find the stepper controls.

A lot better

A better solution is to make the space occupied by the voiceover controls mirror the space that the sighted controls occupy in the user’s mind.

As a sighted person looks at these controls, the entire cell is understood to be about the fret that the capo is on.

So. Let’s make the voiceover controls match, regardless of what physical space the stock UI controls occupy.

The adjust capo controls, with the optimized controls taking up the whole row.

There are a number of ways to go about this technically–you could tell the system your accessibility frame is different than your physical frame, for example.

In our case, we optimized the view that encloses both the label and the stepper to be an adjustable control, and called the same code we call from the stepper in response to swipes up and down from a Voiceover user.

Ten minutes, a few lines of code later, and look at this squiggle test:

The optimized adjust capo controls, with a red line showing that it is easy to find the stepper controls.

As the user slides their finger over the row with the label and stepper, they hear:

Much better.

Now, however they navigate the app, it’s easy for visually impaired users to play chords with capos.

Next time

Thank you for following along in this series about things we learned while improving Accessibility in ChordBank!

In our next article, we’ll take this one step further: manufacturing accessible regions for custom controls.

Until then, keep playing, and we’ll see you next time.


Do you rely on Apple’s Voiceover technologies to use your phone? Can we do better, with our app, or with this website? Contact us to let us know, and thank you for sticking with ChordBank for all these years!