角材料单选按钮组 - 屏幕阅读器无法正确阅读答案

【问题标题】：Angular material radio button group - screen reader not reading properly角材料单选按钮组 - 屏幕阅读器无法正确阅读
【发布时间】：2019-03-27 20:30:24
【问题描述】：

我在我的应用程序中使用单选按钮组，它有 3 个可能的值。每当用户选择一个值时，屏幕阅读器都会读取“1 of 1”而不是“1 of 3”。

我还检查了 Angular 网站上的行为，它的行为相同。

示例代码：Stackblitz

浏览器：Microsoft Edge 屏幕阅读器：讲述人

【问题讨论】：

当我从你的 stackblitz 示例中查看生成的 html 时，两个单选按钮具有相同的 name 属性（“mat-radio-group-0”），这是对按钮在一起。 chrome 上的 nvda 说“1 of 2”和“2 of 2”，所以看起来正确的信息正在浮出水面（在我的设置中）。你试过用 Firefox 或 chrome 的 narrator 吗？
@slugolicious - 感谢您的回复。它在 Edge + Narrator 中对你有用吗？
我没有 w10 所以我没有优势
@slugolicious - aahhh .. 我在哪里可以报告这个错误？角度还是边缘？
@alok_dida 你有没有解决这个问题？我遇到了完全相同的问题。

标签： angular-material accessibility microsoft-edge radio-group narrator

【解决方案1】：

.html

<label id="example-radio-group-label">Pick your favorite season</label>
<mat-radio-group
  aria-labelledby="example-radio-group-label"
  class="example-radio-group"
  [(ngModel)]="favoriteSeason">
  <mat-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season">
    {{season}}
  </mat-radio-button>
</mat-radio-group>
<div>Your favorite season is: {{favoriteSeason}}</div>

.ts

import {Component} from '@angular/core';

/**
 * @title Radios with ngModel
 */
@Component({
  selector: 'radio-ng-model-example',
  templateUrl: 'radio-ng-model-example.html',
  styleUrls: ['radio-ng-model-example.css'],
})
export class RadioNgModelExample {
  favoriteSeason: string;
  seasons: string[] = ['Winter', 'Spring', 'Summer', 'Autumn'];
}

【讨论】：

感谢您的回复。看起来，您以错误的方式理解了问题。我正面临屏幕阅读器的问题。当您选择冬季时，旁白应阅读 1 of 4 而不是 1 of 1

【解决方案2】：

好像要显示checked的值，尝试参考下面的代码，使用Model获取checked的值。

<mat-radio-group [(ngModel)]="rdoSeason" aria-label="Select an option">
  <mat-radio-button [value]="1">Option 1</mat-radio-button>
  <mat-radio-button [value]="2">Option 2</mat-radio-button>
  <mat-radio-button [value]="3">Option 3</mat-radio-button>
</mat-radio-group>
<div>You select Option: {{rdoSeason}}</div>

.ts 文件中的代码：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-material-radiobutton',
  templateUrl: './material-radiobutton.component.html',
  styleUrls: ['./material-radiobutton.component.css']
})
export class MaterialRadiobuttonComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
  rdoSeason:string;
}

结果如下：

有关使用单选按钮标签的更多详细信息，请查看this article。

【讨论】：

看起来，您对问题的理解有误。我正面临屏幕阅读器的问题。当您选择 option1 时，旁白应阅读 1 of 3 而不是 1 of 1。