为画外音屏幕阅读器实现离子单选按钮的正确方法是什么？答案

【问题标题】：What is the proper way to implement ionic radio buttons for voiceover screen reader?为画外音屏幕阅读器实现离子单选按钮的正确方法是什么？
【发布时间】：2016-08-17 15:55:55
【问题描述】：

我有以下单选按钮列表，无需启用画外音即可：

<ion-list>
    <label class="item item-radio" 
           ng-repeat="type in someCtrl.types"  
           aria-label="{{type.label}}" 
           id="{{type.value}}">
        <input type="radio" 
               role="radio" 
               ng-model="someCtrl.data.type" 
               ng-value="type.value" 
               aria-labelledby="{{type.value}}">
        <div class="radio-content">
            <div class="item-content">{{type.label}}</div>
        <i class="radio-icon ion-checkmark"></i>
        </div>
    </label>
</ion-list>

当我启用画外音并从列表中选择一个项目时，该项目会收到一个复选标记，但模型不会更改，并且选择的默认项目仍保留其复选标记。当用户继续从列表中选择项目时，每个项目都会得到一个复选标记，但数据模型不会更改，并且所有复选标记都将保留。有没有人幸运地实现了支持画外音的 ionic 广播列表？

【问题讨论】：

标签： ios ionic-framework voiceover

【解决方案1】：

步骤 1：首先在控制器中初始化您要选择的项目列表
例如：

$scope.audio_types = [
    {name: $translate.instant("Morning"), value : 'Morning'},
    {name: $translate.instant("Afternoon"), value : 'Afternoon'},
    {name: $translate.instant("Evening"), value : 'Evening'}
  ];

第 2 步：您使用的是 ng-model，因此使用空属性初始化对象

例如：$scope.profile = {};

步骤 3：您正在使用单选按钮选择项目属性，因此声明检查属性是否正在更改的方法

$scope.roundCountChange = function(){
console.log($scope.profile.dropdown);
}

Step4 : 在您的 HTML 页面中添加这些代码的最后一步

<label class="item"> "select"  <br/>
  <label ng-repeat="item in audio_types">
    <input type="radio" ng-model="profile.dropdown" ng-value="item.value" ng-change="roundCountChange()"/> item.name
  </label>
</label>

【讨论】：