Группа переключателей Angular material - программа чтения с экрана не читается должным образом

#angular-material #accessibility #microsoft-edge #radio-group #narrator

#angular-material #Специальные возможности #microsoft-edge #радиогруппа #диктор

Вопрос:

Я использую группу переключателей в своем приложении, и у нее есть 3 возможных значения. Всякий раз, когда пользователь выбирает значение, программа чтения с экрана считывает «1 из 1» вместо «1 из 3».

Я также проверил поведение на веб-сайте Angular, и оно ведет себя так же.

Пример кода: Stackblitz

Браузер: Программа чтения с экрана Microsoft Edge: Диктор

1. когда я просматриваю сгенерированный HTML-код из вашего примера stackblitz, две переключающие кнопки имеют один и тот же name атрибут («mat-radio-group-0»), что является правильным способом группировки кнопок вместе. nvda в chrome говорит «1 из 2» и «2 из 2», поэтому кажется, что отображается правильная информация (в моей настройке). вы пробовали narrator в Firefox или Chrome?

2. @slugolicious — спасибо за ваш ответ. Работает ли это у вас в Edge Narrator?

3. у меня нет w10, поэтому у меня нет edge

4. @slugolicious — аааа.. куда я могу сообщить об этой ошибке? Angular или Edge?

5. @alok_dida Вы когда-нибудь решали эту проблему? У меня точно такая же проблема.

Ответ №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. Спасибо за ваш ответ. Похоже, вы неправильно поняли вопрос. Я столкнулся с проблемой с программой чтения с экрана. При выборе Winter диктор должен прочитать 1 из 4 вместо 1 из 1

Ответ №2:

Похоже, что вы хотите отобразить проверяемое значение, попробуйте обратиться к следующему коду и использовать Model для получения проверяемого значения.

 <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;
}

результат, как показано ниже:

Более подробно об использовании метки переключателя читайте в этой статье.