通過創建小測驗學習無障礙- 步驟 34

Chinese 中文 HTML-CSS
1

這裡的意義我不懂……
<h3>透過偽元素before，在<h3>前面建立了「Question #」，但是HTML中已經建立
<h3><span class="sr-only">Question</span>1</h3>
既然要輸出「Question #」，為何又要透過sr-only 隱藏「Question 」？

有請各位先進解惑，謝謝🤔

2

你好 @midosoft

屏幕阅读器将跳过使用伪选择器插入的文本。

即使“Question”出现在屏幕上，屏幕阅读器也只会读出数字，除非使用“.sr-only”类隐藏文本“Question”。

快乐编码

1 Like
3

謝謝你的回覆，我不懂的就是，既然要輸出「Question 」，又何必隱藏「Question 」呢？

4

你好 @midosoft

如果屏幕阅读器仅显示文本未隐藏，则“Question”一词将在浏览器中出现两次。

快乐编码

1 Like