How to make next / back button order accessible


I am designing the UI for a checkout flow. At the end of the page, I have 3 buttons, Next - Back - Canel.

On desktop it looks like (Back) (Next) Cancel

enter image description here

On mobile it looks like (Next) (Back) (Cancel)

enter image description here

In the code, its ordered Next back cancel then the placement manipulated through CSS.

The dev is saying because the visual order doesn't match the coded order it doesn't pass accessibility(on desktop). I don't wont to only have a stacked layout for both desktop and mobile, but do I have any other options?


Answers:


You could swap the placement of 'Back' and 'Next' on the desktop view. This way the visual layout would still match the source code order, without resorting to a stacked view.