Эта статья была предоставлена моим хорошим другом, доступный дизайнер и соучредитель The Южной Африки веб — стандартов и доступности группы , Франк Pálinkás . Это первая часть серии из двух частей, в которой рассматривается новый доступный способ предоставления контекстно-зависимой справки как для полей формы, так и для полной формы (продолжение в части 2).
Метод справки по полю
Наши цели
- Содержит всю контекстно-зависимую справку в разметке веб-формы, расположенной под каждой меткой поля.
- Управляйте состоянием открытия / закрытия справки с помощью действий пользователя через ненавязчивый DOM / JavaScript.
- Откройте справку, активировав / щелкнув изображение значка справки справа от метки поля.
- Закройте справку, активировав / щелкнув изображение значка справки во второй раз.
- Если в браузере отключены скрипты:
- Автоматически отображать содержание справки под каждой меткой поля.
- Отключите ссылки привязки, применяемые ко всем изображениям значков справки.
Ниже приведен скриншот окончательной формы, над которой мы работаем. Кроме того, вы можете перейти по этой ссылке на рабочий экземпляр формы . (Открывается в новом окне / вкладке)
Справка по полю HTML Структурная разметка
Каковы преимущества этого метода?
- Справка находится на той же веб-странице, что и форма. Он не является внешним по отношению к нему, как в методе справки по форме.
- Никакое всплывающее окно или новое окно не требуется, чтобы показать помощь. Это важный фактор, касающийся доступности веб-сайтов и стандартов .
- Если в пользовательском агенте / браузере отключен JavaScript, контекстно-зависимая справка будет автоматически отображаться под каждым именем поля.
- Элементы привязки, прикрепленные к элементам изображения значка справки, которые открывают и закрывают справку, будут удалены, поскольку для запуска ее отображения не требуется никаких действий.
- Важное примечание: этот метод также позволяет пользователям, зависимым от клавиатур, перемещаться по каждому полю и легко активировать справку. Это важный компонент удобства использования и доступности техники.
Ненавязчивый метод перекрестных ссылок / связанных контейнеров 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, который открывает и закрывает текст контекстно-зависимой справки под каждым именем поля, когда пользователь запускает значок справки по полю.
- Код содержит три функции:
- function addLoadEvent (func) Эта функция позволяет загружать и выполнять несколько сценариев, связанных с веб-страницей, и выполнять их так, как задумано.
- function init () Эта функция устанавливает нулевое начальное отображение контейнера справки, а затем устанавливает связь между идентификатором изображения поля и идентификатором контейнера справки div.
- 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) */
Достижение целей
Выполните следующие действия, чтобы проверить справку по контекстно-зависимым полям в следующей форме (открывается в новом окне / вкладке) :
- Активация мыши:
- Щелкните значок справки рядом с меткой поля в форме, чтобы открыть контекстно-зависимую справку.
- Нажмите на ту же самую иконку помощи снова, чтобы закрыть справку поля.
- Активация клавиатуры:
- Нажмите клавишу TAB, чтобы сфокусироваться на значке справки.
- Нажмите клавишу ВВОД на клавиатуре, чтобы открыть контекстную справку для этого поля.
- Снова нажмите клавишу ВВОД, чтобы закрыть контекстно-зависимую справку для этого поля.
- Отключите скрипты в вашем браузере:
- Обновите веб-страницу.
- Раздел справки каждого поля будет отображаться под его ярлыком.
- Гиперссылки в изображениях значков справки будут отключены.