辅助功能:推荐使用SVG和MathML的alt-text约定？

Question

概观

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

是否有计划为这些新元素实施标准的alt-text约定？我已经仔细检查了文档并且已经干了!

更详细信息

关于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>

由于屏幕阅读器似乎不承认这一点,因此数学呈现库MathJaxaria-label在运行时将文本插入属性中.

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

不幸的是,NVDA,JAWS和其他人也无法可靠地阅读这些标签.(有关WAI-ARIA的更多信息)

关于两者:在很大程度上不支持ARIA属性方面缺乏成功,我尝试使用title属性.这些"外来"HTML元素似乎也被忽略了.

包起来

不仅仅是快速破解,我正在寻找在这些新HTML元素上放置替代文本的推荐方法.也许有一个我忽略的W3C规范？或者它还处于游戏的早期阶段？

Answer 1

经过一番挖掘后,我发现了一些官方建议.不幸的是,大多数在这个时间点都不起作用.在将Math和SVG视为可访问之前,浏览器和屏幕阅读器都有很多需要实现的东西,但事情正在开始查找.

免责声明:以下建议是我在过去几个月的编码中收集到的.如果出现问题,请告诉我.随着浏览器和AT软件的发展,我将尽力保持最新状态.

MATHML

建议

使用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

建议

使用顶层<title>和<desc>与标签一起role="img",并aria-label在根SVG标记.

<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

Answer 2

这里所有的答案都很旧了；这里有一个更新，基于2016 年的一篇 CSS Tricks 文章（不幸的是，这是我从权威来源找到的最新文章），针对问题的 SVG 部分。请注意，这是一个简短的摘要，假设您熟悉可访问性并且不需要针对较旧的浏览器。请参阅文章以获得更全面的讨论。

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

• alt向标签添加值<img>。

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

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

对于内联<svg>的

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

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

用于装饰性内<svg>联

• aria-hidden="true"在标签上添加<svg>。

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