Bulma: Poor accessibility within the framework

[jwilson64]

This is about the Bulma CSS framework

I'm using Bulma 0.8

Description

A major problem within the framework itself is that there are poor uses of HTML for things like accessibility. Short of re-writing parts ourselves I can't use this framework for major projects with reasons like using for a button. Screen readers don't look at that the same way and see invalid syntax.

[ekawatani]

I also noticed this. It's really poor. I don't think accessibility was considered at all during the development of this otherwise great framework.

By far, the biggest issue I see is that, in Bulma, it's sometimes required to use <a> instead of <button> for button-like components. Using the anchor tag as buttons requires developers to 1) assign role='button', and 2) assign an event handler for the space key because accessible buttons must work with click, and space&enter key press. So, it's generally recommended and easier to use <button> because browser gives the keyboard events for free. Of course, there are cases where <button> cannot be used, so we must support both, but not just <a>.

Examples where <button> cannot be used even if there are actually buttons:

• Footer actions in Card component
• Menu items in Tabs component
• Buttons in Nav component
• Items inside Dropdown component

Perhaps, there are more.

In addition, this is wrong not even from accessibility standpoint. Using an anchor tag requires the href attribute, but examples in the Bulma documentation is full of anchor tags without it. (And, href='#' is not a workaround.)

Also, there are small, but severe issues like is-static input fields not showing focus outline when it's focused.

[thomasedwards]

There’s an issue open from 2016 that touches on this, so I think it’s probably about as likely to be solved as the docs having a search function.

[jwilson64]

Thanks for sharing. This should be a bigger concern for the framework and anyone using the framework. Accessibility should be a priority when it comes to building a website and frameworks are supposed to support that.

[thomasedwards]

I think I noted in that thread that so long as you don’t use most of the colours, a lot of other parts are accessible. I get that the colours are part of the brand, but it would be great to have an accessible option built in.

[saltytostitos]

Look at the insights of this repo, there is hardly anybody contributing to the framework. There's really just one person maintaining the code.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[thomasedwards]

Bad bot