How should I code elements with similar designs but different roles?
Question
My footer has five buttons and one link, but they all look like buttons. I think users will expect all the elements to be the same type of element (all buttons or all links), and may be confused that they’re different. Which is more important, user expectation or technical correctness?
Answer
It’s more important that each element communicates the correct role based on its function, even if it’s the only element of that type in the group. A link should only take the user to a new location. A button should perform an action, such as opening a modal or executing a search.
It’s not unusual for users to encounter multiple element types in footers. When elements have correct roles, users on assistive technology can better understand and predict what will happen when they activate each one.
For step-by-step help for identifying and understanding interactive element roles, explore the Guided Manual WCAG Audit Tool from Accessible Web.
