# 508-view

> 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.

Latest version **1.0.0** (published 2018-08-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install 508-view
pnpm add 508-view
yarn add 508-view
bun add 508-view
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-08-09 |
| First published | 2018-08-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 284.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Andrew Groff |
| Maintainers | agroff |
| Keywords | accessibility, 508 |

## Links

- npm: https://www.npmjs.com/package/508-view
- Repository: https://github.com/agroff/508-view
- Homepage: https://github.com/agroff/508-view#readme
- Issues: https://github.com/agroff/508-view/issues
- npm.io page: https://npm.io/package/508-view

## Recent versions

- 1.0.0 (latest) — 2018-08-09

## README

# 508 View

508 view is an NPM package that you can include during development to help evaluate and improve 
your site's accessibility. It attempts to create a visual representation of what a screen-reader
would see. To see how it works check out the demo:

[View the Demo](https://agroff.github.io/508-view/examples/?)

## Usage
Add it as a dev dependency with yarn: 

    yarn add -D 508-view

Or, use NPM:

    npm install --save-dev 508-view

Once it's installed you need to include it in your site. If you're using webpack you can do 
something like: 

    import {ScreenReaderView} from '508-view';
    new ScreenReaderView().run();
    
If your code isn't being transpiled, you can include it from the `node_modules` folder like:

    <script src="/node_modules/508-view/lib/508-view.js"></script>
    
Once its included (you may need to adjust the path to ensure you dont have a 404), you can run it 
like this:

    var ScreenReaderView = window["508-view"];
    new ScreenReaderView().run();

## Config
By default, everything is turned on but the script won't execute unless it finds the GET parameter
`508` in the URL. This allows simple toggling during development.

Option | Default | Description
--- | --- | ---
"display-aria-visible"       | true       | Finds any elements that are hidden via CSS but are missing an aria-hidden attribute. Sets their display to block.
"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.
"hide-visual-elements"       | true       | Sets opacity on image, video, and canvas to 0. Removes background images.
"display-image-alts"         | true       | Adds a green element above images with their alt tag value.
"display-missing-image-alts" | true       | Adds a red element above image missing alt tags.
"display-sr-only"            | true       | Renders .sr-only text as a blue elements.
"use-helper-styles"          | true       | Overrides background colors to light grey, text to black, makes buttons yellow, adds a pink focus state.
"enable-via-url"             | true       | Toggles whether 508 view should be rendered via a GET parameter or should be always rendered.
"url-parameter"              | "508"      | Sets the URL parameter to enable 508 view. Ignored if `enable-via-url` is false.
"body-class"                 | "test-508" | Sets the CSS class that gets added to the body to let you write specific styles for 508 mode.

## Warning
This tool is just meant to help out during the development process. It is not tested across many 
browsers and shouldn't be used in production for any reason.

---
_Source: https://npm.io/package/508-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._