There is this particular element which you can find on various websites across the web. The people creating websites often use it to display selected values by the user which are removable. I am talking about chips. Some might refer to them as tags, others even as fries. The latter is obviously incorrect. The Material Design defines them as compact elements that represent an input, attribute, or action
. Now, what bothers me a lot is when their interactivity consists of a small icon (usually a cross). I often find myself tapping my phone multiple times to hit the chip just at the right spot. This is frustrating and not necessary at all. How can we solve this problem?
The first solution seems pretty straight-forward: just make the button bigger. Although it works, the design department won't be happy to find out that you made a monster out of their carefully crafted component. Now is the moment to question the purpose of design as the interaction is flawed. Still, there has to be a solution which keeps it visually pleasing yet usable.
The second method tries to keep the original design and structure intact. By adding a pseudo-element to the clickable icon and scaling it up, the button remains visually the same but has a larger clickable area. This improves things a little. This solution, however, feels quite hacky and incorrect. If something is inaccessible by design we should rethink if we can create the functionality differently.
After inspecting the Material Design documentation, I have the feeling that the entire chip component should be clickable. This makes a lot of sense to me. A chip can be seen as a button, whereas the icon is just an additional visual cue. This also has some other nice benefits apart from fixing the initial problem. For example, the outline when focusing the chip is now easier to see. Also, the implementation of the description for screen-readers is simpler. Add an aria-discribedby pointing at a describing element to the button and you are done. Alternatively, you can set an aria-label containing the entire text which should be communicated.
See the Pen Increasing a chip's clickable area by @kjan on CodePen.
I assume that the last solution is how Material Design intends it. Nevertheless, the uncomfortable feeling whenever I encounter these little guys won't vanish probably. Over the years, they trained everyone to expect a couple of missing taps. Maybe it is best to move on and find an alternative for them. There is only one place where they are beyond despute: fish and chips.