4 ms·

The 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 exac

The 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 ago
That'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 ago
  You 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 ago
    Ooops, thanks again. You're absolutely correct.

ratww 6y ago

That'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 ago
You 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 ago
  Ooops, thanks again. You're absolutely correct.