嘿，我帮你梳理下解决这个VoiceOver读取HTML标签问题的办法，刚好在Ionic2项目里有对应的处理方案：

1. 处理标题标签（<h1>-<h6>）的额外提示 #

VoiceOver默认会告诉用户元素的语义类型（比如读到<h1>时会额外说“Header 1”），如果你只想让它读标题内容，有两个实用方法：

• 用aria-label覆盖默认读取：直接给标题标签加上aria-label属性，指定你想让VoiceOver读取的内容，这样就不会额外提示标签类型了：

  <h1 aria-label="我的主页标题">我的主页标题</h1>
  

• 隐藏语义提示但保留无障碍性：如果确实不需要标题的语义提示，又不想破坏页面结构的无障碍性，可以配合Ionic内置的.sr-only类（视觉隐藏但屏幕阅读器可见）：

  <h1 aria-hidden="true">我的主页标题</h1>
  <h1 class="sr-only">我的主页标题</h1>
  

  不过这个方法更适合特殊场景，一般优先用aria-label就够了。

2. 搞定图片标签的多余读取 #

VoiceOver读“Image tag png”，大概率是因为你的图片没设置合适的alt属性，或者alt为空导致它去读标签名和文件扩展名。试试这两个办法：

• 给功能性图片设置有意义的alt文本：比如图标、内容图，直接写清楚图片的作用：

  <img src="assets/images/home-icon.png" alt="返回主页图标">
  

  这样VoiceOver就会读“返回主页图标”，不会扯标签和扩展名了。
• 装饰性图片直接隐藏读取：如果图片只是装饰用，不需要屏幕阅读器识别，就设置alt=""加上role="presentation"：

  <img src="assets/images/decor-border.png" alt="" role="presentation">
  

  这会让VoiceOver直接忽略这个图片，啥都不会读。

3. Ionic内置组件的特殊调整 #

Ionic2的组件比如ion-title、ion-header本身带语义化属性，如果需要调整它们的VoiceOver读取，直接加aria-label就行：

<ion-title aria-label="首页">首页</ion-title>

这样VoiceOver只会读“首页”，不会额外提示组件类型。

小提醒 #

无障碍设计别过度哦！比如<h1>作为页面主标题，VoiceOver提示“Header 1”其实能帮用户快速理清页面结构，除非真的不需要这个提示，不然优先用aria-label调整读取内容，而不是完全隐藏语义～测试的时候多切换操作几次，确保每个元素的读取都符合你的预期。

内容的提问来源于stack exchange，提问作者Khaled Ramadan