屏幕阅读器读取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 -->

我的意思是，你想让屏幕阅读器读到什么?没有文本在你的span。如果你想让你的分隔符是可访问的，最好使用hr。