Re: Buttons vs links
Taliesin Smith <[email protected]> Fri, 8 May 2020 07:13:25 -0230
| Newsgroups | gmane.org.w3c.accessibility.general |
|---|---|
| Message-ID | <[email protected]> |
--Apple-Mail=_FC588A79-45A3-4534-85BE-EAF0B0840B94 Content-Transfer-Encoding: quoted-printable Content-Type: text/plain; charset=utf-8 Hi Angela, You=E2=80=99ll also want to consider the user experience and what the = element is communicating. If it is communicating a button (e.g., looks like a button, has = associated instructions about being a button), then it should be coded = as a button, or some users could be confused or have a challenging = experience with the application. Links and buttons often look the same, but they do not sound the same = and are not activated in the same way. It is really important to = communicate the same interaction in all modalities. If you haven=E2=80=99t already read it, you might enjoy this post by = Marcy Sutton https://marcysutton.com/links-vs-buttons-in-modern-web-applications = <https://marcysutton.com/links-vs-buttons-in-modern-web-applications>. She makes a nice comparison without going into too much technical = detail. And, I would recommend reading relevant sections of the ARIA Authoring = Practices specification. When you compare the interaction patterns for elements with = role=3D=E2=80=9Cbutton" versus role=3D=E2=80=9Clink". There are some = very stark differences, one of which is that there is more than one kind = of button. https://www.w3.org/TR/wai-aria-practices-1.1/#button = <https://www.w3.org/TR/wai-aria-practices-1.1/#button> https://www.w3.org/TR/wai-aria-practices-1.1/#link = <https://www.w3.org/TR/wai-aria-practices-1.1/#link> Taliesin [email protected] ~.~.~ Also reachable at: [email protected] Inclusive Design Researcher PhET Interactive Simulations https://phet.colorado.edu/en/accessibility Physics Department University of Colorado, Boulder > On May 7, 2020, at 5:18 PM, Savage, Angela (ITS) = <[email protected]> wrote: >=20 > Thank you for the responses. These have been helpful! >=20 > -----Original Message----- > From: Jan Hellbusch <[email protected]>=20 > Sent: Thursday, May 7, 2020 12:28 PM > To: [email protected] > Subject: RE: Buttons vs links >=20 > ATTENTION: This email came from an external source. Do not open = attachments or click on links from unknown senders or unexpected emails. >=20 > Hi, >=20 > according to HTML spec, links are for resources and buttons are for = actions. > There are exceptions: >=20 > * in general, use links for going to a new page or downloading a = document. > * links can also be used within a web page (skip navigation links = etc.). >=20 > * buttons are used for sending forms (most often to a script). > * Otherwise they should be used for performing actions on the web page = (e.g. > widgets). >=20 > * Actions can, of course, mean calling a new resource in a process. It = will not always be clear, whether a button or a link is more = appropriate. >=20 > Jan >=20 >> -----Original Message----- >> From: Savage, Angela (ITS) <[email protected]> >> Sent: Thursday, May 7, 2020 6:02 PM >> To: [email protected] >> Subject: Buttons vs links >>=20 >> I was wondering what is the proper usage for a button and a link when > building >> an accessible application or website? >>=20 >>=20 >>=20 >> I'm reading multiple articles on this topic and I read an article = from=20 >> the > Nielsen >> Norman Group on command links and they state that buttons should not=20= >> be used for navigation and that users should click a plain link to=20 >> move to > another >> page of information. Multiple articles I have read on using buttons=20= >> and > links >> when creating an accessible application or page mention this too. >>=20 >>=20 >>=20 >> Article: Command Links=20 >> <https://www.nngroup.com/articles/command-links/> >>=20 >>=20 >>=20 >> Thank you in advance, >>=20 >>=20 >>=20 >> Angela Savage >>=20 >> Accessibility Auditor >=20 >=20 >=20 >=20 --Apple-Mail=_FC588A79-45A3-4534-85BE-EAF0B0840B94 Content-Transfer-Encoding: quoted-printable Content-Type: text/html; charset=utf-8 <html><head><meta http-equiv=3D"Content-Type" content=3D"text/html; = charset=3Dutf-8"></head><body style=3D"word-wrap: break-word; = -webkit-nbsp-mode: space; line-break: after-white-space;" class=3D"">Hi = Angela,<div class=3D"">You=E2=80=99ll also want to consider the user = experience and what the element is communicating.</div><div class=3D"">If = it is communicating a button (e.g., looks like a button, has associated = instructions about being a button), then it should be coded as a button, = or some users could be confused or have a challenging experience with = the application.</div><div class=3D""><br class=3D""></div><div = class=3D"">Links and buttons often look the same, but they do not sound = the same and are not activated in the same way. It is really important = to communicate the same interaction in all modalities.</div><div = class=3D""><br class=3D""></div><div class=3D""><div class=3D"">If you = haven=E2=80=99t already read it, you might enjoy this post by Marcy = Sutton</div><div class=3D""><a = href=3D"https://marcysutton.com/links-vs-buttons-in-modern-web-application= s" = class=3D"">https://marcysutton.com/links-vs-buttons-in-modern-web-applicat= ions</a>.</div><div class=3D""><br class=3D""></div><div class=3D"">She = makes a nice comparison without going into too much technical = detail.</div></div><div class=3D""><br class=3D""></div><div = class=3D"">And, I would recommend reading relevant sections of the ARIA = Authoring Practices specification.</div><div class=3D""><br = class=3D""></div><div class=3D"">When you compare the interaction = patterns for elements with <font face=3D"Courier" = class=3D"">role=3D=E2=80=9Cbutton"</font> versus <font face=3D"Courier" = class=3D"">role=3D=E2=80=9Clink"</font>. There are some very stark = differences, one of which is that there is more than one kind of = button.</div><div class=3D""><a = href=3D"https://www.w3.org/TR/wai-aria-practices-1.1/#button" = class=3D"">https://www.w3.org/TR/wai-aria-practices-1.1/#button</a></div><= div class=3D""><a = href=3D"https://www.w3.org/TR/wai-aria-practices-1.1/#link" = class=3D"">https://www.w3.org/TR/wai-aria-practices-1.1/#link</a></div><di= v class=3D""><br class=3D""></div><div class=3D"">Taliesin</div><div = class=3D""><div class=3D""><div dir=3D"auto" style=3D"word-wrap: = break-word; -webkit-nbsp-mode: space; line-break: after-white-space;" = class=3D""><div style=3D"caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0); = font-family: Helvetica; font-size: 14px; font-style: normal; = font-variant-caps: normal; font-weight: normal; letter-spacing: normal; = text-align: start; text-indent: 0px; text-transform: none; white-space: = normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; = text-decoration: none;"><a href=3D"mailto:[email protected]" = class=3D"">[email protected]</a></div><div style=3D"caret-color: rgb(0, = 0, 0); color: rgb(0, 0, 0); font-family: Helvetica; font-size: 14px; = font-style: normal; font-variant-caps: normal; font-weight: normal; = letter-spacing: normal; text-align: start; text-indent: 0px; = text-transform: none; white-space: normal; word-spacing: 0px; = -webkit-text-stroke-width: 0px; text-decoration: none;"><br = class=3D""></div><div style=3D"caret-color: rgb(0, 0, 0); color: rgb(0, = 0, 0); font-family: Helvetica; font-size: 14px; font-style: normal; = font-variant-caps: normal; font-weight: normal; letter-spacing: normal; = text-align: start; text-indent: 0px; text-transform: none; white-space: = normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; = text-decoration: none;">~.~.~<br class=3D"">Also reachable at:</div><div = style=3D"caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: = Helvetica; font-size: 14px; font-style: normal; font-variant-caps: = normal; font-weight: normal; letter-spacing: normal; text-align: start; = text-indent: 0px; text-transform: none; white-space: normal; = word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: = none;"><a href=3D"mailto:[email protected]" = class=3D"">[email protected]</a><br class=3D"">Inclusive = Design Researcher<br class=3D"">PhET Interactive Simulations<br = class=3D"">https://phet.colorado.edu/en/accessibility<br = class=3D"">Physics Department<br class=3D"">University of Colorado, = Boulder</div><div style=3D"caret-color: rgb(0, 0, 0); color: rgb(0, 0, = 0); font-family: Helvetica; font-size: 14px; font-style: normal; = font-variant-caps: normal; font-weight: normal; letter-spacing: normal; = text-align: start; text-indent: 0px; text-transform: none; white-space: = normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; = text-decoration: none;" class=3D""><br class=3D""></div><br = class=3D"Apple-interchange-newline"></div><br = class=3D"Apple-interchange-newline"> </div> <div><br class=3D""><blockquote type=3D"cite" class=3D""><div = class=3D"">On May 7, 2020, at 5:18 PM, Savage, Angela (ITS) <<a = href=3D"mailto:[email protected]" = class=3D"">[email protected]</a>> wrote:</div><br = class=3D"Apple-interchange-newline"><div class=3D""><div class=3D"">Thank = you for the responses. These have been helpful!<br class=3D""><br = class=3D"">-----Original Message-----<br class=3D"">From: Jan Hellbusch = <<a href=3D"mailto:[email protected]" = class=3D"">[email protected]</a>> <br class=3D"">Sent: Thursday, May = 7, 2020 12:28 PM<br class=3D"">To: <a href=3D"mailto:[email protected]" = class=3D"">[email protected]</a><br class=3D"">Subject: RE: Buttons vs = links<br class=3D""><br class=3D"">ATTENTION: This email came from an = external source. Do not open attachments or click on links from unknown = senders or unexpected emails.<br class=3D""><br class=3D"">Hi,<br = class=3D""><br class=3D"">according to HTML spec, links are for = resources and buttons are for actions.<br class=3D"">There are = exceptions:<br class=3D""><br class=3D"">* in general, use links for = going to a new page or downloading a document.<br class=3D"">* links can = also be used within a web page (skip navigation links etc.).<br = class=3D""><br class=3D"">* buttons are used for sending forms (most = often to a script).<br class=3D"">* Otherwise they should be used for = performing actions on the web page (e.g.<br class=3D"">widgets).<br = class=3D""><br class=3D"">* Actions can, of course, mean calling a new = resource in a process. It will not always be clear, whether a button or = a link is more appropriate.<br class=3D""><br class=3D"">Jan<br = class=3D""><br class=3D""><blockquote type=3D"cite" = class=3D"">-----Original Message-----<br class=3D"">From: Savage, Angela = (ITS) <<a href=3D"mailto:[email protected]" = class=3D"">[email protected]</a>><br class=3D"">Sent: = Thursday, May 7, 2020 6:02 PM<br class=3D"">To: <a = href=3D"mailto:[email protected]" class=3D"">[email protected]</a><br = class=3D"">Subject: Buttons vs links<br class=3D""><br class=3D"">I was = wondering what is the proper usage for a button and a link when<br = class=3D""></blockquote>building<br class=3D""><blockquote type=3D"cite" = class=3D"">an accessible application or website?<br class=3D""><br = class=3D""><br class=3D""><br class=3D"">I'm reading multiple articles = on this topic and I read an article from <br class=3D"">the<br = class=3D""></blockquote>Nielsen<br class=3D""><blockquote type=3D"cite" = class=3D"">Norman Group on command links and they state that buttons = should not <br class=3D"">be used for navigation and that users should = click a plain link to <br class=3D"">move to<br = class=3D""></blockquote>another<br class=3D""><blockquote type=3D"cite" = class=3D"">page of information. Multiple articles I have read on = using buttons <br class=3D"">and<br class=3D""></blockquote>links<br = class=3D""><blockquote type=3D"cite" class=3D"">when creating an = accessible application or page mention this too.<br class=3D""><br = class=3D""><br class=3D""><br class=3D"">Article: Command Links <br = class=3D""><<a href=3D"https://www.nngroup.com/articles/command-links/"= class=3D"">https://www.nngroup.com/articles/command-links/</a>><br = class=3D""><br class=3D""><br class=3D""><br class=3D"">Thank you in = advance,<br class=3D""><br class=3D""><br class=3D""><br class=3D"">Angela= Savage<br class=3D""><br class=3D"">Accessibility Auditor<br = class=3D""></blockquote><br class=3D""><br class=3D""><br class=3D""><br = class=3D""></div></div></blockquote></div><br = class=3D""></div></body></html>= --Apple-Mail=_FC588A79-45A3-4534-85BE-EAF0B0840B94--