I have an application that needs to be accessible for screen readers.

This application uses bold text on primary button to convey information about the "recommended choice" like in the example below


download bmml source – Wireframes created with Balsamiq Mockups

I am adapting this pattern for screen reader users, but there just seem to be no way to implement it using wai-aria tricks.

So my question is multiple:

  • Is this pattern still viable for screen reader users? (I guess)
  • How should I adapt this pattern to screen reader users?

(bonus point if you know about a wai-aria trick)

  • 1
    My guess is that this pattern isn't very useful for screen readers…the whole “primary action” thing seems to be a concept developed by the likes of us (designers and developers) as an easy/consistent way to communicate hierarchy to visual interface users. For someone who just hears the interface, the fact that an action is presented first already meets the need we are addressing with a button designed to be the first one to attract the eye. My $0.02…not certain at all otherwise I'd post it as an answer. :)
    – Nate Green
    Commented Feb 3, 2016 at 21:41

1 Answer 1


Well there are many things you can do. aria-label and visually hidden text are the first to come to mind.

Aria-label example:

<button aria-label="primary (or other meaningful text)">Button text here</button>.

Visually hidden text, only "visible" to screen readers:

<button><span class="visually-hidden">Primary Action</span> Button text here<button>

visually-hidden would be a class that doesn't use display: none in css. Something like: // HTML5Boilerplate's non-semantic helper class

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  • I know this is possible to add "primary action" as a label for sr-users only but it doesn't feel so good. Maybe the sr should read something like "myActionName primary button", but chances are it will not be read the same way on different screen readers anyway
    – Leths
    Commented Feb 4, 2016 at 9:04
  • That's what the visually hidden span is for. You can write anything there and make it as explicit as you want. That span will only be available to screen readers. So you can do myActionName <span class="visually-hidden"> primary button</span>. And it will be read like that. Commented Feb 4, 2016 at 11:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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