Статьи

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

Март 4, 2018

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

Использование метода справки по форме

Вызов традиционных контекстно-зависимых всплывающих окон справки

Этот метод был реализован в истории веб-приложений.

  • Гиперссылка из веб-формы (значок справки или другое средство) создается для раздела или файла внешней справки, в котором содержатся подробные инструкции по заполнению каждого поля формы.
  • Контекстно-зависимая справка вызывается JavaScript, который создает вторичное окно, содержащее справку на странице веб-формы.
  • Это действие или поведение обычно называют «вызовом всплывающего окна».


Появление веб-стандартов и доступности сети высветило трудности, с которыми вспомогательные устройства (например, программы чтения с экрана и т. Д.) Сталкиваются при работе с всплывающими окнами.

  • Этот новый интерес породил так называемый ненавязчивый DOM / JavaScript и его использование в таких случаях, как всплывающие окна контекстно-зависимой справки.
  • Метод справки по форме показывает, как реализовать ненавязчивый DOM / JavaScript для вызова внешнего контекстно-зависимого всплывающего окна справки из веб-формы стандартным и доступным способом.

Форма справки

Как это работает

Пользователь нажимает или активирует ссылку на значок справки в веб-форме.

  1. DOM / JavaScript предписывает браузеру открыть внешний файл контекстно-зависимой справки.
  2. Браузер переходит по ссылке на внешний файл контекстно-зависимой справки и открывает его в новом окне текущей веб-страницы.


Что делает использование ненавязчивого DOM / JavaScript «хорошей практикой» в соответствии с современными веб-стандартами и методами обеспечения доступности?

  • В разметке мы заменяем атрибут обработчика события onclick атрибутом rel .
  • При этом:

    • Атрибут rel теперь служит той же цели и дает тот же результат, что и замененный атрибут обработчика события onclick.
    • Мы отделили слой Поведения (DOM / JavaScript) от слоя Структуры (разметка и содержимое) веб-страницы.
    • Когда в браузере отключен сценарий и пользователь активирует значок справки, внешний контекстно-зависимый файл справки откроется в новом полноразмерном окне браузера.


Ниже приведен скриншот того, над чем мы работаем:

[img_assist | nid = 2178 | title = Скриншот окончательной формы | desc = | link = none | align = none | width = 450 | height = 450]

Активация контекстно-зависимой формы справки

Важный! Сообщите пользователю, что при нажатии на значок справки откроется справка в новом окне.

Следуя хорошей практике, пользователь должен знать, что произойдет, прежде чем выполнять какое- либо действие.


  1. Активация мыши:
    • Щелкните значок справки в форме, чтобы вызвать контекстно-зависимую справку.
    • Нажмите [X] в строке заголовка окна справки, чтобы закрыть его.
  2. Активация клавиатуры:
    • Нажмите клавишу TAB, чтобы сфокусироваться на значке справки .
    • Нажмите клавишу ВВОДА, чтобы открыть справку.
    • Нажмите клавиши ALT + F4 вместе, чтобы закрыть окно справки.
  3. Выключите скрипты в вашем браузере, обновите веб-страницу, а затем снова активируйте / щелкните по той же иконке справки.

    • Контекстно-зависимая справка теперь откроется в новом полноразмерном окне, закрывающем эту веб-страницу.

HTML- код разметки для метода справки формы

Разметка контекстно-зависимой справки начинается в строке кода 5 и заканчивается строкой кода 7 в блоке кода.

  • Ниже приведен блок HTML-кода (область серого цвета), содержащая всю разметку, необходимую для построения формы.
  • Внешняя каскадная таблица стилей (master.css) размещает значок контекстно-зависимой справки справа от текста инструкции элемента <h3> для быстрой связи и доступа к ней.
  • Для вашего редактирования и справочных целей эта внешняя таблица стилей CSS содержится в основной папке проекта вместе с остальными рабочими частями этого руководства.

Определения кода в блоке кода:

  • <a> </a> Это элемент привязки (ссылка), который содержит следующие атрибуты и их значения:
  • rel = «help» Этот атрибут разметки и его значение действуют как структурный «крючок» для внешнего DOM / JavaScript.
  • href = «HelpExample.htm» Этот атрибут разметки и его значение определяют путь гиперссылки на веб-страницу внешней контекстно-зависимой справки.
  • <img — — — src = «images / help_small.gif» Этот атрибут разметки и его значение определяют исходное местоположение изображения значка внешней справки. 

 

<form action="" method="post" id="enquiryform">
            <fieldset>
                <legend>Enquiry Form</legend>
                <h3 title="help instructions">Click the icon to view help in a new window.<a rel="help" href="HelpExample.html"><img alt="helpicon" title="Click to view help in a new window." width="16" height="16" src="../media/icons/help_small.gif"></a></h3>
                <div>
                    <label for="subject" title="Subject dropdown list.">
                        Subject <span class="req">Required</span>
                    </label>
                    <br>
                    <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>
                    <br>
                    <label for="name" title="Name field">
                        Name <span class="req">Required</span>
                    </label>
                    <br>
                    <input type="text" name="name" id="name">
                    <br>
                    <label for="email" title="Email field">
                        Email <span class="req">Required</span>
                    </label>
                    <br>
                    <input type="text" name="email" id="email">
                    <br>
                    <label for="message" title="Message field">
                        Message <span class="req">Required</span>
                    </label>
                    <br>
                    <textarea name="message" id="message" rows="6" cols="30"></textarea>
                    <br>
                    <label for="updates" title="Updates checkbox">
                        Send Me Updates <span class="req">Optional</span>
                    </label>
                    <br>
                    <input type="checkbox" name="updates" id="updates" value="n">
                </div>
                <label for="submit" title="Click this button to submit your enquiry.">
                    <input class="submit" type="submit" id="submit" value="Submit Enquiry">
                </label>
            </fieldset>
        </form>

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

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

Поместите ссылку на внешний ненавязчивый файл DOM / JavaScript в разделе <head> </ head> веб-страницы.

Определения разметки:

  • <head> </ head> Этот элемент разметки содержит элемент <script> </ script>, который содержит относительный путь к внешнему файлу DOM / JavaScript.
  • src = «scripts / formhelp.js» Этот атрибут разметки элемента <script> </ script> содержит относительный путь к расположению внешнего источника (src) файла DOM / JavaScript.

Важное примечание: Все файлы всегда должны храниться в основной папке проекта, чтобы поддерживать их ассоциации, как написано в коде.

<head>
        <script type="text/javascript" src="../js/formhelp.js"></script>
</head>

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

Внешний код DOM / JavaScript устанавливает
relзначение атрибута
"help"в
<a></a>элементе с его
hrefатрибутом, чтобы открыть веб-страницу контекстно-зависимой справки (HelpExample.htm) на веб-странице метода справки формы.

Следующий блок кода содержит три функции:

  • function addLoadEvent (func) Эта функция позволяет регистрировать и загружать несколько веб-страниц на веб-странице.
  • function formhelp () Эта функция устанавливает атрибут rel в качестве ловушки для ссылки привязки, которая указывает на внешний файл справки.
  • функция popUp (winURL) Эта функция предоставляет триггер для открытия внешнего файла справки в новом окне.
  • This DOM/JavaScript code block is kept in a formhelp.js file in the scripts folder in the same project folder with the:
    • Form Help Method web page
    • Context-Sensitive help web page
    • images folder
    • CSS files
  • Notice the rel attribute with its value of «help» and its relationship to the anchor («a») element href attribute which in the markup points to the external help file.
  • This is the hook that the DOM/JavaScript needs to follow and open a new window containing the Context-Sensitive help.
  • You can also set the:
    • width and height of the new Context-Sensitive help window;
    • add a status bar to it (highly recommended);
    • give the user the ability to resize the new Context-Sensitive help window if they choose to do so;
    • add scrollbars to it.
  • These additions to the function are shown in the window.open(winURL,»popup», …), line 39 in the following code block.
  • If scripting is turned off in the browser the Context-Sensitive help page when activated, will gracefully open in a new, full sized window.

/* start multiple load function - 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(window.onload);
addLoadEvent(function()
{
    /* add more code here to run on page load if necessary */
});
/* end multiple load function */

/* start window.onload = function() */
window.onload = function()
{
    if (!document.getElementsByTagName) return false;    
    
    var lnks = document.getElementsByTagName("a");
    
    for (var i = 0; i < lnks.length; i++) 
	{
        if (lnks[i].getAttribute("rel") == "help") 
		{
            lnks[i].onclick = function()
			{
                popUp(this.getAttribute("href"));               
                return false;
            }
        }
    }
}
/* end formhelp() function */

/* start popUp(winURL) function */
function popUp(winURL){
	window.open(winURL, "popup", "width=460,height=680,status=yes,resizable=yes,scrollbars=yes,screenX=600,screenY=200,top=200,left=600");
}

/* end popUp(winURL) function */

Click here to see the working form in action. So, if you have followed the series and read part 1 and now part 2, you will have discovered how Unobtrusive DOM/JavaScript achieves the desired result in calling Context-Sensitive help, and demonstrate how to keep the Structure, Presentation, and Behavior layers of a web page completely separate from one another ensuring good practice with current web standards and accessibility rules. So go ahead, make it part of your developer toolbox today!

I sincerely thank

Frank Palinkas

Technical Writer with Opera Software ASA


Websites:
http://frank.helpware.net/

Frank sincerely thanks (in alphabetical order)

Char James-Tanny

President of JTF Associates, Owner of helpstuff.com, Secretary of the Society for Technical Communication (S.T.C.)
Websites:
http://www.helpstuff.com
HAT-Matrix.com

Dana Worley

Manager — Applications Engineer, Campbell Scientific Inc.
Website: http://www.campbellsci.com

Dave Gash

Owner of HyperTrain dot Com. Author, Lecturer and Programmer of Technical Communications and Web Standards, encompassing (X)HTML, XML, XSLT, C.S.S., and D.O.M./JavaScript
Website: http://www.hypertrain.com

Gez Lemon

Principal Accessibility Engineer and Project Leader — The Paciello Group (T.P.G.)
Website:
http://juicystudio.com

Mike Paciello

Creator/Owner of Helpware.net, Helpware FAR HTML, and H2Reg
Website:
http://helpware.net

 

 

50
Share: