Формы

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

Рис. 3.4. Меню без кнопки типа Submit, если вы не можете пользоваться мышкой, напоминает дверь без ручки. Когда вы выбираете первый пункт меню — в данном случае Chocolate, форма передается. У пользователей, работающих с клавиатурой, нет возможности выбрать другой вкус, сразу несколько вкусов или изменить выбор

Отсутствие кнопки типа Submit (Отправить) затрудняет работу с меню, осо­бенно людям, использующим клавиатуру. Выбрав в меню необходимый вам вкус, вы начнете процесс передачи формы, как только нажмете на первую оп­цию. Само собой, шоколад не единственный вариант, доступный посетителям, у которых нет возможности пользоваться мышкой. Но если бы вы захотеЛи выбрать лимон, то понадобилась бы мышка. Добавление кнопки Submit позво­лит разрешить эту проблему без особых усилий. Такие незначительные нюан­сы разметки помогут сделать сайт более доступным (рис. 3.5).

Рис. 3.5. Добавление кнопки типа Submit сделает форму доступной для людей, работающих без мыши

JavaScript

Добавляя команды JavaScript в библиотеку, имейте в виду, что не все браузеры поддерживают этот язык. Некоторые пользователи (как ни странно, около 10%) предпочитают браузеры с поддержкой JavaScript, но отключают этот язык в целях безопасности; многие используют устройства, не поддерживающие JavaScript. Особенно важно принимать это во внимание, создавая элементы навигации, содержащие JavaScript. Иногда элементы навигации бывают даже не видны, пока мышь просто перемещается по экрану; при наведении же мыши на опреде­ленный участок экрана появляется меню. Вероятно, это забавно для тех, у кого работает JavaScript, но другим таким сайтом пользоваться невозможно. Создай­те подобную навигацию без JavaScript, разместив текст меню где-нибудь на стра­нице. Лучше всего сделайте этот текст более доступным с помощью атрибута tabindex, благодаря которому у пользователей, работающих без мыши, первый пункт меню сразу будет выделен.

Еще один альтернативный вариант функциям JavaScript представлен в сле­дующем примере разметки. Проведя некоторое время в Сети без мыши, вы пой­мете, насколько важна эта простая работа.

<а href=»thepage.html» onmouseout=»swapImgRestore()»

onblur=»swapImgRestore()»

onmouseover=»swaplmage(‘Imagel’,», ‘susan2.gif’, 1)»

onfocus=»swaplmage (‘Imagel’, »,’ susan2 .gif ,1) «ximg

src=»susan.gif

name=Imagel» width=»200″ height=»200″ alt=»Susan»

Эти два набора функций JavaScript создают элемент ролловер (одновременное нажатие нескольких клавиш). Первый набор содержит два условия: onmouseout (наведение курсора) и onmouseover (курсор убран с объекта). Этот набор дос­таточно прост: когда пользователь наводит курсор на картинку, изображение susan.gif меняется на susan2.gif. Когда курсор убирается с картинки, условие onmouseout возвращает исходную картинку susan.gif. Но как быть с пользова­телями, у которых нет мыши? Как они смогут насладиться таким эффектом? Для этого служит второй набор. Дополнения onfocus и onblur использованы специально для него. Если при помощи табуляции переключиться на данную картинку, сработает событие onfocus и пользователь клавиатуры сможет насла­диться тем же эффектом, что и пользователь мыши. Событие onblur срабаты­вает, когда пользователь переключается на другой объект.

Расширение HTML-библиотеки

С каждым новым проектом у вас появляется больше полезных вещей для добав­ления в HTML-библиотеку, а также больше возможностей, позволяющих пользоваться ресурсами, которые вы создаете для себя. Разрабатывая малобюд­жетные сайты, вы будете постоянно использовать эти ресурсы, постепенно понижая цену производства. Накопление подобных материалов займет опре­деленное время, однако если внимательно относиться к создаваемым размет­кам, то в дальнейшем они обязательно пригодятся.

Posted in Экономичный Web-дизайн.