WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Link vs Button for "Cancel"

for

From: JP Jamous
Date: Jan 8, 2018 3:50PM

I agree with all of the folks who responded Renato. I personally prefer a link for its simplicity with the href. Also, a link is used to take the user to another page, whereas a button would need a JS function.

Yet, I had a strong feeling that the Cancel link might be styled as a button. I have witnessed this over and over. If you can push back at the designers, go for it. If not, you can keep it as a link and use role="button". That way, the screen reader would announce it as a button just to keep that harmony between visual and programmatic design.

I don't think the space bar is an issue at this point if you use role="button". You can activate a button using space bar with a screen reader running. For keyboard only users, they would most likely use the Enter key. I would not sweat over this one much.

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Beranek, Nicholas via WebAIM-Forum
Sent: Monday, January 8, 2018 3:51 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Link vs Button for "Cancel"

I'm reminded of an article from Marcy Sutton about this very topic:

https://marcysutton.com/links-vs-buttons-in-modern-web-applications/

I know the argument, "if it looks like a button, then it should be a button." However I feel that maintaining the hyperlink is more appropriate here to satisfy user expectations, as others have mentioned. If the link does look like a button to you, then you may want to push back on design to have them make it appear as a hyperlink.

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Mr K M I Brown
Sent: Monday, January 08, 2018 4:40 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Link vs Button for "Cancel"

It's hard to tell without the design, but because the link goes somewhere a link is more appropriate.

If you can't change or influence the design, can you influence the text? Cancel feels like an action rather than a destination, could you make it clear to the user they'll go somewhere specific?

On 8 January 2018, at 21:35, Renato Iwashima < <EMAIL REMOVED> > wrote:

> This does beg the question: Why not just use a <button>? If you decide
> to
go the button route for your "Cancel" action, then I suggest an HTML <button>.

Primarily because it behaves like a link, it has its own URL and just navigate the user away to a different page. If I make it a button, I'd need to implement javascript to navigate the user to a different page which seems unnecessary.

This is probably an issue with the visual design (it shouldn't look like a button). But at this point it isn't a change I can make or push back. So I was wondering if just going with a link would be sufficient enough, without role="button".

On Mon, Jan 8, 2018 at 1:30 PM, Beranek, Nicholas via WebAIM-Forum < <EMAIL REMOVED> > wrote:

> Yes, you will need to add keypress event handlers for Enter key and
> Space bar to activate the element with role="button". Also, if the
> element is not natively keyboard-focusable, then you'll need to add tabindex="0".
>
> This does beg the question: Why not just use a <button>? If you decide
> to go the button route for your "Cancel" action, then I suggest an
> HTML <button>.
>
> Nick Beranek
> Capital One
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> Behalf Of Renato Iwashima
> Sent: Monday, January 08, 2018 4:11 PM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Link vs Button for "Cancel"
>
> I thought about adding role="button" since it does visually look like
> a button, but then someone mentioned to me that a button activates
> with space bar while a link does not. If I add a role="button", would
> I have to implement some javascript to handle space bar?
>
>
> On Jan 8, 2018 12:46 PM, "JP Jamous" < <EMAIL REMOVED> > wrote:
>
> In addition, I have found it to be an excellent UX design practice to
> use role="button" if the link is styled as a button visually. I cannot
> count the many times I would be interacting with a sighted user and
> state, "Click on the whatever link." The user would always say, "I
> don't see a link, rather a button." In some situations, it can be quite confusing.
>
> I know this does not fall under WCAG, but I find it a best user
> experience for users across the board.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> Behalf Of Steve Faulkner
> Sent: Monday, January 8, 2018 2:34 PM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Link vs Button for "Cancel"
>
> >
> > The "cancel" takes the user to another page thus behaves like a link.
>
>
> does it have a href with a URL? if so sounds like a link to me
>
> --
>
> Regards
>
> SteveF
> Current Standards Work @W3C
> <http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w
> 3c/>
>
> On 8 January 2018 at 20:28, Renato Iwashima < <EMAIL REMOVED> > wrote:
>
> > Hi,
> >
> > I have a form that contains a submit button and a cancel link. The
> "cancel"
> > takes the user to another page thus behaves like a link.
> >
> > But because it is a destructive action and is related to the form, I
> > wonder if it should actually be a button. If thats the case, does it
> > mean I need to implement JS to actually route the user to navigate
> > to a
> different page?
> > Can I just leave it as a link?
> >
> > Thanks!
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.