Forum Discussion
Accessibility - Buttons/Icons/Shapes
If you're going to use icons as buttons, I would recommend creating a shape (like a rectangle or square), then editing the state of that shape, and putting the icons inside of the normal state of that shape. The most difficult thing about icons is that the clickable parts may have holes in them. By putting the icon inside the normal state of a shape, you've made that shape the clickable object. You can even make the shape transparent, but it still remains a clickable object.
Inside the shape, I'd hide the icon from accessibility tools, and name the shape appropriately for focus order.
Thank you for your insight! I often see complex groupings of icons and shapes and text with inconsistent labeling, or the parts that are "visible" don't have the triggers. I also find that using a shape as the clickable object helps.
In the case of an icon in a shape like this, can you give an example of what you might use for the shape name and the alt text? I know without alt text provided a screen reader will usually read the object name, but I tend to also enter it as alt text.
For clickable objects, for the alt text I would give it whatever you would put if you had to put text on the button. For example, if a shape with a piece of paper icon in it is a clickable object that is going to show a layer about a company policy, I would give it the alt text Company Policy. You're right that screen reader will already identify it as a clickable object, so you should just call it what it is that it does!
