Question

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

谢谢！

修改

使用label + for探索的解决方案不起作用：将label指向最初的textarea，将label指向生成的{ {1}}。

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

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

祝你好运！

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

Answer 2

如果我阅读了specs权限，for属性必须确实指向同一页面上的另一个控件，正如您所说的那样。

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

Answer 3

使用Martin提供的有关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。 e.g：

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

标签的内容（仅限文本）作为aria-label属性添加到TinyMCE-iframe内的body标签。

OSX屏幕阅读器在选择TinyMCE

时正确地重新标记标签

来自TinyMCE: How bind on event after its initialized

的一些灵感

TinyMCE可访问性：标签

3 个答案: