如何让 NVDA 屏幕阅读器读取 span 和 p 标签内的文本

Question

我正在使用 React 开发一个页面。 我的页面有输入框、按钮、span 和 p 元素。

我正在使用 NVDA 屏幕阅读器检查 Ally，然后按 Tab 键。 我有一个场景，焦点必须移动到 span 元素和 p 元素，并读取元素内的文本。

function Example() {
  const [tile, setTile] = useState(false);
  const [inputValue, setInputValue] = useState('');

  return (
    <div className="main">
    <input type="text" name="name" value={inputValue} 
    onChange={e => setInputValue(e.target.value)}/>
    <button onClick={() => setTile(true)}>
        Click me
     </button>
      <br/>
      {tile && <span aria-label={`sample label here with ${inputValue}`}>Based on the input here are the options</span>}
      {tile && <div className="tile">
      <p aria-label="sample label here">Hello there!</p>
      <p aria-label="sample label here">Entered input {inputValue}</p>
      </div> }
    </div>
  );
}

我尝试使用

tabIndex=-1

但这不起作用。 我尝试过使用

tabIndex=0

但我认为这不是一个好的做法。 另外，我想将输入的内容包含在屏幕阅读器正在读取的标签中。 JSfiddle

Answer 1

就编程而言，您无需执行任何操作。

屏幕阅读器基本上允许“阅读”网页。使用 focus 进行导航是另一种导航模式，用于表单或交互式应用程序。 NVDA 使用方向键读取。

NVDA

+↓将从当前位置开始读取。 这可以是焦点，也可以是最后读取的项目，或者是鼠标光标下的项目（如果配置）。

h

将跳转到下一个标题，这是屏幕阅读器用户最常使用的导航技术。拥有完美视力的用户也可以浏览头条新闻以找到与他们相关的部分。 WebAIM 对于如何使用 NVDA 评估网站的可访问性提供了很好的指南，特别是

使用 NVDA 阅读网页

我注意到上面代码中的一些不好的做法，我想在这里解决。也许它们根本与问题无关，但我不想留下无法访问的代码作为例子。

---

<input>
• 绝对需要一个标签，最好在

  <label>

  元素中，

  aria-label

  也可以，但不太实用。
aria-label
• 或

  aria-labelledby

  上的

  <p>

  或

  <span>

  元素不会执行任何操作。它仅为交互式元素和地标提供易于访问的名称。当提供带有
aria-label
• 或类似名称的可访问名称时，

  可见文本必须包含可访问名称