10

I’d like to know about techniques and good practices for CTA (call to action) for blind people.

Of course I use WAI-ARIA, sr-only and whatever technique I need to make pages accessible, but I wonder if there’s a way to make a CTA “jump” to blind persons’ attention just like a normal CTA would.

  • I'm imagining how annoying it would be if you could cue a screen reader to SHOUT a certain phrase. Is that a thing? Please let that not be a thing. – invot Apr 4 '18 at 14:42
  • 1
    of course I don't mean that, that's why I ask. For example, I tried using different flows, but for now, testing we've performed is more a question mark than a decisive result, hence I want to know if I'm just trying to reinvent the wheel (quite possible) – Devin Apr 4 '18 at 17:24
  • I was sure you didn't. It was just a random thought that stemmed from your excellent question. – invot Apr 5 '18 at 17:10
4

There are a few things you could do, depending on the circumstances.

  1. When the page is loaded, depending on where the initial focus is, you could have extra text associated with the first object (aria-describedby) that informs the screen reader what the CTA is.

  2. You could have a visually hidden container that is a live region (eg <div class='sr-only' aria-live='polite'>) that is updated with text when the page loads. (Text in a live region is announced by a screen reader when the text changes.)

Whatever text you associate with the first focusable object or the live region should include the name of the object you're trying to emphasize (usually the label of a button or link) as well as the 'type' of object it is (button, link, checkbox, etc). The type is very important because as a screen reader user, I can quickly jump to objects of that type. ('B' takes me to the next button, 'U' takes me to the next unvisited link, 'X' takes me to the next checkbox, 'T' takes me to the next table, etc). I can also display a dialog with a list of objects of that type. For example, I can see all the buttons on the page or all the links on the page.

So specifying the type of the object is important. The CTA message might say "Be sure to select the Register Now button".

(I tried to keep implementation details out of my response but I needed to specify a few to make my point. If you have further questions on how to implement something like this, post on stackoverflow and make sure you add the "accessibility" tag to the question like you did with this one. That way I'll see it.)

  • Well, I'm using both approaches you mention so far, and even created a whole block of sr-only content (crazy, I know) , but usability tests so far show no particular improvement, and think aloud testing shows users don't perceive a significant change in their experience. The thing is they try to scan the whole page, and at that point they kind of "miss" the CTA and only find they need to do something after they re-scan the page. Assuming they remember to do it. On some pages this is not a big deal, and as I said, they don't perceive a difference (they think the default page is OK as is) – Devin Apr 5 '18 at 17:23
  • Anyways, now I see the "polite" tag which I'm not using and the CTA message part gave me some ideas I will test, maybe I can do something with these additions, thank you! – Devin Apr 5 '18 at 17:26
  • Actually, having a block of sr-only text is not that uncommon. And in my suggestions above, I should have out an OR between the two. I wasn’t implying you do both. – slugolicious Apr 6 '18 at 15:08
  • @Devin Did the 'polite' attribute solve the problem you were having? What did you change regarding the CTA text? – Kevin M. Oct 31 '18 at 13:33
  • Looks like my comment just above had an autocorrect (must have replied from my phone). It should say "I should have put an OR between the two", not "out an OR", but you probably figured it out. Just like with visual users and CTA, you want something to quickly catch their "eye". To grab their attention. With a screen reader user, that's more difficult because they can quickly silence the screen reader if it's too "noisy" or verbose. So the CTA would have to be announced very early on page load. – slugolicious Oct 31 '18 at 17:21
2

This is actually a really good question, and I hope that one of the accessibility specialist out there will also give you an answer on this.

My guess is that when you have users that cannot rely on visual cues, there is less flexibility in the way you can design the content to prioritize certain actions over others when the context or information required to make that decision has to be provided in a linear sequence/flow.

So that means that while you can theoretically make a CTA 'jump' the queue by prioritizing it over other elements on the screen (e.g. play audio on CTA interactions first) but it would probably not have enough context to be useful to the user.

Perhaps there are more advanced techniques to building webpages that are more flexible, but I think that would also push the boundaries of making the page accessible/usable. I feel like it would require the pages to be designed in a different way, such as reducing the amount of content on a page and providing more context during the transition of a page to allow people to be able to skip to the CTA when it makes sense to do so.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.