Do you need an ICON ONLY button without screwing up the accessibility?

First, think carefully: Do you really need pure icon buttons? If you can, adding text next to the icon has been repeatedly proven to be the most accessible and clearest user experience (see Apple's latest mistakes). But if you do need it (I understand, sometimes you do), Sara Soueidan and Scott O'Hara each wrote an article that well elaborated on all the options and provided practical research on this topic.

• Sara Soueidan: Accessible Icon Button
• Scott O'Hara: Context tags accessible images and SVG

If you just want to get a straight answer, I suggest you take the "use some text in the button" method:

<button>
   <svg aria-hidden="true" focusable="false" height="32px" viewbox="0 0 32 32" width="32px"></svg></button>
   menu

Sara points out that there is no one-size-fits-all approach , but it seems that you do need to use the actual text inside the button and hide or overwrite it somehow. Using SVG alone does not have a reliable way to provide accessibility names for buttons or links.

It's amazing how difficult this pattern is to be implemented correctly.

The above is the detailed content of Do you need an ICON ONLY button without screwing up the accessibility?. For more information, please follow other related articles on the PHP Chinese website!