Перевірочний список для веб-стандартів

Russ Weakley

Веб-стандарти - Це більше, ніж просто "бестаблічная верстка"

Для різних людей термін "веб-стандарти" означає різні речі. Для декого це просто "сторінки без таблиць", для інших -- "правильний код". Однак веб-стандарти це щось набагато більше. Сайт, простроенний з веб-стандартам, це сайт, який дотримується стандартів (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. Якість коду

1.1 Вказано чи у сторінок правильний Doctype?

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

стаття на webmascon.com Чому такий важливий DOCTYPE

Див також:

http://www.w3.org/QA/2002/04/valid-dtd-list.html

http://css.maxdesign.com.au/listamatic/about-boxmodel.htm

http://gutfeldt.ch/matthias/articles/doctypeswitch.html

1.2 Вказано чи у сторінок кодування (charset)?

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

http://www.w3.org/International/tutorials/tutorial-char-enc/

Див також:

http://www.w3.org/International/O-charset.html

1.3. Валіде чи (X) HTML код сторінок сайту?

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

http://www.maxdesign.com.au/presentation/sit2003/06.htm

Див також:

http://validator.w3.org/

1.4. Дійсний чи CSS-таблиці сайту?

Не забувайте переконатися, що ваш HTML-код і CSS-сторінки не містять помилок, тому що помилки призведуть до спотвореного відображення документа на екрані.

http://www.meyerweb.com/eric/articles/webrev/199904.html

Див також:

1.5. Чи використовує сайт будь-які CSS-хакі?

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

http://www.mail-archive.com/wsg @ webstandardsgroup.org/msg05823.html

Див також:

http://css-discuss.incutio.com/?page=CssHack

http://css-discuss.incutio.com/?page=ToHackOrNotToHack

http://centricle.com/ref/css/filters/

1.6. Чи використовуються на сайті які-небудь зайві й непотрібні класи (class) і ідентифікатори (id)?

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

http://www.clagnut.com/blog/228/

1.7. Чи добре структурований код сторінок?

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

http://www.maxdesign.com.au/presentation/benefits/index04.htm

Див також:

http://www.w3.org/2003/12/semantic-extractor.html

1.8. Чи є на сайті "зламані" спонсорів?

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

Див також:

http://validator.w3.org/checklink

1.9. Як у сайту зі швидкістю завантаження сторінок і з їх розмірами?

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

http://www.websiteoptimization.com/speed/

1.10. Видає чи браузер які-небудь помилки JavaScript при роботі зі сторінкою?

Internet Explorer для Windows дозволяє включити відладчик, який буде вискакувати на екран кожного разу, коли на сторінці буде виявлена помилка в JavaScript. Ця опція знаходиться в меню "Internet Options" на закладці "Advanced". Зніміть галочку з пункту "Disable script debugging".

* * *

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

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

Використовуйте стильові таблиці для управління компонуванням сторінки і її зовнішнім виглядом

http://www.w3.org/TR/WCAG10/wai-pageauth.html # tech-style-sheets

2.2. Перенесені чи вся декоративна графіка в CSS, або вона все ще зустрічається в (X) HTML-коді?

Ваша мета, як веб-розробника, полягає в тому, щоб прибрати з html-код вашої сторінки всі оформлювальні Завдяки чому код стане чистіше і семантично правильніше.

http://www.maxdesign.com.au/presentation/benefits/index07.htm

* * *

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

3.1 Чи використовується атрибут "alt" у всіх значимих зображеннях?

Кожен нетекстові елемент супроводжуйте текстовим описом

http://www.w3.org/TR/WCAG10/wai-pageauth.html # tech-text-equivalent

3.2. Чи використовується на сайті для шрифту відносні одиниці виміру замість фіксованих?

В коді і в стильових таблицях використовуйте відносні, а не абсолютні одиниці для вказівки розмірів елементів

http://www.w3.org/TR/WCAG10/wai-pageauth.html # tech-relative-units

Див також:

http://www.w3.org/TR/WCAG10/wai-pageauth.html # tech-relative-units

http://www.clagnut.com/blog/348/

Влада народу - відносні розміри шрифтів

Розмір шрифту нехай вибирають самі користувачі

3.3. Ламається чи яким-небудь образом компонування сторінки при збільшенні розміру шрифту?

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

3.4. Чи є на сторінці видиме посилання "пропустити"?

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

http://www.section508.gov/index.cfm?FuseAction=Content&ID=12

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

http://www.w3.org/TR/WCAG10-TECHS/ # tech-group-links

".. маса навігаційних на сторінці посилань завдає неприємностей не тільки сліпим користувачам. Згадаймо й про тих, у кого утруднена моторика і кому доведеться натискати багато разів клавішу Tab, щоб пройти по всіх цих посиланнях до тексту сторінки ... "

http://joeclark.org/book/sashay/serialization/Chapter08.html # h4-2020

Див також:

http://www.niehs.nih.gov/websmith/508/o.htm

3.5. Чи використовуються на сайті доступні форми?

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

http://www.htmldog.com/guides/htmladvanced/forms/

Див також:

http://www.webstandards.org/learn/tutorials/accessible-forms/01-accessible-forms.html

http://www.accessify.com/tools-and-wizards/accessible-form-builder.asp

http://accessify.com/tutorials/better-accessible-forms.asp

3.6. Чи використовуються на сайті доступні таблиці?

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

http://www.w3.org/TR/WCAG10/wai-pageauth.html # tech-table-headers

Див також:

http://www.bcc.ctc.edu/webpublishing/ada/resources/tables.asp

http://www.accessify.com/tools-and-wizards/accessible-table-builder_step1.asp

http://www.webaim.org/techniques/tables/

3.7. Чи досить контрастні і яскраві кольори на сторінках сайту?

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

http://www.w3.org/TR/WCAG10/wai-pageauth.html # tech-colour-contrast

Див також:

http://www.juicystudio.com/services/colourcontrast.asp

3.8. Чи використовується тільки колір для виділення критичної інформації?

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

http://www.w3.org/TR/WCAG10/wai-pageauth.html # tech-colour-convey

Існує в основному три типи порушення кольоросприйняття: дейтеранопія (порушення в сприйняття червоного і зеленого кольорів), протанопія (інша форма порушення сприйняття червоного і зеленого кольорів) та трітанопія (порушення сприйняття синього і жовтого кольорів - дуже рідкісний випадок)

ив також:

http://colorfilter.wickline.org/

http://www.toledo-bend.com/colourblind/Ishihara.html

http://www.vischeck.com/vischeck/vischeckURL.php

3.9. Чи використовується затримка в випадають меню (для користувачів з повільною моторикою)?

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

3.10. Чи всі посилання містять досить описовий текст (для сліпих користувачів)?

Посилання повинні бути досить зрозумілими, щоб вони мали сенс при читанні поза контексту - або при простому читанні або при читанні у вигляді списку.

http://www.w3.org/TR/WCAG10/wai-pageauth.html # tech-meaningful-links

* * *

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

4.1. Чи досить добре сайт працює і в сучасних і в старих браузерах?

Перш ніж починати верстати сторінки з використанням CSS, визначитеся, які браузери ви збираєтеся підтримувати і до якого ступеня.

http://www.maxdesign.com.au/presentation/process/index_step01.cfm

4.2. Чи можна працювати з матеріалами сайту при відключеному CSS або в броузері, де немає підтримки CSS?

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

4.3. відсутності підтримки їхнього висновку на екран?

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

4.4. Чи працює сайт у текстових броузерах, таких як Lynx?

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

Див також:

http://www.delorie.com/web/lynxview

4.5. Чи добре виглядає сайт при роздруківці?

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

стаття на webmascon.com В друк!

Див також:

http://www.d.umn.edu/itss/support/Training/Online/ webdesign/css.html # print

4.6. Чи добре чи працює сайт на наладонних пристроях?

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

Див також:

Дизайн для портативних пристроїв: ваш веб-сайт на маленькому екрані

4.7. Оснащений чи сайт детальним набором метаданих?

Метадані - Це інформація, яка зрозуміла для машин.

http://www.w3.org/Metadata/

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

4.8. Чи працює сайт у вікнах різних розмірів?

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

* * *

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

5.1. Чи є на сторінці чітка візуальна ієрархія елементів?

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

http://www.great-web-design-tips.com/web-site-design/165.html

5.2. Чи легко відрізнити один рівень заголовків від іншого?

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

http://www.w3.org/TR/WCAG10/wai-pageauth.html # tech-logical-headings

5.3. ?? остаточно Чи легко зрозуміти навігацію по сайту?

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

http://www.1stsitefree.com/design_nav.htm

5.4. Чи використовується одноманітна навігація на всіх сторінках сайту?

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

http://www.juicystudio.com/tutorial/accessibility/navigation.asp

5.5. Чи використовується на сайті прийнятний і одноманітний мову текстів?

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

http://www.juicystudio.com/tutorial/accessibility/clear.asp

5.6. Чи є в сайту карта й сторінка з контактною інформацією? Чи легко їх знайти?

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

http://www.useit.com/alertbox/20020106.html

Див також:

Карта сайту і індекс: що це таке і для чого це потрібно?

5.7. Якщо ваш сайт дуже великий, чи є на ньому інструмент пошуку?

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

5.8. Чи присутній на кожній сторінці сайту посилання на його головну сторінку?

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

5.9. Підкреслені чи спонсорів?

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

http://www.useit.com/alertbox/20040510.html

5.10. Чи чітко виділені кольором посилання, які користувач уже відвідав?

Самое головне, якщо чітке виділені посилання, які користувач уже відвідав, він не натисне на них випадково, і не буде попадати на ту ж саму сторінку, де вже побував.

http://www.useit.com/alertbox/20040503.html

* * *

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

6.1. Чи є в сайту зрозуміла й корисна сторінка помилки 404, яка працює з будь-якого рівня сайту?

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

стаття на webmascon.com Досконала 404-ая сторінка

6.2. Чи використовуються на сайті дружні URL-и?

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

http://www.sitepoint.com/article/search-engine-friendly-urls

З точки зору користувача інтерфейсу найжахливішим є URL-и. Тим не менше, якщо вони короткі, логічні й самоісправляющіеся, з ними стає зручно працювати.

http://www.merges.net/theory/20010305.html

Див також:

URL як елемент користувацького інтерфейсу

http://www.sitepoint.com/article/search-engine-friendly-urls

http://www.websitegoodies.com/article/32

http://www.merges.net/theory/20010305.html

6.3. Чи можна до вашого сайту доступитися, набравши адресу без "www"?

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

6.4. Чи є в сайту піктограма для закладок?

Піктограма для закладок (favicon) це графічний файл з картинкою в декількох дозволах. Вони як правило використовуються на всіх професійно виконаних сайтах. Піктограма для закладок дає веб-майстру ще один спосіб реклами сайту.

http://www.favicon.com/

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

Про цьому списку

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

Список літератури

Для підготовки даної роботи були використані матеріали з сайту http://www.webmascon.com/