4 ms·
No, having 7 lines for a simple button with hover text is horrible
by mort96 2mo ago
No, having 7 lines for a simple button with hover text is horrible
- esperent 2mo ago- two lines for the button (one of which is just the closing tag) - one line for an svg icon - four lines for the tooltip.
- mort96 2mo agoExactly. The tooltip should be part of one line, not spread across 4 lines and 2 attributes.
- esperent 2mo agoCan you give an an example of what you mean, because I'm not understanding how that's possible in HTML, even without accessibility.
- mort96 2mo ago<button title="whatever">?
- jaffathecake 2mo agoUnstylable, incorrect semantics, doesn't appear on hover, only supports text content.
- forestrywat 2mo agoThat has nothing to do with the accessibility. That was table stakes for this person's button design.
- jaffathecake 2mo agoThe solution in the post is 4 lines: <button aria-labelledby="bold-tooltip"> <svg>(bold icon)</svg> </button> <div id="bold-tooltip" popover="hint">Bold (⌘B)</div> Only one of those lines is the tooltip element. If you're comparing to the title attribute, it's one additional line, and solves all the problems vs title that others have already mentioned here. I'm guessing you got 7 from the final code example which is referred to as "overkill", and only useful in cases where the tooltip has enough content to make it worth splitting up the label & description parts - something you can't do with a simple title attribute. Basically, it's worth reading the thing you're critiquing.