{"_id":"508-view","_rev":"1-9dd5773c123825c5beccd7ed5ad411ee","name":"508-view","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"508-view","version":"1.0.0","license":"MIT","description":"Modifies a web site to quickly view common 508/accessibility issues. Attempts to present your website the way a user of a screen reader would interpret it.","repository":{"type":"git","url":"git+https://github.com/agroff/508-view.git"},"main":"lib/508-view.js","author":{"name":"Andrew Groff","email":"andy@groff.cc","url":"https://groff.cc"},"keywords":["accessibility","508"],"scripts":{"build":"webpack --env dev && webpack --env build && npm run test","dev":"webpack --progress --colors --watch --env dev","test":"","test:watch":"mocha --require babel-register --colors -w ./test/*.spec.js"},"devDependencies":{"@babel/cli":"^7.0.0-beta.51","@babel/core":"^7.0.0-beta.51","@babel/preset-env":"^7.0.0-beta.51","babel-eslint":"^8.0.3","babel-loader":"^8.0.0-beta.4","babel-plugin-add-module-exports":"^0.2.1","babel-preset-env":"^7.0.0-beta.3","babel-register":"^7.0.0-beta.3","chai":"^4.1.2","eslint":"^5.0.1","eslint-loader":"^2.0.0","jsdom":"11.11.0","jsdom-global":"3.0.2","mocha":"^4.0.1","uglifyjs-webpack-plugin":"^1.2.7","webpack":"^4.12.2","webpack-cli":"^3.0.8","yargs":"^10.0.3"},"gitHead":"a97ee8a52b12a2372fc249b596030197cfd2493a","bugs":{"url":"https://github.com/agroff/508-view/issues"},"homepage":"https://github.com/agroff/508-view#readme","_id":"508-view@1.0.0","_npmVersion":"5.6.0","_nodeVersion":"9.10.1","_npmUser":{"name":"agroff","email":"andy@groff.cc"},"dist":{"integrity":"sha512-y7NSaQBp3r7jcb/RwmzYce90DQhi7j/K6LMDddvsSDgskCvVTgdw9Pp9SVn7A29ZhTjVbmzLrJA6oJXEG1L5aw==","shasum":"7800e2a21b78508891b82b9a8f7df5c08334aecc","tarball":"https://registry.npmjs.org/508-view/-/508-view-1.0.0.tgz","fileCount":24,"unpackedSize":291259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbbDKdCRA9TVsSAnZWagAAN1EP/0+SFW5f707VEl6Eo6lH\nk3T8oTs9qJIUJNcRnZAT1wk6zpo/a7PBOlf/sSQlZZvG02J0G0wdbE7ACoRz\n6iQAYQHdntrjKG179LTta+CSrHbeuaCzD7gWoRpQ7GFDULWfbuseSM4uc/Ba\nu9mqiIZtexltwSeJ81XAluDA8WCNL7jlZ4eXTljwYnUpnzikEzxYzY2VkmIZ\n0nHKLVmH+85K+iszC7PQNpZNF+7ih2NTpU0yABIys54W3pbjfJQ5x+xZi3ND\nK5W8qmw+rHmxnB7PQhahPlDJJwimGhfbuLjAaziZ6LdZz5wBAamfgSEC3aYv\ni0iXJ8eN405Qbj1h78NEBzMrR8pLz2d31hFQK1W/ov/BhZ/VUxudJG/xWgxR\nCtStBlX7JSW1/VUTt9cTXy84Wg4zaEL1Cb9jtUckrMAjegXjneEEuG48Z/LO\nXRo9dPaPb2h+OZu3mM1++aoHv1eqco1highq6IgR50+faqcsV8sLMcD3zNg5\nnme6xpfdMI0u0ufI0rI/2udIFOh66rQMrZiK9GNAYR8uU4A3q4kvYurhjteF\n4425dFnOaaVBp2aC2VpDM82l0w+PkKBhO8YRPLy0bzXSqLbSn5uNYkgWji3H\nf32T0jTJADRhh9/fx6OiEXFV/raTUMaF7Xr+8MubhAHf4ZZV/+YZQAlO2DEN\nO/l2\r\n=7pu8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEexzP5PrUXPLLdE8/fhRGd1iwjW2VV6Vz3uD/NiEmcgIhAP/Xj3Kl80oBAXu5y52fr5ITbxJcXwSYc4sYYCsdJ9t9"}]},"maintainers":[{"name":"agroff","email":"andy@groff.cc"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/508-view_1.0.0_1533817500555_0.687323728339746"},"_hasShrinkwrap":false}},"time":{"created":"2018-08-09T12:25:00.554Z","1.0.0":"2018-08-09T12:25:00.638Z","modified":"2022-04-04T10:22:57.286Z"},"maintainers":[{"name":"agroff","email":"andy@groff.cc"}],"description":"Modifies a web site to quickly view common 508/accessibility issues. Attempts to present your website the way a user of a screen reader would interpret it.","homepage":"https://github.com/agroff/508-view#readme","keywords":["accessibility","508"],"repository":{"type":"git","url":"git+https://github.com/agroff/508-view.git"},"author":{"name":"Andrew Groff","email":"andy@groff.cc","url":"https://groff.cc"},"bugs":{"url":"https://github.com/agroff/508-view/issues"},"license":"MIT","readme":"# 508 View\n\n508 view is an NPM package that you can include during development to help evaluate and improve \nyour site's accessibility. It attempts to create a visual representation of what a screen-reader\nwould see. To see how it works check out the demo:\n\n[View the Demo](https://agroff.github.io/508-view/examples/?)\n\n## Usage\nAdd it as a dev dependency with yarn: \n\n    yarn add -D 508-view\n\nOr, use NPM:\n\n    npm install --save-dev 508-view\n\nOnce it's installed you need to include it in your site. If you're using webpack you can do \nsomething like: \n\n    import {ScreenReaderView} from '508-view';\n    new ScreenReaderView().run();\n    \nIf your code isn't being transpiled, you can include it from the `node_modules` folder like:\n\n    <script src=\"/node_modules/508-view/lib/508-view.js\"></script>\n    \nOnce its included (you may need to adjust the path to ensure you dont have a 404), you can run it \nlike this:\n\n    var ScreenReaderView = window[\"508-view\"];\n    new ScreenReaderView().run();\n\n## Config\nBy default, everything is turned on but the script won't execute unless it finds the GET parameter\n`508` in the URL. This allows simple toggling during development.\n\nOption | Default | Description\n--- | --- | ---\n\"display-aria-visible\"       | true       | Finds any elements that are hidden via CSS but are missing an aria-hidden attribute. Sets their display to block.\n\"highlight-aria-invisible\"   | true       | Adds a big red border around elements with aria-hidden set to true, indicating the screen reader can't see them.\n\"hide-visual-elements\"       | true       | Sets opacity on image, video, and canvas to 0. Removes background images.\n\"display-image-alts\"         | true       | Adds a green element above images with their alt tag value.\n\"display-missing-image-alts\" | true       | Adds a red element above image missing alt tags.\n\"display-sr-only\"            | true       | Renders .sr-only text as a blue elements.\n\"use-helper-styles\"          | true       | Overrides background colors to light grey, text to black, makes buttons yellow, adds a pink focus state.\n\"enable-via-url\"             | true       | Toggles whether 508 view should be rendered via a GET parameter or should be always rendered.\n\"url-parameter\"              | \"508\"      | Sets the URL parameter to enable 508 view. Ignored if `enable-via-url` is false.\n\"body-class\"                 | \"test-508\" | Sets the CSS class that gets added to the body to let you write specific styles for 508 mode.\n\n## Warning\nThis tool is just meant to help out during the development process. It is not tested across many \nbrowsers and shouldn't be used in production for any reason.\n","readmeFilename":"README.md"}