Jaws18 在 IE11 中读取 Angular 数据绑定

Question

我的任务是尝试使我们的一些网页符合 508 标准。在使用 Jaws18 运行浏览我们的页面时，我注意到使用 ng-if 或 ng-show 添加的部分正在作为数据绑定被读回。在 Chrome 中浏览时不会发生这种情况，仅在 IE11 中。（不幸的是，我需要用它来测试。）

当屏幕 reader 到达添加了 ng 的第二部分时 - 如果 {{rejection.code}} 读回为 "left brace left brace rejection code right brace right brace"。

有谁知道如何纠正这种行为？

<form class="form-horizontal" id="SearchForm" name="SearchForm" novalidate> 
<section id="test">
    <div class="form-group">
        <label for="pcEmail" class="col-sm-3 control-label">
            <span class="glyphicon-asterisk"></span> E-mail
        </label>
        <div class="col-sm-6">
            <input type="email" ng-pattern="/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/" class="form-control"
                   id="pcEmail" name="pcEmail"
                   placeholder="E-mail"
                   ng-model="vm.searchModel.email"
                   ng-required="true"
                   ng-maxlength="50" />
        </div>
    </div>
    <div class="row text-center" ng-if="vm.submitBtnVisible">
        <div class="col-md-6" ng-if="vm.searchModel.recertificationYearId > 0">
            <button class=" btn btn-lg btn-primary" type="submit" ng-disabled="cediRecertSearchForm.$invalid" ng-click="vm.checkStatus(cediRecertSearchForm)">
                Check Status
            </button>
        </div>
    </div>
</section>
<section ng-if="vm.searchResult.rejectionReasons && vm.searchResult.rejectionReasons.length >0" aria-live="polite" tabindex="0">
    <div data-cedi-widget-header subtitle="Rejection Reasons History"></div>
        <table class="table table-bordered table-condensed table-responsive">
            <thead>
                <tr>
                    <th>Rejection Code</th>
                    <th>Rejection Desc</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="rejectionCode in vm.searchResult.rejectionReasons">
                    <td>{{rejectionCode.code}}</td>
                    <td>{{rejectionCode.description}}</td>
                </tr>
            </tbody>
        </table>
</section>

Answer 1

请使用 ng-bind 或 ng-bind-html 而不是 {{}}。示例：

<tr ng-repeat="rejectionCode in vm.searchResult.rejectionReasons">
   <td ng-bind="rejectionCode.code"></td>
   <td ng-bind="rejectionCode.description"></td>
</tr>

Jaws18 在 IE11 中读取 Angular 数据绑定

Jaws18 reading Angular data bindings in IE11

angularjs

jaws-screen-reader