Custom Accessibility Actions


Two posts on the left demonstrating a typical social network and another one done with excessive CTA usage.
A social network like set of examples.

Design Extremes of Custom Accessibility Actions

When I give advice I like to give it in chunks of 3. An extreme case in one direction an extreme case in the other direction and a middle ground that makes sense, unlike the U.S. Congress. Sorry... back on Mobile Accessibility.

In this case the three options are:

  1. Make everything a Custom Accessibility Action.
  2. Focus everything separately.
  3. Mix and Match in a way that makes sense.

Let's take a look at why I made that last option choice 3 instead of choice 2.

The Feature Graphic Description

The feature graphic is really important in this case so I'm going to describe its structure from a Screen Reader point of view.

Two posts on the left demonstrating a typical social network and another one done with excessive CTA usage.
A social network like set of examples.

The Left Example

On the left we have a structure like this:

  1. An interesting tidbit.
    1. Action 1: Like
    2. Action 2: Comment
    3. Action 3: Subscribe
  2. Another post.

The Right Example

On the left we have a clearly silly example for the scenario, but perhaps useful elsewhere.

  1. Post 1: an interesting tidbit.
  2. Like Post 1, Button
  3. Comment Post 1, Button
  4. Ran out of space already...

All Custom Actions

Referring to the image above the scenario on the left, which looks suspiciously like a Social Network card, is a good example of a time when All Custom Accessibility Actions strategy makes sense.

Social networks come with a high amount of information and mistakes mean not making sense in front of your friends. It is better for TalkBack/VoiceOver users to have confidence in what they are commenting/responding to and this needs trumps the need of Switch Control users to have a streamlined experience.

Note: Please never use a strategy that involves doing this for some users and not for others. If you're tempted to you have a Design Problem that you are not addressing.

Focus Everything Separately

This is generally the worst choice of the 3 because it fails to associate the "Name" (which can be a fairly lengthy description) and the Actions together into a focus target. This makes it easy for Screen Reader users to get lost.

Notice how the example on the right of the image is taking up a lot of vertical space per action... because they're all CTAs. This is what you do to Screen Reader users when you choose this strategy, you turn everything into the importance of a CTA.

Regarding Strategy 2: If the design doesn't make sense visually as all CTAs don't do it!

Reason being this is a WCAG violation. Unless you make sure the CTA text includes a portion of the Name to facilitate as an exception for the label being available in Text. However, in Mobile land this means violating Apple and Google best practices for length of text on a CTA. So... don't do that. Non-option here! 😺

Mix and Match

You can also of course do the in between though normally it's not a good idea an confusing. The time this may make sense is when you have a Call to Action button that is truly a call to action and has the expected text to match.

For example:

  1. Post 1
    1. Comment on Post 1
    2. Like Post 1
  2. Subscribe to Post 1 Poster!

Conclusion

None of these techniques is wrong, they just need to be used in the correct way and correct scenario.

Featured Posts

SwiftUI Design Systems

Device and Text Size

Applying WCAG 2.2

iOS Accessibility Test Plan