WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Links vs. Buttons

for

From: Bevi Chagnon
Date: Jun 5, 2012 10:24AM

Very interesting discussion, especially the comments about what users think
are the differences between links and buttons. I don't think I fully grasped
what SR users expect from the two methods of coding. I have 2 comments.

Comment #1:
The current HTML standards don't clearly emphasize the distinction between
links and buttons. (I searched www.w3c.org but did not find enough clarity
about it. Maybe someone else will find more info on their website.)

Going back to basic HTML definitions, the button tag is a new-ish tag that
became available with HTML 4, the current version of HTML. Previous to HTML
4, the button tag could only be used in forms: checkbox and radio buttons,
and the Submit and Reset buttons.

Many web developers don't know about the stand-alone button tag and instead
still believe that buttons can only exist inside a <form> tag, so the
majority of websites will have buttons only inside the <form> tag.
However, SR users wouldn't want web developers to throw them into a form in
order to create only a button that downloads a file, for example, rather
than fill in an actual form with data.

Most "buttons" on websites are really just graphics with a hyperlink to the
file or webpage. These are faux buttons that I'm sure SR users see
all-too-frequently and are not as helpful to them as the real <button> tag.

I think there are valid reasons to use the <button> tag for actions, such as
downloading a file, versus <a href> hyperlinks which navigate to the file
and allow the user the choice of downloading the file if desired.

But I don't think the web developer community knows about this distinction
and therefore uses regular hyperlinks for everything, including actions. So
web developers should be encouraged to use the stand-alone <button> tag for
actions instead using hyperlinks and button-like graphics with hyperlinks.

Here's a quick tutorial about the stand-alone HTML button tag:
http://www.javascriptkit.com/howto/button.shtml. And here's the W3C's
definition of it (see example B):
http://www.w3.org/wiki/HTML/Elements/button#Example_B

I couldn't find any reference to the use of <button> versus <a href> in WCAG
2.0 (maybe I missed it? It's not the easiest document to search and find
information).

Conclusion: If you'd like to see better implementation of buttons rather
than hyperlinks, then you'll need to approach the W3C and WAI to get better
documentation about the issue. The guidance that's available now for web
developers isn't clear enough to get the results you want.

Comment #2:
Someone on the list asked if links and buttons look different to sighted
users. Answer: yes, they can, but it's up to the web developer. Usually a
button is designed to look sort of like a 3D button in real life, such as a
button on a kitchen appliance or light switch or electronic device. Buttons
visually stand out on the web page just as a light switch stands out from
the flat surface of a wall. With coding, especially CSS, a web developer
could develop any visual appearance they want for the button.

Links, on the other hand, are just text that is designed to look different
from the body text around it. Usually it's blue and underlined (that's the
convention), but it could have any appearance the web developer wants. There
is no hard and fast rule about a link's appearance.

Links should have meaningful text, per WAI's WCAG 2.0 guidelines, so that
should help SR users know whether they're about to navigate to a new web
page or open/download a Word.doc, for example.

--
Bevi Chagnon | <EMAIL REMOVED>
PubCom - Trainers, consultants, designers, and developers
Print, Web, Acrobat, XML, eBooks, and Federal Section 508
--
* It's our 30th Year! *