7

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

谢谢！

编辑

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

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

4

3 回答 3

5

正是针对此类问题的新兴标准：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 的 Web 浏览器和屏幕阅读器的用户。使用较旧的屏幕阅读器或浏览器的人将不走运，这在最近关于 A List Apart 的文章，WAI ARIA 的可访问性中进行了详细讨论。作者为尽可能首选传统语义 HTML 解决方案提供了一个很好的案例；但就您而言，我认为您别无选择。至少，添加 ARIA 属性可以让您合理地声称您已经尽职尽责，并真诚地努力使其尽可能易于访问。

祝你好运！

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

于 2010-12-12T20:31:27.977 回答
1

使用 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 的一些灵感：初始化后如何绑定事件

于 2017-12-19T09:14:24.430 回答
0

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

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

于 2010-11-23T17:07:40.693 回答