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>
>
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf
> Of Birkir R. Gunnarsson
> Sent: Wednesday, June 29, 2016 8:04 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Use of hyperlinks instead of buttons
>
> I am actually writing a blog on this very issue, as a follow-up from a CSUN
> presentation/panel I did with my colleague CB Averitt.
> It won't deliver a final answer (if it did Iccessibility would be simpler),
> but it will point out someof the nuances and a few rules of thumb we can
> follow.
> I will make sure to post back to the list when the blog is live.
>
>
> On 6/29/16, Joshua Hori < <EMAIL REMOVED> > wrote:
>> Is it wrapped in a div by itself? That may be a reason to argue that
>> it's a button and requires a role. (I'm looking you and your submit
>> "button"
>> SurveyGizmo...) You could prove that it doesn't work when you attempt
>> to get keyboard focus on it. (works fine on mobile)
>>
>>
>> If it's just a link, a CSS file is most likely matching the image to
>> the link, making it look like a button. Arguments will flare as you
>> will be able to get keyboard focus and it's labeled with alt tags.
>> (The developers will
>> ask: Should social media be buttons too?)
>>
>>
>> Another consideration is that JAWS treats buttons and links
>> differently. As a button, users can press B to get directly to them.
>> As links you can bring up a links list, and press P until you hear
>> print. Or just perform a JAWS find for "Print". All ways are
>> accessible, although some ways may take a few additional button presses.
>>
>>
>> Just wait until we have to make web VR accessible: https://aframe.io/
>>
>>
>> Best,
>>
>>
>> Joshua Hori
>>
>> Accessible Technology Analyst
>>
>> Student Disability Center
>>
>> 54 Cowell Building
>>
>> Davis, CA 95616
>>
>>
>> >> From: WebAIM-Forum < <EMAIL REMOVED> > on behalf of
>> Jonathan Avila < <EMAIL REMOVED> >
>> Sent: Tuesday, June 28, 2016 5:25:03 PM
>> To: WebAIM Discussion List
>> Subject: Re: [WebAIM] Use of hyperlinks instead of buttons
>>
>>> In the site, they have used hyperlinks were it should have been buttons.
>>> For example, there is a print link that lauches the browser's print
>>> functionality. Under which criteria does it fail WCAG?
>>
>> Many people would say that it does not fail WCAG -- some say it does. I
>> suppose if it looks like a button you have a case to argue for SC
>> 1.3.1 Information and Relationships -- but arguably this issue is
>> problematic for all users as you really don't know what's going to
>> happen when you click a visual link or button as some designs use them
>> interchangeably.
>>
>> Jonathan
>>
>>
>>
>> -----Original Message-----
>> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
>> Behalf Of Bruno Girard
>> Sent: Tuesday, June 28, 2016 3:28 PM
>> To: WebAIM Discussion List
>> Subject: [WebAIM] Use of hyperlinks instead of buttons
>>
>> Hello group,
>>
>> I am auditing a site right now. I've been looking throught WCAG
>> criterias, techniques and failure but I haven't found the answer to my
>> question yet.
>>
>> In the site, they have used hyperlinks were it should have been buttons.
>> For example, there is a print link that lauches the browser's print
>> functionality.
>>
>> Under which criteria does it fail WCAG?
>>
>> Thanks
>> Bruno
>> >> >> archives at http://webaim.org/discussion/archives
>> >> >> >> archives at http://webaim.org/discussion/archives
>> >> >> >> archives at http://webaim.org/discussion/archives
>> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > http://webaim.org/discussion/archives
> > >
> 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.
> > > > >


--
Work hard. Have fun. Make history.