WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Link vs Button for "Cancel"

for

From: Mallory
Date: Jan 10, 2018 2:39AM

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.
> > > > > > > > > >
> > > >