即使 parent div 没有关联点击处理程序，JAWS 仍将标题读取为可点击

Question

我正在为一个 Angular 项目进行可访问性测试。我有一些模态代码如下

<div class="modal fade" bsModal #cancelConfirmModal="bs-modal" tabindex="-1" role="dialog"
    attr.aria-label="Cancel Modal" aria-hidden="true">
    <div class="md-dialog modal-md">
        <!-- Modal content-->
        <div class="md-content">
            <div class="md-header">
                <div class="md-title pull-left">
                    <h4 tabindex=0 class="headerBottomMarginNone"> Cancel</h4>
                </div>
                <button type="button" class="close-popup" (click)="hideCancelModal()">
                    <img src="{{ pathImg }}/close.png" alt="Close Icon"
                        (mouseover)="changeCloseIconOnHover('close-popup3')"
                        (mouseout)="changeCloseIcon('close-popup3')" id="close-popup3">
                    <label class="sr-only">Close</label>
                </button>
            </div>
            <div tabindex=0 class="md-body">
                {{ cancelMessageBody }}
            </div>
            <div class="md-footer">
                <button type="reset pull-right" class="ts-btn ts-btn-primary no-btm-margin" (click)="revert()">Yes</button>
                <button type="pull-right" (click)="hideCancelModal()"
                    class="ts-btn ts-btn-tertiary margin-left10 no-btm-margin">Cancel</button>
            </div>
        </div>
    </div>
</div>

当我切换到 <h4 tabindex=0 class="headerBottomMarginNone"> Cancel</h4> 时，它显示 取消标题级别 4 可点击。 parent 甚至 parent 上没有点击事件。根据 QA 的偏好，h4 选项卡可访问。如何阻止 JAWS 宣布可点击？

Answer 1

简答

删除 tabindex.

长答案

标题不应包含 tabindex（可能 tabindex="-1" 除外，如下所述）。

任何带有 tabindex 的东西都被认为是交互式的，并且您应该为焦点、点击、键盘键等提供相关的处理程序。

您的 QA 在此方面不正确，这使得软件更难使用。

唯一适合在标题上使用 tabindex 的情况是您需要以编程方式聚焦它（例如，在 AJAX 应用程序中加载新页面时一个很好的做法是将标题级别 1 集中在页面上，让屏幕 reader 用户知道新页面已经加载。）此时唯一合适的 tabindex 是 tabindex="-1" 所以它只能以编程方式聚焦，而不是通过 tab 键。

您的 QA 可能认为屏幕 reader 用户需要能够聚焦标题，但事实并非如此！他们使用屏幕上的快捷键 reader 访问页面上的标题。

也将其从 <div tabindex=0 class="md-body"> 中删除，因为它也不是交互式的。

最后，您可能不需要 tabindex="-1" 模态本身，因为当您打开模态时，您应该关注第一个交互元素或关闭按钮（在您的情况下似乎是取消无论如何按钮。），但是您的软件中可能有我不知道的功能，所以这只是一个需要考虑的问题。

即使 parent div 没有关联点击处理程序，JAWS 仍将标题读取为可点击

JAWS reads Headings as clickable even though parent div has not click handler associated

html

testing

accessibility

jaws-screen-reader

angular

简答

长答案