WebAIM - Web Accessibility In Mind

E-mail List Archives

order of CTA buttons

for

From: Capra, Miranda
Date: Apr 14, 2021 4:01PM

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
Email: <EMAIL REMOVED>

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.