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/divsentation/sit2003/06.htm
Див також:
http://validator.w3.org/
1.4. Валідні чи CSS-таблиці сайту?
Не забувайте переконатися, що ваш HTML-код і CSS-сторінки не містять помилок, так як помилки призведуть до спотвореного відображення документа на екрані.
http://www.meyerweb.com/eric/articles/webrev/199904.html
Див також:
http://jigsaw.w3.org/css-validator/
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/divsentation/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/divsentation/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/divsentation/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 Досконала чотиреста четверта сторінка
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-форматі.