语音搜索输入标签（搜索输入）在 iOS 中无法正常工作

Question

我的网站上有一个输入标签，用于用户搜索数据。它与键盘输入完美配合，但是，如果尝试在 iOS 中进行画外音搜索，它只会输入第一个单词，然后会出现麦克风图标。如果我单击该图标，它会输入整个搜索字符串。

<div fxFlex.gt-sm="38" fxFlex.lt-md="100" fxLayout="row" fxLayoutAlign="center center">
  <img class="toolbar-logo " [src]="cusLogoSmall" (click)="selNav='home'; onSelLink('home')" style="margin-right: 16px;" matTooltip="Home" (click)="navigateModule('home')" />
  <input mat-input placeholder="Search" [(ngModel)]="qrySearch" type="text" class="searchinput" spellcheck="true" lang="en" (keydown)="fnSearch($event.keyCode, $event.key)" (input)="updateLocalStorage()">
  <div class="search" fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="5px">
  </div>
</div>

Answer 1

直接向输入元素添加 aria-label 属性，以描述其对屏幕阅读器的用途。当用户聚焦于该字段时，VoiceOver 将宣布这一点。

<input mat-input placeholder="Search" [(ngModel)]="qrySearch" type="text" class="searchinput" spellcheck="true" lang="en" (keydown)="fnSearch($event.keyCode, $event.key)" (input)="updateLocalStorage()" aria-label="Search for content on the website">