Responsive UI - modify reading order in screen readers?

Question

I have a responsive layout that must be accessible for screen readers. The issue is around the order of buttons on desktop vs mobile. On desktop the button order is

Cancel - Remind Me Later - Learn More

...and the screen reader reads left to right. However on mobile the button order is vertically stacked and is ordered as the reverse of the desktop:

Learn more Remind me later Cancel

The problem is the screen reader still reads as if user was in desktop mode - the visual order no longer matches.

Is there a way for the screen reader to change the reading order depending on the viewport?

Answer 1

Is there a way for the screen reader to change the reading order depending on the viewport?

One solution is to have two sets of the same menu and use your media queries to use one or the other

<div class="desktop">Cancel - Remind Me Later - Learn More</div>
<div class="mobile">
Learn more
Remind me later
Cancel
</div>

CSS:

.mobile {display:none}
@media screen and (max-width: 600px) {
   .desktop {display:none}
   .mobile {display:block}
}

This way, you will be free to let the DOM order match the visual order.