User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I am reviewing some help text on a web page that says...
Press Submit button to submit the form [blah blah] or press Cancel to return to the previous screen.
Although they're using the <strong> tag a screen reader still isn't making it clear (which I think it's supposed to).
What's the best way to make this visually clear but also accessible to screen readers?
Speaking as a periodic screenreader user, I have no issue with how that's been written. It's a little condescending to people who know what they're doing, but it's not something anyone would take offence to.
If it's the support text around a form, it makes total sense. The issue will be if the form's not semantically marked up.
If it uses an a rather than a button element, it'll be read out as "Link. Submit." rather than the more usual "Button. Submit." or "Button. Cancel." Screenreader users expect that if the help text around says something, that's what they can expect to (approximately) hear.
If it uses some bizarre Javascript to let it use a div instead of a button that's a lot more serious.
Don't rely on aria if you can get the developers to use proper, semantic markup first.
Don't overcomplicate your help texts! Your button naming should already indicate its action in a helpful and unambiguous way.
Screen readers point out the element type and name as soon as the user reaches it, like "button, submit form", which should be clear enough to be understood by blind users. Besides, remember that a screen reader will read everything, so putting in obvious information (everyone knows that you can press a button) only wastes valuable time.
Here's an example:
Discard changes : "Discard all changes and return to the [...] page".
I recommend reading the ARIA: button role page for more information.
