Duplication of button and link styles

[JimBobSquarePants]

• [x] I’ve read and understood the Contributing guidelines and have done my best effort to follow them.
• [x] I’ve read and agree to the Code of Conduct.
• [x] I’ve searched for any related issues and avoided creating a duplicate issue.

Description

What happened

In version 1.0.0 it is possible to style links to appear the same as buttons. Justification for such is given by the following text.

Simple links don’t always catch a user’s attention when they’re scanning a website. So a link is sometimes styled to look like a button where you want to give it greater prominence.

https://gold.service.gov.au/components/buttons/#links-as-buttons

You already have a component specifically designed for that purpose though.

Call to action links are visually distinct instructions to users designed to provoke an immediate response using verbs such as 'call now' or 'find out more'.

https://gold.service.gov.au/components/cta-link/

It's important design systems not to conflate responsibility of different elements. I believe that allowing developers to style a link in the same form as a button promotes misuse of the link element. A common problem in modern web development which is detrimental to accessibilty.

As such I would recommend removing the ability to style a link as a button and instead promote the Call to Action component.

[dominikwilkowski]

There has been a lot of talk about the semantic usage of buttons and links. I was also very strict with that usage and would advice against making a link look like a button. That's what we got the cta-link module for. The reality though is that most of our gov users don't have enough control over their HTML and and sometimes is just makes sense to make a link look like a button. @TrebBrennan will be able to add a bunch of great articles here to make this point. :)

[JimBobSquarePants]

Ok thanks, I'll have a read once they're linked.

It might even be enough to adding a recommendation to the documentation to prefer cta.

[dominikwilkowski]

That’s a great idea. That’s the least we can do. Flesh out more of the recommendations and expose the reasons why.

[TrebBrennan]

There are two factors here which are confusing the 'links shouldn't be buttons' conversation, I'll address them separately.

1. Semantic HTML. This one is pretty clear, as you mention above, the <a> link and <button> button HTML tags have different purposes and the appropriate one should be used in the right circumstance. Having incorrect HTML is not semantic and could cause issues with machine reading of pages, eg. assistive technology or SEO.

Good semantics is also an accessibility requirement: WCAG 2.0 1.3.1

2. Visual loudness (Clear and concise visual design) Assuming you are using the correct HTML, the next question is "how might we help users complete their task easier?" Particularly if a user might have eyesight, cognitive, or literacy issues. The interface design should attempt to assist way-finding.

There is a fantastic article about the concept of visual loudness, which is a perfect example of why style (CSS) is separated from content/markup (HTML) in modern web-design.

One of the easiest ways to help a sighted user through to task completion is to balance the visual-loudness of the interface; if every element on the page had the same visual loudness it becomes so much harder to identify higher priority content. Which is why we have provided classes so that links can be styled to have more visual loudness or affordance.

Use case: "As a user with low literacy, I want to apply for a drivers licence." https://codepen.io/AusDesignSystem/full/aGpRJq/ This link above is just an example, but you can see why one link might need to be more visually prominent than other while still being a link <a>.

Button Role I'll close this issue, but we'll do some investigation in to the ARIA button role next time we are looking at buttons.