7 ms·
As a non-web-dev who sometimes builds my own toys, when you say someone building buttons without labels is lawsuit-worthy, it makes me think you're all saying s
by 6gvONxR4sf7o 3y ago
As a non-web-dev who sometimes builds my own toys, when you say someone building buttons without labels is lawsuit-worthy, it makes me think you're all saying something other than what I'm interpreting. I'm guessing you mean more than
<button type="button">My Label</button>
or something like that?
- ridem 3y agoThat would be the label of a button yes. I think in practice, what's missing is describing the label of a button (or another element with that role) with an aria-label attribute. Buttons that miss a label are often an icon without text and label (e.g. a delete button with a trash icon). https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#description https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...
- 6gvONxR4sf7o 3y agoThanks for the explanation!
- kalensh 3y agoThe lawsuit worthy aspect is that labels for buttons are super important for understanding what a button does. A lack of labels (either through not putting text inside the <button> element or using a technique like aria-label) can quickly make an interface unusable for a blind person - the visual equivalent would be completely blank, identical buttons. That barrier is what someone could sue over.
- xigoi 3y agoIt can also quickly make an interface unusable for a non-blind person, if they block external fonts.
- d1sxeyes 3y agoMy understanding is that a button used like this is already accessible. However a button that looks like this: <button type="button"> <img src="/delete.png" alt="Delete post" /> </button> Is not. Screen readers will read the simple text on the button, but any descendants of the button will be considered purely presentational (even if as in the example above the img tag includes an 'alt' attribute, it won't be read). Modern screen readers will now often parse text content out of the button even if there are descendants, but this behaviour is not reliable or according to spec. To fix: <button type="button" aria-label="Delete post"> <img src="/delete.png" alt="Delete post" /> </button> There are other techniques as well such as using CSS to hide text (not with 'display: none' though, which also hides from screen readers, meaning this often feels a bit hacky) or using a hidden element with text content and aria-labelledby to reference the element's ID. This is a pretty good walk through: https://www.sarasoueidan.com/blog/accessible-icon-buttons/#accessible-button-names https://www.sarasoueidan.com/blog/accessible-icon-buttons/#a...
- extra88 3y agoNo, your first code snippet is totally fine. The button's name comes from its descendent elements by default. In this case, the `alt` attribute of the image provides the name. Sara is good source for accessibility information but I think you've misinterpreted that post. If an icon button uses an `img`, making the image's `alt` the name of the button works well. If the button's icon comes from an inline SVG, background image, or icon font, I recommend Sara's first technique, visually hidden text within the `button`; names from text nodes are more robust than from attributes (`alt` being an exception, in part because it has been around far longer).
- d1sxeyes 3y agoThank you for the correction! Always good to learn.