量角器 - 可访问性测试结果 - 分析结果

Question

我正在使用辅助功能插件 + 量角器。

如下所示，我在运行一些冒烟测试后看到了一些可访问性错误，我不确定是否真的在 E2E 测试期间在每个网页中执行了可访问性审核。

由于我是新手，请告知在 E2E 测试期间导航到新网页后是否有任何方法可以触发可访问性审核。

e2e-tests $ grunt protractor:websiteSmokeTests --website="https://testsite/"

运行“protractor:websiteSmokeTests”（量角器）任务使用 硒服务器http://localhost:4444/wd/hub [启动器] 运行 1 WebDriver 的实例

网站主页功能
主页 - 检查无效搜索返回 0 结果 - 通过
检查网站管理员工具 - BingSiteAuth 和 Google - 通过
站长工具 - 检查 Robots.txt - 通过

网站页面反馈功能
检查文章的页面反馈 - 拒绝 - 通过

在 28.875 秒内完成 8 次测试，101 次断言，0 次失败

插件：0（拆解） Chrome A11Y - 此元素不支持 ARIA 角色、状态和属性 Chrome A11Y - 如果所有权隐含在 DOM 中，则不应使用 aria-owns Chrome A11Y - 具有 ARIA 角色的元素必须在正确的范围内 Chrome A11Y - 音频元素应该有控件 Chrome A11Y - 此元素的 ARIA 属性无效 Chrome A11Y - ARIA 状态和属性值必须有效

    2 elements failed:
    <div id="cookie-notice" class="notification" aria-describedby="cookieinfo">
    <div class="cont ... " id="close-cookie-notification" class="close-notification">Close</button>
    </div>
</div>
    <div id="decommissioned-site-notice" class="notification strong hidden" aria-describedby="decommissi ... -site-notification"

class="close-notification">关闭

    https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_04
Chrome A11Y - Elements with ARIA roles must use a valid, non-abstract ARIA role
Chrome A11Y - Controls and media elements should have labels
Chrome A11Y - An element's ID must be unique in the DOM
Chrome A11Y - (WARNING) These elements are focusable but either invisible or obscured by another element (10 elements failed)
Chrome A11Y - The web page should have the content's human language indicated in the markup
Chrome A11Y - Images should have an alt attribute
Chrome A11Y - (WARNING) The purpose of each link should be clear from the link text (3 elements failed)
Chrome A11Y - (WARNING) Text elements should have a reasonable contrast ratio (4 elements failed)
Chrome A11Y - role=main should only appear on significant elements
Chrome A11Y - Meaningful images should not be used in element backgrounds
Chrome A11Y - An element's ID must not be present in more that one aria-owns attribute at any time
Chrome A11Y - ARIA attributes which refer to other elements by ID should refer to elements which exist in the DOM

    2 elements failed:
    <div id="cookie-notice" class="notification" aria-describedby="cookieinfo">
    <div class="cont ... " id="close-cookie-notification" class="close-notification">Close</button>
    </div>
</div>
    <div id="decommissioned-site-notice" class="notification strong hidden" aria-describedby="decommissi ... -site-notification"

class="close-notification">关闭

    https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_02

Chrome A11Y - This element has an unsupported ARIA attribute

    2 elements failed:
    <div id="cookie-notice" class="notification" aria-describedby="cookieinfo">
    <div class="cont ... " id="close-cookie-notification" class="close-notification">Close</button>
    </div>
</div>
    <div id="decommissioned-site-notice" class="notification strong hidden" aria-describedby="decommissi ... -site-notification"

class="close-notification">关闭

    https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_10
Chrome A11Y - Video elements should use <track> elements to provide captions [launcher] 0 instance(s) of WebDriver still running

[启动器] chrome #1 失败 4 次测试 [启动器] 总体：4 次失败 spec(s) [launcher] 进程退出，错误代码为 1

测试失败，但保持 grunt 进程处于活动状态。

完成，没有错误。

Answer 1

激活后，辅助功能插件会与您现有的量角器测试一起运行，并会审核您的测试命中的每个完整页面。即使您的测试登陆一个页面只是为了导航到另一个页面并且在此过程中没有执行任何功能。

旁注：我无法获取ngHint plugin to run on my tests。任何帮助将不胜感激。

Answer 2

触发审核的方法是编写辅助功能插件可以搭载的测试...它不会抓取您的网站来运行审核。

Answer 3

我遇到了同样的问题，所以写了一个 protractor-accessibility-plugin 的衍生物：protractor-axe-report-plugin。它仅使用 ax 引擎生成报告，但可以在您的测试中针对多个页面运行。

Answer 4

如果您愿意自己动手​​，而不是使用您遇到困难的辅助功能插件，webaccessibility.com 有一个免费的“量角器连续体”实现示例，这可能是一个不错的起点；您可以使用它将自动化的可访问性测试集成到现有的量角器测试中，或者轻松编写新的测试。 Here's some more information如果你有兴趣。