WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Use of hyperlinks instead of buttons

for

From: Birkir R. Gunnarsson
Date: Jun 29, 2016 7:18AM

There are two other fun complications here:
One is looks vs functionality.
We know a link is supposed to navigate to somewhere, but a button is
supposed to perform a discrete action.
If a designer really wants you to navigate to the "News of the day"
page, they sometimes give it visual emphasis by making it look like a
button.
If you click it, you go to a different page.
Visually the users are being tricked a bit, a button isn't really
supposed to take you to another page, it is supposed to do something.
Are we supposed to lie to the a.t. users as well by using
role="button", based on the way the element looks, or do we go with
the purpose of the element and make sure the role is appropriate for
that purpose?
If we go with purpose, we don't, this is coded as a link, it acts as a link.
If we go with appearance, yes, we map it as a button, but we may
surprise the user.
It depends how much end users rely on the semantic definition of our
page elements.

The other issue:
Buttons are supposed to be space bar operable.
Links aren't (screen reader users may think they are, because the
screen reader, in browse mode, fires the click event when user presses
the space bar, keyboard only users do not have that luxury, neither do
screen reader users in forms/application mode).

So if you tell someone your link is a button, do you need to add the 1
or 2 lines of JavaScript that enables users to activate it with the
spacebar?
It is easy to do, yes, but do people have to do it?
Opinions are divided.
Stay tuned for my blog. ;)
-B


On 6/29/16, Lovely, Brian (CONT) < <EMAIL REMOVED> > wrote:
> Looking forward to that Birkir!
>
> Technically, using a link as a button without providing a role attribute of
> "button" fails the "role can be programmatically determined" part of WCAG
> criteria 4.1.2. In a situation where you are trying to get designers and
> developers to think about the semantic meaning of HTML elements, it doesn't
> hurt to point out that a link styled to look like a button will never be as
> much of a button as...wait for it...a button. There are more egregious
> violations of Name, Role, Value, for instance anything but a heading styled
> and used like a heading, spans and divs tricked out as links and/or buttons
> with CSS and JavaScript, a group of divs or spans styled and used like a
> list.
>
> Sometimes you do need to pick your battles. I'd go after links that violate
> 1.1.1 Non-text content or 2.4.9 Link Purpose before I'd go after faux
> buttons.
>
>
> Brian Lovely
> Digital Accessibility Team
> <EMAIL REMOVED>
>
>
>
>