TinyMCE Доступность: ярлык для - PullRequest
Новая
       7

TinyMCE Доступность: ярлык для

4 голосов
/ 23 ноября 2010

Одно из наших веб-приложений только что прошло 508 испытаний на соответствие.Мы используем TinyMCE версии 3 для разработки контента, и я понимаю, что он обычно имеет хорошую доступность.Однако одна из наших страниц содержит 3 или более экземпляров TinyMCE, каждому из которых предшествует label, указывающий, для чего предназначен экземпляр TinyMCE, но нам говорят, что это «неявные» метки, когда они должны быть «явными» метками (т.е. сfor атрибут).Проблема в том, что экземпляры TinyMCE - это просто iframes со сложным ассортиментом пользовательских HTML-элементов управления, тогда как, насколько я знаю, метод label / for работает только с традиционными элементами формы.Какова лучшая стратегия для получения «явного» ярлыка для экземпляра TinyMCE?

Спасибо!

Редактировать

Решения, исследованные с использованием label +for, которые не работают: наведение label на начальный textarea, наведение label на сгенерированный iframe.

Одно из возможных решений, которое я изучаю, заключается в том, чтобы охватить каждый экземпляр TinyMCEс ledgend + fieldset, но при тестировании с помощью JAWS 9.0, похоже, ничего не изменится, если fieldset не содержит элементов формы (например, input, type=text) и JAWS находится в режиме форм.

Ответы [ 3 ]

5 голосов
/ 12 декабря 2010

Появляется стандарт для решения именно такой проблемы: ARIA (Accessible Rich Internet Applications).Это все еще рабочий проект, но поддержка начинает появляться в последних программах чтения с экрана (JAWS 9, последние версии NVDA) при использовании с последними браузерами (IE 9, Firefox 3.6 (частичная версия) и 4.0, Chrome).

В этом конкретном случае взгляните на aria-label и aria-labelledby .Это атрибуты, которые будут добавлены к элементу BODY в виджете TinyMCE - или к IFRAME, в зависимости от того, какой из этих двух пунктов на самом деле фокусируется, когда пользователь вводит данные.Таким образом: 

<body aria-label="Edit document">

Атрибут aria-label просто указывает строку, которая служит меткой.Aria-labelledby (обратите внимание на две буквы L согласно британскому правописанию) работает как традиционный элемент LABEL в обратном порядке.То есть вы передаете ему идентификатор: 

<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-помечать, чтобы предотвратить избыточность.Однако я понятия не имею, будет ли это работать через границы документа.То есть, если 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.Людям со старыми программами чтения с экрана или браузерами не повезет, о чем подробно говорится в недавней статье A List Apart, Доступность WAI ARIA .Автор обосновывает предпочтение традиционным семантическим HTML-решениям, когда это возможно;но в твоем случае я не думаю, что у тебя есть другой выбор.По крайней мере, добавление атрибутов ARIA позволит вам обоснованно заявить, что вы проявили должную осмотрительность и приложили все усилия, чтобы сделать его максимально доступным.

Удачи!

Примечание для будущих читателей: ссылки на спецификацию ARIA, приведенные здесь, относятся к рабочему проекту сентября 2010 года.Если с тех пор прошло более нескольких месяцев, проверьте последние спецификации.

0 голосов
/ 19 декабря 2017

Используя информацию, предоставленную Уиллом Мартином относительно атрибута 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. e.g.:

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

Содержимое метки (только текст) добавляется как атрибут aria-label к тегу body внутри TinyMCE-iframe.

Программа чтения с экрана OSX забирает метку при выборе TinyMCE

Некоторое вдохновение от TinyMCE: Как связать событие после его инициализации

0 голосов
/ 23 ноября 2010

Если я правильно прочитал specs , свойство for должно действительно указывать на другой control на той же странице, как вы уже сказали.

Поэтому, я думаю, единственно верным вариантом является указание атрибута for на элемент <textarea>, который заменяет TinyMCE.Это имеет смысл, поскольку этот элемент отправляется на сервер после завершения редактирования.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...