TinyMCE可访问性:标签

Question

我们的一个Web应用程序刚刚进行了508合规性测试.我们使用TinyMCE版本3进行内容开发,我知道它通常具有良好的可访问性.但是,我们的一个页面包含3个或更多TinyMCE实例,每个实例前面都有一个label指示TinyMCE实例的内容,但我们被告知这些是"隐式"标签,当它们应该是"显式"标签时(即带有for属性).问题是,TinyMCE实例只是具有复杂的自定义html"控件"的iframe,而据我所知,标签/ for技术仅适用于传统的表单元素.实现TinyMCE实例的"显式"标签的最佳策略是什么？

谢谢!

编辑

解决方案使用label+ for不起作用:指向label初始textarea,指向label生成的iframe.

我正在探索的一个可能的解决方案是使用ledgend+ 包含每个TinyMCE实例,fieldset但是使用JAWS 9.0对其进行测试除非fieldset包含表单元素(例如)和JAWS处于表单模式input,否则它似乎没有任何区别type=text.

Answer 1

针对这类问题有一个新兴标准:ARIA(可访问的富Internet应用程序).它仍然是一个工作草案,但是当最近的浏览器(IE 9,Firefox 3.6(部分)和4.0,Chrome)使用时,支持开始出现在最近的屏幕阅读器(JAWS 9,最新版本的NVDA)中.

在这种特殊情况下,请查看aria-label和aria-labelledby.这些属性将添加到TinyMCE小部件中的BODY元素中 - 或者添加到IFRAME中,无论两者中的哪一个实际上在用户输入数据时都会聚焦.从而:

<body aria-label="Edit document">

aria-label属性仅指定用作标签的字符串.aria-labelledby(注意两个L's,根据英国拼写)的工作方式与传统的LABEL元素相反.也就是说,你给它一个ID:

<body aria-labelledby="edit-label">

然后你会在代码中的其他地方:

<label id="edit-label">Edit document</label>

它不一定必须是LABEL元素,您可以使用SPAN或其他任何东西,但LABEL似乎在语义上是合适的.

ARIA属性不会在HTML 4或XHTML DTD下验证.但是,他们将在HTML 5下进行验证(本身仍处于开发阶段).如果验证对于您在较旧的DTD下很重要,则可以在加载页面时使用JavaScript以编程方式添加属性.

理想情况下,如果您已经为窗口小部件设置了可见标签,那么您应该使用aria-labelledby来防止冗余.但是,我不知道它是否可以跨文档边界工作.也就是说,如果BODY在IFRAME中,并且可见标签在IFRAME的父文档中定义,我不知道它是否有效.浏览器/屏幕阅读器可以将两者视为不相互通信的单独文档.你必须尝试找出答案.但如果事实证明它们不起作用,那就试试吧http://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden.因此,在父文档中:

<label aria-hidden="true">Edit document</label>

在TinyMCE文件中:

<body aria-label="Edit document">

aria-hidden属性将阻止读取父文档中的标签,并且子文档中的aria-label属性(不可见)将取代它.Voila,一个既明显又可听见的小部件,没有多余的阅读.

如果你以这种方式使用咏叹调隐藏,要非常小心,你隐藏的位(或等效的)总是可以在其他地方读取.

此解决方案仅适用于使用支持ARIA的Web浏览器和屏幕阅读器的用户.拥有较旧屏幕阅读器或浏览器的人将会失去运气,最近在A List Apart,WAI ARIA的可访问性文章中对此进行了详细讨论.作者尽可能优先选择传统的语义HTML解决方案; 但在你的情况下,我认为你没有任何其他选择.至少,添加ARIA属性可以让您合理地声称您已经完成了尽职调查,并尽可能地使其尽可能地易于访问.

祝好运!

未来读者请注意:此处给出的ARIA规范链接是指2010年9月的工作草案.如果它已经超过几个月,请查看更新的规格.

Answer 2

如果我正确地阅读了规范，该for属性确实必须指向同一页面上的另一个控件，正如您已经说过的那样。

因此，我认为唯一有效的选择是将属性for指向<textarea>TinyMCE 替换的元素。这是最有意义的，因为编辑完成后该元素被发送到服务器。