可访问性：SVG和MathML推荐使用alt-text惯例？ [英] Accessibility: recommended alt-text convention for SVG and MathML?

查看：219
本文介绍了可访问性：SVG和MathML推荐使用alt-text惯例？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

概述



HTML5 现在允许 < svg> 和< math> 使用HTML文档进行标记而不依赖于外部名称空间（正确的概述此处）。两者都有自己的 alt - 属性类似物（见下文），它们在今天的屏幕阅读器软件中被有效地忽略了。因此，盲人用户无法访问这些元素。



是否有计划为这些新元素实施标准的alt-text约定？已经找到了文档，并且已经干掉了！



详细信息

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

 < svg> 
< title>图片标题< / title> 
< desc>这是较长的图片说明< / desc> 
 ... 
< / svg>

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



关于MathML： MathML的替代文字应该是存储在 alttext 

 < math alttext =平方加B平方等于C平方 > 
 ... 
< / math>

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

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

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



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



总结



不仅仅是一个快速入侵，我正在寻找推荐的方式来在这些新的HTML元素上放置替代文本。也许有一个我忽略的W3C规范？或者它在游戏中还为时尚早？

解决方案

经过一番挖掘，我找到了一些有些正式的建议。不幸的是，现在大部分功能都无法正常工作。在将Math和SVG视为可访问之前，浏览器和屏幕阅读器都有很多要实现，但的内容开始查找。



<免责声明：以下建议是我在过去几个月的编码中收集到的。如果有什么事情是错的，请告诉我。我会尽量让浏览器和AT软件保持最新状态。

MathML



推荐



使用 role =math以及 aria-label 放在周围的 div 标签上（参见 docs ）。添加 tabindex =0允许屏幕阅读器专注于此元素;这个元素的 aria-label 可以使用一个特殊的快捷键（比如 NVDA + Tab ）来说出。

 < div role =mathtabindex =0aria-label =[口音等值]> 
  ... 
< / math> 
< / div>

限制/注意事项




  • 粗略的屏幕阅读器支持 aria-label （更重要的是 role =math）。
    更新：关于 aria-label的相关NVDA门票 here 和此处。 因为 math 是一个第一个HTML5中的-class元素。

  • 我发现很少引用MathML alttext 标记。
    更新：这似乎是 DAISY 特有的补充，描述为 here 。



参考资料





SVG



建议



使用顶级< title> 和< desc> 标记与 role =img和 aria-label SVG标签。

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

限制/注意事项




  • 截至2011年2月，IE 9测试版读取全部 < title> 和< desc> 标签，这可能是不理想的。但是，当元素还包含 role =img时，NVDA，JAWS和WindowEyes将读取 aria-label 。
  • 如果加载SVG文件（也就是说，不是以HTML内联），根级< title> 标记将会成为浏览器页面的标题，屏幕阅读器将读取
    • 。


参考文献




Overview

HTML5 now allows <svg> and <math> markup with an HTML document without depending on external namespaces (decent overview here). Both have their own alt-attribute analogs (see below) which are effectively ignored by today's screen-reader software. Thus, these elements are inaccessible to blind users.

Are there plans to implement a standard alt-text convention for these new elements? I've scoured the docs and have come up dry!

Futher Details

Regarding SVG: an SVG's alternate text could be considered the contents of the root title or desc tag.

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

I've found one screen-reader which reads it as such, but is this standard? Previous methods of inserting SVG also had accessibility issues since <object> tags are treatedly inconsistently by screen-readers.

Regarding MathML: MathML's alternate text should be stored in the alttext attribute.

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

Since screen readers do not seem to acknowledge this, the math-rendering library MathJax inserts text into an aria-label attribute at run-time.

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

Unfortunately NVDA, JAWS, and others do not reliably read these labels yet either. (More on WAI-ARIA)

Regarding both: lacking success with the largely-unsupported ARIA attributes, I tried using title attributes. These also seem to be ignored on these "foreign" HTML elements.

Wrap-Up

More than a quick hack, I'm looking for the recommended way to place alternate-text on these new HTML elements. Perhaps there is a W3C spec I'm overlooking? Or is it still just too early in the game?

解决方案

After some digging, I found some somewhat official recommendations. Unfortunately, most are not functional at this point in time. Both the browsers and the screen readers have a lot of to implement before Math and SVG can be considered accessible, but things are starting to look up.

Disclaimer: the below recommendations are what I have gleaned over the past few months of coding. If something is dead wrong, please let me know. I will try to keep this up to date as browsers and AT software progresses.

MathML

Recommendation

Use role="math" along with an aria-label on a surrounding div tag (see docs). The addition of tabindex="0" allows screen readers to focus specifically on this element; this element's aria-label can be spoken using a special key shortcut (such as NVDA+Tab).

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

Limitations/Considerations

  • Sketchy screen reader support on aria-label (and less importantly role="math").
    Update: Relevant NVDA tickets regarding aria-label here and here.
  • Wrapping in div or span tag seems unnecessary since math is a first-class element in HTML5.
  • I found very little referencing the MathML alttext tag.
    Update: this appears to be a DAISY-specific addition, described here.

References

SVG

Recommendation

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>

Limitations/Considerations

  • As of February 2011, IE 9 beta reads all <title> and <desc> tags, which is probably undesirable. However, NVDA, JAWS, and WindowEyes will read the aria-label when the element also contains role="img".
  • If loading an SVG file (that is, not inline in HTML), the root-level <title> tag will become the browser page's title, which will be read by the screen reader.

References

这篇关于可访问性：SVG和MathML推荐使用alt-text惯例？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆