Part 2 of using CSS to make our HTML better!
In this second part of this series we will be exploring how we can use CSS to ensure (and enforce) th...
For further actions, you may consider blocking this person and/or reporting abuse
I have a question as I'm still learning this stuff and my design skills are limited.
I agree that putting
role=buttonon a link is just bad practice. If it's a link, it's a link.My question concerns this bit:
I have an app where I did something like this on the homepage. Basically there's a link styled like a button to make it stand out more, with the idea of adding more as new functionalities are added.
It's definitely a link, screen-readers will treat it accordingly, and desktop users can see the url on hover.
Using a button would be bad for progressive enhancement, as it wouldn't work without JavaScript. And honestly it should be a link, I see no reason to use something else in this particular case.
Are you saying I should just choose a different styling to make my link stand out without looking like a button? My first question is why? Does it hurt users if a link is styled like a button? And assuming you're right, what would you suggest would be a better alternative?
You have almost certainly used the correct element so don't worry there.
The point they were trying to make is that it can be confusing for keyboard users when they encounter a link that looks like a button as they may press Space to try and activate it thinking it is a button (and that would just result in a page scroll normally!).
However it has become accepted practice to style "call to actions" etc. like buttons.
It will be fine as it is do not worry!
One suggestion would be to style your "links styled like buttons" slightly differently to "actual buttons" just so there is a visual difference / consistency across the site, but it is just a suggestion and certainly not something to worry about.
This is exactly what I wanted to know. I had no idea about Space, I always use Enter on both links and buttons when testing on keyboard. I can see how that would be annoying.
Now I'm thinking about which styling would make it more obvious that it's a link. A different shape, colour or font wouldn't help, it would still suggest that it's functionally a button. My guess is that underlining on focus (like I already do on hover) would be the most obvious. Are there other widely used signals I should know about?
Underline on focus vs no underline on focus is one way. 👍
Iconography in conjunction with text is a great way to differentiate, an arrow pointing to the right for example would work for links to differentiate them from buttons.
The key here is something that is unique to buttons vs something that is unique to links styled like buttons just so a user can learn "square looking buttons are links, rounded looking buttons are actually buttons" for example.
I like the arrow idea, it's a good hint.
The problem I have with two styles that users learn to recognise is that it might not work so great on a landing page, which would mainly be visited by new users rather than returning ones. But it's still good to know it's an option for a different use case.
Thanks for the tips!
I believe website structure and layout design is improving by the year and we should not be so rigid as to follow a particular convention in a bid to honor some laid down rules that were given years ago.
Dev.to has always been known to be a tech writing/blogging platform until one day I saw a post by a regular writer raising money to buy a new laptop because his former laptop got broken.
I agree a "button is a button", I also rant about it in my head while building ever since I saw your post on it, but if we wrap ourselves, our team, our projects, start-ups or organization around that and not allow for flexibility, we wouldn't know what newer things we could create.
The designer who began the trend of making links look like buttons must have sat to think "who said only buttons could look this way". The look of buttons were also created by a person 😒.
In most documentation today, the
href='#SectionOfPage'used on an anchor tag (while passing theid='SectionOfPage'into the section tag), is used to navigate between sections of pages. That is a button-like functionality there, but still we use it to navigate faster, plus in few cases where JavaScript doesn't load, navigation still works.The web as we know it would have changed a lot in less than 50yrs from now all because we explored possibilities.
Yes @inhuofficial I learnt a bunch from your post! This is so useful in a team/organization context. Where everyone has to write in a conventional pattern that the whole team understands.
🚀
Layouts I totally agree on! Semantics should be followed as there is very very little that you cannot do while following best practices! ❤️
Link tags are allowed to have missing or empty
hrefattributes in the case that their resulting action would be not allowed. The idea is that the page would consist of dynamic content, but the link is left in as an effective placeholder. Assistive tech following the spec will ignore these links, but they're still perfectly valid. The links are, effectively, in a disabled state.Might also be worth considering the 3
<input>button types:button,submit, andreset.Also, while lesser used, there are other patterns that apply button styles to elements, such as
<label>s attached to radio buttons and checkboxes, with the correspondingroleandaria-attributes added for better accessibility. These sorts of markups are infrequently used, but they're still valid.Some great points here, I will see about adjusting the article and examples to account for these and downgrade them to warnings rather than errors.
I can’t see a valid use case for applying button styles to labels though as those would effectively be custom controls at that stage (so I would argue a separate class for clarity - even if it does go against DRY principles?) what do you think?
Update
I added a new section to account for the items mentioned here.
See if you think that covers it well enough or if there is anything else to add, I will work on updating the fiddles to incorporate that.
Thanks for the suggestions! ❤
My point about the
<a>without anhrefattribute wasn't about anchors, but still links. Imagine something like this:This would create the link as a placeholder, which might be useful for visual reasons, but it wouldn't yet be an active control. Then, based on some sort of event, you could make it active by giving it a valid
hrefvalue using Javascript.It's not a common pattern, but it's a completely one.
I used "anchors" for all
<a>elements, perhaps the wording wasn't clear but I was talking about<a name=""would then be a warning in addition to allowing for<a>some text</a>to be a warning rather than an error (just in case you did want to do something like you suggest).I think we are in agreement! lol!
I did not know that
hrefmay be left out to let anchor elements behave as placeholders, thank you! I should definitely read the specs more instead of relying on tools' complaints (i.e. Lighthouse lead me to believe that missing thehrefattribute is invalid or inaccessible HTML).Lighthouse is not really that good for accessibility testing, it misses a lot and throws up a fair few false positives. The a11y tool in Firefox is better, but better than both of those is the aXe tool, which is available as a plugin for all the major browsers.
I'm going to play devil's advocate here... how about a link to an external login site? A redirection to another site with a token and information, that will go back to our site eventually once it is validated. Should it be an
<a>or a<button>? It is a redirection, so it seems like<a>would be a better option, but should it look like a button or like a link? After all, if it was an actual login form, it would be a<button>, no?I am the angry rants person, you are always welcome to rant on my posts, I enjoy it and it is useful! 😁
I agree with what you are saying here and in my own personal style sheet I would not include as much flexibility or use old stuff like
<a name>or<input type="button"(although<input type="reset"I may occasionally reach for if I need a no JS form backup...can't remember the last time I did use it though 🤣).But I want to show people options as the post is more about concepts and showing people how to "roll their own" solution, rather than a copy paste solution for everyone.
It is not my place (even if I like to pretend it is sometimes 😉) to tell people not to do something which is valid HTML even if I think it is outdated unless I am the one writing the cheques for the code!
As always we are pretty much on the same page about these things and perhaps my article was a little too "soft" this time! 😁❤
The problem with using
<button>, especially the<input>button types, is that it comes with a LOT of baggage. Safari on iOS, for example, will override styles regardless of what they are with iOS button styles resulting in a less than attractive UI/UX. One could even argue that iOS buttons are downright ugly.atags, on the other hand, can be styled however the designer wants. But evenatags also have baggage in thatpreventDefault()has to be called in Javascript (orreturn false;for the lazy) when handling the click action directly. Failing to do so causes the browser to add#to the URL and push the current page to the browser history back stack.And problem solved there and it has good support.
If this has been stopping you from using a
<button>when you should then please start using them now.Please read this article on why you must use a button as I would hope it will stop you using a pattern we haven't needed for a long time!
😂 I like this guy!
You solved it like "There's your answer, no more excuses"
Take no prisoners! 🤣
Great Article!
PS: I Codepen down? I can't see the embed
Looks that way! Never seen CodePen go down before 😱
Edit: looks like AWS has gone belly up...AGAIN...so much for their reliability as that is twice in a month!
Okay. thanks for the reply :)
This is actually a pretty good idea! It could finally stop junior devs from using divs as buttons all the time. Might add this into the SCSS boilerplate at work...
Steal it, use it, save developers from themselves! 🤣
Glad you found it useful! ❤
This is very cool! Though it's more practical to enforce it trough code style enforcement tools like ESLint or other similar lint tools since you can integrate it with CI.
Part 3 is where this starts to get really interesting, so make sure to follow me for that!
If I missed anything that we could check for then let me know once again!