В заключительном выпуске WCAG 2, приемлемое минимальное цветное контрастное отношение было изменено от 5:1 к 4.5:1 . I’ve обновленный оба моих цветных контраста tests —  Цветной Контрастный Инструмент Сравнения и Цвет Контрастный Инструмент Спектра отразить изменение по контрасту  ratio.

Что делает это изменение  mean?

По существу, это означает, что рабочая группа решила, что цветные комбинации с более низким контрастом (более подобные цвета) были приемлемыми для общего использования на сети. Это - конечно хорошие новости для проектировщиков, так как они предусмотрят большие голоса проекта разнообразия чем  previously.

Контрастное отношение 4.5:1 было выбрано для уровня AA, потому что это дало компенсацию за потерю в контрастной чувствительности, обычно испытываемой пользователями с потерей видения, эквивалентной приблизительно 20/40 видение. (20/40 вычисляет к приблизительно 4.5:1.) о 20/40 обычно сообщают как типичная визуальная острота старших в примерно возрасте  80.

Понимающий WCAG 2.0; Понимание Критерия Успеха  1.4.3

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

Это производит минимальное отношение, чтобы приспособить на Уровне AA, и минимальное отношение, чтобы приспособить на Уровне AAA для большого  print.

Still — don’t несутся  away!

It’s долгое время, прибывая, но на сегодня стандарты доступности, выраженной в Руководящих принципах Доступности Веб-содержимого, официально  updated.

W3C рекомендация наиболее конечное состояние, которого документ может достигнуть в W3C система стандартов, и должен теперь считаться стандартным документом для доступности, суперуступая WCAG  1.

W3C Рекомендация спецификация или набор руководящих принципов, который, после обширного построения согласия, получил одобрение W3C Участники и Директор. W3C рекомендует широкое развертывание своих Рекомендаций. Отметьте: W3C Рекомендации подобны стандартам, изданным другим  organizations.

, Хотя было большое противоречие за последние несколько лет относительно законности WCAG 2 пересмотра, заключительному документу удалось иметь дело с большей пропорцией проблем. Не все, certainly — but ожидание совершенствования в такой обширной проблемной области является, искренне, нереалистичным  concern.

Харед Смит рекомендует, чтобы , рассматривая оригинальный проект с января 2001 , чтобы сделать comparison — could были интересны! Однако, если you’ve стал ограниченным по времени, чтобы потратить, теперь определенно время, чтобы удостовериться you’re полностью знакомый с новым стандартом для доступности сети. It’s фактически  final.

• WCAG 2 Рекомендации  Document
• Нажать  Release

Так, we’re наконец получение к мясу веб разработки передового опыта. Это - то, о чем обычно думают люди, когда они спрашивают о лучших методах в программировании сети или веб дизайне: фактически строение вебсайта  itself.

Веб дизайн лучшие методы охватывают широкий диапазон needs — everything от визуального вида проекта и использования хорошо подобранного повышения к выполнению дополнительных стилей для мобильных устройств, или печать обнаруживается в этой области. Покрытие это в одной статье - возможно, честолюбивый . К счастью, I’ve написанный на частях этого предмета часто в прошлом так I’ll обеспечить много из  links.

It’s важный для лучших методов к ясно отдельному структура Вашего веб дизайна (внутренняя маркировка и определение элементов страницы) от модулей (появление этих элементов.) В последняя статья в этом ряду , Я обсуждал несколько основных элементов проекта: не с точки зрения цвета, расположения, или книгопечатания, а с точки зрения сообщения  information.

Лучшие методы в конечном счете приводят к созданию универсального или доступного проекта, и эта практика зависит от двух ключевых понятий: семантика сети и разделение Вашей структуры от Вашего  design.

Семантика   HTML

Вы можете спорить в течение многих дней (или годы, если Вы бросаете взгляд на результаты поиска для “ HTML semantics” или “web semantics”) на детальной семантике того, как HTML признаки должен использоваться. I’ve написанный на этом несколько раз, непосредственно, включая статьи, обсуждая ценность пустых элементов , старые дебаты между основанный на столе или CSS расположение , среди многие  others.

Семантика очень важны. Однако, когда Вы действительно пристально смотрите на HTML you’ll неизбежно замечают, что it’s не решительно семантическое language — the язык повышения doesn’t даже приближается к описанию всех возможных применений признаков. Много признаков заканчивают тем неизбежно, что служили многократный  functions.

, Таким образом то, чего действительно требует семантика сети, является интерпретацией . HTML спецификация обеспечивает одну версию этой интерпретации, с предложенным использованием и значениями для элементов. I’ve обеспечил моя собственная интерпретация , также. Есть несомненно различия мнения между теми  documents.

Очевидно, Вы можете утверждать очень убедительно, что любая интерпретация, которая не соглашается явно с HTML 4 спецификации, является неправильно . Не стесняться. Ядро лучших методов в семантике сети должно использовать их и принять решения: it’s о размышлении, не определенном  rigor.

Мы должны дифференцироваться, однако, между семантикой HTML и семантикой сети . Семантика HTML является определенной и определенной: значение в применении к элементам HTML . Это - конечный список пунктов, хотя полное определение значения меньше так. Семантика сети, с другой стороны, описывает заявление значения на сети. Это - более глобальное понятие, и относится ко всем аспектам Вашей веб разработки  process.

Семантика сети включает все, имел обыкновение добавлять значение к Вашему участку, обеспечение лучшего понимания кодекса и содержания. Используя описывают класс и удостоверение личности, называя соглашения, описательные названия функции в сервере или стороне клиента scripting, или обеспечение полезных комментариев в пределах Вашего кодекса можно все считать пунктами семантики сети. Лучшие методы означают обеспечивать участок, который является значащим в обоих передняя и задняя часть  end.

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

Разделение Структуры от  Design

Это - такой старый вопрос к арфе на, но важность отделения организации Вашей страницы от способа, которым это смотрит, никогда не имеет действительно  flagged.

На поверхностном уровне может казаться, что любое повышение, которое Вы используете, имеет эффект на появление Вашего участка. В конце концов, there’s ясное визуальное различие между нестилизованным текстом, отмеченным как заголовок и нестилизованным текстом, отмеченным как blockquote! Однако, это визуальное различие только действительно существует потому что описание “unstyled” действительно a  misnomer.

, Если Вы повреждаете stylesheets на вебсайте, you’ll, см. чрезвычайно простое представление участка. Это не точно “unstyled,” however — the проект был просто уменьшен до стилей по умолчанию, примененных браузером. Вообще, каждый браузер имеет очень подобный defaults — but they’re не точно то же самое. Это - одна из причин что it’s общий, чтобы начать stylesheet с ряда сброс  styles.

Если Вы добросовестно удаляете моделирование браузера по умолчанию, это может сделать Ваше собственное развитие легче: небольшие различия между браузерами могут тогда быть  ignored.

Дело в том, что Вы ничего никогда не должны помещать в свое повышение, которое существует просто, чтобы создать различную видимость . Признаки или признаки, которые определяют лица шрифта, цвета, или стили, очевидны problems — but, использование маленького или сильного может также быть проблемами. It’s не, что Вы никогда не должен использовать маленький : но Ваше использование элемента shouldn’t зависит на тексте, предоставляемом меньшим чем окружение  text.

Это не могло бы случиться, после  all.

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

, Когда Вы берете стол и используете это для расположения Ваш проект, Вы нарушаете разделение структуры от появления: Ваш проект - теперь зависимый на организации по умолчанию столов. Если кто - то пытается реорганизовать Ваш стол (например, к линеаризуют информацию ,) они могут столкнуться с радикально нелогичными данными  structure.

Основные принципы Универсального Проекта для  Web

Цель универсального проекта очень проста: сделайте информацию в своем вебсайте доступной для каждого человека или устройства, которое пытается получить доступ к этому. Это включает мобильные устройства, поисковые машины, вспомогательную технологию, нетрудоспособных пользователей, и стандартный рабочий стол  browsers.

Универсальный проект - то, где мы приносим все выше вместе. Внимание к семантике сети и сильному разделению между структурой и проектом дает Вашему вебсайту по крайней мере шанс борьбы того, чтобы быть универсально годным к употреблению. Очевидно, Вы можете все еще ввернуть вещи  up!

Таким же образом, что после стандартов сети doesn’t означают, что you’ve сделал вебсайт, доступные , после лучших методов для общей веб разработки doesn’t означают, что you’ve сделал участок, который будет большим на переносном устройстве или с экраном  reader.

У различных устройств (как люди) есть различное специальное предложение  needs.

Создание вебсайта, который действительно универсален, требует, чтобы Вы знали о специальных потребностях каждого устройства you’re работающий for — but, несколько основных принципов получат Вас 95 % пути  there.

Принципы Универсального Проекта если Центром Универсального Проекта в Северной Каролине государственный университет хорошая директива для того, чтобы думать об универсальном проекте. Хотя эти принципы действительно разработаны, чтобы быть универсальными, в котором они предназначены, чтобы быть примененными хорошо вне царства веб разработки, основные принципы являются звуковыми в любом  context.

, Если Вы ломаете понятие универсального проекта к единственной основной проблеме, могло бы случиться так, что зависимости ломают доступ . Всякий раз, когда Вы настраиваете ситуацию, в которой должны присутствовать определенное техническое или модуль (зависимость от Javascript, требование, чтобы контроль соответствовал описанию, если, или требование, чтобы пользователь видел данное изображение, например,) тогда Вы создаете потенциал для отказа проекта. Избегите создавать что-нибудь, что зависит что-нибудь из Вашего  control.

Знающий, что и isn’t в Вашем контроле (и, что еще более важно какой кажется как it’s в Вашем контроле, но действительно isn’t) важно по отношению к лучшим методам в веб разработке. Признавание, что, хотя Вы можете выбрать цвет текста, Вы ни не можете гарантировать, что посетитель будет способен к наблюдению того цвета , ни , что текст будет фактически быть тот цвет в пункте, что посетитель видит это, является критическим шагом в понимании универсального  design.

Лучшие Методы в Веб разработке: Часть 5 (изданный в пятницу, 5-ого сентября), покрывает проект взаимодействия, ошибочное управление, и долгосрочный участок  administration.

Совершенствование вебсайт является длинным и вовлеченным процессом. There’s не обходящий факт, что, если Вы хотите, чтобы каждый аспект своего участка был right — accessibility, оптимизация поиска, и только всесторонний стиль , you’ve вероятно заставил некоторую существенную работу делать. Однако, that’s, чтобы не сказать, что там aren’t вещи Вы можете проверить быстро и эффективно удостовериться you’re не делающий некоторые из более вопиющих  errors!

Вот 8 быстрых проверок (ни в каком специфическом заказе), который Вы можете легко выполнить на своем участке, чтобы осмотреть это для проблем. Никакие предложенные методы не требуют специального знания HTML или программирование сети., Исключая приобретение и монтаж программного обеспечения, эти задачи shouldn’t берут больше чем несколько минут для больше всего  sites.

, Что doesn’t включают , устанавливающий любые найденные проблемы,  course…

Читающий больше: Настройка Вебсайта: 8 Быстрый  Checkups

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

природа Руководящих принципов Доступности Веб-содержимого ( WCAG ) спецификации цветного довода "против" trast справедливо хорошо гарантирует что некоторые цвета в среднем диапазоне спектра (в шестнадцатеричном, вообще между #666666 и #999999) просто won’t быть совместимым с любой другой  color.

Моя первая мысль на этом пункте должна была составить таблицу цветов который просто couldn’t использоваться в этих контекстах. Я отклонил это, на том основании, что это didn’t действительно кажется всем что ценный мне. Но мысль о рассмотрении цвета противопоставляет проблемы различным способом чем большинство цветных контрастных шашек, прикрепленных с  me.

кажется, что большинство цветных инструментов проверки контраста работает одним из двух способов: они или берут интернет страницу и проверяют контрастные факторы между текстом и фоном на той странице, или они позволяют Вам входить в пару цветов и узнавать, как они сцепляются. , Так как эта статья была создана, I’ve создал этот основной инструмент также. Оценивают контраст между двумя цветами .

то, Что I’ve сделанный вместо этого настроено шашка контраста цвета , который только требует, чтобы Вы вошли в один цвет, затем показывает выбор возможных цветных комбинаций, используя тот цвет. It’s довольно прямой: Вы можете хотеть рассматривать результаты, заказанные согласно WCAG 1’s цветная яркость и цветные тесты различия или согласно WCAG 2’s противопоставляют алгоритм отношения. Так или иначе, все три фактора показаны, обеспечивая здравый смысл для как эти две системы  differ.

результаты может быть весьма интересным. Сравните результаты для #888888 под WCAG 1 и под WCAG 2, для  example:

• #888888 Проверенный на Цветную Яркость и Цвет  Difference
• #888888 Проверенный на Яркость  Contrast

В целом, I’m надеющийся, что этот инструмент обеспечивает интересный способ приблизиться к цветным контрастным проблемам и рассмотреть различия между WCAG версии 1 и  2.

Ресурсы:

• Объяснение яркости противопоставляют алгоритм отношения (Gez  Lemon)
• WCAG 2, определение родственника  luminance
• WCAG 2, определение контраста  ratio
• WCAG 2, понимая Директиву 1.4
  • 1.4.3 Контраст  (minimum)
  • 1.4.6 Контраст  (enhanced)
• Список цветных инструментов проверки контраста (Роджер  Johansson)

Цветное Сравнение  Formulas

Цветная формула яркости: (должно быть больше чем  125)

((Красная ценность X 299) + (Зеленая ценность X 587) + (Синяя ценность X 114)) /  1000

Цветная формула различия: (должно быть больше чем  500)

(максимум (Красная ценность 1, Красная ценность 2) - минимум (Красная ценность 1, Красная ценность 2)) + (максимум (Зеленая ценность 1, Зеленая ценность 2) - минимум (Зеленая ценность 1, Зеленая ценность 2)) + (максимум (Синяя ценность 1, Синяя ценность 2) - минимум (Синяя ценность 1, Синяя ценность  2))

Контрастное Отношение с Относительными формулами Светимости: (больше чем 3:1 для печати измеряет по 14pt Смелая эквивалентность или 18pt нормальный, больше чем 5:1 для меньшего  text)

(L1 + 0.05) / (L2 + 0.05) , где L1 = 0.2126 * R1 + 0.7152 * G1 + 0.0722 * B1 на ценностях RGB более легкого цвета и L2 = 0.2126 * R2 + 0.7152 * G2 + 0.0722 * B2 на ценностях RGB более темного  color.

Эта новая книга от Packt Издающий & Nirav Mehta быстрое и эффективное введение в развивающиеся вебсайты, определенно предназначенные в мобильных пользователях устройства. Я говорю “users” для reason — one самых сильных преимуществ для книги сильный центр при рассмотрении Вашего пользователя и их потребностей как основной элемент мобильной сети  development.

Моя полная реакция на эту книгу было положительно. Это покрывает большое разнообразие ключевых вопросов для мобильного программирования сети в легко понятой манере. Книга предназначена прежде всего в разработчиках, у которых уже есть некоторый опыт при веб разработке и проекте, таким образом это doesn’t копается в любых серьезных деталях когда дело доходит до программирования стороны сервера или HTML кодирование, но вместо этого считает обязательным для себя выделение мест, где мобильная сеть отличается от интернет-взаимодействия на рабочем столе  device.

Mehta выходит из его пути во многих случаях, чтобы подчеркнуть серьезную важность рассмотрения кто (и что!) будет использовать Вашу мобильную сеть  application.

“ Любой вебсайт, к которому получают доступ от мобильного устройства, мобильно web — whether it’s скроенный, чтобы воздействовать на мобильный телефон или not!” Мобильная Веб разработка , Nirav Mehta, страница  10

Обложки книги широкий диапазон issues — from развивающийся для мобильных устройств, используя “lowest обычный denominator” запланируйте на осуществление очень динамических мобильных заявлений, которые приспосабливаются автоматически на использующееся устройство. Текст легок понять и следует за логической прогрессией, начинающейся с мобильных методов веб разработки, которые являются самыми подобными развитию стандартных веб-приложений прежде, чем переместиться в области, которые очень определенно предназначены к мобильному  devices.

Это isn’t, чтобы сказать, что у книги doesn’t есть несколько недостатков. Я идентифицировал три области, где мне действительно понравится к замеченному лучше  work.

Редактирующий

Вообще, редактирование копии на этом тексте было довольно плохо. Редактирование улучшилось, поскольку я добрался далее в книгу (или я стал более не обращающим внимания на это), но у вводных глав было много проблем. Там weren’t много из typos — but грамматика заметно недоставала. Книга изобилует предложениями как  this:

“ Мы будем нуждаться в перезаряжении терпения, если мы хотели наблюдать предварительный просмотр кино на мобильной низкой скорости  networks.”

I’m не член полиции грамматики , но I’m конечно сочувствующий. Профессионально изданные книги просто shouldn’t содержат виды ошибок, найденных в этом  book.

Кодекс  Examples

Автор говорит о следующих стандартах сети как критический элемент мобильной веб разработки. That’s большой. Это - однако, серьезная моя любимая мозоль, чтобы видеть кодовые примеры, которые don’t отражают текст книги. Самый первый кодовый пример в книге  this:

 <  связывают   рэл  =  "stylesheet"   печатают  =  "text/css"   СМИ  =  "handheld"   href  =  "mobile.css"  > 

текст, предшествующий этому, заявляет “Here’s, как Вы можете добавить альтернативу stylesheet связь в Вашем XHTML page.” я вижу проблему здесь . Да, автор действительно объясняет в более позднем пункте в книге, что весь XHTML элементы должны быть закрыты: но it’s очевидный факт жизни, что большинство людей, ссылающихся на эту книгу, намного более вероятно, просто сошлется на кодекс как. Это - просто ошибка; но it’s не тот, который должен был сделать это через обзор  book.

I’ll признают, что я haven’t пройденный и проверял ратификацию каждого кодового примера. Большинство из них казалось твердым и точным. Есть определенно примеры, которые wouldn’t быть действительным под XHTML DocType, но I’m не достаточно знаток с XHTML - член парламента, чтобы знать бесцеремонно, если то же самое верно в пределах мобильного профиля  DocType.

Приложения

Проще говоря, там aren’t любой. Были многочисленные пункты в книге, где я думал ко мне непосредственно, что приложение будет большим. Список ресурсов, процитированных темой, секция, суммирующая синтаксис VXML , столы, показывая различия между XHTML и XHTML - член парламента или между CSS и WCSS. Эти виды ресурсов были бы огромными льготами для полной справочной ценности  text.

Повсюду

Это стоящая книга. Даже при том, что я wouldn’t рекомендую доверять кодовым примерам, правда - то, что Вы никогда не должны просто брать кодовые примеры, поскольку written — you учатся лучше всего, беря пример и повторно имея целью это для Ваших собственных потребностей. Мобильная Веб разработка представит Вас ключевым вопросам для мобильного программирования сети и проекта в манере, которая может дать Вам быстрое начало на мобильном веб-приложении  development.

I’ve замеченный много статей, обсуждая важность HTML и XHTML семантика. I’ve замеченные статьи описать, что это означает для документа быть семантическим. Большинство этих статей, однако, don’t обеспечивает серьезный краткий обзор того, чем HTML элементы фактически можно рассмотреть semantic — and что те семантические элементы фактически  mean.

И, еще более подробно, почему это  matters.

Семантика - образованная область исследования. Буквально, семантика может быть справедливо определена как исследование значения в коммуникации. Коммуникация может с готовностью быть расширена, чтобы покрыть символические примечания, представления языка, организацию языка, языка тела и информационных структур. В развитии веб-страницы мы организуем средство сообщить содержание той страницы: идеально, мы организуем страницу в такой манере, что это будет понято независимо от метода, которым получают доступ к странице. Это должно быть одинаково понятно, замеченный ли, услышанный, или  felt.

семантика HTML структура, тогда, ясно важная часть веб дизайна. Посылка смешанных сигналов пользовательскому агенту или пользователю при использовании blockquote просто для it’s родное углубление является злоупотреблением семантикой: даже визуальное воздействие зависит при условии, что пользовательские агенты последовательно отдадут blockquote в зазубренном  manner.

It’s не точно проблема, что you’ve использовал семантический элемент для представляемых средств, потому что, фактически, you’ve сделанные больше чем это: you’ve представил блок текста, который является не указанный материал как будто это  were.

Семантические элементы HTML несите значение независимо от своего знания того значения. Результат состоит в том, что неправильное употребление элемента создает потенциал, чтобы ввести в заблуждение или перепутать  end-user.

самые очевидные примеры вместе используют, те, которые используют элементы с семантическим значением, которые также предлагают внесенное в браузер представление по умолчанию, чтобы использовать тот представляемый стиль. blockquote пример выше весьма обычен; точно так же использование пустого p элементы, чтобы создать дополнительное белое место или элементы заголовка, используемые как сомнительная техника SEO в замене для нормального  paragraphs.

Другие примеры, которые имеют упоминание, включают использование пустых якорных элементов, чтобы вызвать Javascript events — in этот случай, it’s частично, ограничение идентичности якорного элемента, но пустого якорного элемента нужно всегда считать ошибкой, поскольку это приводит к якорю поведения меньше, если Javascript не  available.

Теперь, Вы можете указать на следующий параграф, от HTML 4.01 спецификации , как ответ на мой  opinion:

Авторы могут также создать элемент, который не определяет якорей, то есть, это doesn’t определяет href, название, или id. Ценности для этих признаков могут быть установлены в более позднее время через  scripts.

факт, что это позволено спецификацией, не делает это передовым опытом. Со всем должно уважением к W3C , этому нельзя разрешить. Для ссылки, HTML 5 спецификаций в настоящее время  reads:

, Если у элемента нет никакого href признак, тогда элемент - placeholder для того, куда связь, возможно, иначе была помещена, если бы это было  relevant.

Кроме того, хотя я won’t указываю все, спецификация заявляет, что у якоря, какой делает , есть href , признак должен определить ТУРОВ как ценность того признака. Это, кажется, по существу заявляет, что у якорного элемента не должно быть никакого семантического значения, если href признак не установлен и не действителен. Но я мог быть  wrong.

лучшие средства избежать неправильного употребления элементов должен иметь ясное понимание , когда и , почему данный элемент должен использоваться в веб разработке., Мы надеемся, подробно остановиться на Вашем знании в этом отношении, I’m пытающийся предоставить семантическому справочнику по HTML элементы для Вашей ссылки и богатый  disagreement.

знать, однако, что семантика - в значительной степени дело вкуса. It’s не вопрос вслепую после руководящих принципов установлен группой; it’s вопрос интерпретации тех руководящих принципов к лучшей из Вашей способности и веры. Этот гид отражает, как я думаю, что HTML элементы должны использоваться; и я приветствую Ваш  opinions.

Другой HTML Семантика  Articles

• Руководящие принципы от WCAG 2.0 на использовании HTML для семантического  structure
• Традиционный HTML Семантика (Первая часть трехчастного ряда на семантике сети Джоном  Alsopp)
• HTML: Фонд Сети  – Niels  Matthijs
• Семантический HTML и Поисковая оптимизация  – From Оперное Сообщество разработчиков, Joost de  Valk
• , Кто прочитает Ваш семантический HTML ?  – Jesse  Skinner
• , Когда семантическое повышение разлагается  – Matthew Пол  Thomas
• Semantics – why беспокойство?  – Mel Pedley в  Accessites
• HTML Семантика от Западной Цивилизации,  Pty.
• Изображают Семантический HTML В ВИДЕ ГРАФИКА Структура Вашей Веб-страницы  – Joe  Dolson