覆盖 Reactstrap 进度条的屏幕 reader

Question

我正在使用来自 Reacstrap（进度组件）的进度条，我试图覆盖屏幕 reader 读出的内容。进度条范围为 1 - 4 并为难度级别排序。

这是我对组件的实现：

<Progress
    tabIndex="0"
    color="secondary"
    value={this.props.value || 1}
    max="4"
    aria-label={"Level " + this.props.value || 1}
/>

这里我设置屏幕reader读出'difficulty'的等级。这读起来很好。我已经将 this.props.value 设置为 1 来实现它，但是当我在我的页面中呈现它时，它会读出：

[Difficulty] Level 1, 25 percent, progress indicator

我已经在 Dev 工具中检查了我的元素，它是这样的：

 <div tabindex="0" aria-label="Level 1" class="progress">
     <div 
         class="progress-bar bg-secondary" 
         role="progressbar" 
         aria-valuenow="1" 
         aria-valuemin="0" 
         aria-valuemax="4" 
         style="width: 25%;"
     >
     </div>
 </div>

如何覆盖此组件，以便不再读出“25%，进度指示器”？谢谢。

Answer 1

听起来您可能不想使用进度条角色。屏幕 reader 读出的内容取决于用户的设置和他们使用的特定屏幕 reader。例如，NVDA progress bar output 有 4 种模式，其中 "speak" 将以百分比形式读取进度条值。 NVDA 用户可以将其关闭，他们只会听到 aria-label。

MDN describes 进度条的用例为 "progress status for a task that take a long time or consists of several steps"。如果你用它来描述随着难度增加完成的步骤，这可能是合适的，但如果屏幕 reader 用户选择听到它，你应该准备好听到百分比。

如果您只是使用进度条来显示难度，并且没有最后一步"completing the requested action"，那么删除进度条和 aria 属性的作用可能是合适的。否则取决于屏幕 reader 和屏幕 reader 用户不会听到百分比。

覆盖 Reactstrap 进度条的屏幕 reader

Override screen reader for Reactstrap Progress bar

accessibility

reactjs

reactstrap