Re: Buttons styled as links and links styled as buttons

I think we have to be pragmatic here. Designers and developers have styled
links to look like buttons and buttons to like links, on the majority of
websites all the way across the internet - and no doubt all the way down
the Dark Web as well if any of us did but know, and probably out across
networks that would get us arrested by MI6 or the CIA if we ever managed to
land on them! It's global. We aren't going to change that level of custom,
not now, not ever, so there is no point in thinking about it.

And really, I don't think it matters, because the ordinary sighted user
doesn't think about that. Basically, as users, we just click on something
and see what happens. If a dialog appears, we deal with it. If it goes to
another page, we observe the transition and deal with that. What do we
care, really! As Patrick put it so well, it's a non-issue - for sighted
users.

For keyboard users it's slightly more difficult sometimes to work out the
correct key to press but, as Patrick also mentioned with his anecdotal
evidence, I don't think it is (usually) a huge problem for them.

Screen reader users
------------------------
Blind screen reader users, on the other hand, are in a very different
place. They need all the clues they can get.

Foremost among these is, they need to know whether something they are
pressing is a link to another page, or a button that is doing something
else on this page.

If we sighted people see a popup dialog appear, we also immediately see,
usually, the Close button to get out of it once we've finished with it. If
we see that we have landed on another page, we know straightaway that can
get back to where we were by pressing the browser back button (except in
cases of secure payment processes and the like).

But for blind people, if we diddle them by telling them they are pressing a
button when in fact they are on a link to another page, or vice versa, then
they start off with the wrong idea, and may take a while to realise what
has really happened. That's an SC4.1.2 fail. Worse, if they press the back
button when a link actually never left the page, they will lose the current
page and may not be able to find it again if they forgot what link they
followed on the previous page!

So, regardless of visual styling, I think it is most important to use the
correct HTML element - a link for links to other pages or anchors, and a
button for buttons doing something on this page/ Or if not, to add an ARIA
role instead, of link or button according to what it actually does (not its
looks), to make that clear.

Also
-----
We had another discussion here or in the IAAP, some weeks ago, on whether
we should tell users what's going to happen, in advance, by putting
information on buttons before they are pressed. For the same reasons as
given above, I think we should, even where we aren't giving sighted people
advance info. So we use aria-expanded if content will be revealed.

I would also say use aria-haspopup="dialog" if it actually worked, but
screen readers don't recognise it. So I always recommend adding screen
reader text of "opens dialog" instead. It just gives that little bit of
extra help to blind people, in just 2 words, to let them know where they
are about to land.