WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Link vs Button for "Cancel"

for

From: Renato Iwashima
Date: Jan 8, 2018 2:35PM

> 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-w3c/>;
>
> 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.
> > > > >