# Spoiler模糊与屏幕阅读器不兼容
**URL:** https://meta.discourse.org/t/spoiler-blur-not-compatible-with-screen-readers/219001
**Category:** Bug
**Tags:** accessibility
**Created:** [2022年二月21日 21:32 UTC](https://meta.discourse.org/t/spoiler-blur-not-compatible-with-screen-readers/219001 "2022-02-21T21:32:19Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@dfabulich](https://meta.discourse.org/u/dfabulich)
#### Post date: [2022年二月21日 21:32 UTC](https://meta.discourse.org/t/spoiler-blur-not-compatible-with-screen-readers/219001/1 "2022-02-21T21:32:20Z")
激活 iOS 的 VoiceOver，然后导航到一个包含剧透模糊的内容，像这样。
向右滑动文本，让屏幕阅读器朗读文本。
实际情况：VoiceOver 只是朗读了剧透文本，忽略了剧透模糊。
预期：它应该有一个 ARIA 角色（按钮？）和一个替代的 ARIA 阅读，“读取剧透”，或者类似的东西。
（JAWS 和 NVDA 也会发生类似情况。）
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2022年二月22日 05:14 UTC](https://meta.discourse.org/t/spoiler-blur-not-compatible-with-screen-readers/219001/2 "2022-02-22T05:14:48Z")
我认为 ARIA 中没有关于“剧透”的内容，……我可能错了。我的理解是，我们能做的最接近的事情是使用 `detail` 和 `summary` 标签来实现这一点。
乐于更改我们的实现。
看起来 detail/summary 的样式设置有相当大的灵活性，但预先计算宽度可能不可行。
https://codepen.io/abcretrograde/embed/preview/MGzqLr?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=MGzqLr
---
### Author:  [@bbsmooth](https://meta.discourse.org/u/bbsmooth)
#### Post date: [2022年十一月30日 19:40 UTC](https://meta.discourse.org/t/spoiler-blur-not-compatible-with-screen-readers/219001/3 "2022-11-30T19:40:46Z")
啊，我现在明白了，我基本上为这里提到的“Spoiler Alert”可访问性问题开了[一个重复的 issue](https://meta.discourse.org/t/improve-accessibility-in-spoiler-alert-plugin/246752)，抱歉。虽然我的 issue 更侧重于键盘可访问性，但我的解决方案也能修复这个问题，因为正如 @dfabulich 所建议的那样，它将使用一个由按钮触发的 disclosure widget 模式。
我认为你不会想在这里使用 details/summary，因为你想在内容“隐藏”时将其显示在页面上，只是想将其模糊化。在模糊的内容上使用 `aria-hidden="true"` 会将其对屏幕阅读器用户隐藏，但仍允许其在页面上显示（模糊化）。然后按钮可以切换 `aria-hidden` 以使其对辅助技术可用。
> 我认为 ARIA 中没有关于 spoilers 的内容
> Spoiler alert 基本上是一个 [disclosure widget](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/)，ARIA Authoring Practices Guide 提供了相关的指南。
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [2022年十二月23日 06:39 UTC](https://meta.discourse.org/t/spoiler-blur-not-compatible-with-screen-readers/219001/6 "2022-12-23T06:39:59Z")
我认为这个提交应该能解决这个问题：
>
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [2022年十二月24日 08:00 UTC](https://meta.discourse.org/t/spoiler-blur-not-compatible-with-screen-readers/219001/7 "2022-12-24T08:00:00Z")
此主题已在 25 小时后自动关闭。不再允许回复。