Статьи

Вызов доступной контекстно-зависимой справки с помощью ненавязчивого DOM / JavaScript – часть 1

Эта статья была предоставлена моим хорошим другом, доступный дизайнер и соучредитель The Южной Африки веб — стандартов и доступности группы , Франк Pálinkás . Это первая часть серии из двух частей, в которой рассматривается новый доступный способ предоставления контекстно-зависимой справки как для полей формы, так и для полной формы (продолжение в части 2).

Метод справки по полю

Наши цели

  1. Содержит всю контекстно-зависимую справку в разметке веб-формы, расположенной под каждой меткой поля.
  2. Управляйте состоянием открытия / закрытия справки с помощью действий пользователя через ненавязчивый DOM / JavaScript.

    1. Откройте справку, активировав / щелкнув изображение значка справки справа от метки поля.
    2. Закройте справку, активировав / щелкнув изображение значка справки во второй раз.
  3. Если в браузере отключены скрипты:

    1. Автоматически отображать содержание справки под каждой меткой поля.
    2. Отключите ссылки привязки, применяемые ко всем изображениям значков справки.

Ниже приведен скриншот окончательной формы, над которой мы работаем. Кроме того, вы можете перейти по этой ссылке на рабочий экземпляр формы . (Открывается в новом окне / вкладке)

Пример снимка экрана готовой формы

 

Справка по полю HTML Структурная разметка

Каковы преимущества этого метода?

  1. Справка находится на той же веб-странице, что и форма. Он не является внешним по отношению к нему, как в методе справки по форме.
  2. Никакое всплывающее окно или новое окно не требуется, чтобы показать помощь. Это важный фактор, касающийся доступности веб-сайтов и стандартов .
  3. Если в пользовательском агенте / браузере отключен JavaScript, контекстно-зависимая справка будет автоматически отображаться под каждым именем поля.
  4. Элементы привязки, прикрепленные к элементам изображения значка справки, которые открывают и закрывают справку, будут удалены, поскольку для запуска ее отображения не требуется никаких действий.
  5. Важное примечание: этот метод также позволяет пользователям, зависимым от клавиатур, перемещаться по каждому полю и легко активировать справку. Это важный компонент удобства использования и доступности техники.

Ненавязчивый метод перекрестных ссылок / связанных контейнеров DOM / JavaScript (разработанный Гезом Лемоном из группы Paciello)

Метод перекрестных ссылок DOM / JavaScript создает связь между двумя элементами разметки.

  • В этом случае он связывает элемент изображения (содержит триггер открытия / закрытия изображения значка справки) с элементом контейнера div help (содержит содержимое справки).
  • Создается связь между каждым атрибутом и значением идентификатора изображения поля и соответствующим атрибутом и значением идентификатора контейнера справки div.
  • Каждый из этих атрибутов id и их значения работают вместе с внешним файлом fieldhelp.js, чтобы вызвать поведение открытия и закрытия справки.

Определения для выделенного кода в следующем блоке кода:

<img id = «subjecthelp»> Атрибут id изображения значка справки со своим значением subjecthelp.

<div id = «containerubjecthelp»> Атрибут идентификатора контейнера справки div с его значением containerubjecthelp.
  • Примечание: две пустые строки кода размещены между каждым разделом поля в блоке кода для удобства чтения.
    <form action="#" method="post" id="enquiryform">
                <fieldset>
                    <legend>
                        Enquiry Form
                    </legend>
                    <h3 class="form" title="help instructions">Activate/Click a Help icon to open or close help.</h3>
                    <div>
                        <label for="subject" title="Subject dropdown list">
                            Subject <span class="req">(required)</span>
                            <img id="subjecthelp" alt="help for subject field" class="help" width="16" height="16" src="images/help_small.gif">
                        </label>
                    </div>
                    <div id="containersubjecthelp">
                        <p class="cshelp">
                            Please select a subject in the dropdown list.
                        </p>
                    </div>
                    <div>
                        <select name="subject" id="subject">
                            <option value="">Select a Subject</option>
                            <option value="Option 1">Help Authoring Tools</option>
                            <option value="Option 2">Microsoft HTML Help</option>
                            <option value="Option 3">Web-based Help</option>
                            <option value="Option 4">Context-Sensitive Help</option>
                        </select>
                    </div>
                    <div>
                        <label for="name" title="Name field">
                            Name <span class="req">(required)</span>
                            <img id="namehelp" alt="help for name field" class="help" width="16" height="16" src="images/help_small.gif">
                        </label>
                    </div>
                    <div id="containernamehelp">
                        <p class="cshelp">
                            Please enter your full name in the textbox.
                        </p>
                    </div>
                    <div>
                        <input type="text" name="name" id="name">
                    </div>
                    <div>
                        <label for="email" title="Email field">
                            Email <span class="req">(required)</span>
                            <img id="emailhelp" alt="help for email field" class="help" width="16" height="16" src="images/help_small.gif">
                        </label>
                    </div>
                    <div id="containeremailhelp">
                        <p class="cshelp">
                            Please enter your email address in the textbox.
                        </p>
                    </div>
                    <div>
                        <input type="text" name="email" id="email">
                    </div>
                    <div>
                        <label for="message" title="Message field.">
                            Message <span class="req">(required)</span>
                            <img id="messagehelp" alt="help for message field" class="help" width="16" height="16" src="images/help_small.gif">
                        </label>
                    </div>
                    <div id="containermessagehelp">
                        <p class="cshelp">
                            Please enter your message in the textbox.
                        </p>
                    </div>
                    <div>
                        <textarea name="message" id="message" rows="6" cols="30">
                        </textarea>
                    </div>
                    <div>
                        <label for="update" title="Receive updates checkbox">
                            Send Me Updates <span class="req">(optional)</span>
                            <img id="updateshelp" alt="help for updates checkbox" class="help" width="16" height="16" src="images/help_small.gif">
                        </label>
                    </div>
                    <div id="containerupdateshelp">
                        <p class="cshelp">
                            Check the box if you want to receive updates.
                        </p>
                    </div>
                    <div>
                        <input class="checkbox" type="checkbox" name="update" id="update" value="n">
                    </div>
                    <label for="submit" title="Click to submit your data.">
                        <input class="submit" type="submit" id="submit" value="Submit Enquiry">
                    </label>
                </fieldset>
            </form>

      Помощь по полю Ненавязчивый код DOM / JavaScript

      Ссылка на внешний файл DOM / JavaScript

      • Ссылка на исходный (src) внешний файл DOM / JavaScript (fieldhelp.js) применяется в разделе <head> </ head> на веб-странице метода справки по полю, показанной ниже.
      • Обратите внимание, что это относительная ссылка на папку сценариев, где хранится файл fieldhelp.js .
      • Важное примечание: все файлы всегда должны храниться в основной папке проекта.
        <head>
        	<script type="text/javascript" src="scripts/fieldhelp.js"></script>
        </head>
        

          Код DOM / JavaScript

          Используйте этот ненавязчивый DOM / JavaScript для запуска контекстно-зависимой справки по полю.

          Ниже приведен внешний код DOM / JavaScript, который открывает и закрывает текст контекстно-зависимой справки под каждым именем поля, когда пользователь запускает значок справки по полю.

          • Код содержит три функции:

            1. function addLoadEvent (func) Эта функция позволяет загружать и выполнять несколько сценариев, связанных с веб-страницей, и выполнять их так, как задумано.
            2. function init () Эта функция устанавливает нулевое начальное отображение контейнера справки, а затем устанавливает связь между идентификатором изображения поля и идентификатором контейнера справки div.
            3. function openClose (objElement) Эта функция предоставляет тумблер, чтобы открыть справку, а затем снова закрыть ее.
          • После загрузки веб-страницы метода справки по полю DOM / JavaScript приказывает браузеру скрыть всю контекстно-зависимую справку с помощью инструкции objHelp.style.display = ‘none’.
          • Когда пользователь щелкает или активирует значок справки поля, objHelp.style.display = ‘none’ изменяется на objHelp.style.display = ‘block’.
          • Откроется раздел контекстно-зависимой справки под именем поля.
            /* start addLoadEvent(func) function - allows scripts to load/register gracefully - design by Simon Willison */
            function addLoadEvent(func)
            {
            var oldonload = window.onload;

            if (typeof window.onload != 'function')
            {
            window.onload = func;

            }
            else
            {
            window.onload = function()
            {
            if (oldonload)
            {
            oldonload();
            }

            func();
            }
            }
            }

            addLoadEvent(init);

            addLoadEvent(function()
            {

            /* add more code here to run on page load */

            addLoadEvent(openClose(objElement));

            });

            /* end multiple script load function */

            /* start init function - design by Gez Lemon */
            function init()
            {
            var objImage = document.getElementsByTagName('img');

            var objHelp, objAnchor, objClone;

            for (var iCounter = 0; iCounter < objImage.length; iCounter++)
            {
            if (objImage[iCounter].className == 'help')
            {
            objHelp = document.getElementById('container' + objImage[iCounter].id);

            objAnchor = document.createElement('a');

            objClone = objImage[iCounter].cloneNode(true);

            objAnchor.setAttribute('href', '#');

            objAnchor.onclick = function()
            {
            return openClose(this);
            };

            objAnchor.appendChild(objClone);

            objHelp.style.display = 'none';

            objImage[iCounter].parentNode.replaceChild(objAnchor, objImage[iCounter]);
            }
            }
            }
            /* end function init() */

            /* start openClose(objElement) function - design by Gez Lemon */
            function openClose(objElement)
            {
            var objHelp = document.getElementById('container' + objElement.firstChild.id);

            if (objHelp)
            {
            if (objHelp.style.display == 'none')
            {
            objHelp.style.display = 'block';
            }
            else
            {
            objHelp.style.display = 'none';
            }
            }
            return false;
            }
            /* end function openClose(objElement) */

              Достижение целей

              Выполните следующие действия, чтобы проверить справку по контекстно-зависимым полям в следующей форме (открывается в новом окне / вкладке) :

              1. Активация мыши:

                1. Щелкните значок справки рядом с меткой поля в форме, чтобы открыть контекстно-зависимую справку.
                2. Нажмите на ту же самую иконку помощи снова, чтобы закрыть справку поля.
              2. Активация клавиатуры:

                1. Нажмите клавишу TAB, чтобы сфокусироваться на значке справки.
                2. Нажмите клавишу ВВОД на клавиатуре, чтобы открыть контекстную справку для этого поля.
                3. Снова нажмите клавишу ВВОД, чтобы закрыть контекстно-зависимую справку для этого поля.
              3. Отключите скрипты в вашем браузере:

                1. Обновите веб-страницу.
                2. Раздел справки каждого поля будет отображаться под его ярлыком.
                3. Гиперссылки в изображениях значков справки будут отключены.