You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

HTML/EPUB中配置特殊内容以实现屏幕阅读器正确朗读的技术咨询

HTML/EPUB中配置特殊内容以实现屏幕阅读器正确朗读的技术咨询

嘿,很高兴能帮你搞定EPUB/HTML里的屏幕阅读器适配问题——毕竟无障碍体验对小说读者来说太关键了,尤其是你用到这么多特殊内容的场景。咱们逐个拆解你的需求,给你最靠谱的实现方案:

1. 把分数图标读成“half-a-little-running-man million”

你担心屏幕阅读器会把图片当成普通图像读(比如带“图像:”前缀),或者直接忽略。最稳妥的方法是用视觉隐藏的文本提供朗读内容,同时让图片只负责视觉展示,完全避免阅读器的额外提示:

<!-- 视觉上显示图标,屏幕阅读器读隐藏的文本 -->
<span class="visually-hidden">half-a-little-running-man</span>
<img src="tile.svg" alt="" aria-hidden="true"/>
,000,000

这里的.visually-hidden是标准的无障碍样式,确保文本在视觉上不可见,但能被屏幕阅读器识别,EPUB完全支持:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

2. 让0,000,000读成“zero million zeroteen thousand zero hundred and zeroty-zero”

普通数字会被屏幕阅读器自动按常规规则朗读,要强制读指定内容,同样可以用视觉隐藏文本+视觉可见数字的组合,避开普通span的aria-label支持问题:

<span class="visually-hidden">zero million zeroteen thousand zero hundred and zeroty-zero</span>
<span aria-hidden="true">0,000,000</span>

这个方案的优势是兼容性极强,不管哪种屏幕阅读器,都会优先读取隐藏的语义文本,视觉上又完全符合你的排版需求,不会出现“描述:”这类多余前缀。

3. 让日语“立入禁止”读成指定假名“たちいりきんし”

如果是生僻词(哪怕是日语),用HTML的<ruby>标签是最优解——这是专门给汉字标注注音的标准标签,EPUB支持度拉满,而且屏幕阅读器会自动读取注音内容,不需要额外提示:

<!-- 视觉显示汉字,同时标注假名;如果不想显示假名,给rt加visually-hidden类即可 -->
<span lang="ja">
  <ruby>
    立入禁止
    <rt>たちいりきんし</rt>
  </ruby>
</span>

别忘了给包裹元素加上lang="ja",确保屏幕阅读器切换到日语语音包朗读,读音更准确。如果不需要在视觉上显示假名,只要给<rt>标签加上之前的.visually-hidden类就行。

额外小贴士

  • 测试时一定要用主流屏幕阅读器:比如iOS/macOS的VoiceOver、Windows的NVDA或JAWS,不同阅读器对属性的支持略有差异,实测才是硬道理。
  • 尽量保持语义化:EPUB里不要乱用div,多用语义标签(比如p、span),配合无障碍属性,能让阅读器的朗读逻辑更顺畅。

内容来源于stack exchange

火山引擎 最新活动