https://github.com/cityssm/bulma-a11y

Bulma with increased colour contrast to meet accessibility requirements.
https://github.com/cityssm/bulma-a11y

a11y accessibility bulma css css-framework hacktoberfest

Last synced: 2 months ago
JSON representation

Bulma with increased colour contrast to meet accessibility requirements.

• Host: GitHub
• URL: https://github.com/cityssm/bulma-a11y
• Owner: cityssm
• License: mit
• Created: 2020-12-22T15:20:42.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-03-06T22:59:50.000Z (about 2 years ago)
• Last Synced: 2025-03-17T21:13:22.688Z (2 months ago)
• Topics: a11y, accessibility, bulma, css, css-framework, hacktoberfest
• Language: HTML
• Homepage: https://www.npmjs.com/package/@cityssm/bulma-a11y
• Size: 734 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# bulma-a11y

[![npm (scoped)](https://img.shields.io/npm/v/@cityssm/bulma-a11y)](https://www.npmjs.com/package/@cityssm/bulma-a11y)

[![Codacy grade](https://img.shields.io/codacy/grade/873a7db52d1c4a7da285a96343134e3e)](https://app.codacy.com/gh/cityssm/bulma-a11y/dashboard)

[![AppVeyor](https://img.shields.io/appveyor/build/dangowans/bulma-a11y?label=lighthouse)](https://ci.appveyor.com/project/dangowans/bulma-a11y)

[![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/cityssm/bulma-a11y)](https://app.snyk.io/org/cityssm/project/bf65d71f-8d8b-43ba-8262-29a3c92872ef)

The [Bulma CSS framework](https://bulma.io/)

with increased colour contrast to meet accessibility requirements,

and some accessible enhancements too. 😊

![Sample Buttons](docs/buttons.png)

![Sample Skip Link Visible on Focus](docs/skipLinks.png)

## Installation

```sh

npm install @cityssm/bulma-a11y

```

## Usage

Rather than linking to `bulma.min.css` in your webpage,

link to `bulma-a11y.min.css`.

```html

```

## Test Pages

The following pages have minimal styling.

They use code samples from the official Bulma website to test for sufficient colour contrast.

-   [Buttons](https://cityssm.github.io/bulma-a11y/test/server/html/buttons.html)

-   [Messages](https://cityssm.github.io/bulma-a11y/test/server/html/messages.html)

-   [Notifications](https://cityssm.github.io/bulma-a11y/test/server/html/notifications.html)

-   [Tags](https://cityssm.github.io/bulma-a11y/test/server/html/tags.html)

-   [Skip Links](https://cityssm.github.io/bulma-a11y/test/server/html/skipLinks.html)

## ⚠ Important Note

While bulma-a11y attempts to improve colour contrast of the main Bulma components,

using bulma-a11y **does not guarantee** your website will be considered accessible.

## Related Project

Need the JavaScript to make your Bulma dropdowns and tabs work

while keeping accessibility in mind?

Check out [cityssm/bulma-js](https://github.com/cityssm/bulma-js).