Текст книги "Шаблоны проектирования веб-приложений"

UNOBTRUSIVE STYLE SHEETS (НЕНАВЯЗЧИВЫЕ ТАБЛИЦЫ СТИЛЕЙ)

Проблема

Страницы, использующие только структурную разметку, не выглядят визуально презентабельными. Большинство дизайнеров полагается на таблицы стилей (например, каскадные таблицы стилей), чтобы улучшить отображение страниц, располагая их во множестве столбцов, используя необходимые шрифты и цвета и добавляя изображения. Хоть добавление таблиц стилей может значительно улучшить отображение страниц, однако, если их использование неуместно, они могут делать страницы недоступными некоторым пользователям.

Решение

Добавьте таблицы стилей так, чтобы они могли адаптироваться к различным видам использования и режимов работы браузера – заблокированные, недоступные, с плохой поддержкой, пользовательские и т. д. каскадные таблицы стилей – и могли удовлетворить потребности самой широкой возможной аудитории. Кроме того, разработайте таблицы стилей таким образом, чтобы пользователи имели необходимую гибкость для корректировки отображения, чтобы улучшить тем самым удобочитаемость страницы.

Зачем

Как уже говорилось (см. шаблон PROGRESSIVE ENHANCEMENT ранее в этой главе), таблицы стилей – это способ описания представления страницы. Однако дизайнерские предпочтения могут сделать страницу недоступной людям с нарушением зрения, если, например, на странице нельзя увеличить размер текста или изменить цвета. Когда пользователи имеют возможность «накладывать» их собственное представление на предложенное дизайнером/издателем оформление, страница не только становится более пригодной для использования, но также растет ее доступность для текстовых браузеров, «экранных дикторов», экранных луп, программ типа «Braille reader» и других вспомогательных технологий.

Как

Следуя принципу прогрессивного улучшения (PROGRESSIVE ENHANCEMENT) прежде всего структурируйте страницу так, чтобы ее порядок приобрел смысл (см. шаблон SEMANTIC MARKUP ранее в этой главе). Затем добавьте разметку, используя таблицы стилей, так чтобы прикрепление таблиц стилей не привело к значительному снижению доступности страницы.

Храните разметку страницы и таблицы стилей в отдельных файлах

Храните описания всех таблиц стилей во внешних каскадных таблицах стилей, а не вкладывайте их в индивидуальные страницы и не сохраняйте их параллельно с элементами разметки. На отдельные файлы таблиц стилей можно будет сослаться, используя теги <link> или @import (рис. 11.2). Если все описания стилей хранятся в отдельном файле, также легче будет изменить один внешний файл, а не обновлять каждую прикладную страницу.

Рис. 11.2. Два общих подхода обращения к внешним таблицам стилей

Используйте относительные единицы для размеров шрифта, чтобы давать возможность пользователям изменять размер текста

Используя относительные единицы, такие как «em»[25]25
  «Em» – эм, ширина прописной буквы M латинского алфавита (относительная мера ширины шрифта). – Прим. пер.


[Закрыть], % или ключевые слова, можно ввести функцию, позволяющую пользователям менять размер текста, столь необходимую в браузерах Firefox, Safari или Internet Explorer. Несмотря на то что пиксел (px) считается относительной единицей, браузер Internet Explorer (версия 6 и старше) не позволяет изменять текст, размеченный в пикселах. Однако Internet Explorer 7 имеет функцию изменения масштаба отображения страницы; она меняет масштаб не только текста, а всей страницы.

Возможно, некоторые пользователи не знают, как изменить размеры текста, используя средства управления браузером. Поэтому позаботьтесь о простоте способа изменения размера текста (рис. 11.3).

Рис. 11.3. Сайт Washington Mutual позволяет пользователям изменять размер шрифта нажатием одной из кнопок в правом верхнем углу страницы

Позвольте пользовательским таблицам стилей заменять таблицы стилей автора

Пользовательские таблицы стилей – это файлы CSS, созданные пользователями и использующиеся, чтобы заменить таблицы стилей автора и сделать страницы более удобными для чтения. Например, пользователь может заменить цвет фона на черный, а цвет текста – на желтый, а также увеличить размер шрифта, сделав страницу более удобочитаемой. Большинство популярных веб-браузеров позволяет пользователям задавать и использовать свою собственную таблицу стилей по таблице стилей дизайнера/издателя.

Браузеры отдают предпочтение пользовательским таблицам стилей, если таблицы стилей автора не отмечены описанием!important. Отсутствие возможности заменить стили автора может в некоторых случаях сделать страницы нечитаемыми. Поэтому старайтесь не использовать описание!important в таблицах стилей.

Связанные шаблоны проектирования

Даже при использовании CSS ненавязчивым методом, важно использовать структурные теги для разметки страницы, чтобы страницы могли быть доступными без таблиц стилей (SEMANTIC MARKUP). Кроме того, таблицы стилей должны быть добавлены только после того, как будет создана структура страницы (PROGRESSIVE ENHANCEMENT).

UNOBTRUSIVE JAVASCRIPT (НЕНАВЯЗЧИВЫЙ JAVASCRIPT)

Проблема

При использовании JavaScript пользователи получают более богатую интерактивность, что делает взаимодействие с веб-приложением более приятным. Однако не все веб-браузеры поддерживают JavaScript, к тому же пользователи или системные администраторы могут отключить JavaScript из-за их политики безопасности рабочего места или собственного предпочтения. Поэтому веб-приложения, зависящие от JavaScript, могут стать недоступными по крайней мере некоторым пользователям.

Решение

ИспользуйтеJavaScript «ненавязчиво», т. е. присоединяйтеJavaScript к странице таким образом, чтобы пользователи без поддержки JS не теряли возможность работы с веб-приложением.

Зачем

«Ненавязчивое» использование JavaScript даже в больших количествах позволяет веб-приложениям быть функциональными, независимо от JavaScript. Когда язык JavaScript поддерживается и включен, вебприложение может иметь улучшенную интерактивность.

Как

Следуя шаблону PROGRESSIVE ENHANCEMENT, сначала структурируйте страницу (SEMANTIC MARKUP), добавьте необходимые улучшения представления (UNOBTRUSIVE STYLE SHEETS), затем увеличьте интерактивность браузера, используя язык JavaScript так, чтобы, если он не доступен, не затрагивались структурный слой и слой отображения, а также не ставилось под угрозу само использование вебприложения.

Храните разметку страницы и сценарии JavaScript отдельно

Храните все, связанное с JavaScript для веб-приложения, в отдельных JS-файлах. Не храните сценарии непосредственно на странице и не внедряйте их в разметку HTML. Сошлитесь на них тегом <script> следующим образом:

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

Хранение файлов JavaScript отдельно от структуры страницы так же упрощает процедуру внесения изменений в сценарии, так как отпадает необходимость обновления индивидуальных страниц приложения.

Используйте методы DOM, чтобы привязать функции к событиям страницы

Не включайте функции JavaScript в разметку страницы. Не вызывайте таким образом функции JS, использующие подходы, показанные на рис. 11.4.

Рис. 11.4. Так называемые «навязчивые» способы привязки JavaScript представляют собой вызов функций JavaScript вместе с разметкой страницы

Вызов функций JavaScript из разметки страниц может препятствовать их корректной работе в браузерах, где язык JavaScript отключен или недоступен. Самым лучшим способом в таком случае будет являться привязка функций к различным элементам страницы, используя методы создания сценариев DOM[26]26
  DOM или Document Object Model («Объектная модель документа») ссылается на способ представить документы HTML и XML так, чтобы ими можно было управлять, используя технологии создания сценария, например JavaScript. Для получения дополнительной информации см. www.w3.org/TR/DOM-Level-3-Core/introduction.html.


[Закрыть]. Используйте такие методы DOM, как getElementById и getElementsByTagName, чтобы найти какой-либо элемент или ряд элементов и затем присвоить специфическим событиям определенное поведение, например, click, mouse over и т. д. (рис. 11.5).

Рис. 11.5. Этот отрывок кода имеет доступ ко всем ссылкам в пределах документа (выделенных тегом <a>) и присваивает сценарию атрибут onclick

Не используйте раскрывающиеся списки для выполнения навигации или представления формы

Не используйте JavaScript, чтобы перейти на другую страницу или изменить результаты на веб-странице, когда пользователи меняют пункт в выпадающем списке. Обычно это достигается при помощи обработчика событий onchange в JavaScript. Таким образом, пользователи будут выбирать пункт меню и нажимать на смежную кнопку формы, чтобы перейти на страницу, соответствующую пункту, который они выбрали.

Если раскрывающийся список используется, чтобы представить форму или перейти на другую страницу, то пользователям клавиатуры будет чрезвычайно трудно, если даже не сказать невозможно, выбрать соответствующую опцию. Например, в случае с переходом на другую страницу, когда пользователь выбирает пункт из списка, запускается событие onchange, и пользователь немедленно перемещается к выбранной странице.

Если кому-то из пользователей вспомогательных технологий необходимо будет выбрать последний пункт в выпадающем списке, то единственным способом для него будет являться неоднократный возврат на страницу со списком после выбора пункта и выбор следующего до тех пор, пока очередь не дойдет до последнего элемента.

Связанные шаблоны проектирования

Использование UnobtrusiveJavaScript требует, чтобы страницы были построены по принципу прогрессивного улучшения (PROGRESSIVE ENHANCEMENT) и чтобы слой «деятельности» JavaScript был полностью отделен от структурных слоев и слоев представления (созданных при помощи семантической разметки (SEMANTIC MARKUP) и ненавязчивых таблиц стилей (UNOBTRUSIVE STYLE SHEETS) соответственно) так, чтобы при отключенном языке JavaScript сама страница не стала недоступной.

ACCESSIBLE FORMS (ДОСТУПНЫЕ ФОРМЫ)

Проблема

Формы могут быть затруднительны в использовании, если они спроектированы без расчета на пользователей клавиатуры и вспомогательных технологий, таких как экранный диктор или программа Braille reader.

Решение

Расположите элементы формы и добавьте теги, расширяющие доступность страницы, в разметку, чтобы сделать формы более доступными для пользователей вспомогательных технологий. Как минимум объедините элементы формы с метками, используя теги <label>, а элементы формы, объединенные в группы, – тегами <fieldset>, и установите соответствующие последовательности, чтобы было удобно перемещаться по элементам формы при помощи клавиши Tab, используя атрибут tabindex.

Зачем

Формы – это основа веб-приложений. Их доступность гарантирует приложению самую высокую досягаемость. Использование тегов <label> и группировка элементов формы тегами <fieldset> также придает элементам значение и помогает создать семантическую структуру разметки (см. шаблон SEMANTIC MARKUP ранее в этой главе). Эти методики не только делают формы доступными для пользователей вспомогательных технологий, но они также делают их более пригодными для использования и удобочитаемыми для пользователей без ограничений.

Как

Прежде всего следуйте шаблонам в главе 2, чтобы сделать формы пригодными для использования и доступными. Убедитесь, что формы выстроены по логическому порядку и что пользователю будет легко ассоциировать элемент вида с его меткой.

Используйте теги <LABEL> для идентификации определенных элементов формы

Используйте теги <label>, чтобы связать метки полей и соответствующие им элементы форм, как это сделано в примере:

<label for="firstName">Имя:</label>

<input type="text" id="firstName" name="firstName" />

В этом примере поле для ввода имени имеет идентификатор «firstName», который ссылается на тег <label>, использующий атрибут «for» для привязки метки «Имя» к соответствующему полю ввода текста.

Помимо того что тег <label> помогает экранным дикторам корректно связывать метки с управлением формой, вне зависимости от того, где это управление расположено, он также помогает зрячим пользователям, когда они взаимодействуют с переключателями или расставляют флажки. В последнем случае тег <label> позволяет пользователям нажать на метку, чтобы выбрать пункт соответствующего переключателя или поставить флажок. Таким образом, пользователи имеют большее поле для нажатия и не ограничены участками управления переключателя или пунктами расстановки флажков (рис. 11.6).

Рис. 11.6. В этой форме на сайте Orbitz пользователи могут нажать не только на переключатель, но и на подсвеченные участки

Кроме того, чтобы обеспечить представление информации экранными дикторами в правильном порядке, расположите метки, относящиеся к текстовым полям или выпадающим спискам, перед элементами формы в разметке. Это не применяется к переключателям и флажкам, куда метки ставятся после соответствующих элементов управления.

Группируйте элементы управления форм при помощи тегов <FIELDSET>

Используйте тег <fieldset>, чтобы сгруппировать связанные элементы управления форм, а тег <legend> – чтобы создать заголовок сгруппированным элементам (рис. 11.7). Это поможет экранным дикторам найти и сообщить о группах пользователям. Теги <fieldset> и <legend> также могут быть оформлены при помощи таблиц стилей, чтобы сделать их визуально привлекательными (Adams, 2008).

(а)

(б)

Рис. 11.7. Эта форма (а) создана при помощи тегов <fieldset> и <legend>, как это показано на листинге (б), а также при помощи некоторых приемов таблиц стилей (не показано)

Сделайте доступным управление формами с клавиатуры

Большинство браузеров позволяет пользователям перемещаться по ссылкам, фреймам и элементам форм на странице, используя клавишу Tab , которая при нажатии перемещает фокус от одного элемента к другому в порядке их расположения в разметке. В большинстве случаев, когда страница размечена правильно, этот порядок будет верен. Однако в случаях, когда такую последовательность требуется изменить для удобства заполнения формы, используйте атрибут tabindex для элементов формы (рис. 11.8; см. шаблон KEYBOARD NAVIGATION в главе 2).

Рис. 11.8. Параметр tabindex позволяет пользователям управлять элементами формы логическим путем

Другой способ сделать клавиатуру форм более доступной и эффективной – использовать атрибут accesskey, который предоставляет пользователю доступ к часто используемым участкам страницы или формы при помощи клавиатуры (рис. 11.9). Например, параметр accesskey может использоваться для перемещений между основными навигационными опциями веб-приложения, но и при наличии соответствующих ссылок, чтобы перемещаться по страницам с помощью клавиатуры. На рисунке 11.10 приведены коды модификации для различных браузеров, использующих атрибут accesskey.

Рис. 11.9. Задавая клавишу S в параметре accesskey в теге <label> для окна поиска, мы позволяем пользователю перейти к полю поиска одновременным нажатием клавиш Alt (а также Ctrl или любой другой комбинации) и S

Рис. 11.10. Коды модификации для различных браузеров, использующих атрибут accesskey

Используйте JavaScript «ненавязчиво», когда происходит проверка формы на валидность

Многие формы используют технологию сценариев с клиентской стороны, например, JavaScript, чтобы манипулировать формами или проверять на валидность ввод данных пользователями. Поэтому выполните проверку формы на валидность на веб-сервере, независимо от того, работают ли эти формы в пользовательских браузерах, использующих JavaScript. Это гарантирует, что формы останутся доступными для всех, включая тех, чьи браузеры не поддерживают JavaScript (см. о подходе HIJAX, упомянутом в шаблоне PROGRESSIVE ENHANCEMENT ранее в этой главе).

Связанные шаблоны проектирования

Шаблоны, обсуждаемые в главе 2, такие как LOGICAL GROUPING, REQUIRED FIELD INDICATORS, SMART DEFAULTS, FORGIVING FORMAT, KEYBOARD NAVIGATION, INPUT HINTS/PROMPTS и ACTION BUTTONS, являются самыми важными при создании рабочих и доступных форм.

ACCESSIBLE IMAGES (ДОСТУПНЫЕ ИЗОБРАЖЕНИЯ)

Проблема

Изображения недоступны для пользователей с нарушениями зрения.

Решение

Предоставьте необходимые текстовые альтернативы для изображений и прекратите использование лишней графики. Существует распространенное заблуждение, что, для того чтобы сделать страницу доступной, все изображения необходимо удалить. Это неверно. Иллюстрации, графика и другие изображения (включая анимированные изображения) не только помогают облегчить понимание для пользователей без зрительных нарушений, но также и помогают людям с некоторыми видами когнитивных нарушений или нарушений памяти (Brewer, 2005). Создавая текстовые альтернативы изображениям, веб-дизайнеры могут избежать создания альтернативной версии всего веб-приложения.

Зачем

Делая изображения доступными путем предоставления текстовой альтернативы, вы одновременно помогаете пользователям экранных дикторов и тем, у кого по каким-либо причинам недоступны изображения в их браузерах, понять смысл и функцию того или иного изображения. Дополнительным преимуществом является то, что таким образом в сеть попадают значение и описание таких изображений, которые могут быть прочитаны поисковыми системами – такую страницу легче найти. Будучи использованы соответствующим образом, изображения могут сделать страницу визуально более приятной, и могут быть включены в страницу, не привлекая к себе особого внимания.

Как

Предоставьте текстовую альтернативу для изображений, описывающую их смысл. Это выполняется с использованием параметра alt для всей, связанной с изображениями, разметки: теги <img>, теги <area> для горячих точек на картах и теги input type="image" (рис. 11.11).

(а)

(б)

(в)

Рис. 11.11. Примеры альтернативного текста на картинках (а) и картах (б), тег input (type = "image") (в)

Используйте пустой параметр ALT для декоративных изображений

Декоративные изображения – это изображения, которые используются, например, в качестве визуального разделителя страницы, прозрачные изображения или фотографии-заполнители. Использование атрибута alt для таких изображений не нужно, поскольку их описание не будет нести значимой информации. Попросту не заполняйте этот параметр: <img src="spacer. gif" alt="" />. Когда изображения используются только в декоративных целях, они считаются фоновыми. Пользователи экранных дикторов не будут видеть эти изображения, поэтому надобности в незаполненном атрибуте alt не возникает. Это может быть легко выполнено при помощи каскадных таблиц стилей (рис. 11.12).

(а)

(б)

(в)

(г)

Рис. 11.12. В этом примере из блога «CSS Zen Garden» дизайнер включил декоративное изображение под разделом на заднем плане (а). Это можно увидеть по HTML-коду (б) и соответствующему стилю (в). Дизайнер использует файл breakrule.gif как фоновое изображение и устанавливает его внизу абзаца, чтобы использовать как разделитель между этим и следующим разделами. Аналогичный подход используется для заголовка раздела, текст которого – «So What Is This About?» – обрамлен тегами <h3><span>, а его каскадные таблицы стилей показывают изображение как фон. Альтернативный текст скрыт от зрячих пользователей установкой display: none, но по-прежнему доступен пользователям экранных дикторов. Другой вариант избежать отображения текста – использовать большое отрицательное значение текстового отступа (например, – 9999px). (Взято с сайта: www.csszengarden.com/?cssfile=/204/204.css&page=0)

Используйте параметр LONGDESC для детализированных описаний изображения

Параметр alt используется для изображений, когда короткого описания для них достаточно. В случаях когда изображение не может быть описано кратко, используйте атрибут longdesc, чтобы сослаться на страницу с детальным описанием этого изображения (рис. 11.13).

Рис. 11.13. При описании диаграммы альтернативного текста (в данном случае «Продажи за 2000–2003 годы») может быть недостаточно, чтобы описать, что представляет из себя диаграмма. В целях облегчения понимания диаграммы пользователями объедините информацию о диаграмме на отдельной странице (в примере ей будет являться traffic_chart.html) и привяжите к ней ссылку с атрибутом изображения longdesc

Поскольку параметр longdesc не поддерживается вспомогательными технологиями старого типа, дизайнеры зачастую помещают рядом с изображением «ссылку описания» – «d-link» (Description link), которая открывает тот же файл описания, что содержится в параметре longdesc (рис. 11.14).

Рис. 11.14. Пример ссылки описания, которая ссылается на страницу и предоставляет детализированное описание изображения

Используйте осмысленный текст для описания изображений

При описании изображений с использованием параметров alt или longdesc укажите информацию об изображении и/или функцию, которую оно несет. Пример, показанный на рис. 11.15, взят с сайта webAIM. org. Он иллюстрирует хороший подход к увеличению наглядности текста вставкой в него изображения значка PDF. Таковы четыре потенциальных варианта альтернативного текста для изображения значка PDF:

A. «Employment Application».

B. «Файл PDF».

C. «Значок формата PDF».

D. «», потому что информационное содержание изображения представлено в тексте.

Рис. 11.15. Использование ссылки и изображения одновременно

Вышеизложенное обсуждалось в интернет-статье «Надлежащее использование альтернативного текста» (www.webaim.org/techniques/alttext/):

Обратите внимание, что изображение находится в пределах ссылки. Если бы оно находилось за ее пределами, альтернативный текст (alt) мог восприниматься иначе. В данном случае, поскольку изображение дополняет информацию о функции ссылки, важно, что оно находится непосредственно внутри ссылки и читается вместе с ней. Это действительно важно, поскольку к ссылкам зачастую обращаются, исходя из окружающего их контекста.

Вариант A – «Employment Application» – избыточен, учитывая текст ссылки, и является не лучшим вариантом. Вариант Б – наилучший. Он ясно предоставляет информацию, которую подразумевает изображение, – ссылка ведет к файлу формата PDF. Функция «скачивания заявления» описана в тексте ссылки, поэтому она не нуждается в повторном описании в альтернативном тексте. Вариант В – «Значок формата PDF» – описывает непосредственно изображение, однако больше всего не соответствует контексту. При другом контексте пользователю, возможно, было бы важно знать, что это действительно значок, тогда можно было бы включить данное описание в альтернативный текст. Последний вариант (нулевой или пустой альтернативный текст) не предоставляет важную информацию, которую несет изображение.

Примечание

Еще один вариант – использовать значок PDF в качестве фонового изображения и установить для него таблицу стилей и текстовый формат PDF в разметке HTML следующим образом:

HTML:

<a href="/docs/employement_application.pdf"

class="pdfdoc">

Download the Employment Application(PDF, 300KB)

</a>

CSS:

a.pdfdoc {

/* Указывает, что изображение имеет размер 24px × 24px

и пробел в 6px слева */

background: transparent url(/images/icon_pdf.doc)

no=repeat right;

padding-right: 30px;

}

Избегайте использования текста в графике

Изображения графических форматов (таких как GIF, JPEG и PNG) становятся пикселизированными при увеличении. Когда текст используется в таких изображениях, пользователи, увеличившие экран в целях удобочитаемости, вынуждены будут уменьшить его, чтобы прочитать этот текст (рис. 11.16). Удобство чтения также ставится под угрозу, когда текст наложен на другое изображение или структурированный фон. Поэтому избегайте использования текста в графике настолько, насколько это возможно; это так же помогает интернационализации (см. шаблон EXTENSIBLE DESIGN в главе 10).

Рис. 11.16. Текст, использованный в графике, становится пикселизированным при увеличении, и его трудно прочесть

Связанные шаблоны проектирования

Использование изображений не должно ставить под угрозу семантическую разметку (SEMANTIC MARKUP). Поэтому используйте декоративные изображения как фоновые, применяя каскадные таблицы стилей так, чтобы они не были включены в структуру страницы (см. шаблон UNOBTRUSIVE STYLE SHEETS ранее в этой главе).