├── .editorconfig ├── .gitignore ├── LICENSE ├── README.md ├── babel.config.js ├── package.json ├── public ├── favicon.ico ├── img │ └── icons │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-512x512.png │ │ ├── apple-touch-icon-120x120.png │ │ ├── apple-touch-icon-152x152.png │ │ ├── apple-touch-icon-180x180.png │ │ ├── apple-touch-icon-60x60.png │ │ ├── apple-touch-icon-76x76.png │ │ ├── apple-touch-icon.png │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── msapplication-icon-144x144.png │ │ ├── mstile-150x150.png │ │ └── safari-pinned-tab.svg ├── index.html ├── manifest.json └── robots.txt └── src ├── App.vue ├── assets ├── logo.png └── logo.svg ├── constants └── constants.js ├── demo ├── ElementOrderDemo │ ├── ElementOrderDemo.vue │ └── ElementsOrder.vue ├── Home │ └── Home.vue ├── ImageManipulationDemo │ └── ImageManipulationDemo.vue └── MainDemo │ ├── List.vue │ └── MainDemo.vue ├── main.js ├── plugins └── vuetify.js ├── registerServiceWorker.js └── router └── index.js /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | end_of_line = lf 5 | trim_trailing_whitespace = true 6 | insert_final_newline = true 7 | max_line_length = 100 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | 23 | package-lock.json 24 | yarn.lock -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Maya Shavin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-accessibility-demo 2 | Demo for Vue plugin for m16y - media accessibility for visually impaired user support. 3 | 4 | Demo: [https://vue-accessibility-demo.netlify.com/](https://vue-accessibility-demo.netlify.com/) 5 | 6 | It will inject a small widget with basic settings to for helping visually impaired user, including: 7 | 1. Low visions (contrast sensitivy, brightness sensitivity, etc) 8 | 2. Color blindness (texture support) 9 | 10 | ## Functionalities 11 | ![screenshot of plugin UI](https://res.cloudinary.com/mayashavin/image/upload/w_250/v1550135241/Screen_Shot_2019-02-14_at_10.05.40.png) 12 | 13 | ### Brightness control 14 | Allow user to change the brightness of the whole app. 15 | 16 | Default: `100%` 17 | 18 | # Contrast control 19 | Allow user to change the contrsat of the whole app. 20 | 21 | Default: `100%` 22 | 23 | ### Dark mode (Night mode) 24 | Allow user to switch the app to dark theme, which is easier to read. 25 | 26 | Default: `false` 27 | 28 | ### Color blind mode 29 | * Allow user to enable color blind mode for images throughout the app. It will add texture to differentiate similar colors (red-green). 30 | 31 | * Currently only works when image is rendered using `image-wrapper` component. 32 | 33 | Default: `false` 34 | 35 | ### Grayscale mode 36 | Allow user to switch the app to grayscale color theme. 37 | 38 | ## How to use 39 | 40 | ### Install the plugin 41 | - Add the plugin to Vue using 42 | 43 | ``` 44 | import M16yPlugin from 'm16y-plugin'; 45 | 46 | Vue.use(M16yPlugin); 47 | ``` 48 | 49 | - In `App.vue` simple add attribute `v-access-ctrls` 50 | ``` 51 |
52 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "accessibility-demo", 3 | "short_name": "accessibility-demo", 4 | "icons": [ 5 | { 6 | "src": "./img/icons/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "./img/icons/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "start_url": "./index.html", 17 | "display": "standalone", 18 | "background_color": "#000000", 19 | "theme_color": "#4DBA87" 20 | } 21 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 60 | 61 | 109 | 110 | 192 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayashavin/vue-accessibility-demo/a9bf80bd1f073d2a8869dad0b690a4ca897facdf/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | Artboard 46 2 | -------------------------------------------------------------------------------- /src/constants/constants.js: -------------------------------------------------------------------------------- 1 | const Configurations = Object.freeze({ 2 | colorBlind: true, 3 | nightMode: true, 4 | grayscale: true, 5 | brightness: true, 6 | contrast: true, 7 | }); 8 | 9 | export default Configurations; 10 | -------------------------------------------------------------------------------- /src/demo/ElementOrderDemo/ElementOrderDemo.vue: -------------------------------------------------------------------------------- 1 | 18 | 45 | 121 | 122 | -------------------------------------------------------------------------------- /src/demo/ElementOrderDemo/ElementsOrder.vue: -------------------------------------------------------------------------------- 1 | 19 | 40 | 111 | 112 | -------------------------------------------------------------------------------- /src/demo/Home/Home.vue: -------------------------------------------------------------------------------- 1 | 21 | 34 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /src/demo/ImageManipulationDemo/ImageManipulationDemo.vue: -------------------------------------------------------------------------------- 1 | 25 | 62 | 70 | 71 | -------------------------------------------------------------------------------- /src/demo/MainDemo/List.vue: -------------------------------------------------------------------------------- 1 | 9 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/demo/MainDemo/MainDemo.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import M16yPlugin from 'vue-accessibility-widget'; 3 | import './plugins/vuetify'; 4 | import App from './App.vue'; 5 | import './registerServiceWorker'; 6 | 7 | Vue.config.productionTip = false; 8 | Vue.use(M16yPlugin, { 9 | plugins: { 10 | Cloudinary: { 11 | configuration: { 12 | cloudName: 'cloudinary', 13 | }, 14 | }, 15 | }, 16 | }); 17 | 18 | Vue.config.productionTip = false; 19 | 20 | new Vue({ 21 | render: h => h(App), 22 | }).$mount('#app'); 23 | -------------------------------------------------------------------------------- /src/plugins/vuetify.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuetify from 'vuetify/lib'; 3 | import { 4 | VApp, 5 | VSlider, 6 | VSwitch, 7 | VIcon, 8 | VBtn, 9 | VRadio, 10 | VRadioGroup, 11 | } from 'vuetify/lib/components'; 12 | import 'vuetify/src/stylus/app.styl'; 13 | 14 | Vue.use(Vuetify, { 15 | iconfont: 'md', 16 | components: { 17 | VApp, 18 | VSlider, 19 | VSwitch, 20 | VIcon, 21 | VBtn, 22 | VRadio, 23 | VRadioGroup, 24 | }, 25 | }); 26 | -------------------------------------------------------------------------------- /src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | 3 | import { register } from 'register-service-worker'; 4 | 5 | if (process.env.NODE_ENV === 'production') { 6 | register(`${process.env.BASE_URL}service-worker.js`, { 7 | ready() { 8 | console.log( 9 | 'App is being served from cache by a service worker.\n' 10 | + 'For more details, visit https://goo.gl/AFskqB', 11 | ); 12 | }, 13 | registered() { 14 | console.log('Service worker has been registered.'); 15 | }, 16 | cached() { 17 | console.log('Content has been cached for offline use.'); 18 | }, 19 | updatefound() { 20 | console.log('New content is downloading.'); 21 | }, 22 | updated() { 23 | console.log('New content is available; please refresh.'); 24 | }, 25 | offline() { 26 | console.log('No internet connection found. App is running in offline mode.'); 27 | }, 28 | error(error) { 29 | console.error('Error during service worker registration:', error); 30 | }, 31 | }); 32 | } 33 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | // import Vue from 'vue'; 2 | // import Router from 'vue-router'; 3 | // import Home from '@/components/Home/Home'; 4 | // import TextBackgroundDemo from '@/components/TextBackgroundDemo/TextBackgroundDemo'; 5 | // import ImageManipulationDemo from '@/components/ImageManipulationDemo/ImageManipulationDemo'; 6 | // import ElementOrderDemo from '@/components/ElementOrderDemo/ElementOrderDemo'; 7 | // import Demo from '@/components/MainDemo/MainDemo'; 8 | 9 | // Vue.use(Router); 10 | 11 | // export default new Router({ 12 | // routes: [ 13 | // { 14 | // path: '/', 15 | // name: 'Home', 16 | // component: Home, 17 | // }, 18 | // { 19 | // path: '/demo', 20 | // name: 'Demo', 21 | // component: Demo, 22 | // }, 23 | // { 24 | // path: '/demo1', 25 | // name: 'ElementOrderDemo', 26 | // component: ElementOrderDemo, 27 | // }, 28 | // { 29 | // path: '/demo2', 30 | // name: 'TextBackgroundDemo', 31 | // component: TextBackgroundDemo, 32 | // }, 33 | // { 34 | // path: '/demo3', 35 | // name: 'ImageManipulation', 36 | // component: ImageManipulationDemo, 37 | // }, 38 | // { 39 | // path: '*', 40 | // component: Home, 41 | // }, 42 | // ], 43 | // }); 44 | --------------------------------------------------------------------------------