WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: QuestionVisual button order versus announced buttonfocus order

for

From: Moore,Michael (HHSC)
Date: Jul 8, 2015 10:18AM

If the submit is on the right side of the page and back and cancel are on the left then people using screen magnifiers or even browser magnification may have a problem finding the submit button.

Consider changing the design.

Place the three buttons on the left hand side of the page either sequentially in a row with submit first or stacked with submit being on the top.

Tab order should definitely start with submit since that is the action that you probably want people to make.

Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)
(512) 574-0091 (Cell)

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Chamberland, Robert
Sent: Wednesday, July 08, 2015 10:03 AM
To: <EMAIL REMOVED>
Subject: [WebAIM] Question re: Visual button order versus announced button focus order


Hi All,

We have a situation where a form page has the buttons coded as:

<button> Submit </button>
<button> Back</button>
<button> Cancel</button>

And we'd use CSS to float the submit button to the right and position the back button on the left, so visually it is displayed as Back, Cancel and Submit. The Back button is visually on the left, where a left arrow might be. The Submit button is visually on the right, where a right arrow might be. The Cancel button will be in between.

The thinking is that the Submit button, the one on the right, should by design receive focus first after coming out of the form inputs. Then, if tabbing, the Back button should receive the next focus, followed by Cancel.

But obviously, the visual order as displayed is not the same as the focus order announced by the screen reader (I'm assuming the screen reader will always announce according to focus order, which could be wrong). The visual user sees Cancel, Back, Submit, in that order, reading or scanning from left to right. The screen reader presumably announces Submit, tabbing to Back and then Cancel, in that order.

SC 1.3.2 (Meaningful Sequence) and SC 2.4.3 (Focus Order) don't quite seem to "fit" this question except to say that "Focusable components need to receive focus in an order that preserves meaning and operability only when navigation sequences affect meaning and operability." Is this such a case?

It does seem to go against the spirit of C27: Making the DOM order match the visual order<http://www.w3.org/TR/WCAG20-TECHS/C27.html>; and also of G59: Placing the interactive elements in an order that follows sequences and relationships within the content<http://www.w3.org/TR/WCAG20-TECHS/G59.html>;, but these are techniques.

In not following the visual order is this a faux pas? Is some meaning lost in showing the visual user one order, the screen reader user something else?

Any feedback would be appreciated and thank you.

Rob Chamberland