0

At the top of our web app, we have a heading followed by a CTA-button. Something like this mockup i just made up:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Mission: Id like to make the CTA easy to find for users using screen readers.

Suggestion: One way is to place the button in a h2, like this

<h1>Welcome to the club!</h1>
  <h2>
    <button>Become a VIP-member today</button>
  </h2>
  <p>lorem ipsum.....</p>

Since users with screen readers are using the header layout of a page to get an idea of the contents of that page, this solution would perhaps make the CTA very easy to find for these users.

(Sure, you can, and perhaps shall, place the CTA at another location on the page, but that's out of the scoop for this question).

Any pros and cons using this method? Are there any other solutions I can use to fulfill my mission?

1

Users with screenreaders tend to skip down the page using the links as their guide to where they are. This is the reason you should always have descriptive link text and avoid "Click here". Screenreader users also, when they are familiar with a site/page, tend to skip the entire navigation block if they are offered the chance to do so (you can add a non visible link above the navigation that links to the point in the page where the proper content starts)

With this in mind, you'll want to make sure your button will be 'visible' to screenreaders. I'm not sure if buttons fall into this link-skipping method so you may want to find out for sure or change the tag for a link.

You could then place it in the code before your skip navigation link or at the start of your content and push it into its visual position using CSS.

You need to look at your code as an entirely different proposition to your layout. Screenreader users will have different requirements that should be accommodated in the code and then over-ridden with CSS for sighted users. Once you start structuring your page like this then you'll find all the pitfalls that await your non-sighted users as well as being able to offer more machine-readable pages for SEO.

2

Screen reader users have a myriad of ways to navigate a page. By links is certainly one and that method can be used by keyboard only users too. But you can also navigate by buttons, tables, headings, images, and several other html elements.

I would discourage having your visual order be different than your DOM order. That is, don't push things around on the display using CSS. That can be very confusing for the low vision user that has limited vision but also uses a screen reader. They'll see a button near the top, because it was pushed there by CSS, but when they TAB through the site, they won't hear the button where their eye is tracking.

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.