WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Link vs Button for "Cancel"

for

From: Robert Fentress
Date: Jan 11, 2018 10:40PM

I don't know what the right approach is, but if the argument is that it
should be coded as a link just because it takes you to a page, I don't
think it is that simple. The submit button may *also* take you to a
different page. Perhaps it would be better to think of it in these terms:
If it performs an action related to the form (such as cancelling the
process), then it should be treated as a button. Again, I see both sides,
but this might be another way to frame it.

On Jan 10, 2018 4:39 AM, "Mallory" < <EMAIL REMOVED> > wrote:

> We had a similar issue, and also decided we're stuck with a real link
> looking like a button.
>
> Not only do buttons work with spacebar, but links offer context menus,
> show URLs at the bottom of the browser on hover/focus, and offer things
> like shift-enter or ctrl-enter for opening in a different context... so I'm
> wary of setting button roles on links if there's a URL better than "#".
>
> On Mon, Jan 8, 2018, at 10:35 PM, Renato Iwashima 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-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.
> > > > > > > > > > > > > > >
> > > > > > > > > > > > >