Buttons styled as links and links styled as buttons

Hello

I would love to get clarification on this please as it seems like a can of worms…

I understand that
Links - designed to navigate users to a page or resource
Buttons - designed to iniate some sort of action or functionality or submit a form

However, regularly you see links and buttons used interchangeably.

I can see this presenting problems from two viewpoints

  1.  If a button is styled like a link, voice activation users may wonder why they can’t access it by saying ‘click link’
  2.  If a button is style like a link, this suggests the context of the link role is important in understanding the purpose of the control and this context should therefore also be presented to screen reader users

I see the argument here for this failing 1.3.1 and 4.1.2 and suggesting the role be changed in line with the styling.

However, I feel like this leads to problems, firstly because who is to say what a link or button should look like? Why can’t a link have a border?

Secondly because what if a button behaves like a button (it initates functionality but does not navigate users to a new page or resource) but it is styled like a link. In this case, the button role is more appropriate, and it is the styling that should theoretically change, not the role. This feels to me like a can of worms.

Surley it is more important that the role matches the functionality of the control than that the role matches the styling of the control.

Obviously ideally I would hope all 3 would align, but seems to require we consider the subtle intricacies of when a control should be a link vs a button and ensure this is done correctly in all cases - even when the role and styling align…

For example, if a control looks like a link, has a role of link but behaves like a button, should that fail 4.1.2? The role should be button and it should look like a button.

Or if a control has a role of button, behaves like a button, but looks like a link, do we tell people they have to restyle it to look like a button?

I would love to hear people’s approach to this!

Thanks

Sarah

Get Outlook for iOS<https://aka.ms/o0ukef>