Question

我需要让盲人用户可以访问单选按钮。目前，屏幕阅读器正在正确地拾取单选按钮的所有标签和值。但它没有读取单选按钮的位置。

例如:(这个是正确读取位置但仅在chrome上读取位置的工作示例）

<fieldset>
<legend>Choose a shipping method:</legend>
<div role="radiogroup">
    <input id="overnight" type="radio" role="radio" name="shipping" value="overnight">
    <label for="overnight">Overnight</label>
    <input id="twoday" type="radio" name="shipping" role="radio" value="twoday">
    <label for="twoday">Two day</label>
    <input id="ground" type="radio" name="shipping" role="radio" value="ground">
    <label for="ground">Ground</label>
    <input id="sky" type="radio" name="shipping" role="radio" value="sky">
    <label for="sky">sky</label>
    <input id="never" type="radio" name="shipping" role="radio" value="never">
    <label for="never">Never hahahaha</label>
</div>
</fieldset>

如果＆＃34;两天＆＃34;在chrome上选择。屏幕阅读器将其读作＆＃34;选择送货方式：选中两天单选按钮。 2 of 5＆＃34;。

但是在IE屏幕阅读器上会将其读作＆＃34;选中列表框两天单选按钮＆＃34;。

现在真正的问题在这里。我有一个指令，生成单选按钮的标签和值。它使用ng-repeat指令加载到DOM中。并且每次迭代都会在输入元素之间插入div。因为大白鲨没有找到这个位置。

以下是HTML部分。

<fieldset>
                <legend class="sr-only">Source Types</legend>
                    <div class="form-inline" role="radiogroup"                      >
                    <!--div for source identifiers radios-->
                       <div ng-repeat="sourceType in sourceTypes" class="form-group" role="radio">
                                <input type="radio"
                                       name="sourceType"
                                       id='{{sourceType.typeId}}'
                                       ng-value='sourceType.typeValue'
                                       ng-model='formModel.sourceType'
                                       ng-disabled="disableInputFields"
                                       ng-change="changeSourceType(sourceType)"/>
                            <label for="{{sourceType.typeId}}">
                                {{sourceType.typeLabel}}
                            </label>
                       </div>
                    </div>
            </fieldset>

以下是渲染内容：

<fieldset>
                <legend class="sr-only">Source Types</legend>
                    <div class="form-inline" role="radiogroup">
                    <!--div for source identifiers radios-->
                       <!-- ngRepeat: sourceType in sourceTypes --><div ng-repeat="sourceType in sourceTypes" class="form-group ng-scope" role="radio">
                                <input type="radio" name="sourceType" id="secbtn" ng-value="sourceType.typeValue" ng-model="formModel.sourceType" ng-disabled="disableInputFields" ng-change="changeSourceType(sourceType)" class="ng-pristine ng-untouched ng-valid" value="sec">
                            <label for="secbtn" class="ng-binding">
                                Source Type 1
                            </label>
                       </div><!-- end ngRepeat: sourceType in sourceTypes --><div ng-repeat="sourceType in sourceTypes" class="form-group ng-scope" role="radio">
                                <input type="radio" name="sourceType" id="generatedbtn" ng-value="sourceType.typeValue" ng-model="formModel.sourceType" ng-disabled="disableInputFields" ng-change="changeSourceType(sourceType)" class="ng-pristine ng-valid ng-touched" value="gen">
                            <label for="generatedbtn" class="ng-binding">
                                Source Type 2
                            </label>
                       </div><!-- end ngRepeat: sourceType in sourceTypes -->
                    </div>
            </fieldset>

TLDR：如何让Jaws屏幕阅读器正确读取单选按钮，包括IE 11和Chrome上所选/活动按钮的位置。

提前致谢。

更新：使用＆＃34; radio＆＃34;添加角色属性值修复了Chrome上的问题，但在IE上没有拿起标签。如果我只关注IE，是否可以让屏幕阅读器读取单选按钮的位置？

Answer 1

这取决于浏览器。你不应该在意。

这里的问题不是你的代码，也不是JAWS。这是Internet Explorer实现辅助功能API的方式。

IE未宣布所选元素在辅助功能API中的位置。它只是一个不同的实现，更改代码不会影响Internet Explorer与屏幕阅读器的通信方式。

单选按钮符合508，IE和Chrome上的位置问题

1 个答案: