Skip to content
Demo for m16y Plugin - media accessibility using CSS and Cloudinary
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.editorconfig
.gitignore
LICENSE
README.md
babel.config.js
package.json

README.md

vue-accessibility-demo

Demo for Vue plugin for m16y - media accessibility for visually impaired user support.

Demo: https://vue-accessibility-demo.netlify.com/

It will inject a small widget with basic settings to for helping visually impaired user, including:

  1. Low visions (contrast sensitivy, brightness sensitivity, etc)
  2. Color blindness (texture support)

Functionalities

screenshot of plugin UI

Brightness control

Allow user to change the brightness of the whole app.

Default: 100%

Contrast control

Allow user to change the contrsat of the whole app.

Default: 100%

Dark mode (Night mode)

Allow user to switch the app to dark theme, which is easier to read.

Default: false

Color blind mode

  • Allow user to enable color blind mode for images throughout the app. It will add texture to differentiate similar colors (red-green).

  • Currently only works when image is rendered using image-wrapper component.

Default: false

Grayscale mode

Allow user to switch the app to grayscale color theme.

How to use

Install the plugin

  • Add the plugin to Vue using
import M16yPlugin from 'm16y-plugin';

Vue.use(M16yPlugin);
  • In App.vue simple add attribute v-access-ctrls
<div id="app" v-access-ctrls>
<!--code here--/>
</div>

And it will just work! 👍

Use image-wrapper

image-wrapper receives the following basic props:

publicId: string - the image unique Id using Cloudinary

width: number - width of the image

height: number - height of the image

alt: string- alt text of the image

optimizedWhiteText: boolean - whether should optimize the image brightness for using as background of white text.

optimizedBlackText: boolean - whether should optimize the image brightness for using as background of black text.

Other transformation effects which follow Cloudinary standards

Technologies used

Vue

UI Components currently using Vuetify

UI Library

Image manipulation support for color blind and night mode using Cloudinary Vue SDK - Beta

Image manipulation

And of course a bunch of other automation tools and JavaScript, CSS 👩‍💻

Version

0.0.1

Coming soon

  • Auto modify all image tags when plugin is enabled.
  • Warm lighting mode

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Run your tests

yarn run test

Lints and fixes files

yarn run lint

Customize configuration

See Configuration Reference

You can’t perform that action at this time.