1. Качество кода

1.1 Правильный ли у сайта Doctype?

Doctype (document type declaration) сообщает валидатору версию (X)html, которая используется. Доктайп должен быть описан вверху каждой страницы. Доктайп важнейший компонент, обозначающий соответствие или, по крайней мере, попытки соответствия страницы (X)html стандартам. Если Doctype на странице не описан, эта страница не сможет пройти валидацию. Fix your site with the right doctype

1.2 Используется ли charset?

Если браузер, которым пользователь просматривает web-страницу не сможет правильно определить кодировку на странице, пользователь увидит нечитаемый текст. Кодировка сайта в первую очередь важна для тех, кто создает многоязычные сайты. Но даже, если на Вашем сайте используется один язык, обьявлением кодировки не следует пренебрегать. Tutorial: Character sets & encodings in XHTML, HTML and CSS

1.3 Код (X)html валидный?

Валидный код браузер покажет на экране быстрей, чем не валидный. Валидный код в браузерах будет лучше, чем не валидный. С развитием интернета, браузеры начинают подчинятся стандартам, поэтому валидность кода становится очень важной для кроссбраузерного отображения в разных браузерах. What is valid code

1.4 css на сайте валидный?

Вы должены убедится в том, что нет ошибок в Вашем html и css, так как даже самые незначительные ошибки могут привести к некоректному отображению в браузере. What is valid code

1.5 Используются ли css хаки?

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

1.6 Используются ли лишние css классы и id?

Очень часто разработчики изучающие новые технологии и методы создают очень качественные css стили. Но вот html код напичкан кучей ненужных и лишних контейнеров "div" и идентификаторов " id". В следствии чего код html становится бессмысленным, а css стили запутанными. Markup tactics

1.7 Структурирован ли код на сайте?

Семантическая разметка - правильное использование html тегов, то есть по их прямому назначению. Хорошо структурированный html код имеет важное значение для широкого диапазона пользовательских программ (браузерами без поддержки css, текстовыми броузерами, поисковыми роботами). Semantically correct markup

1.8 Существуют ли сломанные ссылки на сайте?

1.9 Как обстоят дела у сайта с весом страниц и скоростью их загрузки?

Не заставляйте меня ждать... Эти мысли возникают у пользователей после просмотра сайта, который медленно грузится в браузере. Даже пользователи с быстрым интернетом устают от долгой загрузки сайта. Speed Up Your Site: Web Site Optimization

1.10 Существуют ли ошибки в JavaScript на страницах сайта?

2. Степень разделения между содержанием и представлением на сайте

2.1 Используется ли css для всех аспектов представления(шрифты, цвет, внешние границы, внутрение границы и т.д)

Используйте css для контроля над расположением (layout) и отображением (presentation). Web Content Accessibility Guidelines 1.0 - checkpoint 3.3

2.2 Все ли фоновые изображения описаны в css или некоторые встречаются в (X)html?

Целью web-разработчиков должнен быть чистый и валидный html код. Для этого следует удалять все оформление из html и переноса его в css. Why use CSS to separate content from presentation?

3. Доступность для пользователей

3.1 Прописан ли атрибут alt="" для всех важных изображений в (X)html?

Для всех важных не текстовых элементов (изображений) на сайте создавайте текстовое описание. Web Content Accessibility Guidelines - checkpoint 1.1

3.2 На сайте используются относительные еденицы вместо абсолютных едениц размера шрифта?

Используйте относительные еденицы для размеров элементов вместо абсолютных. Web Content Accessibility Guidelines - checkpoint 3.4

3.3 Не ломается ли лейаут сайта, если увеличить размер шрифта?

3.4 Есть ли на сайте видимая ссылка "пропустить"?

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

Обязательно сгрупирируйте ссылки и дайте пользователям возможность пропустить эти ссылки при просмотрет страницы. Section 508

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

3.5 Используются ли на сайте доступные формы?

Использование форм пользователями с физическими недостатками может сильно их затруднить. Ведь навигация по текстовому содержимому намного проще, чем навигация по полям форм. Accessible forms

3.6 Используются ли на сайте доступные таблицы?

Для табличных данных следует использовать идентификаторы заголовков строк и колонок. Для таблиц в несколько логических уровней используйте дополнительные средства html, чтоб связать логически строки с их заголовками. Web Content Accessiblity Guidelines - checkpoint 5.1

3.7 Достаточная ли на сайте цветная яркость/контраст?

Обеспечте достаточный контраст между цветом основного фона и цветом текста. Web Content Accessibilty Guidelines - checkpoint 2.2

3.8 Используется ли только цвет для оформления критической информации?

Гарантируйте, что вся информация переданная цветом, также доступна без цвета, к примеру, с помощью контекста или элементами логической разметки. Web Content Accessibilty Guidelines - checkpoint 2.1

Есть три типа цветного нарушения; Deuteranope (форма красного/зеленого цветного дефицита), Protanope (другая форма красного/зеленого цветного дефицита) и Tritanope (синий/желтый дефицит - очень редкий).

3.9 Предусмотрена ли задержка для выпадающих меню(для пользователей с замедленной моторикой)?

3.10 Существует ли описание для ссылок(для слепых пользователей)?

Текст ссылок должен быть достаточно значащим, чтобы иметь смысл, когда читается не из контекста. Текст ссылки должен быть кратким. Web Content Accessibility Guidelines 1.0 - checkpoint 13.1

4. Доступность для устройств

4.1 Работает ли Ваш сайт в старых браузерах?

Прежде чем начинать создавать css стили для лейаута сайта необходимо определить степень кроссбраузерности (коректного отображения). Тоесть в каких браузерах Ваш сайт будет нормально отображатся. Colored boxes - one method of building full CSS layouts

4.2 Доступно ли содержимое сайта, если отключить css?

4.3 Доступно ли содержимое сайта с выключенными изображениями?

4.4 Работает ли сайт в текстовых браузерах, таких как Lynx

4.5 Коректно ли будет выглядеть распечатка страниц?

Для любой html страницы можно прикрепить css стили вывода на печать, что не будет затрагивать разметку сайта. Going to print

4.6 Сайт работает в Hand Held устройствах?

4.7 Есть ли у сайта набор метаданных (metadata)?

Метаданные (metadata) - информация, понятная для машин. W3C - Metadata and Resource Description

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

4.8 Корректно ли отображается сайт при разных размерах браузера?

5. Простота использования

5.1 Существует ли визуальная иерархия на сайте элементов?

Используйте визуальное выделение наиболее важных элементов на Ваших страницах. Create a Clear Visual Hierarchy

5.2 Различимы ли заголовки разных уровней?

Используйте заголовки разных уровней, чтоб показать структуру информации на Вашем сайте. Заголовки нужно использовать согласно их спецификации. Web Content Accessibility Guidelines 1.0 - checkpoint 3.5

5.3 Навигация на сайте простая и понятная?

Навигация на Вашем сайте должна быть простой и понятной, а так же давать понять пользователю на какой странице он находится. Design Tutorial - Navigation

5.4 Последовательная ли навигация на сайте?

Используйте одинаковый стиль для Вашей навигации на всех страницах, это поможет пользователям не запутатся и найти нужную им информацию. Juicy studios - Navigation

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

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

5.6 Существует ли карта сайта и страница контактов? Легко ли их найти?

Большинство карт сайта не могут передать всю сложность структуры сайта. Поэтому следует помнить, что карта сайта должна оставатся картой сайта, а не головоломкой по навигации на сайте. Site Map Usability

5.7 Если сайт большой, есть ли инструмент поиска по сайту?

5.8 Доступна ли ссылка на главную страницу сайта с любой страницы?

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

Для простоты перемещения пользователями по сайту следует оформлять ссылки подчеркиванием, чтоб пользователи легко могли отличить ссылки от обычного сайта. Guidelines for Visualizing Links

5.10 Ссылки посещенные пользователями выделяеются другим цветом?

Для того, чтоб пользователи знали, какие страницы они уже посещяли, ссылки на посещенные страницы нужно выделять другим цветом. Change the Color of Visited Links

6. Управление сайта

6.1 Есть ли у сайта страница ошибки 404?

Если пользователь при наборе адресса сайта совершили орфографическую ошибку или пытается попасть на страницу, которой уже не существует, он не найдет то что искал. Создайте страницу ошибки 404, чтоб указать пользователю на его ошибку. The perfect 404

6.2 Используются ли на сайте СЕО дружественные ссылки?

Большинство поисковых машин (за исключением некоторых, к примеру, Google) не внесут адресс Вашей страницы в свой индекс, если в адресе используются символ "?" или другие служебные символы. Создавайте дружественные ссылки на своем сайте, чтоб пользователи могли его найти используя поисковики. Search Engine-Friendly URLs

Одно из самых неудобных элементов сети с точки зрения юзабилити является именно url сайта. Однако короткие и понятные адресса сайтов легко решают эту проблему. How to make URLs user-friendly

6.3 Доступен ли Ваш сайт без "www"?

6.4 Создана ли для сайта пиктограмма ?

пиктограмма (Favicon) - это маленькое изображение в разных разрешениях, которое присутствует почти на всех профессинально созданных ресурсах в интернете. Это изображение используется для закладок и может дать web-мастеру дополнительный инструмент для раскрутки сайта. Favicon.com

пиктограмма не является обязательным элементом сайта. Однако, если пиктограмма отсуствует, то эта ошибка записывается в лог-файл ошибок.

Данный список был опубликован еще в 2004 году, но не утратил свою актуальность даже сейчас.

Оригинал статьи: Web standards checklist