辅助功能：推荐的 SVG 和 MathML 替代文本约定？

Question

概述

HTML5 现在允许 <svg> 和 <math> 带有 HTML 文档的标记，而不依赖于外部名称空间（ 这里 是不错的概述）。两者都有自己的 alt 类似物（见下文），今天的屏幕阅读器软件实际上忽略了它们。因此，盲人用户无法访问这些元素。

是否有计划为这些新元素实施标准的替代文本约定？ 我已经搜索了文档并且已经干了！

更多详情

关于 SVG： SVG 的替代文本可以被认为是根 title 或 desc 标签的内容。

 <svg>
  <title>An image title</title>
  <desc>This is the longer image description</desc>
  ...
</svg>

我找到 了一个 屏幕阅读器，它是这样阅读的，但这是标准的吗？ 以前插入 SVG 的方法 也存在可访问性问题，因为 <object> 屏幕阅读器对标签的处理不一致。

关于 MathML： MathML 的替代文本应存储在 alttext 属性 中。

 <math alttext="A squared plus B squared equals C squared">
  ...
</math>

由于屏幕阅读器似乎不承认这一点，数学渲染库 MathJax 在运行时将文本插入 aria-label 属性。

 <span aria-label="[alttext contents]">...</span>

不幸的是，NVDA、JAWS 和其他公司也不能可靠地读取这些标签。 （更多关于 WAI-ARIA ）

关于两者： 在很大程度上不受支持的 ARIA 属性方面缺乏成功，我尝试使用 title 属性。在这些“外来”HTML 元素上，这些似乎也被忽略了。

包起来

除了快速破解之外，我还在寻找在这些新 HTML 元素上放置替代文本的 _推荐方法_。也许我忽略了 W3C 规范？还是现在还为时过早？

原文由 Courtney Christensen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

经过一番挖掘，我发现了一些官方的建议。不幸的是，目前大多数都无法正常工作。在 Math 和 SVG 可以被认为是可访问的之前，浏览器和屏幕阅读器都有很多需要实现的，但事情 正在 开始好转。

免责声明：以下建议是我在过去几个月的编码中收集到的。如果出了什么问题，请告诉我。随着浏览器和 AT 软件的进步，我会尽量保持最新。

数学语言

推荐

在周围的 --- 标签上使用 role="math" 以及 aria-label div 标签（参见 文档）。添加 tabindex="0" 允许屏幕阅读器专门关注此元素；这个元素的 aria-label 可以使用特殊的快捷键（例如 NVDA+Tab ）来读出。

 <div role="math" tabindex="0" aria-label="[spoken equivalent]">
  <math xmlns="http://www.w3.org/1998/Math/MathML">
    ...
  </math>
</div>

限制/注意事项

• 粗略的屏幕阅读器支持 aria-label （不太重要的 role="math" ）。

更新： 有关 aria-label 的相关 NVDA 门票在 这里 和 这里。 - 包裹在 div 或 span 标签似乎是不必要的，因为 math 是 HTML5 中 的一流元素。 - 我发现很少引用 MathML alttext 标签。

更新： 这似乎是 DAISY 特定的添加， 在此处 描述。

参考

• http://www.w3.org/TR/wai-aria/roles#math
• http://lists.w3.org/Archives/Public/public-pfwg-comments/2008JanMar/0008.html
• http://www.w3.org/TR/wai-aria-practices/#math

SVG

推荐

Use top-level <title> and <desc> tags together with role="img" and aria-label on the root SVG tag.

 <svg role="img" aria-label="[title + description]">
  <title>[title]</title>
  <desc>[long description]</desc>
  ...
</svg>

限制/注意事项

• 截至 2011 年 2 月，IE 9 beta 读取 所有 <title> 和 <desc> 标签，这可能是不受欢迎的。但是，当元素还包含 --- 时，NVDA、JAWS 和 WindowEyes 将读取 aria-label role="img" 。
• 如果加载 SVG 文件（即，不是内嵌在 HTML 中），根级 <title> 标签将成为浏览器页面的标题，屏幕阅读器 将 读取该标题。

参考

• http://lists.w3.org/Archives/Public/www-svg/2010Oct/0029.html
• http://lists.w3.org/Archives/Public/public-html/2010Jun/0127.html
• http://www.w3.org/TR/wai-aria/roles#img
• http://www.w3.org/TR/wai-aria/roles#namecalculation

原文由 Courtney Christensen 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这里的所有答案都非常古老；这是一个更新，基于 2016 年的 CSS 技巧文章，不幸的是，这是我从权威来源找到的新文章。请注意，这是一个简短的总结，假设您熟悉可访问性并且不需要针对旧版浏览器。有关更全面的讨论，请参阅文章。

对于包含在 <img> 标签中的 svg

• 将 alt 值添加到 <img> 标签。

 <img src="https://some/domain/some.svg" alt="description of image here">

请注意，如果图像纯粹是装饰性的，则应包括 alt 但将其留空 - alt="" 。

对于内联 <svg> 的

• 添加一个 <title> 元素；这将作为可视化工具提示包含在内，并可供 Accessability API 使用。
• 在 <svg> 标签上，添加 role="img" 。

 <svg role="img">
 <title>Descriptive Title Here</title>
 <use xlink:href="#some-icon"></use>
</svg>

对于装饰内联 <svg> 的

• 在 <svg> 标签上包含 aria-hidden="true" 。

 <svg aria-hidden="true">
  <use xlink:href="#some-icon"></use>
</svg>

原文由 Andrew 发布，翻译遵循 CC BY-SA 4.0 许可协议