Bulma: [opinion] <a> and <button> elements are not interchangeable

[fjelsted]

This is about Bulma and the Docs.

There seems to be this misconception that you can use an <a> element whenever you have something clickable. This is wrong. An <a> element is a hyperlink. It is used to navigate a user to other web pages, files or any other URL.

A <button> element is used when a user can interact with the current page, e.g. submit a form or increase a counter. The URL staying unchanged would oftentimes be the expected outcome, but not always, like when submitting a form.

Does it matter?

In most cases, no. That's why I marked this thread as an opinion. However, it's bad semantics. Elements should be used as appropriately as possible. That's why we have elements like <section>, <header> and <footer>. Could you interchange <header> and <footer> elements? Yes, but it wouldn't be appropriate.

Where does it actually matter?

For accessibility reasons, you should be able to navigate a website without a mouse and instead with the tab-key.

<a class="button">Send email</a>

Can you send the email without a mouse? No. An <a> element without an href attribute is usually not focusable, and it also won't fire a click event even if you make it focusable by setting the tabindex attribute.

The reason it usually works anyways is because a pointing device, i.e. a mouse, is treated differently by always dispatching a click event. Touch will generally also dispatch mouse events, in effect working like a mouse. Instead, use <button> where appropriate and have it work always.

When to use <a> and <button>?

Generally, whenever an action can be triggered by a click/press, use <button>, unless the action directly involves a URL change, then use <a>.

Examples

Tabs

<div class="tabs">
  <ul>
    <li class="is-active"><a>Pictures</a></li>
    <li><a>Music</a></li>
    <li><a>Videos</a></li>
    <li><a>Documents</a></li>
  </ul>
</div>

Tabs are hardcoded to require <a> elements. They can never be navigated with a keyboard only.

Panels

Same as for tabs since panel-tabs relies on an <a> element.

Docs spreading bad practice

Throughout the docs there are numerous examples of <a> being used where <button> would be more appropriate, like here and here.

Disagree?

I'd be happy to hear your thoughts.

[jgthms]

Yes that's a good idea.

Can you make a PR that adds button in the Sass where appropriate?

[fjelsted]

I have honestly never done that, so I have no idea how it works. :)

[jgthms]

Everything can be learned 😉

[fjelsted]

The same could be said for you on accessible web design. 😉

[jgthms]

True, but I didn't bring this up, so it's your responsibility now. :-)

Please follow the contribution guidelines when making the PR.

[erfanio]

@fjelsted I would be happy to make a PR and you can have a look at it. See if it covers everything

[fjelsted]

@jgthms Way to take responsibility of your own project. I raised this issue because given the popularity of Bulma, I found it wrong how bad practices were being spread and also how people with certain disabilities could be excluded from some websites. But it's fine, I know you don't care about accessibility; I've seen your earlier replies when others tried to raise the flags where you simply dismissed it with "Sorry, dunno."

@erfanio That is very nice of you. 👍 I didn't really start this thread to have any explicit changes made, it was more of a wake-up call to @jgthms to teach him something he didn't know, or if he already did know it, to take semantics and accessibility more seriously.

[jgthms]

Giving instructions to others is easy. Making them is a bit harder. 😉 The nice thing with open source projects like this is that anyone can contribute!

Take a look at @Muhnad's work: https://github.com/jgthms/bulma/pulls?q=is%3Apr+author%3AMuhnad
He felt the docs were poor in terms of accessibility and decided to make a change.

As you say, given the popularity of Bulma, it has become a group effort. There are a lot of ways Bulma has _already been_ improved, in terms of customization, clarity, modularity, ease-of-use, and simply bug-fixing, thanks to the help of tons of contributors. And there's other ways it _can_ be improved. But the effort should come from the community.

So if you feel something needs to be improved, _"be the change you want to see"_.

[fjelsted]

I never said you had to self-assign anything, but open source doesn't mean you can sit back and wait for stuff to happen. This is your project. You even profit off of it, which makes it not just your project, but your product.

If you feel you are so bad at accessibility design, or just don't bother, then at the very least be the responsible maintainer and write up a list of stuff that needs to be done. Then someone can take on the task if they so feel like it. Open a request for people more skilled in this area to chip in on how to make Bulma more accessible. Is there room for improvements? I don't know. I'm not a web designer by trade. But since you don't seem to know either, at least do your best to make Bulma as good as it can be.

You don't have to do everything if you just manage it right.

I think I have gotten my point across, so I'll close this now. You may disagree with me but that's okay. Like I said, I'm not a professional, and neither very skilled, so I don't feel comfortable contributing with code. But opinions I do have, and sometimes they are not too bad (or so I like to think), so those I share. :)

[service-paradis]

I think this issue is still relevant to improve tabs a11y.