Question

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

当屏幕阅读器到达添加了ng-ng的第二部分时，如果{{rejection.code}}被读回“左括号左括号拒绝代码右支撑右括号”。

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

<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数据绑定

1 个答案: