屏幕阅读器是否正常阅读 HTML 跨度？

Question

我制作了一个登录表单，其中有一个 div，中间有一个 span，用于将登录与社交网络或电子邮件和密码分开，如下所示：

<div>
  <button className="wrap-btn _brand-f">
    <FontAwesomeIcon icon={faFacebookF} />
    <span className="wrap-btn__text">Facebook</span>
  </button>
  <button className="wrap-btn _brand-a">
    <FontAwesomeIcon icon={faApple} />
    <span className="wrap-btn__text">Apple</span>
  </button>
  <div className="wrap-divider">
    <span className="wrap-divider__span">Or</span>
    <span></span> <!-- This is a line that cuts through "or", merely for styling purposes -->
  </div>
</div>

我想知道这是否是使用 span 的正确方法，以及屏幕阅读器是否能正确阅读。我考虑过使用 hr，但我认为这也不是正确的用法。提前致谢！

Answer 1

不，那行不通。作为一个 span 在语义上是很好的......什么都不是（或者只是你想要的一切），这不会被阅读：

<span></span> <!-- This is a line that cuts through "or", merely for styling purposes -->

我的意思是，您希望屏幕 reader 在那里显示什么？您的 span 中没有文字。如果您希望您的分隔符易于访问，最好使用 hr。

屏幕阅读器是否正常阅读 HTML 跨度？

Do screen readers read HTML Spans normally?

html

screen-readers