段落嵌套mark标签的无障碍访问问题咨询及优化建议请求

你遇到的确实是无障碍访问问题——<mark>标签的默认语义会被部分屏幕阅读器识别为独立的高亮区块，导致段落朗读流程中断，需要用户手动操作才能继续，严重影响视障用户的阅读体验。

以下是两种不影响视觉风格的优化方案：

方案一：使用语义化强调标签替代<mark> #

如果你的颜色强调是为了表达语义上的重点（而非临时高亮文本），推荐用原生语义化标签<em>或<strong>，配合CSS实现蓝色样式。这类标签会被屏幕阅读器自然识别为段落内的强调内容，不会中断朗读流：

<style>
  .blue-emphasis {
    color: #0000ff; /* 替换为你实际使用的蓝色值 */
    /* 如需保留原<mark>的背景高亮，可添加 background-color: #ffff00; */
  }
</style>
<p>
  Having <em class="blue-emphasis">authority</em> over your brand is important in business. You decide how you want your brand to be <em class="blue-emphasis">perceived</em>, interacted with, and <em class="blue-emphasis">connected</em> to your community. If you ever need guidance on any of these aspects, I am more than willing to provide feedback and services related to brand identity.
</p>

• <em>适合语调上的强调，<strong>适合语义上的重要性强调，可根据你的需求选择。
• 完全保留原视觉效果，同时让屏幕阅读器连贯朗读段落内容。

方案二：保留<mark>标签并修复无障碍行为 #

如果必须保留<mark>标签（比如依赖其默认高亮样式），可以通过添加role="span"覆盖其默认的高亮角色，让屏幕阅读器将其视为普通行内文本：

<p>
  Having <mark class="blue" role="span">authority</mark> over your brand is important in business. You decide how you want your brand to be <mark class="blue" role="span">perceived</mark>, interacted with, and <mark class="blue" role="span">connected</mark> to your community. If you ever need guidance on any of these aspects, I am more than willing to provide feedback and services related to brand identity.
</p>

• role="span"会告诉屏幕阅读器该元素只是段落内的普通文本节点，不会触发独立区块的朗读逻辑。
• 无需修改CSS，完全保留原视觉样式。

额外验证建议 #

1. 用NVDA、VoiceOver等主流屏幕阅读器测试段落朗读，确保流程连贯无中断；
2. 检查蓝色文本与背景的颜色对比度，需符合WCAG 2.1 AA标准（至少4.5:1），避免视觉障碍用户无法识别强调内容。

内容的提问来源于stack exchange，提问作者Ethan Deardorff