Веб-стандарти - це більше, ніж просто "бестаблічная верстка"
Для різних людей термін "веб-стандарти" означає різні речі. Для декого це просто "сторінки без таблиць", для інших - "правильний код". Однак веб-стандарти це щось набагатобільше. Сайт, простроенний з веб-стандартам, це сайт, який дотримується стандартів (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG і т.д.) і кращих відпрацьованих рішень (Дійсний код, доступний код, семантично правильний код , дружні URL-и)

Іншими словами сайт, постраждалихоенний по стандартам в ідеалі повинен бути легким, чистим, що була заснована в CSS, доступним, зручним і дружнім до пошукових серверів.

Про Перевірте списку

Цей перевірочний список не претендує на звання "супер-пупер" повного перевірочного списку. Можливойого ще можна доповнити та розширити. Що більш важливо, так це те, що цей список не варто розглядати як обов'язковий для кожного сайту, який вам доведеться розробляти. Це всього лише список рад, який можна використовувати:

як великий перелік усіх наявних веб-стандартов
як зручний інструмент для розробників, яким вони можуть користуватися при розробці сайтів
як посібник для тих розробників, які вирішили рухатися в напрямок веб-стандартів
Список
Якість коду
Вказано чи усторінок правильний Doctype?
Вказано Чи у сторінок charset?
Валід чи (X) HTML код сторінок сайту?
Дійсний Чи CSS-таблиці сайту?
Використовує чи сайт будь-які CSS-хакі?
Чи на сайті будь-які зайві і непотрібні доласо (class) і ідентифікатори (id)?
Чи добре структурований код сторінок?
Есть ли на сайте зламані посилання?
Як у сайту зі швидкістю завантаження сторінок і з їх розмірами?
Чи видає браузер які-небудь помилки JavaScript при роботі з країніцей?
Ступінь поділу контента й подання
Чи на сайті CSS для всіх аспектів оформлення сторінки (шрифти, кольори, відступи, границі й т.д.)?
Перенесена Чи вся декоративна графіка в CSS, або вона все ще зустрічається в (X) HTML-код? Чи використовується атрибут "alt" у всіх значимих зображеннях?
Чи використовується на сайті для шрифту відносні одиниці виміру замість фіксованих?
Ламається чи яким-небудь образом компонування страницы при збільшенні розміру шрифту?
Чи є на сторінці видима посилання "пропустити"?
Чи на сайті доступні форми?
Чи на сайті доступні таблиці?
Чи достатньо контрастним і яркі кольору на сторінках сайту?
Чи тільки колір для виділення критичної інформації?
Чи затримка в випадаючих меню (для користувачів з повільною моторики)?
Всі посилання містять опису (для сліпих користувачів)?
Доступність для устройств
Чи досить добре сайт працює і в сучасних і в старих браузерах?
Чи можна працювати з матеріалами сайту при відключеному CSS або в броузері, де немає підтримки CSS?
Чи можна працювати з матеріалами сайту при відключених зображеннях або при отсутствіі підтримки їх виведення на екран?
Чи працює сайт у текстових броузерах, таких як Lynx?
Чи добре виглядає сайт при роздруківці?
Чи працює сайт на наладонних пристроях?
Оснащений Чи сайт детальним набором метаданих?
Чи працює сайт у вікнах різних розмірів?
Основи юзабіліті
Чи є на сторінці чітка візуальна ієрархія елементів?
Чи легко відрізнити один рівень заголовків від іншого?
Чи досить легко зрозуміти навігацію по сайту?
Чи одноманітних навігація на всіх сторінках сайту?
Використовується ли на сайте прийнятний і Одноманітний мова текстів?
Чи є у сайта карта й сторінка з контактною інформацією? Чи легко їх знайти?
Якщо ваш сайт дуже великий, чи є на ньому інструмент пошуку?
Чи на кожній сторінці сайту посилання на його головну сторінку?
Підкреслені чи посилання?
Чітко Чи виділені кольором посилання, які користувач уже відвідав?
Управління сайтом
Есть ли у сайта зрозуміла й корисна сторінка помилки 404, яка працює з будь-якого рівня сайту?
Використовуються ли на сайте дружні URL-и?
Чи можна до вашого Сайт доступний, набравши адресу без "www"?
Чи є у сайта піктограма для закладок?

Якість коду

1. Вказано Чи у сторінок правильний Doctype?

Doctype (скорочено від "document type declaration" - "декларація типу документа") повідомляє валідатора, яка версія (X) HTML використовуємотся в вашій сторінці. Декларація повинна бути присутнім на початку кожної веб-сторінки. Doctype - ключовий компонент сторінки, що претендує на відповідність стандартам: ваша розмітка і CSS не пройдуть валідації, якщо у вашому документі відсутній Doctype.

2. Вказано Чи у страніц кодування (charset)?
Якщо користувальницький агент (наприклад браузер) не може самостійно визначити кодування вашої веб-сторінки, користувачі побачать на екрані нечітаемий текст. Ця інформація особливо важлива для тих, хто створює і підтримує багатомовні веб-сайти.Но вообще оголошення кодування дуже важливо для тих, хто створює сторінки в XHTML / HTML і CSS.

3. Валід чи (X) HTML код сторінок сайту?
Дійсний код браузер виведе швидше, ніж невалідний. Дійсний код браузер виведе краще, ніж невалідний. Все більше і больше браузери підкоряються стандартам, і тому все більш важливим є Дійсний і стандартний HTML-код.

4. Дійсний Чи CSS-таблиці сайту?
Не забувайте переконатися, що ваш HTML-код і CSS-сторінки не містять помилок, так як помилки приведуть до перекручення отображенію документа на екрані.

5. Використовує чи сайт будь-які CSS-хакі?
По суті кожен сам вирішує, які хакі йому використовувати. Це залежить від того, наскільки добре ви знайомі з усіма варіантами, і від того, який дизайн ви хочете створити.

6. Чи на сайті які-небудь зайві й непотрібні класи (class) і ідентифікатори (id)?
Я помітив, що розробники, освоюючи нові прийоми і технології, часто створюють чудові CSS-таблиці, і при цьому - поганий XHTML-код. Особливо часто в XHTML-коді встречаются непотрібні і зайві "div" і "id". З-за цього HTML-код втрачає стрункість, а CSS-файли стають заплутаними.

7. Чи добре структурований код сторінок?
Семантично правильна розмітка передбачає використання html-елементів за їх прямомуу призначенням. Добре структурований HTML-документ добре сприймається всім спектром користувальницьких програм (браузерами без підтримки стильових таблиць, текстовими броузера, надолонників, пошуковими роботами і т.д.)

8. Чи є на сайті "зламані" посилання?
& quot; Зломані "лінки розчаровують користувачів і потенційно ховали від вашого сайту ваших клієнтів." Зламані "посилання можуть також позначитися на те, як пошукові роботи будуть індексувати ваш сайт.

9. Як у сайту зі швидкістю завантаження сторінок і з іх розмірами?
Не змушує мене чекати ... Ось яку думку увазі користувачі при проведенні всіх досліджень. Навіть користувачі з широким каналом втомлюються від повільною завантаження.

10. Чи видає браузер які-небудь помилки JavaScript при роботі зі сторінкою?
Internet Explorer для Windows дозволяє включити відладчик, який вискакує на екран всякий раз, коли на сторінці буде виявлена помилка в JavaScript. Ця опція знаходиться в меню "Internet Options" на закладці "Advanced". Приберіть галочку з пункту "Disable scriptdebugging ".

Ступінь поділу контента й подання

1. Чи на сайті CSS для всіх аспектів оформлення сторінки (шрифти, кольори, відступи, границі й т.д.)?
Використовуйте стильові таблиці для управління компоновкой сторінки та її зовнішнім виглядом

2. Перенесені Чи вся декоративна графіка в CSS, або вона все ще зустрічається в (X) HTML-код?
Ваша мета, як веб-розробника, полягає в тому, щоб прибрати з html-код вашої сторінки все оформительских елементи. Завдяки чому дод стане чистішим і семантично правильніше.

Доступність для користувачів

1. Чи використовується атрибут "alt" у всіх значимих зображеннях?
Кожен нетекстовий елемент супроводжуєте текстовим описом

2. Чи використовується на сайті для шрифту відносні одиниці виміру замість фіксованих?
У коді і в стильових таблицях використовуйте відносні, а не абсолютні одиниці для зазначення розмірів елементів. Влада народу - відносні розміри шрифтів.
Розмір ШРіфта нехай вибирають самі користувачі.

3. Ламається чи яким-небудь образом компонування сторінки при збільшенні розміру шрифту?
Проведіть простий тест. Відкрийте свій веб-сайт в будь-якому браузері, де є функція зміни розміру шрифту. Тепер збільшіть размер шрифту. Ще раз збільшіть. І ще раз ... Подивіться на свій веб-сайт. Як і раніше, чи компонування сторінки залишилася незмінною? При розробці сайту не розраховуйте, що у відвідувача в браузері розмір шрифту збігається з вашим.

4. Чи є на сторінці видима посилання "пропустити"?
"... Слід передбачити спосіб, який дозволяє користувачеві перейти до контенту сайту, пропустивши навігацію ..."
"... Сгруппіруйте родинні посилання, опишіть групу і уявіть спосіб користувачам пропустити цю групу при перегляді ..."

5.Чи на сайті доступні форми?
Форми на веб-сторінках не самая проста річ для людей з фізичними вадами. Одна справа - навігація по сторінці з текстовим матеріалом, і зовсім інша - перехід по полях форми і введення інформації в неї.

6. Використовуютьсяли на сайте доступні таблиці?
Що стосується таблиць. Не забудьте вказати заголовки для стовпців і рядів ... Для таблиць, де є два і більше логічних рівнів рядів і стовпців, скористайтеся допоміжними елементами мови html, щоб зв'язати логічно комірки даних з комірокта заголовків.

7. Чи достатньо контрастним і яркі кольору на сторінках сайту?
Переконайтеся, що різниця між кольором фону та кольором тексту досить контрастно, щоб не викликати труднощів при читанні у людей зі зниженим сприйняттям кольору.

8. Чи тільки колір для виділення критичної інформації?
Переконайтеся, що вся важлива інформація, виділена кольором, також виділена при відсутності кольору, наприклад за допомогою контексту або елементами логічної розмітки. Існує в основному три типи порушення колірноїсприяти: дейтеранопія (порушення в сприйнятті червоного і зеленого кольорів), протанопія (інша форма порушення сприйняття червоного і зеленого кольорів) та трітанопія (порушення сприйняття синього і жовтого кольорів - дуже рідкісний випадок)

9. Чи затримка в випадаючих меню (для користувачів з повільною моторики)?
У людей з повільною моторики можуть виникнути труднощі при роботі з меню, які для них будуть працювати дуже швидко.

10. Всі посилання містять достатньо описовий текст (для сліпих користувачів)?
Посилання повинні бути досить зрозумілими, щоб вони мали сенс при читанні поза контексту - або при простому читанні або при читанні у вигляді списку.

Доступність для пристроїв

1. Чи досить добре сайт працює і в сучасних і старихбраузерах?
Перш ніж починати верстали сторінки з використанням CSS, определитесь, які браузери ви збираєтесь підтримувати і до якого ступеня.

2. Чи можна працювати з матеріалами сайту при відключеному CSS або в броузері, де немає підтримки CSS?
На ваш сайт можуть зайти люди, у яких браузер не підтримує CSS або підтримка CSS вимкнено. Якщо ваші сторінки правильно структуровані, у таких відвідувачів не виникне жодних проблем при роботі з ними.

3. Чи можна працювати з матеріалами сайту при відключених зображенняхабо при відсутності підтримки їх виведення на екран?
Деякий користувачі переглядають веб-сайти не завантажуючи графічні елементи сторінок. Так поступают в особливо ті, у яких підключення до Інтернету занадто повільне. Ваші сторінки не повинні викликати ускладнень в роботі у таких відвідувачів.

4. Чи працює сайт у текстових броузерах, таких як Lynx?
Текстовий браузер це як би комбінація відключених графіки і CSS. Текстові браузери покладаються цілком на структуру документа при створенні зображення на екрані.

5.Чи добре виглядає сайт при роздруківці?
До будь-якого (X) HTML-документу можна прикріпити стиль для виводу на друк і для цього не потрібно чіпати розмітку самого документа.

6. Чи добре працює чи сайт на наладонних пристроях?
Цей момент викликає найбільші труднощі, так як в даний час немає единообразия в тому, як наладонние пристрої підтримують веб-сторінки. Однак деякі рішення у компонуванні сторінок підтримуються на надолонників краще, ніж інші. Підтримка наладонних пристроїв залежить від цільової аудиторії вашегпро сайту.

7. Оснащений Чи сайт детальним набором метаданих?
Метадані - це інформація, яка зрозуміла для машин. Метадані - це структурована інформація, яка створюється людьми спеціально для того, щоб описати нею який-небудь ресурс. Іншими словамиі, метадані - це "дані про дані".

8. Чи працює сайт у вікнах різних розмірів?
Серед веб-розробників існує стійке переконання, що з кожним роком середні розміри екрана у відвідувачів ростуть. Деякі розробники переконані, що середній розмір е.крана у відвідувачів їхніх сайтів складає по ширині 1024 пікселів. Ну а что насчет користувачів з меншими розмірами екранів або з власниками надолонників? Чи є вони частиною вашої цільової аудиторії, і чи будуть вони відчувати труднощі при роботі з вашим сайтом?

Основи юзабіліті

1. Чи є на сторінці чітка візуальна ієрархія елементів?
Організуйте і виділяйте важливість того чи іншого матеріалу за допомогою розмірів, відступів і логічних зв'язків.

2. Чи легко відрізнити один рівень заголовківвід іншого?
Використовуйте заголовки для того, щоб розкрити структуру документів, при цьому використовуйте їх у відповідність зі специфікацією.

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

4. Чи одноманітних навігація на всіх сторінках сайту?
Якщо на кожній сторінці вашого сайту навігація дотримується одного і того ж стилю, відвідувачам легше буде працювати з сайтомі вони швидше будуть знаходити потрібну їм інформацію.

5. Використовується ли на сайте прийнятний і Одноманітний мова текстів?
Ясний і простий мова матеріалів дозволяє ефективно вести діалог з відвідувачем. Не забувайте, що ваш сайт можуть читати користувачі, для якихваш мова не є рідною.

6. Чи є у сайта карта й сторінка з контактною інформацією? Чи легко їх знайти?
Більшості карт сайтів не вдається розкрити багаторівневу структуру архітектури сайту. У тестах на юзабилити користувачі часто ігнорують карту сайту абопросто не можуть її знайти. Складність картки також є проблемою: карта повинна бути саме картою, а не головоломки по навігації.

7. Якщо ваш сайт дуже великий, чи є на ньому інструмент пошуку?
Для маленького сайту функція пошуку не особливо потрібна. Всегда знайдуться люди, які ніколи не користуються пошуком по сайту. Тим не менш функція пошуку є додатковим хорошим інструментом навігації по сайту для відвідувачів.

8. Чи на кожній сторінці сайту посилання на його головну сторінку?
Багато користіВатель зарившісь в глибини сайту хочуть швидко потрапити на його головну сторінку. Головна сторінка є як би відправною точкою для таких користувачів, на якій вони заново збираються з силами, щоб пірнути в нові глибини сайту.

9. Підкреслені чи посилання?
Для полноти сприйняття користувачами посилань текст посилань повинен бути оформлений іншим кольором і підкреслено. Відвідувачі не повинні метать по сторінці в пошуках посилання.

10. Чітко Чи виділені кольором посилання, які користувач уже відвідав?
Найголовніше, якщо чітке виділенийи посилання, які користувач уже відвідав, він не натисне на них випадково, і не буде попадати на ту ж саму сторінку, де вже побував.

Управління сайтом

1. Чи є у сайта зрозуміла й корисна сторінка помилки 404, яка працює з будь-якогорівня сайту?
Ви запросили сторінку - або набравши URL в адресному рядку, або клацнувши по посиланню - і виявили, що провалилися в Ніщо. Дружні до користувача веб-сайти подадуть руку допомоги втратив користувачеві, а інші сайти будуть розраховувати на те, що браузер пользователь сам їх як-небудь витягне з безодні кіберпростору.

2. Використовуються ли на сайте дружні URL-и?
Більшість пошукових серверів (за винятком лише деяких - наприклад, Google) не будуть індексувати сторінки, в чиїх URL-ах присутній символ "?"або якої-небудь інший символ (скажемо "&" або "="). Що гарного у веб-сайті, якщо його ніхто не може знайти? З точки зору користувальницького інтерфейсу найжахливішим є URL-и. Тим не менше, якщо вони короткі, логічні й самоісправляющіеся, з ними стає зручно працювати.

3. Чи можна до вашого сайту доступу, набравши адресу без "www"?
В цілому не дуже критично вимогу, а іноді його навіть неможливо задовольнити. Але тим не менш завжди непогано, якщо у ваших відвідувачів є така можливість. Якщо відвідайітель набере назва вашого сайту без "www" і не зможе до нього доступу, це буде погано і для вас і для нього.

4. Чи є у сайта піктограма для закладок?
Піктограма для закладок (favicon) це графічний файл з картинкою в декількох дозволах. Проні як правило використовуються на всіх професійно виконаних сайтах. Піктограма для закладок дає веб-майстру ще один спосіб реклами сайту. Зрозуміло, піктограма для закладок не є критичною. Проте її відсутність породжує хвилю помилок 404 у ваших лог-файлах. Такі браузери як IE завждиа запитують у сервера цю піктограму, коли користувач поміщає посилання на ваш сайт в закладки. Якщо на вашому сайті цієї піктограми немає, в логи потрапить помилка "404 File not found". Так що наявність такої піктограми допоможе вам значно скоротити розмір файлу помилок. Те ж саме относітся і до файлу "robots.txt".

Про це списку

Даний список з'явився вперше в загальних рисах в списку розсилки Web Standards Mail list в травні 2004 року. Він був представлений групі Sydney Web Standards Group 5 серпня 2004 року.