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.

Usage no npm install needed!

<script type="module">
  import 08View from 'https://cdn.skypack.dev/508-view';
</script>

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

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.