I'm Calin Baenen – AKA KattyTheEnby – a programmer born October 30th, 2006.
I love programming, it has been my passion since I was a kid, and will forever be my passion.
This is rather interesting — stylistically, I can imagine an <a role="button"> looking good for collapsing or expanding content — in fact, I'm convinced there is at least one site that takes such an approach.
It's not a matter of looking good. With CSS you can make a link look like a button, and a button look like a link, and they both will stylistically look good. Nobody would be able to tell which is which. The problem in this case is that collapsing/expanding content is an action and not a redirection. Yes, a <a role="button"> styled to look like a button will work, as a <div> would do, or a <span> or any other HTML element, but they are not the correct semantic element.
The only time I've ever thought to use an a as a button was for a login button in navigation, where the ask was for it to open up a modal on the page. Sounds great, until we realize some people don't have Javascript, so the purpose of using an a tag was as a fallback to link to a login page.
Javascript adds role="button", and if javascript is disabled, well then the role remains a link.
I'm Calin Baenen – AKA KattyTheEnby – a programmer born October 30th, 2006.
I love programming, it has been my passion since I was a kid, and will forever be my passion.
This is rather interesting — stylistically, I can imagine an
<a role="button">looking good for collapsing or expanding content — in fact, I'm convinced there is at least one site that takes such an approach.It's not a matter of looking good. With CSS you can make a link look like a button, and a button look like a link, and they both will stylistically look good. Nobody would be able to tell which is which. The problem in this case is that collapsing/expanding content is an action and not a redirection. Yes, a
<a role="button">styled to look like a button will work, as a<div>would do, or a<span>or any other HTML element, but they are not the correct semantic element.The only time I've ever thought to use an
aas a button was for a login button in navigation, where the ask was for it to open up a modal on the page. Sounds great, until we realize some people don't have Javascript, so the purpose of using anatag was as a fallback to link to a login page.Javascript adds
role="button", and if javascript is disabled, well then the role remains a link.It's very niche, and I guess I don't have much experience to talk, but that sounds like a really neat solution to an edge-case.