How to convey the "primary vs. secondary" button for screen reader users

Question

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)

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;
}