2 ms·

Please don’t do the latter. It breaks keyboard accessibility. Users that don’t have a mouse have no way of clicking this fake button. This MDN article[1] will

Please don’t do the latter. It breaks keyboard accessibility. Users that don’t have a mouse have no way of clicking this fake button. This MDN article[1] will help you find the correct attributes and behaviors to make your <div> fully accessible with a button role. 1: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...

dheera 6y ago
Well shit ... okay ... if they made it easier to code web pages maybe we'd have a more consistent experience. It seems if you do the intuitive thing you always break it for one user or the other, and it's designed such that you have to do a non-intuitive thing to serve everyone.
- jaywalk 6y ago
  Intuitiveness is in the eye of the beholder. I'd argue that if you're experienced with accessibility, doing things the "accessible way" becomes more intuitive.
- lukeschlather 6y ago
  You have to follow the specifications. None of this is remotely intuitive if you haven't read and studied the specs. If your intuition is wrong that's probably because you've been doing "whatever seems to work" rather than reading the specs and following them.
- bobthepanda 6y ago
  If you want to have the entire div act as a link, the link should cover the div, not the other way around. What’s not intuitive about that?
- a1369209993 6y ago
  > if you do the intuitive thing you always break it for one user or the other No, if you do the intuitive thing you get: <a href="http://whereever/">foo</a> which works fine for every user.
  - Izkata 6y ago
    And if for some reason you still really really want it to look more like a button, there's no need for a wrapper div. For example: a { display: inline-block; padding: 4px; background: lightgray; border: 2px outset lightgray; text-decoration: none; } a:active { border: 2px inset lightgray; }
simonlc 6y ago
It's luckily a very easy fix, just change the div tag for a button tag. You get all the a11y "for free."

dheera 6y ago

Well shit ... okay ... if they made it easier to code web pages maybe we'd have a more consistent experience. It seems if you do the intuitive thing you always break it for one user or the other, and it's designed such that you have to do a non-intuitive thing to serve everyone.

jaywalk 6y ago
Intuitiveness is in the eye of the beholder. I'd argue that if you're experienced with accessibility, doing things the "accessible way" becomes more intuitive.
lukeschlather 6y ago
You have to follow the specifications. None of this is remotely intuitive if you haven't read and studied the specs. If your intuition is wrong that's probably because you've been doing "whatever seems to work" rather than reading the specs and following them.
bobthepanda 6y ago
If you want to have the entire div act as a link, the link should cover the div, not the other way around. What’s not intuitive about that?
a1369209993 6y ago
> if you do the intuitive thing you always break it for one user or the other No, if you do the intuitive thing you get: <a href="http://whereever/">foo</a> which works fine for every user.
- Izkata 6y ago
  And if for some reason you still really really want it to look more like a button, there's no need for a wrapper div. For example: a { display: inline-block; padding: 4px; background: lightgray; border: 2px outset lightgray; text-decoration: none; } a:active { border: 2px inset lightgray; }

simonlc 6y ago

It's luckily a very easy fix, just change the div tag for a button tag. You get all the a11y "for free."