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