VoiceOver空span时合并朗读a、c span的问题求助

问题场景 #

当页面结构如下，且<span>b</span>为空时，VoiceOver会将"a"和"c"合并朗读，而非分别读取两个span的内容：

<div>
    <div>
        <span>a</span>
        <span></span> <!-- 空的b元素 -->
    </div>
    <div>
        <span>c</span>
    </div>
</div>

以下是几种可行的解决方式：

方法1：给空span添加aria-hidden="true" #

让VoiceOver直接忽略这个空元素，避免干扰文本分隔：

<div>
    <div>
        <span>a</span>
        <span aria-hidden="true"></span>
    </div>
    <div>
        <span>c</span>
    </div>
</div>

方法2：给空span填充不可见空白字符 #

如果需要保留span的结构（比如样式依赖），可以加入零宽空格或普通空格，既不影响视觉，又能让VoiceOver识别元素边界：

<div>
    <div>
        <span>a</span>
        <span>&#8203;</span> <!-- 零宽空格，无视觉影响 -->
        <!-- 或用普通空格：<span>&nbsp;</span> -->
    </div>
    <div>
        <span>c</span>
    </div>
</div>

方法3：动态移除空元素 #

如果空span没有保留的必要，直接在业务逻辑里判断，当b为空时移除该span：

<!-- b有内容时的结构 -->
<div>
    <div>
        <span>a</span>
        <span>b</span>
    </div>
    <div>
        <span>c</span>
    </div>
</div>

<!-- b为空时的结构 -->
<div>
    <div>
        <span>a</span>
    </div>
    <div>
        <span>c</span>
    </div>
</div>

内容的提问来源于stack exchange，提问作者Staś Werno