Accessibility Issues

[vekien]

Hello,

(Just to note, really loving the Flexbox concept, and the polish of the site)

There are some major accessibility issues in this project, some could be implemented quite easily:

• Roles missing, eg: Notifications require role="alert"
• Aria actions missing, eg: labels on close buttons
• Colors too washed out, default fail contrast accessibility (Including is-dark tags)
• HTML syntax is invalid, eg: <a class="button">Button</a> - Links are not buttons

Some would probably fall onto the user (eg the html syntax, as this is a CSS framework?), these are some key points I look into when it comes to boilerplate resources. I'd be expecting some users/clients going at the use "as-is" approach and then we have a world that forgets accessibility.

Any there plans to address some of these, at least the colours, providing an extra tag for high contrast, or would it be down to the user to modify the variables.sass file?

[jgthms]

Yes, accessibility has not been tackled at all for now.

Most accessibility features are tied to the HTML markup, not the CSS. So it goes beyond the scope of Bulma, which is a CSS framework after all.

I like the idea of the high contrast flag that could be added in the variables. We could have functions to calculate those colors (like the findColorInvert function that's already being used).

If you want to update the HTML markup of the docs, feel free to submit a PR on the relevant repo: https://github.com/jgthms/bulma-website

I'll leave this issue open for discussion.

[jwdallas]

Hey, a number of these controls do not have focus styles. You seem to have disabled the default focus styles and forgot to add back in your own. This is definitely an accessibility issue within the scope of a CSS framework.

Also super easy to fix. :)

[johncaseysmith]

I would argue against a tag specifically for high contrast, since the actual problem is that the colors don't even meet the minimum requirements for contrast as they are. So really, the "high contrast" should be the standard. Regular text must have a contrast ratio of 4.5:1 to comply with the WCAG 2.0 standards.

And I second the focus styles being important and easy. Take care with outlines and take care with that tab panel. You have a huge opportunity here to improve the accessibility of every website using this framework, I hope it isn't squandered! A great feature would be CSS markup based on role attributes.

[chmanie]

Most accessibility features are tied to the HTML markup, not the CSS. So it goes beyond the scope of Bulma, which is a CSS framework after all.

That's true, but a CSS framework could do the job of making accessibility more accessible :)

For example also supporting aria states for CSS styling.

[joeldbirch]

I'd like to see the focus styles improved as they are barely noticeable, but I'd settle for variables that allow me to override the box-shadow spread, blur and opacity. For example, in the current button.sass file:

&:focus,
  &.is-focused
    border-color: $button-focus-border
    box-shadow: 0 0 0.5em rgba($button-focus-border, 0.25)

This could be changed to something like:

&:focus,
  &.is-focused
    border-color: $button-focus-border
    box-shadow: 0 0 $button-focus-blur $button-focus-spread rgba($button-focus-border, $button-focus-opacity)

That would help greatly. I'll try to make a pull request once the heat is off for current project, but hopefully someone will beat me to it.

[xnt]

@viion - Since you seem to have identified a few different problems, it'd be awesome if you could break down this issue into smaller chunks. I'd be more than happy to address at least some of them, but the scope of this particular ticket seems to big and even risky for a single PR...

[chrisdemars]

I disagree with that statement @viion. This framework should definitely be accessible to all users. It should stay open so someone can work on it. I can take a crack at it.

[joeldbirch]

I also disagree strongly. The web is all about accessibility and it's not hard to avoid breaking that. I don't see a need to give up so easily when the fixes are straight forward. Please see my example above that adds options to improve focus styles.

[chrisdemars]

To @joeldbirch's point. I give a talk at conferences all about CSS and focus styles. This really is not a huge task.

[joshmanders]

I'd also like to see accessibility cared about in this framework.

[jgthms]

@Muhnad has already made a few PRs to improve the doc code snippets.

I agree that more work needs to be done. I'm not an expert in accessibility, so any help would be appreciated!

[Muhnad]

Hi all,

of course, the framework needs more enhancements about accessibility but everybody blames the framework owner about this issue and I see you should blame yourself first because you know this framework is not accessible and you don't try to help and fix this issue.

no one knows everything if you know something you should help other, so we should all help the framework and make it accessible for everyone to make the framework great again :smile:

so thanks @viion for reporting this issue and we hope to open more specific issues about accessibility issues and if you can help to enhance the code that will be better.

everybody cares about users & web and can help us to enhance the framework would be appreciated :smile:

[vekien]

To note: this was posted over a year ago, it's old. Much of my OP has either been solved or wouldn't be appropriate for the "feel" of bulma.

There is much more than just focus styles @joeldbirch .... The current colours if used as text. You could tweak these but it would ruin the look of Bulma. Aria roles have been implemented which is a good sign, but missing in crucial areas (eg forms). HTML examples all looks better, I'm not a frontend dev but the obvious ones I posted in my OP I don't see anymore.

The reason I originally said close is this issue has been sat here for 18 months with no sign of work, not even a simple PR/Commit reference. Also due to most of the issues either being complete or nearish, smaller topics may be more suitable to tracking what is left to do. As for why I think not all frameworks need to be accessible, if you truely want Bulma to be AAA Pass 100% accessible you're going to have to adjust it colours a lot and in my opinion this would ruin it's look and feel. Not even BS passes accessibility contrast for coloured text.

However this is up to the creator and the support from posts, at least my post got people talking again on this topic which I do believe is important. I'll take that heat for my previous comment as it has brought out a few people who want to show their strong support, that is a win in my eyes.

From a profession point of view I would always need to pick the framework which is supporting the most right now.

[chrisdemars]

@viion You now have people who want to fix whateve a11y issues there are. I didn't know about any issues until a friend directed me here because of my accessibility advocacy. Getting to AAA WILL never happen so that can be buried, BUT it should still meet AA WCAG guidelines.

[xnt]

@viion regarding colour contrast, although not an ideal fix, I have successfully used the -ms-high-contrast media query for targeting IE users with high contrast mode turned on. Windows-only, IE/Edge-only, but I guess it's better than nothing. Admittedly, for these users, Bulma would look a bit ugly. But well, at least they would be able to see it :) .

I think it'd be fantastic if we can address this. By "huge" I meant that the acceptance criteria for closing this particular ticket was a bit too wide, and maybe instead we'd like to chop it down into tiny little chunks that could be addressed on a more atomic manner, whilst minimizing the PR conflicts.

[peterblazejewicz]

HTML syntax is invalid, eg: Button - Links are not buttons

BTW, this syntax is OK, the a tag can work as placholder under HTML5 (a:not(:link), a:not([href])): https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes That's up to library what to do with placeholder links.

[mikestreety]

Adding a note to this as I have just started using Bulma and noticed the examples for the forms are missing for="" attributes on labels and id="" attributes on inputs.

E.g.

<div class="field">
  <label class="label">Name</label>
  <div class="control">
    <input class="input" type="text" placeholder="Text input">
  </div>
</div>

Becomes

<div class="field">
  <label class="label" for="name">Name</label>
  <div class="control">
    <input class="input" type="text" placeholder="Text input" id="name">
  </div>
</div>

[seangates]

Um ... an accessible website is the law in most countries and jurisdictions.

If you're considering using Bulma, please know that you could still be held liable.

Therefore, I think labeling it a "feature" is just plain wrong. It should be foundational to the project. Huge miss. I won't be using this framework anytime soon.

[chrisdemars]

I am going to fix these issues if they are still a thing.

On Mon, Oct 15, 2018 at 11:22 AM Sean Gates notifications@github.com wrote:

Um ... an accessible website is the law in most countries and jurisdictions.

If you're considering using Bulma, please know that you could still be held liable.

Therefore, I think labeling it a "feature" is just plain wrong. It should be foundational to the project. Huge miss. I won't be using this framework anytime soon.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/jgthms/bulma/issues/53#issuecomment-429897637, or mute the thread https://github.com/notifications/unsubscribe-auth/AGfAcrHV2cdbsZnjYwl5ybdfigpStS6oks5ulKgcgaJpZM4HVce_ .

[seangates]

Of course you won't go to jail. I never said anything about jail or even a fine by the government.

But you can certainly be sued. Again, it depends where you live: https://www.employerlawreport.com/2015/12/articles/eeo/website-accessibility-regulations-delayed-until-2018-but-businesses-should-not-table-the-issue-until-then/

Beginning in 2006, private litigants and the DOJ began filing or threatening to file legal action based on allegedly inaccessible websites (and eventually also including mobile applications). The law is unsettled on whether websites and mobile applications are places of public accommodation under the ADA. Some courts have held that they are, and others have ruled otherwise. The Third, Ninth, and Eleventh Circuit courts apply the ADA only to websites that have a connection to goods and services available at a physical location, like a retail store. The theory in those cases is that the store is a place of public accommodation, and “shopping there” online requires accessibility of the website. The First, Second, and Seventh Circuit courts apply the ADA more broadly to include all websites that offer direct sale of goods or services, even those that lack “some connection to physical space.” Since web-based businesses can be sued anywhere they are regularly transacting business, litigants can select their forum based on which has the most favorable law. With e-commerce, that likely subjects many businesses to suit in all 50 states.

Basically, you can be sued using the ADA, if you don't comply with the accessibility standards set forth in the WCAG guidelines.

Further: https://www.w3.org/WAI/policies/

[seangates]

Also, it's just the right thing to do for many, many people.

[xnt]

https://en.wikipedia.org/wiki/Web_accessibility#Web_accessibility_legislation

In 2000, an Australian blind man won a $20,000 court case [...] because SOCOG had failed to make their official website, Sydney Olympic Games, adequately accessible to blind users.

In February 2014 a draft law was endorsed by the European Parliament stating that all websites managed by public sector bodies have to be made accessible to everyone.

The Israeli Ministry of Justice recently published regulations requiring Internet websites to comply with Israeli standard 5568, which is based on the W3C Web Content Accessibility Guidelines 2.0.

In Norway, web accessibility is a legal obligation under the Act June 20, 2008 No 42

Among many others. Personally, I worked at an alexa top-50 website not so long ago. ~50% of our team got pulled to a11y for several months due to the very serious threat of legal action from an accessibility lobbying group.

[seangates]

☝️

[vekien]

It’s very important to differentiate the difference between the claims and law vs what is required, you are not going to get sued because your submit button didn’t have the right contrast.

There is also an expectation of example from sites like the Olympics, eg was the site just a big video overlay?

Demanding action because of laws don’t make accessibility integration black and white, look at GDPR as an example of law vs outcome.

Also happy 2+ years 🎉 when I brought these issues up, anyone up for documenting what is left to do?

[miklb]

I believe the default colors are still not WCAG AA compliant. That's what got me here via a search anyway.

[jaimeiniesta]

Hey there, in case it helps detecting accessibility issues here, I've run a report on the main site (which I suppose uses the Bulma framework) and here are the HTML and A11Y issues found:

https://rocketvalidator.com/s/a7949c11-7654-4544-afc8-b3f938f37bb5/p

I'll be happy to provide a larger report, or to set up a schedule on this site to have it monitored if you wish.

[kiwanska]

I'm happy to help with fixing all the accessibility issues if we have a good website for testing – anybody able to share a website that uses Bulma heavily so I can run accessibility test on it and fix one by one?

[chrisdemars]

I also want to do this too.

On Mon, Nov 19, 2018 at 6:53 PM Kat Iwańska notifications@github.com wrote:

I'm happy to help with fixing all the accessibility issues if we have a good website for testing – anybody able to share a website that uses Bulma heavily so I can run accessibility test on it and fix one by one?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/jgthms/bulma/issues/53#issuecomment-440084969, or mute the thread https://github.com/notifications/unsubscribe-auth/AGfAcpjc-YTB0WC3Rqi4paYchZ74uElOks5uw0SLgaJpZM4HVce_ .

[jaimeiniesta]

@kiwanska @chrisdemars I can give you free Pro accounts on Rocket Validator to crawl your test sites and run axe-core A11Y checks automatically, I'll ping you by email.

[zoe-edwards]

For colour accessibility, if you avoid the buttons and don’t use the greys, actually most things are accesible. At the moment only one of the coloured buttons is somewhat accessible. Just a quick test I did:

Button	AA	AAA
primary	Fail	Fail
link	Pass	Fail
info	Fail	Fail
success	Fail	Fail
warning	Fail	Fail
danger	Fail	Fail

• danger does work using large bold text

A lot of people might like the bright colours, but it would be super to provide accesible versions. Not sure if it’s best to make another set or not. At the moment I’m just using the link or the black version.

Also the outlined and inverted ones are the same. You could as one option have black text and a coloured border?

Tested using Colour Contrast Analyser. An online version is also avalible at WebAIM.

[zoe-edwards]

Having played around a little, this works to make an outlined button with accessible text:

<button class="button is-primary is-outlined has-text-dark">Button</button>

However, when you hover over it it then becomes inaccessible.

Would a PR be supported for something like this?

<button class="button is-primary is-bordered">Button</button>

My proposal is that it would keep the has-text-dark colour throughout, and that either have no hover state (as that’s perfectly accessible), or something else.

[jessaleks]

Ok folks, it's June 2019, and it still is nowhere near being fixed. It's 3 years now.

I really like the teal-ish primary color. What I don't like, however, is having the contrast ratio of JUST 1.95 between primary button's text and background.

Most folks might customize the color theme right away, and they probably will continue to do so, however some don't and won't.

[VizuaaLOG]

@thenathurat this is an open source project. You're welcome to create a PR. Bulma is still in the beta phase so is probably not a priority at the moment.

[jessaleks]

@VizuaaLOG how is making Bulma accessible to everyone not a priority?

Informing people is why the internet was created in the first place. How can the internet serve it's purpose if people can barely read things?

It's not just the buttons. Take a look:

That simply can't be.

[VizuaaLOG]

I didn't say it's not a priority ever. I said it is probably not an priority at the moment.

Once it is released fully released then I'm sure it would be a priority. It's in a beta phase and so shouldn't really be used in any production project, even though it is fairly stable.

[alejandroiglesias]

@VizuaaLOG I'm wondering if core developers share your opinion in that it shouldn't be used in production. That would worry me since we're already using it in production.

[aviv-or]

@VizuaaLOG I'm wondering if core developers share your opinion in that it shouldn't be used in production. That would worry me since we're already using it in production.

I completely agree, this framework looks nice visually but as soon as i looked whats under the hood, its really lacking. It's not production ready at all. The way i see it, the creators of design systems / CSS frameworks need to take a responsibility for the majority of developers who basically know nothing about accessibility. At the very least, the use of proper colors and the right contrast should be mandatory.

[seangates]

Yup. That's why we at eBay have a CSS framework which enforces accessible practices called Skin, as well as a front-end framework called eBayUI Core which has accessibility baked in for developers to focus on solving business problems.

We welcome any feedback!

[septatrix]

Today I also noticed that the contrast on message boxes is too low. It would be nice if the SCSS functions generating the relevant colors (dark and light) would yield a high enough contrast.

Currently this is sadly stopping us from adopting Bulma besides some personal projects of mine in which I have liked the experience so far.