WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: order of CTA buttons


From: Jonathan Avila
Date: Apr 14, 2021 4:37PM

From a low vision standpoint the following are helpful:
* The primary button called out with a different background/color - but the user also needs to know that the other options are there - if they are too spread out with whitespace users with low vision may miss the other options.
* A focus order that does not match the visual order can also be confusing.
* Having a thick border on the default button would help to communicate it can be activated straight away with enter, etc.
* Consistency in placement of the primary button is also helpful.


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Capra, Miranda via WebAIM-Forum
Sent: Wednesday, April 14, 2021 6:01 PM
Cc: Capra, Miranda < <EMAIL REMOVED> >
Subject: [WebAIM] order of CTA buttons

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.

Our design team is having a debate about the order to present call to action (CTA) buttons inside a web application. The UX team has differing opinions about the proper order, and was wondering if there is a strong preference from the accessibility community that would sway our design patterns. Some example contexts include submitting a form (submit/cancel), modal dialogs (OK/cancel or save/cancel), and proceeding to the next step in a multi-step flow (next, previous, cancel). Usually the primary CTA is the most important or most commonly used button (submit, OK, save, next). We have some rules in special situations about making the primary CTA the "safest" button, such as staying logged in if it's a timeout warning or returning to a form instead of losing your work.

Philosophy A: order should be tertiary CTA (if there is one), then secondary CTA, and then primary CTA. Screen reader users will read/tab through them all in turn, leaving cursor/focus at the end of the group, conveniently closest to the primary CTA. The theory is that this will help ensure that users read all the available CTA buttons.

Philosophy B: order should be primary CTA, secondary CTA, and then tertiary CTA if there is one. The theory is that users are likely to select the first CTA button they get to at the end of a form or modal, and so putting the most common or safest button first will result in the fewest accidental selections of the wrong button.

Does anyone have any experience to help us chose between these approaches?

I am most interested in opinions based on how people with disabilities interact with technology. We have done quite a bit of user research with typically abled users, and some heavy statistical analysis has come up with a tie between the two approaches.

- Miranda

Miranda Capra, PhD, CPWA<http://www.accessibilityassociation.org/cpwacertification>;
SVP, Sr. Principal Accessibility Researcher | BB&T now Truist
3201 Beechleaf Ct., Tower II-5, Raleigh, NC 27604

An accessible experience is much more than just ADA compliance.

The information transmitted is intended solely for the individual or entity to which it is addressed and may contain confidential and/or privileged material. Any review, retransmission, dissemination or other use of or taking action in reliance upon this information by persons or entities other than the intended recipient is prohibited. If you have received this email in error please contact the sender and delete the material from any computer.