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?
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
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.
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!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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!