web功能测试工具_Web辅助功能：工具和注意事项

web功能测试工具

Web accessibility is the process of making the features of your website accessible to people of all abilities. It’s about giving everyone equal access and opportunities, thereby allowing as many as possible to access your features without hindrance. With the potential legal obligations to comply with the accessibility standards set by the W3C, web developers are taking this issue seriously.

网站可访问性是使各种能力的人都可以访问网站功能的过程。这是为每个人提供平等的访问和机会，从而尽可能多地无障碍地访问您的功能。遵守W3C设置的可访问性标准的潜在法律义务，Web开发人员正在认真考虑此问题。

There are a number of evaluation tools available online that test the accessibility of your website. These tools automate the process of finding potential errors. However, the tools are generally a guide and you should always manually check the results whenever possible.

在线上有许多评估工具可以测试您网站的可访问性。这些工具使发现潜在错误的过程自动化。但是，这些工具通常是指南，您应该始终尽可能手动检查结果。

In this roundup of some of the evaluation tools that are available to check web accessibility, we will discuss a few tools and the intended scenarios where they might be useful. Before we proceed, you could check the complete list of tools maintained by W3C.

在本摘要中，一些评估工具可用来检查Web的可访问性，我们将讨论一些工具以及可能有用的预期方案。在继续之前，您可以检查W3C维护的工具的完整列表。

常见错误 (Common Errors)

Before we go into the evaluation tools, let’s discuss potential accessibility problems that occur on a lot of web sites. Knowledge of these mistakes will put you in a better position to judge the results of the tools listed below.

在使用评估工具之前，让我们讨论许多网站上发生的潜在可访问性问题。了解这些错误将使您处于更好的位置来判断以下工具的结果。

图片的替代文字 (Alt text for Images)

All images must have alternate text, which is placed in the alt attribute of the img tag. This is read out by screen readers to blind users when using assistive technology.

所有图像都必须具有替代文本，该替代文本放置在img标签的alt属性中。使用辅助技术时，屏幕阅读器会将这些信息读出给盲人。

正确HTML标记 (Proper HTML markup)

As CSS has become quite popular, there is a tendency to achieve certain styles using CSS rather than custom HTML tags (like the avoiding use of h1 to h6 and using CSS classes for their styling altogether). A web developer must always try to use the built in tags appropriately, as it is easy for assistive technologies to interpret the content of your web pages.

随着CSS变得非常流行，有一种趋势是使用CSS而不是自定义HTML标签来实现某些样式(例如，避免使用h1到h6并完全使用CSS类作为样式)。 Web开发人员必须始终尝试适当地使用内置标签，因为辅助技术很容易解释您网页的内容。

图像代替文字 (Images in lieu of text)

This is less of a problem nowadays, but developers will sometimes use images in place of text. Although this should be avoided, proper alt text must be provided if there is no other alternative.

如今，这已不再是一个问题，但是开发人员有时会使用图像代替文本。尽管应该避免这种情况，但是如果没有其他选择，则必须提供适当的alt文本。

跳过链接 (Skip Links)

For users who use only the keyboard for navigation, it may become difficult for them to tab through a full menu before going to the main content. Therefore, links should be provided to jump to the main content or navigation at the top of the page (which are not visible otherwise).

对于仅使用键盘进行导航的用户来说，在进入主要内容之前，他们可能难以通过完整菜单进行制表。因此，应提供链接以跳至页面顶部的主要内容或导航(否则将不可见)。

指定语言 (Specify a language)

Although this might sound trivial, specifying a language enables a screen reader to read out the text with correct pronunciation. You can specify a language with the lang attribute on the <html> element.

尽管这听起来有些琐碎，但指定语言可使屏幕阅读器以正确的发音读出文本。您可以在<html>元素上使用lang属性指定一种语言。

符合ARIA： (ARIA Compliance:)

Lastly, you must make sure that your markup is ARIA compliant. It defines a set of attributes that can be associated with elements to help assistive technologies interpret markup the right way. These attributes tell assistive technologies like screen readers the actual purpose of using those tags. For instance, you could tell a screen reader that an element is a part of the menu by assigning a role=menu to the ul or div for your menu. For further reading on its use, you can have a look at the set of ARIA guidelines by W3C.

最后，您必须确保您的标记符合ARIA。它定义了一组可以与元素相关联的属性，以帮助辅助技术以正确的方式解释标记。这些属性告诉诸如屏幕阅读器之类的辅助技术使用这些标签的实际目的。例如，您可以通过role=menu的ul或div分配role=menu来告诉屏幕阅读器某个元素是菜单的一部分。为了进一步了解其用法，您可以查看W3C 制定的ARIA准则集。

手动检查和屏幕阅读器 (Manual Checks and Screen Readers)

The simplest checks that you can perform are the manual checks without a screen reader. To start, you can try to navigate through your webpage by tabbing through the page. During the process, if certain elements are skipped that shouldn’t be, you should correct them either by using proper markup or adding ARIA roles or the tabindex attribute.

您可以执行的最简单的检查是没有屏幕阅读器的手动检查。首先，您可以通过在页面上浏览来尝试浏览网页。在此过程中，如果跳过了不应该跳过的某些元素，则应通过使用适当的标记或添加ARIA角色或tabindex属性来更正它们。

In addition to that, you could install a free screen reader (like NVDA). Covering your screen and trying to navigate through the page using only your keyboard and the screen reader’s output will give you an idea of how difficult it is for a user with a visual impairment.

除此之外，您还可以安装免费的屏幕阅读器(例如NVDA )。覆盖屏幕并尝试仅使用键盘和屏幕阅读器的输出浏览页面，将使您了解视觉障碍用户的困难程度。

Alternately, you can install FANGS, the Firefox screen reader emulator. This add-on creates a textual representation of a web page, reading it out in the same manner as other screen readers.

或者，您可以安装Firefox屏幕阅读器模拟器FANGS 。此附加组件创建网页的文本表示形式，以与其他屏幕阅读器相同的方式读出网页。

Web辅助功能评估工具(WAVE) (Web Accessibility Evaluation Tool (WAVE))

WAVE by WebAIM is one of the more well-known tools. Using this, you enter the URL you want to evaluate and it will give you a visual overlay on the web page with any errors displayed in the sidebar.

WebAIM的WAVE是较为知名的工具之一。使用此方法，您输入要评估的URL，它将在网页上显示一个可视的覆盖层，并在边栏中显示任何错误。

The overlays are color-coded so you can recognize errors (red), alerts (yellow), and more. It also has options to view the page without styles and includes a contrast checker.

叠加层采用颜色编码，因此您可以识别错误(红色)，警报(黄色)等。它还具有查看样式的选项，并且包括对比度检查器。

IDI Web辅助功能检查器 (IDI Web Accessibility Checker)

Developed by the University of Toronto, the IDI Web Accessibility Checker provides basic checks that I mentioned above under “Common Errors”. Similar to an HTML validator, you can provide a URL, upload an HTML file, or paste your markup directly. The common errors that are reported include missing alt text, inputs without labels, and color contrast errors. You can enable the checks for validity of HTML and CSS in the settings too!

IDI Web Accessibility Checker由多伦多大学开发，提供了上面在“常见错误”中提到的基本检查。与HTML验证器类似，您可以提供URL，上传HTML文件或直接粘贴标记。报告的常见错误包括缺少替代文本，没有标签的输入以及颜色对比度错误。您也可以在设置中启用HTML和CSS有效性检查！

检查我的颜色 (Check My Colours)

It is important to note that accessibiity testing targets not just the blind, but people with other visual disabilities — like color blindness and low visibility. This means that brightness and contrast are important considerations when designing a web page. A contrast ratio of 4.5:1 is desirable for textual content and 3:1 for headings (or large text).

重要的是要注意，可及性测试不仅针对盲人，而且针对患有其他视觉障碍的人，例如色盲和低能见度。这意味着在设计网页时，亮度和对比度是重要的考虑因素。文本内容的对比度为4.5：1，标题(或大文本)的对比度为3：1。

Check My Colors helps you by analysing each element on your page, calculating their contrast ratio. It lets you know which elements fail the contrast test and generates a full report for review.

“检查我的色彩”可以帮助您分析页面上的每个元素，并计算它们的对比度。它可以让您知道哪些元素未通过对比测试并生成完整的报告以供审核。

光敏性癫痫分析工具(PEAT) (Photosensitive Epileptic Analysis Tool (PEAT))

Certain users with epilepsy are prone to attacks if the flicker rate of a web page is high. PEAT is WIndows desktop software that checks web pages for such vulnerabilities. PEAT captures your screen as you use it and performs certain tests on the captured data to generate a report on any risks.

如果网页的闪烁率很高，则某些癫痫病患者很容易受到攻击。 PEAT是Windows桌面软件，可以检查网页中是否存在此类漏洞。 PEAT会在您使用屏幕时捕获您的屏幕，并对捕获的数据执行某些测试以生成有关任何风险的报告。

可读性指数计算器 (Readability Index Calculator)

Going beyond just the technical aspects of web accessibility, the Readability Index Calculator analyses the readability of your content by counting syllables, words and sentences. It then performs standard tests like the Flesch reading ease test on the collected data to analyse the its readability.

除了网络可访问性的技术方面之外，可读性指数计算器还通过计算音节，单词和句子来分析内容的可读性。然后，它对收集的数据执行标准测试，例如Flesch读取易读性测试，以分析其可读性。

结论 (Conclusion)

Although we have covered just a few of the web accessibiliy evaluation tools available, there is a far higher number to be explored. For further reading, you could check the complete list of such tools maintained by W3C. If you’ve tried any other tools, feel free to let us know in the comments.

尽管我们仅介绍了少数几种可用的Web可用性评估工具，但仍有很多需要探索的工具。为了进一步阅读，您可以查看W3C维护的此类工具的完整列表。如果您尝试过其他工具，请随时在评论中告知我们。

翻译自: https://www.sitepoint.com/web-accessibility-tools-considerations/

web功能测试工具