TinyMCE可访问性：标签

问题描述 投票：4回答：3

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

谢谢！

编辑

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

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

html tinymce accessibility section508
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'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，The Accessibility of WAI ARIA的文章中对此进行了详细讨论。作者尽可能优先选择传统的语义HTML解决方案;但在你的情况下，我认为你没有任何其他选择。至少，添加ARIA属性可以让您合理地声称您已经完成了尽职调查，并尽可能地使其尽可能地易于访问。

祝好运！

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

0
投票

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

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

0
投票

使用马丁提供的关于aria-label attribut的信息，我写了以下代码行，适用于TinyCME 4：

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

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

必须有一个针对TinyMCE所要求的原始元素的label，在我的例子中是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的一些灵感

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.