使用JAWS屏幕阅读器时kendo-upload组件Enter键无法正常工作的解决方案咨询

我之前也碰到过Kendo Upload在JAWS下的键盘无障碍兼容问题，试了几个可行的方案，分享给你参考：

方案1：自定义Enter键映射，让JAWS用户按Enter即可触发上传 #

通过监听组件的键盘事件，在JAWS环境下把Enter键动作转换成上传按钮的点击事件，保持和非JAWS场景一致的操作逻辑。

代码示例： #

import { Component, ViewChild } from '@angular/core';
import { UploadComponent } from '@progress/kendo-angular-upload';

@Component({
  selector: 'app-upload-fix',
  template: `
    <kendo-upload #upload (keydown)="handleUploadKeyDown($event)" [saveUrl]="uploadEndpoint"></kendo-upload>
  `
})
export class UploadFixComponent {
  @ViewChild('upload') upload!: UploadComponent;
  uploadEndpoint = '/api/upload';

  handleUploadKeyDown(event: KeyboardEvent) {
    // 检测当前是否处于JAWS环境
    const isJAWSActive = /JAWS/.test(navigator.userAgent);
    
    if (isJAWSActive && event.key === 'Enter') {
      event.preventDefault();
      // 手动触发上传按钮的点击事件
      const uploadButton = document.querySelector('.k-upload-button') as HTMLElement;
      uploadButton?.click();
    }
  }
}

说明： #

这个方案通过UA检测识别JAWS环境，拦截Enter键后模拟点击上传按钮，让用户无需切换快捷键，操作体验和普通场景一致。

方案2：增强屏幕阅读器提示，告知用户使用Alt+Enter #

如果不想修改按键逻辑，可以通过无障碍属性给JAWS用户明确提示，让他们知道需要使用Alt+Enter触发上传。

代码示例： #

首先添加一个视觉隐藏的提示元素（仅屏幕阅读器可见）：

<div id="upload-jaws-hint" class="sr-only">提示：请按下Alt+Enter键触发文件上传</div>

然后给Kendo Upload组件关联这个提示：

<kendo-upload 
  [saveUrl]="uploadEndpoint"
  aria-describedby="upload-jaws-hint"
></kendo-upload>

对应的视觉隐藏样式：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

说明： #

通过aria-describedby把提示信息绑定到组件上，JAWS在读取组件时会额外播报这个提示，避免用户因按Enter无反应而困惑。

方案3：自定义上传按钮，完全控制无障碍与键盘事件 #

如果前两个方案不够灵活，可以替换默认的上传按钮，自定义一个符合无障碍标准的按钮，直接控制键盘响应逻辑。

代码示例： #

<kendo-upload #customUpload [saveUrl]="uploadEndpoint">
  <ng-template kendoUploadButtonTemplate>
    <button 
      type="button"
      tabindex="0"
      role="button"
      class="k-button k-primary"
      (click)="triggerFileSelect()"
      (keydown)="handleCustomButtonKeyDown($event)"
    >
      选择并上传文件
    </button>
  </ng-template>
</kendo-upload>

组件逻辑：

import { Component, ViewChild } from '@angular/core';
import { UploadComponent } from '@progress/kendo-angular-upload';

@Component({
  selector: 'app-custom-upload-button',
  template: `<!-- 上面的模板 -->`
})
export class CustomUploadButtonComponent {
  @ViewChild('customUpload') upload!: UploadComponent;
  uploadEndpoint = '/api/upload';

  triggerFileSelect() {
    // 触发Kendo Upload的文件选择对话框
    const fileInput = document.querySelector('.k-upload-input') as HTMLInputElement;
    fileInput?.click();
  }

  handleCustomButtonKeyDown(event: KeyboardEvent) {
    // 响应Enter和空格键，符合按钮的无障碍键盘交互标准
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      this.triggerFileSelect();
    }
  }
}

说明： #

通过自定义按钮，你可以完全控制键盘事件和无障碍属性，确保JAWS能正确识别这是一个可交互按钮，并且响应Enter/空格按键，彻底绕开Kendo默认组件的兼容性问题。

另外，你提交的官方issue可以持续跟进，Telerik团队后续可能会在新版本中修复这个JAWS兼容问题。

内容的提问来源于stack exchange，提问作者Revathi