TinyMCE 可访问性：标签答案

【问题标题】：TinyMCE Accessibility: Label ForTinyMCE 可访问性：标签
【发布时间】：2010-11-23 17:03:58
【问题描述】：

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

谢谢！

编辑

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

我正在探索的一个可能的解决方案是使用 ledgend + fieldset 包含每个 TinyMCE 实例，但使用 JAWS 9.0 测试它似乎没有任何区别，除非 fieldset 包含表单元素（例如 @ 987654332@, type=text) 并且 JAWS 处于表单模式。

【问题讨论】：

标签： html tinymce accessibility section508

【解决方案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，按照英国的拼写）与传统的 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 属性（不可见）将代替它。瞧，一个在视觉和听觉上都标记的小部件，没有多余的阅读。

如果您以这种方式使用 aria-hidden，请务必小心，您隐藏的位（或等效位）始终可用于在其他地方阅读。

此解决方案仅适用于使用支持 ARIA 的网络浏览器和屏幕阅读器的用户。使用较旧的屏幕阅读器或浏览器的人将不走运，最近在 A List Apart 上的文章The Accessibility of WAI ARIA 中详细讨论了这一点。作者为尽可能首选传统语义 HTML 解决方案提供了一个很好的案例；但就您而言，我认为您别无选择。至少，添加 ARIA 属性可以让您合理地声称您已尽职尽责，并真诚地努力使其尽可能易于访问。

祝你好运！

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

【讨论】：

【解决方案2】：

使用 Will Martin 提供的有关 aria-label 属性的信息，我编写了以下适用于 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 内的 body 标签中。

选择 TinyMCE 时，OSX 屏幕阅读器会正确地重新显示标签

来自TinyMCE: How bind on event after its initialized的一些灵感

【讨论】：

【解决方案3】：

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

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

【讨论】：

谢谢@Pekka，我曾尝试将标签指向 textarea，但我认为它不起作用，因为 textarea 是不可见的（例如，JAWS 通常不会读取 display:none 或可见性：隐藏元素）。
@Stephen 是的，我认为你对此有点搞砸了:) 我想当 TinyMCE 替换它时，你可以让它指向 iframe 的 id，但它本身是无效的。也许还是比替代方案更好，我无法判断