屏幕 reader 无法读取 Chrome 上的数字输入值

Question

我有一个看起来像这样的旋转按钮：

<input type="number" name="amountMonthly" id="amount-monthly_0" class="formInput" required="required" tabindex="70" aria-describedby="amountMonthlyInfo" aria-labelledby="amountMonthlyLbl">

使用屏幕时的预期行为 reader（我使用 NVDA）是让它读取标签一次，并在微调按钮中每次更改时读取新值。下面是如何在两种不同的浏览器上以三种状态读取此元素。

FIREFOX: Empty field selected (in focus)
    [label] spinbutton invalid entry required [description] edit blank
FIREFOX: press up button (increment)
    [number on screen]
FIREFOX: selected the entire numerical value (call it num)
    [first length-of-num characters of label] selected

CHROME: Empty field selected (in focus)
    [label] spinbutton editable invalid entry required [description] [label]
CHROME: press up button (increment)
    [label]
CHROME: selected the entire numerical value (call it num)
    [first length-of-num characters of label] selected

Answer 1

这显然是 Chrome 本身的错误。我发现了一个未解决的问题 here for anyone checking this question in the future.. There's also a related ticket to NVDA which can be found here。

屏幕 reader 无法读取 Chrome 上的数字输入值

Screen reader cannot read number input values on Chrome

html

forms

accessibility

wai-aria

screen-readers