WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: QuestionVisual button order versus announcedbutton focus order

for

From: Tim Harshbarger
Date: Jul 8, 2015 6:49PM

Actually, Cliff, you were kindly attributing more insight to my answer than I had.

I was reluctant to suggest an order for the buttons because I didn't really have any data to support one approach over another. I could think of some reasons why one order might be better than another but they were all based on me making assumptions about users I would be uncomfortable with unless I had some real usability data to base those assumptions on. Fortunately, it sounds like you have that insight.

Thanks!
Tim

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Cliff Tyllick
Sent: Wednesday, July 08, 2015 5:34 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Question re: Visual button order versus announced button focus order

Tim, I agree that the visual order should match the tab order, but I would still insist on "Submit" being first, followed by "Back" and, if necessary, "Cancel." (I suspect that's what you meant, but you didn't actually say that was the order that should be matched.)

That's not just the way I understand WCAG's guidance for "Meaningful sequence." It's also what has worked best every time I've done usability testing on an electronic form or Web application.

I agree with Mike Moore that left-aligning the buttons, either in a single row or stacked in a column, is the best way to go.

Whenever I see a design that leads me in another direction, first I ask myself whether we've produced the best design, and then I suggest that we do a lot of usability testing to make sure that the design is as usable as it needs to be.

It could be that the answers are "Yes, it's a good design," and "Yes, it's highly usable and error-free."

It could be. But it would be very unusual. ;-)

Cliff Tyllick
Accessibility Specialist
Texas Department of Assistive and Rehabilitative Services

Sent from my iPhone
Although its spellcheck often saves me, all goofs in sent messages are its fault.

> On Jul 8, 2015, at 2:53 PM, Tim Harshbarger < <EMAIL REMOVED> > wrote:
>
> Why is the visual order different from the focus/reading sequence order?
>
> Unless there is some major benefit to making it look one way and work another way, I would just make the reading and focus order match the visual order. There really doesn't seem to be any major accessibility problem with how the visual order is presented. Make it look and work the same and there shouldn't be any concern about the focus and reading order.
>
> Thanks!
> Tim
>
>
>
>
>
>
> -----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
>
> > > > > > > >