web前端辅助_Web和Windows的辅助功能见解使辅助功能更加容易

web前端辅助

I recently stumbled upon https://accessibilityinsights.io. There's both a Chrome/Edge extension and a Windows app, both designed to make it easier to find and fix accessibility issues in your websites and apps.

我最近偶然发现https://accessibilityinsights.io 。 既有Chrome / Edge扩展程序，又有Windows应用程序，旨在让您更轻松地查找和修复网站和应用程序中的可访问性问题。

The GitHub for the Accessibility Insights extension for the web is at https://github.com/Microsoft/accessibility-insights-web and they have three trains you can get on:

Web的Accessibility Insights扩展的GitHub位于https://github.com/Microsoft/accessibility-insights-web ，您可以通过以下三列火车获得：

• Canary (released continuously)

  金丝雀(连续发行)

• Insider (on feature completion)

  内部人员(功能完成时)

• Production (after validation in Insider)

  生产(在Insider中验证后)

It builds on top of the Deque Axe core engine with a really fresh UI. The "FastPass" found these issues with my podcast site in seconds - which kind of makes me feel bad, but at least I know what's wrong!

它建立在Deque Axe核心引擎之上，具有一个非常新鲜的UI。 “ FastPass”在几秒钟内就在我的播客网站上发现了这些问题-这让我感到难过，但至少我知道出了什么问题！

However, the most impressive visualization in my opinion was the Tab Stop test! See below how it draws clear numbered line segments as you Tab from element. This is a brilliant way to understand exactly how someone without a mouse would move through your site.

但是，我认为最令人印象深刻的可视化是Tab Stop测试！ 参见下文，当您从元素制表时，它如何绘制清晰的编号线段。 这是一种很好的方法，可以准确地了解没有鼠标的人如何在您的网站中移动。

I can easily see what elements are interactive and what's totally inaccessible with a keynote! I can also see if the the tab order is inconsistent with the logical order that's communicated visually.

通过主题演讲，我可以轻松看到哪些元素是交互式的，而哪些是完全无法访问的！ 我还可以查看选项卡顺序是否与视觉传达的逻辑顺序不一致。

After the FastPass and Tab Visualizations, there's an extensive guided assessment that walks you through 22 deeper accessibility areas, each with several sub issues you might run into. As you move through each area, most have Visual Helpers to help you find elements that may have issues.

在“快速通过”和“选项卡可视化”之后，将进行广泛的指导评估，引导您进入22个更深的可访问性区域，每个区域都会涉及您可能遇到的几个子问题。 当您遍历每个区域时，大多数都使用Visual Helper来帮助您查找可能存在问题的元素。

After you're done you and export your results as a self-contained HTML file you can check in and then compare with future test results.

完成后，将结果导出为独立HTML文件，您可以签入，然后与以后的测试结果进行比较。

There is also an Accessibility Insights for Windows if I wanted to check, for example, the accessibility of the now open-source Windows Calculator https://github.com/Microsoft/calculator.

例如，如果我想检查Windows的可访问性见解，例如现在开放源代码的Windows计算器https://github.com/Microsoft/calculator的可访问性。

It also supports Tab Stop visualization and is a lot like Spy++ - if you remember that classic developer app. There were no Accessibility issues with Calculator - which makes sense since it ships with Windows and a lot of people worked to make it Accessible.

它还支持Tab Stop可视化，并且非常类似于Spy ++-如果您还记得那个经典的开发人员应用程序。 计算器没有任何可访问性问题-这是有道理的，因为Windows附带了它，并且很多人都在努力使其可访问。

Instead I tried to test Notepad2. Here you can see it found two elements that can have keybook focus but have no names. Even cooler, you can click "New Bug" and it will create a new accessibility bug for you in Azure DevOps.

相反，我尝试测试Notepad2。 在这里您可以看到它找到了两个可以重点关注键盘但没有名称的元素。 更酷的是，您可以单击“新错误”，它将在Azure DevOps中为您创建一个新的辅助功能错误。

The Windows app is also open source and up at https://github.com/Microsoft/accessibility-insights-windows for you to explore and file issues! There's also excellent developer docs to get you up to speed on the organization of the codebase and how each class and project works.

Windows应用程序也是开源的，可在https://github.com/Microsoft/accessibility-insights-windows上打开，以供您浏览和归档问题！ 还有出色的开发人员文档，可帮助您快速掌握代码库的组织以及每个类和项目的工作方式。

You can download both of these free open source Accessibility Tools at https://accessibilityinsights.io and start testing your websites and apps. I have some work to do!

您可以从https://accessibilityinsights.io下载这两个免费的开放源代码访问工具，然后开始测试您的网站和应用程序。 我有工作要做！

翻译自: https://www.hanselman.com/blog/accessibility-insights-for-the-web-and-windows-makes-accessibility-even-easier

web前端辅助