4 ms·
> So if you want something that takes an action on the current page via JS but looks like a text link, it should be a <button> element styled as a link. Why? I
by ratww 6y ago
> So if you want something that takes an action on the current page via JS but looks like a text link, it should be a <button> element styled as a link.
Why? It really shouldn't look like a link.
The mere fact that it requires a 20-line-hack is enough proof that this is a hack. It subvert user expectations (example: it's a link that you can't right click, tab behaves differently), accessibility (example: it looks like a link but will register as a button to a screen reader) and will probably look different in some browsers.
If you indeed need a navigational link you can freely attach a onclick event to a link. If the link has no proper non-javascript fallback (it ideally should, though) you can link to javascript:void(0); and most browsers will prevent the "Open in New Window" option from showing up in context menus.
- deleted 6y ago[deleted]
- Deimorz 6y agoThe entire subject of this thread is about getting accessibility and other benefits for free if you write semantically-correct HTML. You're arguing for the exact opposite: just using whatever element gives you the appearance you want, regardless of whether it's the correct one or not. Using CSS to change the appearance of a button isn't a hack, that's the explicit purpose of CSS. It's a hack to make a link point to "javascript:void(0)" to prevent it from doing the thing it's supposed to do.
- ratww 6y agoThat's not true. I'm not advocating that. I'm making exactly the same point as the article: using semantic HTML will get you accessibility for free. If you need something that makes an action, then it should be a button but never disguised as a link. It should just look like a button. This way you won't subvert users expectations (you said it yourself: links are for taking users to another URL), and will still be accessible to screen-reader users. If you need something that takes to another page, then it should be a link, even if it uses Javascript behind the scenes. This way screen-reader users will know it's a link taking somewhere else and sighted users will have the same experience. - > Using CSS to change the appearance of a button isn't a hack, that's the explicit purpose of CSS. It's a hack to make a link point to "javascript:void(0)" to prevent it from doing the thing it's supposed to do. I disagree. MDN's CSS accessibility page starts precisely with this: "It is possible to use CSS to make any HTML element look like anything, but this doesn't mean that you should". [1] Changing the whole look and feel of an element to emulate another is definitely a hack. You would also need aria-role="link" to have proper accessibility, btw. Which is exactly the point of the article: not having to sprinke aria-role just because you're using non-semantic HTML. Ideally you would have a proper link instead of a fallback, so that users can open the link in a new window or save a bookmark. Using javascript:void(0) is less than ideal but at least gives a hint to the browser that the link is not taking the user to another URL. [1] https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript https://developer.mozilla.org/en-US/docs/Learn/Accessibility... EDIT: Replaced bad argument with the MDN quote.
- extra88 6y agoYou probably know this but aria-role is not an attribute, the ARIA attribute you're thinking of is simply role. Your point still stands, if someone makes an element other than <a href...> look and behave like a link, they should also add role="link" to convey that role to assistive technologies.
- ratww 6y agoOoops, thanks again. You're absolutely correct.