规则网络
by Tiago Romero Garcia
蒂亚戈·罗梅罗·加西亚(Tiago Romero Garcia)
实用的网络可访问性规则 (Pragmatic rules of web accessibility that will stick to your mind)
I first started to work with web accessibility back in 2015, at an American retail giant. It had just gotten a hefty lawsuit, as its website failed to comply with the Americans with Disabilities Act (ADA). After that happened, my team and I worked extensively on the ADA compliance, when I was introduced to many web accessibility principles.
我最早是从2015年开始在一家美国零售巨头从事网络可访问性的工作。 由于它的网站未遵守《美国残疾人法案》(ADA)，因此它刚刚遭到了严峻的诉讼。 在那之后，当我被介绍了许多网络可访问性原则时，我和我的团队就ADA的合规性进行了广泛的研究。
However, over the next years, I found myself constantly violating such principles, even though I was regularly working with them. Somehow, I would never remember them properly while I was coding. I wouldn't admit it, but I definitely had not fully internalized these principles.
但是，在接下来的几年中，即使我经常与他们合作，我仍然不断违反这些原则。 不知何故，我在编码时永远不会正确记住它们。 我不承认，但是我绝对没有完全内化这些原则。
Eventually, I decided that the time had come to invest my time into boiling things down into simple, pragmatic rules which are easy to remember. I finally did just that, and they have been working quite well for me ever since.
最终，我决定是时候把我的时间花在把事情简化成容易记住的简单，实用的规则上了。 我终于做到了，从那以后他们一直为我工作得很好。
This article has 2 sections: What is web accessibility? and 3 pragmatic rules of web accessibility. In the first section, I give a refresher on web accessibility and share my experience with it. But if you would rather cut to the chase, then just go straight to the second session: 3 pragmatic rules of web accessibility.
本文分为两个部分： 什么是Web可访问性？ 和3个实用的网站访问规则 。 在第一部分中，我将重新介绍Web可访问性并分享我的经验。 但是，如果您想追赶一下，那就直接进入第二节： 3个实用的Web访问规则 。
什么是网络可访问性？ (What is web accessibility?)
As I mentioned, back in 2015 my company got sued for not complying with the ADA.
正如我提到的，早在2015年，我的公司就因不遵守ADA而受到起诉。
The ADA is a civil rights law that
ADA是一项民权法，
“prohibits discrimination against individuals with disabilities in all areas of public life, including jobs, schools, transportation, and all public and private places that are open to the general public”.
“在公共生活的所有领域，包括工作，学校，交通以及所有向公众开放的公共场所和私人场所，禁止歧视残疾人” 。
This way, the ADA requires that businesses, state and local governments, and nonprofit services providers make accommodations for the disabled public to access the same services as able-bodied patrons. Similarly, federal government agencies are required to comply with a federal law called Section 508.
通过这种方式，ADA要求企业，州和地方政府以及非营利性服务提供商为残疾人提供住宿，以使他们能够获得与身体健康的顾客相同的服务。 同样， 联邦政府机构也必须遵守称为第508节的联邦法律。
In the context of the web, any public website in the USA failing to comply with the ADA or Section 508 is in reality excluding several groups of users with varying degrees of impairments.
就网络而言，实际上，美国任何不符合ADA或508节规定的公共网站都排除了几组具有不同程度损害的用户。
On the other hand, the inclusive practice of making a website's content available to everyone and its functionality able to be operated by anyone is understood as web accessibility, or just a11y.
另一方面，将网站的内容提供给所有人以及所有人都可以使用的功能的包容性实践被理解为Web可访问性 ，或者仅仅是a11y 。
谁可以得到a11y的支持？ (Who can be supported by a11y?)
According to the World Report on Disability, published in 2011 by the World Health Organization (WHO), it is estimated that 15% of the global population lives with some form of disability. Of these, 2 to 4% experience significant difficulties in functioning.
根据世界卫生组织 (WHO)2011年发布的《 世界残疾报告》 ，估计全球人口的15％患有某种形式的残疾。 其中，有2％至4％的人在功能上遇到很大困难。
An excellent article by the great Addy Osmani, Accessible UI Components For The Web, spells out the four major areas of disabilities to be considered in the context of a11y:
出色的Addy Osmani的一篇出色文章《 Web的可访问UI组件》阐明了在a11y上下文中要考虑的四个主要残疾领域：
1. Visual issues: can range from an inability to distinguish colors to no vision at all.
1.视觉问题：范围从无法区分颜色到根本没有视觉。
2. Hearing issues: means a user may have issues hearing sound emitted from a page.
2.听觉问题：表示用户可能听不到页面发出的声音。
3. Mobility issues: can include the inability to operate a mouse, a keyboard, or touch-screen.
3.移动问题：可能包括无法操作鼠标，键盘或触摸屏。
4. Cognitive issues: means a user may require assistive technologies to help them with reading text, so it’s important to ensure text alternatives exist.
4.认知问题：意味着用户可能需要辅助技术来帮助他们阅读文本，因此确保存在替代文本非常重要。
Keep in mind these are very broad ranges of impairments. This means that one doesn't need to have a severe impairment to need a11y support.
请记住，这是非常广泛的减值范围。 这意味着不需要严重的损伤就可以得到支持。
In order to learn more, I recommend taking the Web Accessibility free course on Udacity, by Google. Here is a video from the course that covers these areas of disability:
为了了解更多信息，我建议参加Google在Udacity上开设的Web Accessibility免费课程。 这是本课程的视频，内容涉及这些残疾领域：
好了，那么我们如何提供支持呢？ (Alright, so how can we provide a11y support?)
By the time we got the lawsuit in 2015, there had been an audit which found several a11y issues. Our team went through a day-long accessibility training session, where we learned about the Web Content Accessibility Guidelines (WCAG, currently at version 2.1), which are generally accepted as the standard for a11y compliance.
到2015年我们提起诉讼时，已经进行了一项审计，发现了一些主要问题。 我们的团队进行了为期一天的无障碍培训课程，在其中我们了解了Web内容可访问性指南 (WCAG，当前版本为2.1)，该指南通常被公认为是11A合规性的标准。
The WCAG are maintained by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C). The same group authored the Accessible Rich Internet Applications (WAI-ARIA or simply ARIA, currently at version 1.1), which is a specification on how to increase the a11y of web pages through additions to HTML as roles and ARIA attributes.
WCAG由万维网联盟 (W3C)的Web可访问性倡议 (WAI)维护。 该小组创作了可访问的富互联网应用程序 (WAI-ARIA或简称ARIA，当前版本为1.1)，该规范说明了如何通过添加HTML作为角色和ARIA属性来增加网页的美观性。
These guidelines are categorized into three levels of compliance:
这些准则分为三个级别的合规性：
- A (must support) A(必须支持)
- AA (should support) and AA(应支持)和
- AAA (may support). AAA(可能支持)。
Many of the accessibility laws around the world are based on WCAG levels. For instance, in January 2017, Section 508 adopted conformance with level AA of WCAG 2.0.
全球许多可访问性法律都基于WCAG级别。 例如，2017年1月，第508节采用了WCAG 2.0的AA级标准。
A great summary of the guidelines can be found at WebAIM’s WCGA 2 checklist, where each criteria indicates its corresponding compliance level.
可以在WebAIM的WCGA 2清单中找到准则的重要摘要，其中每个准则都表明了其相应的合规性水平。
学习WCAG和WAI-ARIA有多难？ (How hard is it to learn WCAG and WAI-ARIA?)
I would like to take a moment to share my experience of learning a11y.
我想花一点时间分享我学习a11y的经验。
While our training was quite comprehensive, and given by extremely knowledgeable people, we simply sat there for hours while we reviewed the entire WCAG specification, item by item. Their slide deck was humongous, and we moved swiftly through the slides. I will be honest: It was cumbersome, since the WCAG is definitely not small.
虽然我们的培训非常全面，并且由知识渊博的人提供，但我们只是坐在那里几个小时，一边逐项检查整个WCAG规范。 他们的滑梯甲板是巨大的，我们Swift地滑过了滑梯。 我会说实话：这很麻烦，因为WCAG绝对不小。
Long story short, we were able to write down many action items, and we immediately started working on these fixes. However, this soon became something repetitive, mechanical, a response to stimuli. Stories in, code out. We were drowning in the sea of a11y.
长话短说，我们能够写下许多操作项，我们立即开始着手这些修复程序。 但是，这很快就变成了重复的，机械的，对刺激的React。 讲故事，编出来。 我们淹没在a11y的海里。
Everybody knew how well-versed we became in a11y, so nobody would contest our work. The a11y stories stopped to come in, and we got different priorities. The expectation was that we would carry over what we had learned, which actually happened for quite a while.
每个人都知道我们在11年来变得多么精通，所以没有人会质疑我们的工作。 故事停止了，我们得到了不同的优先次序。 期望我们将继续学到的东西，实际上这发生了很长时间。
As time passed, some people left, some people joined, and the new management came in. The market moves fast. We changed our focus and our team spirit. Needless to say, we became so involved with the new things that our a11y compliance slipped far into the background.
随着时间的流逝，一些人离开了，一些人加入了，新的管理人员加入了。市场发展Swift。 我们改变了焦点和团队精神。 不用说，我们对新事物的参与如此之深，以至于我们对a11y的合规性远远溜到了后台。
It was so bad, that six months later we had another audit, only to discover we were still sitting in a big pile of a11y violations! We soon realized that while we fixed the original audited issues, most of the new code we wrote was just as bad on a11y. Not only that, we never adopted a11y as part of our development checklist, and the newcomers were never trained on the subject.
真是太糟糕了，六个月后，我们又进行了一次审核，结果发现我们仍然处于一大堆违反法规的行为！ 我们很快意识到，在解决原始审核问题的同时， 我们编写的大多数新代码在a11y上同样糟糕 。 不仅如此，我们从未将a11y用作开发清单的一部分，而新来者也从未接受过有关该主题的培训。
Conclusion: We simply allowed it to happen — a11y was being neglected, and the key ideas were not ingrained in us.
结论 ：我们只是允许它发生-被忽略了，关键的思想并没有根深蒂固。
In other words, we were creating exclusions, which is what happens when we solve problems using our own biases, according to Microsoft Inclusive Design.
换句话说，我们正在创建排除项 ，根据Microsoft Inclusive Design的说法，当我们使用自己的偏见解决问题时会发生这种情况。
遇到排斥 (Experiencing an exclusion)
Sometimes you need to experience things yourself in order to better understand them. That's what happily happened to me.
有时您需要亲自体验事物，以便更好地理解它们。 那就是我高兴的事。
I donate my platelets regularly, since my blood type is A+, so I can help more people this way. Once, my vein got perforated incorrectly and I got a big and painful bruise on my left arm.
由于我的血型为A +，因此我定期捐献血小板，因此我可以通过这种方式帮助更多的人。 有一次，我的静脉穿Kong不正确，左手臂上有一块又大又痛苦的瘀伤。
Typically, regular blood donations last 10 minutes or so, but platelet donations last around 90 minutes. It took us about 20 minutes to notice that I had a blown vein, since my arm was covered with blankets (because blood returns make you feel cold).
通常，定期献血持续10分钟左右，而血小板献血持续90分钟左右。 我们花了大约20分钟的时间发现我的静脉被吹断了，因为我的手臂被毯子覆盖了(因为血液回流会使您感到寒冷)。
By that time, the damage was done, and we had to interrupt the donation. My arm got quite bloated and very sensitive for a few days. So much that I didn't feel like using my left arm at all to work.
到那时，损害已经造成，我们不得不中断捐赠。 几天后我的手臂变得非常肿并且非常敏感。 如此之多，以至于我根本不想用左臂上班。
Now, I was trying to do everything with my right hand. All of a sudden, I noticed it wasn’t efficient to keep alternating between keyboard and mouse, and I would rather do the whole task at hand using just the keyboard or the mouse.
现在，我正尝试用右手做所有事情。 突然之间，我注意到在键盘和鼠标之间保持交替并不是很有效，我宁愿仅使用键盘或鼠标来完成整个任务。
Soon, I found myself preferring to use exclusively the keyboard for everything, and then I noticed how many sites are simply not there on keyboard support. Then it came to me: I was experiencing an exclusion, even though it was just a temporary one.
很快，我发现自己更喜欢只使用键盘来做所有事情，然后我发现有多少站点根本不在键盘支持上。 然后就来了：我正在经历一种排斥，即使那只是暂时的 。
And then, exactly at that moment, I remembered the past me working with a11y and letting these exclusions pass. Oh, man!
然后，恰在那一刻，我想起了过去与a11y一起工作并让这些排除通过的过去。 天啊！
排除级别 (Levels of exclusions)
According to Microsoft's Inclusive 101 Toolkit, there are three levels of exclusions:
根据Microsoft的Inclusive 101 Toolkit ，包含三个排除级别：
Permanent: experienced by those who have a disability such as loss of limb, sight, hearing, or speech.
永久：由肢体残缺，视力，听力或语言障碍等残障人士所经历。
Temporary: experienced by those who have a short-term injury or are going through certain events for a short time, such as looking into a bright light, wearing a cast, or ordering dinner in a foreign country.
临时的：由短期受伤或短时间经历某些事件的人所经历，例如在明亮的灯光下注视，穿石膏或在异国订购晚餐。
Situational: experienced by those whose abilities can dramatically change in specific environments, such as being unable to hear well in a loud crowd, being visually impaired in a car, or new parents doing tasks one-handed.
情境：那些能力在特定环境中会发生巨大变化的人所经历，例如在大声的人群中听不清，在汽车上视障，或者新父母单手做事。
It was extremely mind opening for me to have a temporary exclusion, since I had never been faced before with such a challenge at work.
因为暂时没有面对工作上的挑战，这让我暂时被排除在外是非常开放的想法。
Nevertheless, I am tremendously privileged since mine was just for a couple of days, while millions of people around the world experience permanent exclusions for their entire lives.
不过，我感到非常荣幸，因为我只有几天的时间，而世界各地数以百万计的人一生都遭受永久性的排斥。
编码变化 (Coding for change)
Finally, it came to me: Implementing a11y means contributing to a more inclusive world! Here are a few things we can do as engineers:
最终，我想到：实施a11y意味着为更加包容的世界做出贡献！ 作为工程师，我们可以做一些事情：
- Learning how to write code that supports a11y. 学习如何编写支持a11y的代码。
- Adding a11y compliance as part of your development checklist (just like you would work on unit testing and documentation). 将合规性添加到开发清单中(就像处理单元测试和文档一样)。
- Talking about a11y with your team, to increase the awareness. 与您的团队讨论a11y，以提高知名度。
- Assessing if your team is producing accessible code, and logging a11y issues as defects to be taken up by the team. 评估您的团队是否正在生成可访问的代码，并将所有问题记录为团队要解决的缺陷。
- Questioning business requirements which are not covering a11y and demanding accessible alternatives. 对未涵盖所有业务需求的业务提出质疑，并要求提供可访问的替代方案。
- Sharing your experience, and showing your peers how to adopt a11y in a practical way, which is the very reason why I am writing this article. :) 分享您的经验，并向您的同龄人展示如何以实际方式采用a11y，这正是我撰写本文的原因。 :)
Web访问的3个实用规则 (3 pragmatic rules of web accessibility)
So here am I with my mission to distill a11y into 3 practical rules that will stick to your mind. From these rules, you should be able to derive the rest of the knowledge and find guidance on implementing a11y in your project.
所以我在这里的使命是将所有11条实用规则精炼成您要记住的。 从这些规则中，您应该能够获得其余知识，并找到有关在项目中实施方法的指导。
Disclaimer: These rules don't replace the need to learn a11y. They are also not comprehensive. They simply will provide you a basic yet effective foundation, so you can follow the rest of path on your own.
免责声明：这些规则并不能代替学习知识的需要。 它们也不全面。 它们只是为您提供了一个基本而有效的基础，因此您可以自己遵循其余的道路。
Again, in order to learn a11y I wholeheartedly recommend taking the Web Accessibility free course on Udacity, by Google:
再次，为了学习，我衷心建议您参加Google提供的有关Udacity的Web Accessibility免费课程：
Web Accessibility | UdacityGet hands-on experience making web applications accessible. You'll understand when and why users need accessibility…www.udacity.com
网站可访问性| Udacity 获得使Web应用程序可访问的实践经验。 您将了解何时以及为什么用户需要辅助功能…… www.udacity.com
Now to the 3 pragmatic rules of web accessibility. I hope you can take them with you and apply them every day at work:
现在到了3个实用的Web访问规则。 希望您可以随身携带它们，并每天在工作中使用它们：
1)坚持语义HTML元素或DIY (1) Insist on semantic HTML elements, or DIY)
This one is for me the golden rule of accessibility, hands down.
这对我来说是可访问性的黄金法则 。
Semantic elements are these which convey a certain meaning along with the content they represent, like <button>, <input>;, <a>, <h1> and <p>. They provide some context to the user agent (browser, device or assistive technology like a screen reader), so it will know how to interact with and what to expect of these elements.
语义元素是传达一定含义的元素以及它们表示的内容，例如<butt on >, & lt ;in pu t> ;，＆l t;a >，<h1>和<p>。 它们为用户代理(浏览器，设备或辅助技术，如屏幕阅读器)提供了一些上下文，因此它将知道如何与这些元素进行交互以及对这些元素有何期待。
They are different than neutral elements, such as <div>; and <span>, or presentational elements like <center> and <big>, which do not provide such context to the user agent.
它们不同于中性元素，例如<d iv> ; and ; and <S 锅>，或PR esentational EL ements l IKE＆ lt;ce NTER>和<大>，它不提供这样的上下文向所述用户代理。
Semantic elements are already accessible (and SEO-friendly) for the most part. This means they already cover many a11y aspects out of the box, like:
大多数情况下，语义元素已经可以访问(并且对SEO友好)。 这意味着它们已经涵盖了很多现成的方面，例如：
handling of focus properly through the tab key.
通过Tab键正确处理焦点 。
responding to keyboard events (as Enter, Esc, space, arrow keys).
响应键盘事件 (如Enter，Esc，空格键，箭头键)。
representing semantic information (Name, Role, State and Value) so assistive technology will be able to understand it.
表示语义信息(名称，角色，状态和值)，因此辅助技术将能够理解它。
conforming to color contrast requirements with default styling.
符合颜色对比度要求和默认样式。
However, when not using a semantic element, you are supposed to manually code all of these things in order to make it accessible.
但是，当不使用语义元素时， 应该手动编码所有这些内容以使其可访问 。
Which means you would need to do things like:
这意味着您将需要执行以下操作：
add
tabindex="0"so the component will be part of the natural tab order, and usefocus(),display: noneoraria-hiddento avoid focus traps. Learn about tabindex on Using tabindex.添加
tabindex="0"以便该组件将成为自然制表符顺序的一部分，并使用focus()，display: none或aria-hidden以避免焦点陷阱。 通过使用tabindex了解关于tabindex的信息。attach listeners for expected keyboard events. Check the expectations for your component on WAI-ARIA Design Patterns and Widgets.
为预期的键盘事件附加侦听器。 在WAI-ARIA设计模式和小部件上检查对组件的期望。
use a role to provide some semantics and SEO value. Learn all the possible roles on WAI-ARIA Categorization of Roles.
使用角色提供一些语义和SEO值。 了解有关WAI-ARIA角色分类的所有可能角色 。
provide ARIA attributes to describe the state and value. Find out which ARIA attributes apply each role on WAI-ARIA Definition of Roles.
提供ARIA属性以描述状态和值。 找出哪些ARIA属性将每个角色应用于WAI-ARIA角色定义 。
watch out for the color contrast and the focus indicator, especially if using
outline: 0(which is not recommended).注意颜色对比和聚焦指示 ，尤其是在使用
outline: 0(不推荐)的情况下。
Still on semantic elements, here are a few more things to keep in mind:
仍然在语义元素上，还需要记住以下几点：
use sectioning tags to structure your page into sections, otherwise you need to provide landmark roles.
使用分区标记将页面分为多个部分，否则您需要提供地标性角色。
use heading tags to organize your text content, so you can express the relationship between sections and their order of importance. For the record: There must be only one
<h1> on each page.使用标题标签来组织您的文本内容，因此您可以表达各节之间的关系及其重要性顺序。 作为记录：每页上只能有一个
<h1>。use
<label for="..."> with form fields as <input>, <select> and <textarea>.使用形式为
ds as &<label for="..”>ds as <input>，＆lt;select> 和<textarea>。use the right tool for the job, for instance if it’s a link, use
<a href=""> andnever <span onclick="...">, and if it’s abutton,use <button> and never <a href="#" οnclick="...">.使用适合该工作的工具，例如，如果是链接，则使用
<a href=href=" "">而never <span onclick =“ ...”>，如果是button,使用<button> and never <a href="#" οnclick="...">。
Well, semantic elements seem way more convenient, don’t you think?
好吧，语义元素似乎更方便，您不觉得吗？
2)提供图像，颜色，声音和运动的替代方法 (2) Provide alternatives for images, color, sound and movement)
Assistive technology deals best with text. When using anything else, always provide a text alternative, for instance:
辅助技术最能处理文字。 使用其他任何内容时，请始终提供替代文本，例如：
For images, provide a text alternative. You can use
alt="description"for informative images (those which have a meaning, like a picture or a standalone icon) andalt=""for decorative images (those which don’t have a meaning, like an icon inside a button and right next to its text). This is especially important on image links.对于图像，请提供替代文本 。 您可以将
alt="description"用于内容丰富的图像 (具有含义的图像，例如图片或独立图标)，将alt=""用于装饰性图像 (具有含义的图像，例如按钮内的图标)并在其文字旁边)。 这在图像链接上尤其重要。Still on images, when relying on them for user interaction, provide an audio alternative, or explore how to stop relying on them. You can check Google reCaptcha, for instance.
仍然在图像上，当依靠它们进行用户交互时，请提供音频替代方案 ，或者探索如何停止依赖它们。 例如，您可以检查Google reCaptcha 。
For colors, when indicating a validation state, a designated area or simply distinguishing elements, add a secondary indicator such as informative text, an icon or even a tooltip.
对于颜色，当指示验证状态，指定区域或简单区分元素时，添加辅助指示符，例如信息性文本，图标甚至工具提示。
Still on colors, find out the contrast ratio of your text and check if it meets the standard you are following. For instance, the level AA of the WCAG requires a minimum of 4.5:1 for regular text and 3:1 for large text.
仍然在颜色上，找出文本的对比度 ，然后检查其是否符合您所遵循的标准。 例如，WCAG的AA级别要求普通文本至少4.5：1，大文本至少3：1。
For audio tracks and video, provide text captions or a transcript when they are available. For action sounds, provide a visual alternative.
对于音频曲目和视频，提供文本标题或成绩单可用时。 对于动作声音，请提供视觉替代 。
For user movement, any time we expect the user to perform specific gesture movements, make them optional or provide interaction alternatives through the keyboard.
对于用户的移动，我们希望用户在任何时候执行特定的手势移动，使其成为可选动作或通过键盘提供交互方式 。
For automatic movement, avoid flashes, blinking, moving content, and new windows. When it’s unavoidable, add controls to adjust the time, pause or hide this content. Also, use aria-live so the screen reader can notify the user whenever an interruption happen.
对于自动移动，请避免闪烁，闪烁，移动内容和新窗口。 如果不可避免，请添加控件以调整时间，暂停或隐藏此内容。 另外，使用aria-live，以便屏幕阅读器可以在发生中断时通知用户。
3)养成在日常工作中使用各种工具的习惯 (3) Make it a habit to use a11y tools into your work routine)
This is perhaps the most efficient rule, so when you let something pass from the two rules above, this one should catch it.
这可能是最有效的规则，因此，当您让上述两个规则中的某些规则通过时，这个规则应该会被抓住。
I am listing here several a11y tools. Give them a try, run them on your website, see what you learn from them and try to stick around with them.
我在这里列出了几种工具。 尝试一下，在他们的网站上运行它们，看看从中学习到的知识，并尝试坚持下去。
There are basically 3 types of tools I recommend that you adopt:
我建议您基本上采用3种工具：
a) For your development checklist
a)为您的开发清单
aXe chrome plugin: An easy-to-use a11y checker which finds issues and provides suggested fixes.
ax chrome插件 ：一个易于使用的a11y检查器，可以发现问题并提供建议的修复程序。
Wave: An a11y evaluation tool which provides visual feedback about the accessibility of your web content by injecting icons and indicators into your page.
Wave ：一个a11y评估工具，它通过在页面中注入图标和指示符来提供有关Web内容可访问性的视觉反馈。
DevTools (Accessibility pane, Contrast ratio and Audits): These 3 DevTools features allow to navigate the accessibility tree and see a11y properties for each element, to verify the color contrast ratio for text elements, and to perform full-page audits on accessibility (and other metrics).
DevTools(可访问性窗格，对比度和审核) ：这三个DevTools功能允许浏览可访问性树并查看每个元素的所有属性，以验证文本元素的颜色对比度，并对可访问性进行全页审核(和其他指标)。
NoCoffee chrome plugin: Simulates the problems faced by people with slight to extreme vision problems.
NoCoffee chrome插件 ：模拟有轻微到极端视力问题的人所面临的问题。
High Contrast chrome plugin: Lets you browse the web with your choice of several high-contrast color filters designed to make it easier to read text, so you can check how your website fares for users that need high-contrast support.
高对比度镀Chrome插件 ：让您可以选择几种高对比度滤色镜来浏览网页，这些滤镜旨在使文本阅读更加轻松，因此您可以检查网站对需要高对比度支持的用户的收费。
b) For manually testing with real screen readers
b)使用真实屏幕阅读器进行手动测试
c) For automated auditing
c)用于自动审核
Google Lighthouse: Automated auditor, similar to DevTools Audits.
Google Lighthouse ：自动审核程序，类似于DevTools审核程序。
aXe: Automated checker for the same a11y rules found on aXe chrome plugin.
ax ：自动检查ax chrome插件上相同的a11y规则。
Pa11y Dashboard: A web interface which helps you monitor the accessibility of your websites.
Pa11y Dashboard ：Web界面，可帮助您监视网站的可访问性。
学到更多 (Learn more)
规则网络
1688
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
