How should I code elements with similar designs but different roles?


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?


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.

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.