TinyMCE可访问性：标签

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

谢谢！

编辑

解决方案使用label + for探索不工作：指向label在初始textarea，指向label在产生iframe。

一个可行的办法，我是探索包围每TinyMCE的实例与ledgend + fieldset但JAWS 9.0测试了这一点，它似乎并没有任何区别，除非fieldset包含表单元素（如input，type=text）和JAWS处于表单模式。

来源

2010-11-23 Stephen Swensen

如果我读specs权，for属性必须是你已经说的确实指向同一个页面上的其他控制。

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

来源

2010-11-23 17:07:40

感谢@Pekka一些灵感，我曾试图指着textarea的标签时

OSX屏幕阅读器是propperly returing的标签，但我认为它不会因为工作textarea被制作为不可见（例如，JAWS通常不会显示display：none或visibility：hidden elements）。 – 2010-11-23 17:23:24

这种问题存在一个新兴的标准：ARIA（可访问的富互联网应用程序）。它仍然是一个工作草案，但当与最新的浏览器（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属性只是指定一个字符串作为标签。咏叹调标签（注意两个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标签属性在子文档中（不可见）将取代它。 Voila是一个小部件，可以明显地和可听地标记出来，没有多余的阅读。

如果您以这种方式使用aria隐藏功能，请注意您隐藏的位（或等价物）始终可用于阅读其他位置。

此解决方案仅适用于使用支持ARIA的网络浏览器和屏幕阅读器的用户。具有较旧屏幕阅读器或浏览器的用户将不会走运，这在A List Apart最近的文章中详细讨论过，The Accessibility of WAI ARIA。作者为尽可能喜欢传统语义HTML解决方案做了一个很好的例子;但在你的情况下，我不认为你有任何其他选择。至少，增加ARIA的属性可以让你合理地声称你已经尽了你的尽职调查，并且尽力使它尽可能地被访问。

祝你好运！

请注意远期读者：此处给出的ARIA规范的链接指的是2010年9月的工作草案。如果它已经超过几个月，请检查更新的规格。

来源

2010-12-12 20:31:27

使用威尔·马丁关于aria-label attribut提供的信息，我写了下面的代码线，适用于TinyCME 4：

tinymce.init({ 
    … 
    init_instance_callback: function(editor) { 
     jQuery(editor.getBody()).attr('aria-label', jQuery('label[for="' + editor.id + '"]').text()) 
    } 
});

它使用编辑器的初始化后的回调函数触发。

必须有一个label针对TinyMCE被调用的原始元素，在我的情况下textarea。例如：

<label for="id_of_textarea">Shiny wysiwyg editor"</label><textarea id="id_of_textarea"></textarea>

将标签的内容（仅限文本）作为aria-label属性添加到TinyMCE-iframe中的主体标签。选择TinyMCE的

从TinyMCE: How bind on event after its initialized

来源

2017-12-19 09:14:24 Pit

TinyMCE可访问性：标签

回答

相关问题