E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 9 (In chronological order)

From: Bruno Girard
Date: Tue, Jun 28 2016 1:28PM
Subject: Use of hyperlinks instead of buttons
No previous message | Next message →

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

From: Lovely, Brian (CONT)
Date: Tue, Jun 28 2016 1:37PM
Subject: Re: Use of hyperlinks instead of buttons
← Previous message | Next message →

4.1.2 Name, Role, Value

They can assign a role of "button" to the anchor to bring this into compliance. ...and if they can't rewrite their code and css to change these to button elements.

From: Jonathan Avila
Date: Tue, Jun 28 2016 6:25PM
Subject: Re: Use of hyperlinks instead of buttons
← Previous message | Next message →

> 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

From: Joshua Hori
Date: Tue, Jun 28 2016 10:53PM
Subject: Re: Use of hyperlinks instead of buttons
← Previous message | Next message →

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 ADDRESS REMOVED = > on behalf of Jonathan Avila < = EMAIL ADDRESS 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

From: Birkir R. Gunnarsson
Date: Wed, Jun 29 2016 6:03AM
Subject: Re: Use of hyperlinks instead of buttons
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED = > on behalf of
> Jonathan Avila < = EMAIL ADDRESS 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
>
>
>
>

From: Lovely, Brian (CONT)
Date: Wed, Jun 29 2016 7:06AM
Subject: Re: Use of hyperlinks instead of buttons
← Previous message | Next message →

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 ADDRESS REMOVED =

From: Birkir R. Gunnarsson
Date: Wed, Jun 29 2016 7:18AM
Subject: Re: Use of hyperlinks instead of buttons
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED =
>
>
>
>

From: Cousins, Earl
Date: Wed, Jun 29 2016 12:32PM
Subject: Re: Use of hyperlinks instead of buttons
← Previous message | Next message →

Hi Bruno,

I would say 4.1.1 Parsing could be used, since the elements aren't being used according to the HTML spec.

Also, 4.1.2 Name, Role, Value as the expected names and roles (and states) would not be present.

https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20160317/H88


Earl Cousins | Web Accessibility Specialist

From: Sean Murphy
Date: Sat, Jul 02 2016 1:04AM
Subject: Re: Use of hyperlinks instead of buttons
← Previous message | No next message

This is a good example where the standards can be used in different ways to pass or fail and item. Thus making it more complex then required for the tester or developer to know if they are passing or failing the accessibility requirements. My head hurts just working out if it passes or not. :-)
> On 30 Jun 2016, at 4:32 AM, Cousins, Earl < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hi Bruno,
>
> I would say 4.1.1 Parsing could be used, since the elements aren't being used according to the HTML spec.
>
> Also, 4.1.2 Name, Role, Value as the expected names and roles (and states) would not be present.
>
> https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20160317/H88
>
>
> Earl Cousins | Web Accessibility Specialist
> >
>
>