Доступность Web-сайта достижима

Доступность Web-сайта достижима

Обратили ли вы внимание, как доступность Web-сайта в пре­дыдущем разделе повлияла на экономию ваших средств? Сайт должен быть доступным и пригодным к использованию для людей со зрительными, двигательными и другими по­вреждениями так же, как и для всех остальных пользовате­лей. Доступный сайт — это тот, который может прочитаться на браузерах Брайля, голосовых браузерах и других подоб­ных устройствах. Также такой сайт должен работать на под­держивающих Web-серфинг мобильных телефонах, карман­ных компьютерах и других беспроводных и карманных устройствах. Доступность — это то, о чем я постоянно забо­чусь, но делаю это опосредованно. А все потому, что при со­здании сайта с использованием Web-стандартов доступность становится само собой разумеющейся вещью.

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

Рис. 7.5. А так сайт выглядит на карманном компьютере

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

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

Подумайте о том, как обрадуются ваши заказчики, когда они наконец нач­нут заботиться о доступности (если они еще не начали, то скоро начнут) и об­наружат, что ваш сайт является как раз доступным. Когда они поймут, сколько сэкономлено на том, что сайт не придется переделывать с самого начала, это наверняка положительно отразится на вашем благосостоянии.

Создайте сайт с хорошей разметкой

Согласитесь, что, помимо доступности и экономических преимуществ созда­ния грамотного XHTML-кода, всегда здорово потрудиться над чем-то, что при­носит и пользу и удовольствие одновременно. В моей жизни был период, когда я отыскивала и приводила в порядок старую мебель. Если субботнее утро на блошином рынке проходило особенно хорошо, я возвращалась домой с вели­колепно сделанным столом или стулом. Мое приведение в порядок обычно ограничивалось чисткой и незначительной починкой найденных предметов мебели. Если я приходила домой с чем-то, что было сделано плохо, мне прихо­дилось решать структурные проблемы и браться за клей, гвозди и краску.

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

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

Трудно сказать, к какому виду ответственности могут привлечь нас, Web-раз­работчиков, тем не менее мы должны быть ответственными за знание и исполь­зование самых передовых технологий в своем деле. Незнание Web-стандартов ставит нас в один ряд с подрядчиком, который построил дряхлую веранду. Это как минимум плохой пример. Конец урока.

Механика хорошего XHTML-кода

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

Для того чтобы привыкнуть к этому новому (на самом деле довольно старо­му) подходу к разметке, вам, возможно, понадобится некоторое время. Не удив­ляйтесь тому, что поначалу продуктивность работы будет не очень высокой. Не зря говорят: тяжело в учении — легко в бою. Потом вам будет гораздо проще создавать и переделывать сайты. Вы будете гораздо меньше работать с HTML;

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

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

1. XHTML должен начинаться с тегов, которые говорят браузеру о том, как их надо интерпретировать. Начните страницу с объявления типа доку­мента (Document Type Declaration ~ DTD) и с XHTML-объявления про­странства имен.

http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd     «>http://www.w3.org/1999/xhtml»    xml:lang=»en» lang=»en»>

2. Пишите теги строчными буквами. Если у вас привычка писать <Н1>, <BODY> и тому подобное, привыкайте писать <hl> и <body>. Многие
HTML-редакторы имеют установку, которая позволяет писать теги строч­ными буквами по умолчанию.

Определение    

Объявление типа документа (Document Type Declaration) сообщает браузеру, ка­кое определение типа документа (Document Type Definition ~ DTD) вы используете. Определение типа документа — это документ, который представляет собой список элементов и атрибутов, которые могут использоваться в SGML, XML или HTML-доку­ментах. Определение типа документа описывает, где каждый тег позволителен и ка­кие теги могут появиться внутри других тегов. У каждой версии XHTML есть определе­ние типа документа. Web-разработчики могут выбрать один из типов документов: XHTML Transitional (Переходный), XHTML Strict (Точный) и, если вы хотите разделить окно браузера на два или более фрейма, XTHML Frameset (Установка фреймов).

Определение    

Пространства имен (Namespaces) — это способ определить или квалифицировать элементы и атрибуты, используемые в XML, HTML или других документах разметки. Поскольку элементы и атрибуты могут приобрести двойной смысл в различных типах документов и программном обеспечении, вам нужно задать конкретное пространство имен, которое вы используете. Возможно, это покажется вам слишком нудной проце­дурой, но имейте в виду, что управление этими именами поможет предохранить ваши элементы от неправильного интерпретирования браузерами и устройствами просмот­ра. Это трудно понять, но легко сделать. Просто вставьте эту строку.

3. Возьмите все атрибуты в кавычки. Возможно, это лишняя перестрахов­ка — все равно что держать закрытыми двери в шкафу. Раньше вам не при­ходилось брать в кавычки атрибуты ширины (width) и высоты (height).
В HTML это было совершенно нормально:

<img  src=»images/susan.gif»   alt=»Жизнь  снова может  стать хорошей.» width=239 height=243>

XHTML требует, чтобы эти атрибуты были в кавычках, вот так:

<img  src=»images/susan.gif’   аИ=»Жизнь  снова может  стать хорошей.» width=»23 9″ height=»243″  />

4. Закройте все теги. Это будет самым трудным для выполнения изменени­ем. Если у вас сформировались плохие привычки, как у большинства из нас, вам придется стать дисциплинированнее. Если у вас стоит открытый тег <body>, вам придется его закрыть тегом </body>. Если у вас открытый тег абзаца <р>, закройте его тегом </р>.

Необходимо знать одну хитрость при закрытии тегов: вы должны закрыть даже те теги, у которых нет отдельных закрывающих тегов. Такие теги называ­ют элементами-одиночками, потому что они содержат только один тег; сюда входят метатеги, разрывы строки и теги изображений.

Определение

Метатеги (Meta Tags) в заголовке документа описывают документ. Метатеги содер­жат тему, автора, ключевые слова и другие описательные элементы о странице. Поис­ковые машины и индексаторы используют эти данные длятого, чтобы описывать и ссы­латься на сайт. Ниже приводится несколько метатегов, взятых с моего личного сайта и правильно созданных для XHTML с использованием закрывающего пробела и слэша:

<meta name=»author»   content=»Кэрри Бикнер.»   />

<meta name = «description» content=»Web-дневник о работе в библиотеке, Web-стандартах и библиографических радостях.

Содержит библиотечные истории от читателей и фотографии Нью-Йорка.»  /> <meta  name=»keywords»  content = «Кэрри   Бикнер,,   фотографии, Web-дневник, сплетни, стиль, библиотеки, доступность, Web-стандарты, Нью-Йорк.»   />

В старые добрые времена HTML 4.0 и более ранних версий тег новой стро­ки выглядел вот так:

<br>

В XHTML он должен быть закрытым. Добавьте к тегу пробел и слэш: <br />

Тег изображения в ранних версиях HTML выглядел следующим образом:

<img src=»shoe.gif» width=»239″ height=»243″  alt=»Фотография моей новой обуви.»>

Если вы используете язык XHTML, вам придется добавить пробел и слэш, прежде чем закрыть тег:

<img src=»shoe.gif» width=»239″ height=»243″  alt=»Фотография моей новой обуви.» />

5. Проверяйте ваши страницы. Поначалу это может вас испугать, но вскоре вы поймете, что процесс проверки полезен, даже увлекателен. Просто на­пишите URL-адрес страницы, над которой вы работаете, в странице HTML-валидатор (контролер) на сайте W3C (http://validator.w3.org), как по­казано на рис. 7.6; нажмите кнопку Submit (Отправить) и узнайте, на­сколько хорош ваш XHTML-код. Этот инструмент обнаружит большинство XHTML-ошибок. Когда вы научитесь выявлять ошибки в CSS, этот инстру­мент станет вашим лучшим другом.

• Примечание:    

Если вам кажется, что валидатор W3C работает медленно, используйте валидатор Web Design Group, который можно найти на сайте www.htmlhelp.com/tpols/validatior.

При исправлении первых нескольких страниц у вас появится такое понима­ние разметки, какого, возможно, никогда и не было. В отчете валидатора на рис. 7.6 пункты 2, 3 и 4 сообщают о том, что элемент страницы body содержит нежелательные элементы topmargin, leftmargin, marginwidth и marginheight. Говоря простым языком, это означает, что тег body содержит четыре характе­ристики (атрибута) полей, которые не используются в текущей спецификации XHTML.

Вот плохая разметка:

<body  bgcolor=»#ffffff»   topmargin=»0″   leftmargin=»0″

marginwidth=»0″

marginheight=»0″   onload=»preloadlmages();»>

А вот хорошая разметка, которую вы напишете, прочитав отчет валидатора: <body onload=»preloadlmages(); «>

Рис. 7.6. ВалидаторW3C- это инструмент, который проверяет, насколько правильно сделана ваша разметка. Он проверяет каждую строчку и сообщает о допущенных в разметке ошибках. Лри первом использовании валидатора вы его возненавидите; у вас сложится впечатление, что вы совсем не умеете писать разметку. Но по мере исправления ошибок на вашем сайте вы полюбите этот инструмент. Он станет вашим другом и помощником.

Эти ненужные атрибуты тега body — теги, введенные Microsoft и Netscape, которые никогда не являлись частью формальной спецификации W3C. В каче­стве других ошибок могут быть выявлены устаревшие элементы и атрибуты -они были в предыдущей версии HTML, но сейчас от них отказались.

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

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