508-view 中文文档教程

Question

508 View

508 视图是一个 NPM 包，您可以在开发过程中包含它以帮助评估和改进 您网站的可访问性。 它试图创建一个屏幕阅读器的可视化表示 会看到。 要查看它是如何工作的，请查看演示：

查看演示

Usage

将其添加为 yarn 的开发依赖项：

yarn add -D 508-view

或者，使用 NPM：

npm install --save-dev 508-view

安装后，您需要将其包含在您的站点中。 如果你使用的是 webpack，你可以这样做 类似的东西：

import {ScreenReaderView} from '508-view';
new ScreenReaderView().run();

如果你的代码没有被转译，你可以从 node_modules 文件夹中包含它，比如：

<script src="/node_modules/508-view/lib/508-view.js"></script>

一旦它被包含（你可能需要调整路径以确保你没有 404），你可以运行它 像这样：

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

Config

默认情况下，一切都已打开，但除非找到 GET 参数，否则脚本不会执行 508 在 URL 中。 这允许在开发过程中进行简单的切换。

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

这个工具只是为了在开发过程中提供帮助。 它没有经过许多测试 浏览器，不应出于任何原因在生产中使用。