Tengo un error de accesibilidad que afecta a los usuarios que confían en los lectores de pantalla, ya que NVDA está narrando información varias veces para varios botones presentes en la página, mientras navegan con la tecla de flecha hacia abajo. Hay una etiqueta de botón en el interior hay otras etiquetas. Pero el lector de pantalla lee otras etiquetas como botón, y necesito arreglar eso.
Esperando que el lector de pantalla muestre el botón narrar solo una vez para no repetirlo con otras etiquetas.
<button class="btn" [ngClass]="{'border-color-Red': answer?.AnswerId == 1, 'border-color-Orange': answer?.AnswerId == 2, 'border-color-Yellow': answer?.AnswerId == 3, 'border-color-LightGreen': answer?.AnswerId == 4, 'border-color-Green': answer?.AnswerId == 5}" (click)="selectAnswer(answer)"> <section class="d-flex"> <section class="header" [ngClass]="{'color-Red': assesment?.SelectedAnswerId == 1 && answer?.AnswerId == 1, 'color-Orange': assesment?.SelectedAnswerId == 2 && answer?.AnswerId == 2, 'color-Yellow': assesment?.SelectedAnswerId == 3 && answer?.AnswerId == 3, 'color-LightGreen': assesment?.SelectedAnswerId == 4 && answer?.AnswerId == 4, 'color-Green': assesment?.SelectedAnswerId == 5 && answer?.AnswerId == 5, 'color-pink': answer?.AnswerId == 1, 'color-light-orange':answer?.AnswerId == 2, 'color-light-yellow':answer?.AnswerId == 3, 'color-light-yellowgreen':answer?.AnswerId == 4, 'color-green-light':answer?.AnswerId == 5}"> <h6 class="font-caption-alt">{{answer.AnswerId}} = {{answer.Answer}}</h6> </section> <section class="body"> <p>{{answer.AnswerDesciption}}</p> </section> <section class="footer"> <label class="font-caption"> <input type="radio" id="answer-{{assesment?.Id}}-select-{{answer.Id}}" [attr.aria-label]="isSelectedAnswer(assesment, answer?.AnswerId)?'Selected Radio':'Not Selected Radio'" name="{{assesment?.Id}}-select" (click)="selectAnswer(assesment,answer)" [checked]="isSelectedAnswer(assesment, answer?.AnswerId)" tabindex="0" /> <label for="answer-{{assesment?.Id}}-select-{{answer.Id}}"></label> Select </label> </section> </section> </button>