Улучшение доступности веб-сайта обеспечение уникальных и полезных имен


Содержание материала:

Улучшение доступности веб-сайта: обеспечение уникальных и полезных имен

Понимание того, что пользователи вашего сайта могут столкнуться с рядом проблем является важнейшим качеством профессионального web-разработчика. Не надо предполагать, что у пользователя есть мышь, что монитор может отобразить, а люди могут видеть все изображения, размещенные на сайте, что у каждого посетителя установлен модуль поддержки Flash и так далее.

Кроме людей, которым требуются вспомогательные технологии, существуют и другие люди, для которых это будет также справедливо. Например, технология Flash ещё недостаточно развита, чтобы она появилась на большенстве мобильных телефонах, даже такой мощный гаджет, как Apple iPhone не имеет и, скорей всего, никогда не будет её иметь. Всегда надо предусматривать альтернативные способы представления контента.

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

Актуальность web-доступности

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

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

Кому это надо?

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

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

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

Таким образом, ответом на вопрос «кому это надо?» является — «это надо всем, и в первую очередь это надо самим web-разработчикам, хотя они сами это часто не осознают».

Потенциальные рынки

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

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

Можно привести реальный пример из жизни:

В 2000 году британская сеть супермаркетов «Tesco» запустила проект по созданию отдельной версии своего сетевого продуктового магазина специально для людей с нарушениями зрения. После этого, по заявлениям официальных представителей «Tesco», годовая прибыль их сети выросла на 13 миллионов фунтов стерлингов. Таким образом, если бы компания «Tesco» не рассматривала людей с недостатками зрения, как потенциальных потребителей своей продукции, они бы упустили рынок стоимостью, как минимум, 13 миллионов фунтов стерлингов. К тому же следует учитывать и повышение статуса их бренда, так как демонстрация того, что вы реально заботитесь о каждом члене общества, может только улучшить имидж компании.

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

Следует различать бухгалтерскую и экономическую прибыль. Если вы получаете прибыль в размере 1 миллион долларов, но при этом игнорируете рынок с потенциальной прибыльностью в 2 миллиона долларов, то ваша компания находится в плюсе только с бухгалтерской точки зрения, с экономической — вы имеете потери в 2 миллиона и ваша экономическая прибыль отрицательна. Причём эти упущенные 2 миллиона не являются альтернативными издержками, так как не имеют взаимоисключающего характера по сравнению с существующими доходами. При подобной ситуации, вы никак не можете считаться успешным менеджером.

Поисковые системы

Поисковые системы не являются людьми. Часто, когда люди создают web-сайты, они делают это, не рассматривая, как их можно будет найти в Google, Yahoo, Яндекс и других аналогичных сервисах. Поисковые системы являются просто компьютерными программами, и они могут использовать для индексации сайта только ту информацию, которую смогут понять. Это делает их похожими на программы чтения экрана (screen readers), которые может использовать человек с недостатками зрения.

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

Юридический аспект

В ряде стран стандарты доступности web-ресурсов оформлены в виде конкретных законодательных норм. Например, в Великобритании, США, странах Европейского союза и других. Таким образом, разработчик сайта может столкнуться с реальными проблемами, если не позаботится о данном аспекте своего сайта. К тому же если всё это будет происходить в стране с судебной системой, где сильно развит институт морального ущерба, то иск по дискриминации инвалидов может составить несколько миллионов долларов США, что в любом случае обойдётся намного дороже, чем изначальное создание сайта в соответствии со всеми стандартами доступности, не говоря уже о возможном ущербе репутации компании после проигранного судебного дела.

Обзор стандартов web-доступности

Если изложенные выше доводы убедили вас в необходимости соответствия вашего ресурса основным стандартам доступности, то, скорей всего, перед вами встал вопрос «Как это сделать?».

Доступность Интернет-ресурсов достигается посредствам обычных технологий web-проектирования. Просто при их применении требуется следовать набору конкретных рекомендаций. Причём сразу стоит отметить, что сайт, созданный с учётом стандартов доступности, с дизайнерской точки зрения не будет иметь никаких отличий от сайта, разработанного без их применения. То есть вы ничего не теряете, а лишь приобретаете.

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

Рекомендации по доступности web-контента (WCAG), версия 1.0

Данный документ был разработан консорциумом «W3C» (http://w3.org), являющимся одним из основных органов стандартизации в Интернете. Его подразделение «Web Accessibility Initiative» (WAI) опубликовало первую версию своих рекомендаций по созданию доступных web-сайтов 5 мая 1999 года.

Рекомендации по доступности web-контента (англ. Web Content Accessibility Guidlines, сокращёно WCAG) являются наиболее широко используемым стандартом по обеспечению доступности в Интернете. Использование WCAG 1.0 было предложено рядом правительственных органов, включая Европейский союз и правительство Италии.

WCAG 1.0 является набором из четырнадцати рекомендаций, охватывающих цели, которые необходимо реализовать для получения максимально доступной страницы. В каждом пункте рекомендаций содержится ряд контрольных точек, которые составляют реальное содержание документа. В то время как рекомендации объясняют концепции, которые авторы имеют в виду, контрольные точки являются тем, что используется для проверки соответствия стандартам. Каждая из контрольных точек имеет приоритет от 1 до 3, чтобы указать на их важность. Чтобы соответствовать WCAG 1.0, необходимо удовлетворить всем контрольным точкам с приоритетом 1. Соблюдение всех контрольных точек с приоритетом 1 предоставляет рейтинг соответствия «A» (1A). Если вы удовлетворяете также контрольным точкам с приоритетом 2, то вы будете соответствовать рейтингу «AA» (2A). Если вы удовлетворяете всем контрольным точкам с приоритетами 1, 2 и 3, то вы будете соответствовать рейтингу «AAA» (3A), который является самым высоким.

Однако в современных условиях WCAG 1.0 несколько устарел, так как со времён 1999 года, стали активно применяться новые технологии, такие как JavaScript, ARIA Drag-and-Drop и другие. К тому же он изначально разрабатывался как часть пакета из трёх документов, где второй документ отводился для описания браузеров и вспомогательных программ доступности, например, screen reader-ов, а третий охватывал средства разработки, например, Dreamweaver, и CMS. Предполагалось, что большая часть работы по обеспечению доступности сайтов будет приходиться как раз на их долю. Однако общее признание из всех трёх получил лишь WCAG, описывающий только приёмы CSS. Таким образом, часто складывается ситуация, когда ожидания WCAG 1.0 в отношении агентов пользователей не удовлетворяются, поэтому даже полное соответствие WCAG 1.0 не гарантирует абсолютно доступности ресурса.

  • Официальная английская версия WCAG 1.0: http://www.w3.org/TR/WAI-WEBCONTENT/
  • Неофициальная русская версия «Руководство по созданию доступного веб-контента. Версия 1.0. Приемы CSS»: http://tiflocomp.ru/docs/wcag10_css.php

Рекомендации по доступности web-контента (WCAG) Samurai

26 февраля 2008 года группа разработчиков под руководством Джо Кларка (англ. Joe Clark), независимо от «W3C», опубликовала корректировки и расширения стандарта WCAG 1.0, получившие название WCAG Samurai. Данный документ предназначался для приведения WCAG 1.0 в соответствие современным реалиям web-технологий. Однако данный комплекс рекомендаций так и не получил широкого признания, так как не был поддержан консорциумом W3C, который в декабре того же года выпустил следующую версию WCAG.

Рекомендации по доступности web-контента (WCAG), версия 2.0

11 декабря 2008 года консорциум «W3C» опубликовал следующую версию рекомендаций — WCAG 2.0. Версия 2.0 отличается от 1.0 большей технологической независимостью, то есть данный комплекс рекомендаций в равной мере актуален для всех основных web-технологий: HTML, CSS, Flash и так далее.

В WCAG 2.0 используются те же три уровня соответствия, но общий подход к анализу ресурса несколько пересмотрен с целью получения большей универсальности стандарта. Он основывается на четырёх принципах доступности:

  1. Воспринимаемость:
    Люди должны получить доступ к контенту через ту среду, которая им доступна. Например, люди с нарушением зрения должны иметь возможность услышать контент.
  2. Взаимодействие:
    Люди должны иметь возможность взаимодействовать с приложением web или контентом в любых условиях.
  3. Понятность:
    Контент и интерфейс пользователя должны быть понятны всем людям, которые их используют.
  4. Надёжность:
    Любое предоставляемое решение должно быть широко доступно для использования на различных платформах или системах. Это должно остановить людей изобретать решения, которые большинство пользователей не смогут использовать, потому что оборудование/программное обеспечение ограничено или чрезмерно дорого.

Разумеется, не предполагается, что web-сайты будут удовлетворять абсолютно всем этим требованиям на 100%. Технология, которую имеет пользователь, также должна сделать часть работы. Например, ожидается, что screen reader будет читать страницы людям, которым это требуется, а не каждый web-сайт будет предоставлять аудио-версию своего контента. Однако в то же время ожидается, что web-сайт предоставит страницы, которые можно прочитать с помощью обычной программы чтения экрана.

WCAG 2.0 также отличается от WCAG 1.0 в техническом подходе. Так как стандарт более независим от технологии, и имеет дело с концепциями доступности, а не с конкретными техническими деталями, то важно уделить внимание сопровождающим стандарт документам.

Документ «стандарта» WCAG 2.0 (http://www.w3.org/TR/WCAG20/) даст понимание, а «технический» документ (http://www.w3.org/TR/WCAG20-TECHS/) предоставит разработчику надёжные реализуемые фрагменты информации. Всё это разбивается на «общие» методы (технологически неопределённые) и специфические для отдельных технологий «W3C».

Для перехода с WCAG 1.0 на 2.0 «Web Accessibility Initiative» разработало соответствующее руководство — «Comparison of WCAG 1.0 Checkpoints to WCAG 2.0, in Numerical Order» (http://www.w3.org/WAI/WCAG20/from10/comparison/).

Section 508

В 1998 году Конгресс США внёс поправки в закон «American Workforce Rehabilitation Act» от 1973 года. Данный нормативный акт обязывает все федеральные органы США обеспечивать доступность своих средств массовой информации. Раздел №508 был принят с целью устранения препятствий для людей с ограниченными физическими возможностями в области информационных технологий. Закон в обязательном порядке распространяется на все федеральные ведомства Соединённых Штатов и охватывает как доступность web, так и другие вопросы доступности, связанные с компьютерными системами и электронной коммуникацией.

Как уже было отмечено, закон распространяется только на правительственные агентства, но многие негосударственные учреждения также используют рекомендации Section 508 по собственной инициативе, в том числе и находящиеся за пределами Соединённых Штатов.

Частью Section 508, которая охватывает web-доступность, является «Subpart B §1194.22» (http://www.access-board.gov/sec508/standards.htm#Subpart_b). Статья 1194.22 состоит из шестнадцати требований, помеченных латинскими буквами от A до P.

Первые 11 требований (A-K) сформулированы как прямые эквиваленты частей WCAG 1.0. Эти требования и их эквиваленты в WCAG 1.0 перечислены в справочной таблице в документе Section 508. Все другие требования Section 508 должны удовлетворяться в WCAG 2.0 с одним исключением. Требование M относится к Section 508 Subpart B §1194.21. Это требование имеет частичный эквивалент в принципе «Надёжности» WCAG 2.0.

В настоящее время консультативный комитет телекоммуникаций и электронных и информационных технологий (англ. Telecommunications and Electronic and Information Technology Advisory Committee, сокращённо — TEITAC) продолжает работу над усовершенствованием Section 508. В частности в апреле 2008 года TEITAC представил свои предложения по модификации данного стандарта экспертному совету Section 508.

  • Английская версия Section 508: http://www.section508.gov
  • Нормативы Раздела 508 в отношении web-доступности — частичный перевод на русский язык параграфов Section 508, касающихся web-доступности.

WAI-ARIA, версия 1.0

Ещё одним важным стандартом, разработанным консорциумом W3C, в 2008-2009 годах является стандарт WAI-ARIA 1.0, что расшифровывается как «Web Accessibility Initiative — Accessible Rich Internet Applications (Инициатива доступности web — доступность высокотехнологичных Интернет-приложений). Это пакет документов, который определяет, как сделать доступными сложные динамические web-приложения, которые используют такие технологии, как HTML, JavaScript и AJAX. Этот стандарт официально поддерживается ведущими Интернет-браузерами: Firefox 3.x и выше, Internet Explorer 8 и выше, Opera 9.5 и выше, а также некоторыми другими.

Дело в том, что ряд новых динамических web-технологий могут вызвать проблемы у пользователей с ограниченными физическими возможностями, главным образом, у людей с нарушениями зрения и моторики. Поэтому их разработка требует соблюдения определённых норм доступности для этой категории пользователей.

ГОСТ Р 52872-2007 Интернет-ресурсы. Требования доступности для инвалидов по зрению

1 января 2009 года в Российской Федерации вступил в действие национальный стандарт ГОСТ Р 52872-2007 «Интернет-ресурсы. Требования доступности для инвалидов по зрению» (англ. The Internet resources. Requirements of accessibility for invalids on sight). Данный документ был разработан ФГУП «СТАНДАРТИНФОРМ» и НУ ИПРПП ВОС «Реакомп» по заказу Федерального агентства по здравоохранению и социальному развитию в рамках федеральной целевой программы «Социальная поддержка инвалидов на 2006-2010 годы», утверждённой постановлением правительства Российской Федерации от 29 декабря 2005 года. Данный документ стандартизует русскоязычные Интернет-ресурсы и призван установить общие требования их доступности для людей с нарушениями зрения.

В ГОСТе Р 52872-2007 требования доступности ресурса выражаются в виде набора из нескольких десятков рекомендаций, касающихся общего дизайна сайта, обязательного использования некоторых HTML-конструкций, структуры и особенностей вёрстки Интернет-страниц.

Однако данный документ не лишён ряда ощутимых недостатков и вызывает немало вопросов. Например, сайт, созданный с безусловным соблюдением пункта 5.2 «Графические файлы»:

Каждый графический файл должен быть снабжен поясняющим текстом. Для этого при включении в веб-страницу ссылки на графический файл (язык HTML) необходимо указать данный поясняющий текст в атрибуте ALT

может быть неудобным для посетителя ресурса, так как при этом на странице будет присутствовать информация не только о графических элементах, несущих конкретную смысловую нагрузку, например, «Картина К. Малевича — Чёрный квадрат» или «Логотип компании с изображением глобуса», но и простых элементов визуального дизайна, например, «Голубая волнистая линия» или «узор с цветочками», что будет только мешать работе незрячего пользователя.

Требование пункта 5.1 «Объем контента»:

Частопосещаемые страницы по своему объему должны быть не более 2-3 экранов текста. Число ссылок на странице должно быть не более 15

также вызывает вопросы, например, «Что делать сайтам, у которых только меню уже насчитывает более 15 гиперссылок или сайтам типа wiki?», а главное не ясны мотивы ограничения числа ссылок с точки зрения доступности для инвалидов по зрению.

Однако имеет смысл отметить тот факт, что Федеральным законом «О техническом регулировании» №184-ФЗ от 27 декабря 2002 года разделены понятия «технический регламент» и «стандарт», в связи с чем все ГОСТы утрачивают обязательный характер и применяются добровольно, за исключением некоторых категорий, к которым ГОСТ Р 52872-2007 не относится. То есть данный документ носит лишь рекомендательный характер и несоблюдение его норм не влечёт никаких последствий для Интернет-ресурсов, в том числе и государственных, что делает его по сути бесполезным. К тому же раде справедливости стоит заметить, что не сайт института «Реакомп», как разработчика, не сайт Федерального агентства по техническому регулированию и метрологии, как учреждения отвечающего за распространение этого документа, не соответствуют данному ГОСТу. Причём на сайте Федерального агентства по техническому регулированию и метрологии сам данный документ выложен с нарушением себя самого, так как представлен в графическом формате с низким разрешением без текстовой альтернативы (несоответствие пункту 4.2.1 данного ГОСТа).

Таким образом, ГОСТ Р 52872-2007 не несёт никакой практической пользы по улучшению доступности Интернет-ресурсов для инвалидов по зрению и по сути является очередной «потёмкинской деревней». В данном же обзоре он рассматривается отдельно только потому, что имеет непосредственное отношение к русскоязычной части Интернета. Однако для web-разработчиков, озабоченных вопросом доступности их ресурсов, намного более полезно обратить внимание на стандарты Section 508 и, главным образом, на WCAG 2.0.

Тестирование web-доступности

После того, как сайт был создан, и при этом разработчик честно пытался следовать всем рекомендациям по обеспечению доступности web-контента, имеет смысл проверить, действительно ли ресурс соответствует заявленному accessibility-статусу.

Сразу следует отметить тот факт, что начать тестирование вашего ресурса желательно с проверки его ключевых страниц общими валидаторами HTML и CSS. Так как даже если ваш сайт был создан с учётом основных стандартов доступности, вряд ли он может считаться качественным продуктом, если, при всём этом, не соответствует базовым спецификациям. К тому же валидный HTML- и CSS-код — это уже половина успеха на пути создания доступного ресурса. Для осуществления подобной проверки существуют инструменты, предоставляемые консорциумом «W3C»:

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

Автоматизированное тестирование

Как уже было отмечено выше, существует достаточно много стандартов доступности сайтов. Разумеется, автоматизированные системы проверки созданы далеко не для всех. Однако с проверкой самых основных проблем не возникнет.

Если разработчик при создании своего сайта придерживался стандарта WCAG 1.0 или Section 508, то ему следует воспользоваться сервисом «Cynthia Says», доступным по адресу: http://www.cynthiasays.com. Здесь следует указать URL-адрес проверяемой страницы и задать стандарт, в соответствии с которым следует выполнять проверку. Причём для WCAG 1.0 можно выбрать один из трёх возможных уровней: 1A, 2A или 3A. При необходимости, можно задать дополнительные настройки. Например, для проверки доступности динамического контента имеет смысл провести тестирование несколько раз в режимах совместимости с разными браузерами, так как на разных Интернет-обозревателях он может выглядеть по-разному.

Если же разработчиком был использован стандарт WCAG 2.0, то «Cynthia Says» в данном случае будет бессилен. Для проверки соответствия стандарту WCAG версии 2.0 следует воспользоваться сервисом «ATRC Web Accessibility Checker», доступным по адресу: http://checker.atrc.utoronto.ca. Здесь также следует указать URL-адрес страницы и нажать на кнопку «Check It», но помимо проверки по URL сервис также предоставляет возможность загрузить файл напрямую. Это может быть полезно в том случае, если ваш сайт ещё не размещён в Интернете. «ATRC Web Accessibility Checker» также пригоден для проверки соответствия не только международному стандарту WCAG 2.0, но и некоторым региональным, например, уже упоминавшимся BITV 1.0 Level 2 или Stanca Act.

Однако всегда следует помнить, что современные системы искусственного интеллекта далеки от совершенства. Поэтому подобные методы тестирования доступности не являются абсолютно автоматизированными. Программист ресурса всё равно должен вручную просмотреть результат проверки и самостоятельно решить, является ли помеченное место проблемным в отношении доступности. Например, если система «Cynthia Says» встречает в коде страницы конструкцию типа , то она всегда выдаёт предупреждение, призывая проверить, что это изображение используется только для дизайнерских целей и не несёт конкретной смысловой нагрузки. Подробнее подобная ситуация уже рассматривалась в обзоре ГОСТа Р 52872-2007, разработчики которого не учли всех её нюансов.

Топ-пост этого месяца:  Минификация CSS с помощью CSS Optimizer

Однако проблема доступности может заключаться не только в отдельных HTML-конструкциях или несовершенных полностью автоматизированных публичных тестах Тьюринга для различия компьютеров и людей (CAPTCHA), но и в не оптимальной цветовой схеме сайта. Например, его цветовая палитра может быть недостаточно контрастной. Помочь подобрать оптимальное сочетание цветов может сервис «Color Scheme Designer», доступный по адресу: http://colorschemedesigner.com. Если же требуется проверить уровень контрастности уже существующей страницы, то выполнить это можно при помощи сервиса «Contrast Analyser», доступного по адресу: http://www.paciellogroup.com/resources/contrast-analyser.html. Он определяет контраст между цветами фона и переднего плана.

Также в аспекте цветовой web-доступности имеет смысл затронуть такое понятие, как «безопасные цвета web», хотя данная тема и не имеет прямого отношения к автоматизированному тестированию доступности. Это наследие тех времён, когда компьютерные мониторы могли гарантировано выводить только 216 цветов (так называемая палитра 6×6×6). Эти 216 цветов должны были выглядеть одинаково на всех компьютерных платформах и браузерах, которые содержала 256-цветная (8-битная) компьютерная система, поэтому они были названы безопасными для использования на различных платформах, так как их применение при любых условиях не влекло никаких проблем совместимости. В системе RGB они кодируются в каждом из трёх потоков как 00, 33, 66, 99, CC и FF. Однако современные браузеры способны работать с 32-битным цветом, который создаёт палитру из 4294967296 различных цветов. Поэтому сейчас концепция безопасных цветов web не является особо актуальной, однако об этом не помешает знать любому web-разработчику.

Пользовательское тестирование

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

Тестеров можно найти среди своих знакомых или в соответствующих Интернет-сообществах, которые есть на всех языках, в том числе и на русском. Также можно обратиться в рекрутинговые агентства, но на постсоветском пространстве это вряд ли даст ощутимые результаты, так как на таком уровне данная сфера развита только в Западной Европе и отдельных странах Северной и Южной Америки. Для русскоязычного проекта оптимальным вариантом будет являться связь с представителями соответствующего сетевого сообщества.

Доступность является важным понятием, как по экономическим, так и по социальным причинам. Это не только функциональное свойство web-сайта, а ещё и показатель качества, с которым он был создан. Если учитывать аудиторию сайта со всеми её особенностями во время его создания, то вы создадите более доступные страницы со всеми преимуществами, которые это приносит.

Как улучшить доступность веб-страниц

«The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect».

Tim Berners-Lee, создатель World Wide Web и директор W3C

8 советов, как сделать сайт доступным каждому человеку, включая тех, кто имеет ограниченные возможности

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

Что такое веб-доступность?

Согласно W3C, “web accessibility means that every person can perceive, understand, navigate, interact with, and contribute to the web”. Если переводить на русский, то веб-доступность означает, что каждый человек может воспринимать, понимать, перемещаться, взаимодействовать и вносить вклад в Интернет. Это значит, что вся информация на веб-сайте должна быть доступна даже людям с ограниченными возможностями. Как этого добиться? Читайте ниже.

Совет 1

Не делайте зависимость от цвета.

По статистике, один из видов дальтонизма есть приблизительно у 8% мужчин и 0,5% женщин – то есть примерно 300 млн человек страдают от цветовой слепоты. Если говорить о России, то в 2012 году число дальтоников составляло около 4 миллионов.

Именно поэтому не следует делать за сайте какую-то важную зависимость, основанную на цвете. Например, правильно заполненные поля обычно помечаются зеленым, а неправильно заполненные – красным. Но человек с цветовой слепотой просто не увидит разницы между двумя полями – и специально для таких людей следует использовать также графические символы . Пример (Facebook):

Кстати, Марк Цукерберг, создатель Facebook, является дейтеранопом, то есть плохо различает красный и зеленый. Поэтому основной цвет Facebook – синий. «Синий – самый многогранный цвет для меня, я могу различить все оттенки синего» (“Blue is the richest color for me — I can see all of blue”) – Марк Цукерберг.

Еще полезно придерживаться минималистичного дизайна . Использование небольшого количества цветов в дизайне – это не только мода, но и удобство, особенно для людей с цветовой слепотой. Поэтому лучше использовать на сайте палитру из 2-3 цветов.

Проблемные сочетания, которые могут вызывать сложности восприятия у дальтоников:

  • Зелёный и красный
  • Зелёный и коричневый
  • Синий и фиолетовый
  • Зелёный и синий
  • Салатовый и желтый
  • Синий и серый
  • Зелёный и серый
  • Зелёный и чёрный

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

Кстати, проверить себя (нет ли у вас цветовой слепоты) можно по тесту Ишихары .

Почитать о дизайне для дальтоников глазами дальтоника можно в интересной переводной статье на Хабрахабре « Создание дизайна для дальтоников (и вместе с ними) ».

Совет 2

Оставьте возможность масштабирования в мобильной версии.

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

Поэтому не нужно устанавливать maximum-scale=1.0 – это лишит пользователей возможности делать страницу крупнее:

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

Совет 3

Используйте атрибут alt.

Несколько важных вещей об атрибуте alt:

  1. Этот атрибут обязателен для каждого тега изображения ( ), однако допускается оставлять его пустым. Поэтому если речь идет о какой-то декоративной картинке или изображении, которое не влияет на содержание страницы, можно просто использовать alt=””.
  2. Скринридеры (программы, зачитывающие информацию на экране) определяют, что тег это картинка, поэтому не нужно повторяться и написать в атрибуте alt «Это картинка, где показано…» – просто сразу переходите к значению, смыслу изображения.
  3. Важно учитывать не только значение изображения, но и функцию, которую оно несет. Например, если это логотип сайта, нажав на который можно перейти на домашнюю страницу, то в alt лучше написать «Домашняя страница», а не «Логотип».
  4. Прописывая alt, думайте не только о людях с ограниченными возможностями, но и о тех, кто отключает изображения из-за низкой скорости передачи данных.

А если у вас есть изображения в формате svg, то используйте теги и для короткой и длинной подписи.

Совет 4

Добавьте субтитры и описания к своим видеороликам.

Пожалуй, это один из самых трудоемких советов – в первую очередь из-за того, что он требует большого количества времени для выполнения работы. Есть несколько способов сделать субтитры:

  1. Если речь о YouTube, то субтитры можно включить при загрузке видео. Правда, это будут автоматически сгенерированные субтитры, которые наверняка будут содержать ошибки и неточности. Но если это англоязычное видео, то субтитры будут более-менее адекватно передавать сказанное в ролике.
  2. Если же вам нужны точные субтитры, то лучше сделать их самостоятельно (либо нанять какого-нибудь). YouTube понимает стандартные форматы субтитров (.srt, .sub, .sbv), а также дает возможность написать субтитры прямо в своем сервисе – и это очень удобно, особенно если у вас нет программ для создания субтитров.
  3. Если вы не используете YouTube для размещения своего видео, а загружаете его на свой сервер, то используйте тег, который позволяет указывать текстовую дорожку для видео и аудио файлов – то есть субтитры, заголовки, описания и так далее.

Более подробно про этот тег можно почитать на ресурсе htmlbook .

Совет 5

Используйте семантическую разметку.

Некоторые считают, что семантическая разметка появилась только в HTML5 – это не так. Она существовала с самой первой HTML-страницы, но с тех пор была значительно переработана. В HTML5 появились новые семантические теги, которые обязательно следует использовать – и не только для SEO.

Основная задача семантической разметки – это создание такой структуры документа, которая будет понятна на всех этапах разработки, вплоть до размещения в сети и посещения сайта пользователями. Например, когда вместо

или вы используете

, вы изменяете значение этого элемента, создавая иерархию и структуру информации на странице. И это может значительно помочь скринридерам.


И не забывайте, что важно не просто использовать семантические теги, а использовать их правильно .

Совет 6

Используйте правильные теги.

Вдогонку к предыдущему совету необходимо обсудить использование нескольких тегов, а именно:

Time и Datetime

Элемент отвечает за отображение временных зон и форматов дат, используя стандарт ISO 8601 для показа даты и времени.

Datetime – это необязательный атрибут, который устанавливает дату и время редактирования текста.

Del и Ins

Информация на сайтах постоянно меняется, и нет необходимости оставлять эти изменения незамеченными. При помощи тегов и вместе с атрибутом datetime можно помечать эти изменения.

Тег показывает, какие изменения были добавлены в текст документа:

Тег отвечает за удаленную информацию:

Совет 7

Следуйте веб-стандартам доступности.

Существует еще много информации, которая не упомянута в этой статье. Поэтому вам следует обратиться к двум документам:

Там вы можете найти варианты кода, о которых, может быть, раньше даже не слышали.

Совет 8

Проверьте доступность сайта.

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

  • ChromeVox – Chrome-расширение, доступное для пользователей Mac и Windows; используйте этот скринридер, чтобы протестировать сайт;
  • Accessibility Developer Tools for Chrome – еще одно полезное расширение для браузера, которое позволяет добавить в инструменты разработчика опцию проверки доступности;
  • Color Filter – сайт, где вы можете посмотреть, как видят ваш сайт дальтоники;
  • W3C Validator – официальный инструмент W3C, который проверит, соответствует ли разметка вашего сайта правилам веб-доступности.

Каковы наилучшие методы для обеспечения доступности веб-сайта?

Я ищу лучшие практики для проектирования сайта, который с учетом доступности. Сайт будет иметь много пожилых и менее способных людей, посещающих его, и я хочу сделать его максимально дружелюбным для них. Есть ресурс, который описывает все правильные теги и атрибуты использовать?

14 ответов

вот краткий список, который я склонен следовать

  • убедитесь, что он использует чистую разметку XHTML идеально для стандартов AAA,
  • попробуйте, где это возможно, пролить HTML, CSS, Javascript в соответствующие файлы,
  • создайте различные таблицы стилей для печати, экрана и т. д.,
  • убедитесь, что вы принимаете во внимание цвета и шрифты для жесткого зрения и цветовой слепоты,
  • попробуйте разместить основную навигацию только в верхней части кода, чтобы фактическое содержимое отображается в верхней части кода, таким образом, людям не нужно прокручивать далеко, чтобы увидеть содержимое, особенно если они используют средство чтения с экрана / низкое разрешение,
  • Если у вас есть много навигации перед контентом, то поместите ссылку рядом с верхней позволяет пользователям перейти к контенту,
  • убедитесь, что самая первая ссылка на странице-это текстовая / низкая графическая версия сайта,
  • убедитесь, что все страницы и все основные функции будут работать без включения JavaScript,
  • есть много плагинов для firefox, чтобы помочь в разработке, включая:
    • Веб-Разработчик
    • Нет Скрипта
    • HTML валидатор
    • Палий
  • убедитесь, что страница отображается во всех браузерах, включая старые, даже если это означает, что она работает, хотя и не соответствует дизайну.
  • убедитесь, что HTML, CSS, JavaScript хранится до минимального размера файла, чтобы помочь загрузке раз, например, удалить пробел и пустые строки,
  • всегда используйте метки в формах и alt, теги заголовка в ссылках и изображениях,
  • используйте только таблицы для табличных данных и убедитесь, что данные соответствующим образом помечены,
  • по возможности не используйте JavaScript для записи контента на страницу, но используйте CSS, чтобы скрыть его, таким образом, JavaScript отключен или не работает должным образом, тогда контент все равно появится,
  • всегда убедитесь, что вы используете onkeypress, а также onclick события в JavaScript encase пользователь не может / не использует мышь.

наконец, если вам нужно использовать пустые изображения на странице для отслеживания и т. д. тогда не давайте им теги Alt. Это мой собственный взгляд и тот, который горячо обсуждается в интернете, особенно когда изображения 1x1px использовались для интервалов. Однако, насколько я вижу, если вы используете экранный ридер, то вы не то, что он читает глупые комментарии для изображений, которые ему не нужно видеть.

есть много ресурсов, в зависимости от ваших целей.

настоятельно рекомендуем вам начать с:

508 (законодательство США, очевидно, ориентированное на США)

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

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

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

между прочим.. предоставьте атрибуты» alt «и» title «для каждого тега» img».

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

правительство предоставляет стандарт под названием 508 это определяет, что делает сайт совместимым.

несколько вещей, чтобы иметь в виду:

имейте ссылку CSS на каждой странице, которая легко позволяет изменять размер шрифта.

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

обеспечение того, что все теги alt и т. д., Как указано в других ответах, жизненно важны.

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

убедитесь, что вещи легко читать и найти. уже одно это значительно облегчит работу.

есть много много ресурсов по этой теме. На самом деле опасность заключается в информационной перегрузке, а не в недостатке информации.

но альтернативный подход-думать о своей HTML-странице в общих терминах, а не о визуальном выходе, который вы видите в веб-браузере. Если вы написали часть программного обеспечения, которое интерпретировало веб-сайт, что было бы полезно? Это обходной способ сказать использовать хорошую семантику. Мои лучшие советы — использовать стандартный XHTML для контента и CSS на проектирование. Также найдите такие темы, как» прогрессивное улучшение «и»поведенческий Javascript».

но для ресурсов:

  • инициатива веб-доступности W3C: www.w3.org/wai
  • www.WebAIM.org
  • www.Accessify.com
  • www.CSSZenGarden.com для вдохновения о том, как семантическая разметка может быть стилизована, чтобы выглядеть совсем по-другому.

Это еще не упоминалось, поэтому я думаю, что упомянул бы об этом. Если вы хотите, чтобы слепые пользователи могли использовать ваш сайт, избегайте flash. Самое большее 1% flash, который я нахожу в интернете, доступен.

хороший список ресурсов о доступности (дальтоник,типография и т. д.)-Это здесь в конструкции пути. Для проверки веб-сайта и общей документации я использую W3C по.

Если вы развиваетесь в asp.net инструмент opensource NAAK может быть полезен.

должны читать «проектирование с веб-стандартами»

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

Разработка сайта для учреждения социальной защиты с целью обеспечения доступности социальных услуг Текст научной статьи по специальности « Автоматика. Вычислительная техника»

Аннотация научной статьи по автоматике и вычислительной технике, автор научной работы — Петрова И. А., Непейвода В. И.

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

Похожие темы научных работ по автоматике и вычислительной технике , автор научной работы — Петрова И. А., Непейвода В. И.,

WEBSITE DEVELOPMENT FOR INSTITUTION OF SOCIAL PROTECTION TO ENSURE ACCESS TO SOCIAL SERVICES

Recently, social protection institutions need to increase information accessibility, as well as to improve the forms of prov >WordPress .

Текст научной работы на тему «Разработка сайта для учреждения социальной защиты с целью обеспечения доступности социальных услуг»

«[email protected]@qyiym-J©yrMaL»#2î2â),[email protected] / TECHNICAL SCIENCE 40

Рис. 2 Пример 3D модели рельефа местности Заключение

Если предположить создание базы данных в MySQL, и вспомогательных программ на языке Python, то можно говорить, что данная система будет совместима с различными программами, в том числе и с геоинформационными системами. В таком случае данная система нашла бы свое применение в более широком кругу ведомств. Кроме того, по изначальному назначению, такая система мониторинга существенно снизила бы экономические и временные затраты, а сам мониторинг стал бы эффективнее.

1. Захаровская Н.Н., Ильинич В.В. Метеорология и климатология. — М.: КолосС, 2004 г. — 127 с.

2. Литвинов А.С., Девяткин В.Г., Рощупко В.Ф., Шихова Н.М. 2005. Многолетние изменения

характеристик экосистемы Рыбинского водохранилища // Актуальные проблемы водохранилищ. Рыбинск: Рыбинский дом печати. С. 190-199.

3. Науменко Н.О., Новиков А.В., Сумарукова О.В. Волга и ее жизнь: сборник тезисов докладов Всероссийской конференции, «Оценка негативного влияния на экосистему вследствие возможного прорыва плотины на Рыбинском водохранилище» 99 с. / Ин-т биологии внутр. вод им. И.Д. Папанина РАН, Борок, 22-26 октября 2020 г. — Ярославль: Филигрань, 2020. — 158 с.

4. Русин И.Н. Стихийные бедствия и возможности их прогноза. — СПб, изд., РГГМИ, 2003 — 140 с.

Петрова И.А., Непейвода В.И.

Лесосибирский филиал федерального государственного бюджетного образовательного учреждения высшего образования «Сибирский государственный университет науки и технологий

имени М. Ф. Решетнева»

РАЗРАБОТКА САЙТА ДЛЯ УЧРЕЖДЕНИЯ СОЦИАЛЬНОЙ ЗАЩИТЫ С ЦЕЛЬЮ ОБЕСПЕЧЕНИЯ ДОСТУПНОСТИ СОЦИАЛЬНЫХ УСЛУГ

Petrova I.A., Nepeyvoda V.I.

Lesosibirsk branch of Federal State Budget Education Institution of Higher Education «Reshetnev Siberian State University of Science and Technology»

WEBSITE DEVELOPMENT FOR INSTITUTION OF SOCIAL PROTECTION TO ENSURE ACCESS

TO SOCIAL SERVICES

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

>#2(263,2 i Не можете найти то, что вам нужно? Попробуйте сервис подбора литературы.

1. Разработка информационной структуры.

2. Формирование нового дизайна.

3. Создание главного меню.

4. Перенос данных со старого сайта на новый.

Рассмотрим этапы разработки сайта более подробно.

Перед началом работы необходимо установить WordPress на хостинг. Для разработки будем использовать бесплатный хостинг Beget.com.

Хостинг Beget — это один из крупнейших хостинг-провайдеров из Санкт-Петербурга. Компания основана в 2007 году и сегодня занимает лидирующие позиции по количеству клиентов и качеству предоставляемых услуг в России и ближнем зарубежье. За многолетнюю работу хостинг Beget заработал себе отличную работу благодаря стабильной работе, профессиональной технической поддержке, удобной и интуитивно-понятной системе управления [3].

Чтобы зарегистрироваться на хостинге переходим на главную страницу сайта Beget.com и выбираем Free хостинг, после вводим свои ФИО и номер мобильного телефона и нажимаем «Зарегистрировать аккаунт».

Далее заходим под своим логином на созданный хостинг и переходим в раздел CMS. Выбираем WordPress и в открывшемся окне вводим название сайта, логин, пароль и e-mail администратора, а также создаем базу данных (пункт «Расширенная настройка БД»), после нажимаем на кнопку «Установить».

После установки CMS переходим в консоль WordPress. Необходимо выбрать тему для будущего сайта. Для этого нужно найти в консоли вкладку «Внешний вид» и выбрать подпункт «Темы». Откроется список уже установленных тем, но визуально они не подходят для сайта государственного учреждения, поэтому нажимаем кнопку «Добавить новую». Из появившегося списка нужно выбрать наиболее подходящую тему и нажать кнопку «Установить». После установки необходимо активировать тему нажатием на кнопку «Активировать». В качестве основной была выбрана бесплатная тема OceanWP, которая в дальнейшем была доработана. Теперь необходимо создать Web-страницы, которые также будут являться пунктами навигационного меню сайта. Для того чтобы создать страницу, нужно в консоли WordPress выбрать пункт «Страницы» и нажать «Добавить новую». Откроется окно для заполнения информации о странице. Содержимое можно заполнять в обычном виде, нажав на вкладку «Визуально», также можно вводить информацию с помощью html-раз-метки (кнопка «Текст»). В любой момент можно посмотреть, как страница будет выглядеть на сайте, нажав на кнопку «Просмотреть». Для того чтобы можно было использовать страницу на сайте, необходимо нажать «Опубликовать».

«[email protected]@qyiym-J©yrMaL»#2î2â),[email protected] / TECHNICAL SC0EMC1

Когда все страницы созданы, нужно наполнить их информацией со старого сайта МБУ КЦСОН г. Лесосибирска. Наполнять сайт мы будем с помощью специального плагина Elementor.

Для того чтобы установить плагин, нужно перейти на вкладку «Плагины» и выбрать «Добавить новый». В открывшемся окне ввести название плагина. Когда плагин будет найден, необходимо нажать на кнопку «Установить», а после установки нажать «Активировать».

Создадим меню сайта. Главное меню будет состоять из пяти основных пунктов, которые включают в себя свои подменю. Переходим на вкладку «Внешний вид», выбираем пункт «Меню», вводим новое название. В блоке со страницами выбираем нужные и нажимаем «Добавить в меню». Добавленные страницы отобразятся в структуре меню, где её можно настроить. После настройки структуры выбираем область отображения «Primary», чтобы главное меню было основным для сайта.

После создания навигационного меню сайта необходимо скорректировать визуальную составляющую с помощью настройки темы («Внешний вид» — «Настроить»). В результате корректировки меню сайта было визуально перестроено.

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

ресурсами, версия сайта для слабовидящих и бан-нер с погодой. Для наполнения страницы информацией был использован вышеописанный плагин -Elementor.

Для создания слайдера использован плагин MetaSlider. После установки он отобразится в консоли WordPress. В результате нажатия на него отроется диалоговое окно, в котором можно создать слайдер. В настройках плагина можно выбрать размер отображаемого слайдера, эффект перехода, дизайн и так далее. Для добавления картинки в слайдшоу нужно нажать на «Добавить слайд», после чего выбрать изображения из библиотеки загруженных картинок или с компьютера. К каждому изображению нужно добавить ссылку на соответствующий информационный ресурс. В конце работы нужно нажать «Сохранить» и разместить слайдеры на главной странице.

Версия сайта для слабовидящих была реализована с помощью плагина Button visually impaired. После того как плагин был установлен, он появился в виджетах сайта, откуда и был добавлен в правый нижний сайдбар. Для показа погоды был использован плагин Weather Atlas Widget. В результате расположения всех четырех блоков в одном месте была сформирована главная страница сайта (рис. 1).

Рис. 1. Главная страница сайта

Создание официального сайта МБУ «Комплексный центр социального обслуживания населения города Лесосибирска» в системе WordPress позволило упростить администрирование сайта, систематизировать размещаемую на нем информацию, а также обеспечить её доступность.

1. Приказ Минтруда России №886н от 17 ноября 2014 г. «Об утверждении Порядка размещения на официальном сайте поставщика социальных услуг в информационно-телекоммуникационной

Повышение юзабилити веб-сайта: как сделать сайт удобным для пользователей

Что такое юзабилити

Зачастую, при продвижении сайтов, да и что там при продвижении, даже при разработке крайне малую роль отводят юзабилити сайта. Однако, удобство ресурса является далеко немаловажным фактором (особенно если учесть то, что оно непосредственным образом влияет на увеличение продаж). Поэтому я кратко изложу важность удобства сайта, а также приведу небольшой, но содержательный чек-лист юзабилити сайта. Но всё же, перед тем, как давать какие-либо рекомендации по улучшению ресурса, давайте рассмотрим что же такое юзабилити.

Юзабилити — это степень качества общепользовательского навыка, наработанного в результате коммуникации с устройством или системой, к примеру, веб-ресурсом, программным обеспечением, приложением.

Другими словами usability сайта — это простота в использовании, удобство и полезность для посетителей. Это мера, которая оценивает качество использования ресурса, его привлекательность и пригодность к взаимодействию с пользователями.

Целью юзабилити является достижение максимального удобства ресурса. Для чего всё это нужно? Ответим на этот вопрос графически.

Как видим, в основе пирамиды лежит удобный в использовании веб-ресурс с дружественным интерфейсом, следствием чего является положительная реакция со стороны его посетителей, а также совершение целевых действий, таких как звонок, заказ и другие. При прочих благоприятных условиях со стороны компании (быстрая доставка заказа, грамотное консультирование клиента по телефону, высокое качество оказанных услуг и т.д.) пользователь остается довольным и приходит на площадку опять (а может даже и приводит друзей). Таким образом, абсолютную выгоду и счастье получает владелец интернет-площадки с проработанным юзабилити.

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

Оценить и проверить юзабилити сайта можно с помощью следующих пунктов:

  1. Структура.
  2. Важная информация.
  3. Дизайн.
  4. Навигация.
  5. Скорость загрузки.

Разберем подробнее каждый из приведенных выше пунктов.

Структура сайта

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

Важная информация на сайте

Важная, нужная и полезная, на ваш взгляд, информация должна сразу бросаться в глаза (сразу — это в течение первых 3 секунд пребывания на площадке). Для чего это нужно? Опять же для удобства ваших посетителей и повышения юзабилити. Вы же не хотите, чтобы они обошли всю интернет-площадку в поисках таких страниц, как, к примеру, “Контакты”, “Оплата и доставка”, номера телефонов, график работы компании и т.д. и т.п., и так ничего и не нашли и покинули площадку? Либо нашли, но приложили так много усилий, что уже никуда звонить-то и не хочется, да и зачем звонить, если они уже напрочь позабыли о цели своего визита? Поэтому, такого рода информацию необходимо размещать на заметных местах — в хедере, а некоторую контактную информацию даже дублировать в футере.

Дизайн сайта


Дизайн играет далеко не последнюю роль в плане удобства для пользователей. Что же подразумевается под понятием юзабилити дизайна сайта? Дизайн включает в себя множество критериев, по которым можно оценить удобство веб-площадки. Вот некоторые из них:

  • общее восприятие ресурса легкое (интернет-ресурсы со сложным дизайном плохо воспринимаются его посетителями);
  • графические элементы простые, а их расположение — продуманное;
  • приятные и сочетающиеся тона, в которых выполнен сайт, — не раздражающие и не агрессивные оттенки;
  • элементы управления расположены логически;
  • текст соответствует дизайну (форма подачи текста и его содержание представляют собой единое целое, и именно в таком виде информация наиболее понятна и удобна пользователю);
  • современность и креативность (думаю, что здесь не стоит много писать, и так понятно, что пользователь на дольше задержится на ярком и стильном ресурсе, нежели на площадке с дизайном аля 1980-ые).

Навигация по сайту

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

1. В хедере размещать логотип компании. При этом:

  • логотип находится на каждой странице сайта;
  • кликабельный на всех страницах (даже на главной);
  • желательно должен быть расположен слева в шапке (в крайнем случае по центру шапки, если того требует дизайн);
  • хедер с логотипом фиксированный на всём сайте (делается это для повышения юзабилити, чтобы в любой момент времени из любой точки ресурса пользователь мог вернуться на главную простым нажатием на лого компании);
  • рекомендуется дублировать логотип в футере (либо располагать в подвале ссылку “ На главную ”).

2. Размещать на всех страницах ресурса меню 1-го уровня (т.к. место в меню довольно-таки ограниченно, в нем должны располагаться действительно важные разделы, такие как, к примеру, “О компании”, “Оплата”, “Доставка”, “Контакты”, “Отзывы”, а также основные разделы каталога компании). Естественно, такое меню лучше всего делать фиксированным и размещать непосредственно в шапке, это, естественно, улучшит юзабилити. Хочу отметить, что некоторые ресурсы, дабы не захламлять шапку, располагают все служебные страницы над ней, а уже в самом хедере размещают только основные разделы каталога. Получается как бы две шапки сайта, но в этом определенно что-то есть. Конечно, лучше видеть наглядно, поэтому вот пример такого двойного хедера:

А теперь посмотрим на шапку, которая включает в себя всю информацию в одном меню:

Более удобным является второй вариант, так как у посетителя ресурса не разбегаются глаза и мысли из-за наличия двух равноправных по важности строк с разделами, а его взгляд фиксируется на едином меню. Тем не менее, оба варианта имеют место быть при оценке юзабилити. Всё зависит от тематики проекта, а также от его объема (если ресурс большой, то, конечно же, имеет смысл служебные страницы вынести отдельно от основных разделов каталога). Как говорится, ко всему нужно подходить индивидуально и с умом.

3. На всех страницах ссылки выглядят как ссылки — подчеркиваются, выделяются другим цветом или шрифтом. Пользователь должен сразу видеть, что из всего расположенного на страничке является кликабельной ссылкой, это, несомненно, повысит юзабилити (конечно же, я не имею в виду сайты, которые за определенную плату размещают у себя статьи, содержащие ссылки на другие ресурсы. В таких случаях ссылки как раз чаще всего совершенно не выглядят, как ссылки. Более того, они настолько замаскированы, что даже если вы захотите их найти, то не найдете). Пример заметной ссылки, выделенной другим цветом:

4. В хедере и футере размещать раздел “Контакты”. Всевозможные контактные данные компании (адрес, телефоны, электронная почта, Skype, Viber и т.д.) должны быть абсолютно прозрачными для посетителей ресурса и становиться заметными в течение первых секунд пребывания на сайте (здесь имеются в виду не подставные организации, а реально существующие компании, которые заинтересованы в предоставлении услуг и/или продаже товаров клиентам). Страница с контактами относится к одной из основных страниц в структуре веб-сайтов компаний, предоставляющих услуги и продающих товары. Именно поэтому для повышения юзабилити рекомендуется, чтобы этот раздел находился как в шапке, так и в подвале. Также хочется отметить, что если в футере есть свободное пространство, его можно использовать для того, чтобы разместить там все контакты без перехода в соответствующий раздел. Пример реализации такого подвала:

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

6. В дополнение к предыдущему пункту и в завершение хочется отдельно выделить важнейший навигационный элемент, наличие которого будет считаться огромным плюсом в плане юзабилити ресурса, — это, конечно же, хлебные крошки. Хлебные крошки — это элемент навигации, представляющий путь, который посетитель сайта проделал, начиная с главной страницы, и заканчивая текущей, на которой он находится на данный момент. Рекомендации к хлебным крошкам:

  • реализуются на каждой странице онлайн-площадки (разумеется, помимо главной);
  • заметны и располагаются на видном месте (желательно ближе к левому краю либо по центру, и непосредственно над/под названием текущего раздела);
  • реализуются в общем стиле ресурса и не выбиваются из дизайна;
  • последний раздел навигационной цепочки (текущий раздел, в котором находится посетитель) должен быть некликабельным;
  • важно, чтобы название разделов в точности совпадало с разделами, указанными в цепочке хлебных крошек (бывают случаи, когда в хлебные крошки выводятся не названия разделов, а какие-то заголовки страниц, в результате чего у пользователя могут возникнуть вопросы, а правильный ли переход произошел после нажатия на такой-то раздел, если хлебные крошки говорят об обратном. Это может снизить юзабилити).

Пример качественно оформленных хлебных крошек:

Скорость загрузки сайта

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

В определении скорости загрузки страниц онлайн-площадки могут помочь следующие бесплатные инструменты:

1. PageSpeed Insights — https://developers.google.com/speed/pagespeed/insights/ (показывает скорость загрузки для мобильных устройств, а также для компьютеров, дает предложения по оптимизации);

2. Pingdom Website Speed Test — https://tools.pingdom.com/ (показывает время загрузки страницы, ее размер и др.);

3. Load Impact — https://loadimpact.com/ (моделирует изменение времени загрузки в зависимости от увеличения активных юзеров на площадке).

С помощью таких инструментов, а также многих других, вы можете оценивать скорость загрузки и работать над ее увеличением. Высокая скорость загрузки, несомненно, повысит удобство пребывания на площадке. Как следствие, посетители останутся довольными.

Для чего нужен юзабилити анализ сайта

Улучшение юзабилити сайта – очень значимый аспект в его продвижении. Так как люди становятся все более требовательными и нетерпеливыми, делать акцент на usability крайне важно. Любую страницу на сайте до самого низа прокручивает минимальный процент юзеров. Следовательно, главная цель, которую должны преследовать создатели и владельцы веб-сайтов, – это суметь заинтересовать своего посетителя. Причем сделать это они могут лишь за пару секунд, в течение которых случайному посетителю необходимо понять, где он находится, какие преимущества у этой площадки перед другими подобными ей, и какая выгода его здесь ожидает (теперь вы понимаете, что скорость загрузки играет очень важную роль в юзабилити? Иначе эти несколько секунд человек потратит на ожидание загрузки страницы, а не на ознакомление с площадкой и поиск того, за чем он туда пришел). Если человек не получит эту информацию за минимально короткий срок, он просто покинет ресурс и уйдет на другой, который для него будет более удобным в использовании.

Как сделать веб-ресурс максимально удобным, зародить интерес у человека и удержать его на своем ресурсе?! — работайте обязательно над usability своего сайта.

Все вопросы, которые не раскрыты в статье, оставляйте в комментариях ниже.

Улучшение доступности веб-сайта: обеспечение уникальных и полезных имен

До недавнего времени версии сайтов для людей с ограниченными возможностями были только у ресурсов государственных и муниципальных структур. К тому их обязывал Федеральный Закон «Об обеспечении доступа к информации..». К счастью, забота о доступности предоставляемой информации всем категория граждан стала нормой — компании изучают вопрос о возможности совмещения хорошего дизайна с реализацией сайтов и сервисов «для всех».

Мы подготовили исследование о современных возможностях подобных интерфейсов и решили опубликовать в виде серии статей.

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

В этой статье начнем с обзора лучших мировых практик.

За стандарты разработки сайтов для людей с ограниченными возможностями отвечает WCAG (Web Content Accessibility Guidelines), т.е. рекомендации по доступности содержимого веб-ресурсов. Последняя версия появилась в декабре 2008 года в рамках Инициативы по обеспечению доступности W3C и включила в себя требования не только к сайтам, но и ко всем веб-платформам в целом.

Руководство дает рекомендации, как сделать контент интернет-ресурса доступным пользователей с инвалидностью различных типов: ограничения по зрению, слуху, опорно-двигательной системе, ограничения речи, ментальной сферы и пр.

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

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

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

Не рекомендуется использовать цвет в качестве единственного визуального средства передачи информации или обозначения действия

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

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

Именно поэтому, в процессе дизайна стоит комбинировать цвет с другими идентификационными знаками. В пример приведу инфографику с сайта ВТБ24, где характер уведомления передается не только цветом, но и соответствующим символом, а также пояснительным текстом.

Цвет текста и фона могут быть выбраны пользователем

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

В качестве примера хотелось бы привести сайт РосБанка, с довольно гибкими настройками стиля страницы: можно изменить цвет фона и текста, изменить настройки контрастности, включить/отключить изображения.

Текст

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

Около 7% людей на Планете страдают дислексией — заболеванием, при котором произношение слов и быстрое чтение вызывают затруднения.

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

Именно поэтому, стоит помнить о следующих правилах:

Обычный текст и текст на картинках должен иметь контрастность не менее 7:1

Должна предоставляться возможность изменения размера шрифта (кроме титров и изображений текста) в пределах до 200% без потери контента и функциональности

Цвет текста и фона должны иметь гибкие настройки, которые пользователь может менять сам

Строка не должна быть длиннее 80 символов

Запрещено выравнивание по ширине

Минимальный межстрочный интервал — не менее 1,5 интервалов, а интервал между абзацами — минимум в 1,5 раза больше

Текст на изображениях должен использоваться только для оформления

Текст кнопок и ключевых элементов должен быть информативным

Все поля ввода должны иметь осмысленные текстовые метки

Шрифт должен быть разборчивым

Однако шрифт в интерфейсах данного класса не всегда нужно менять. В ряде случаев в этом нет необходимости. Например, для текстов с большим кеглем (чаще всего заголовки первого уровня в основном контенте и наименования промобаннеров) минимально допустимый уровень контрастности снижается до соотношения 4.5:1. Второстепенный текст, несущий только декоративную функцию, также можно не изменять ни по размерам, ни по контрастности. Все логотипы и торговые марки, в символике которых присутствует текст, сохраняют свою первоначальную форму и контрастность.

Не текстовый контент

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

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

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

Элементы управления должны иметь описание назначения.

Продемонстрируем это на примере сайта МБУ «Лицей № 57» г.о. Тольятти school57.tgl.ru, являющегося победителем Общероссийского рейтинга школьных сайтов. У каждой ссылки на другую страницу есть альтернативное описание «Страница n»

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

На видео-ресурсе youtube.com к кажому видео прикладывается его краткое описание. Видеозаписи снабжены субтитрами, которые можно перевести на различные языки. Субтитры не только передают прямую речь, но и описывают фоновую музыку и сопутствующие звуки.

Контент, созданный в целях оформления, должен игнорироваться скринридерами

На сайте Росбанка в некоторых продуктовых разделах есть картинки, не несущие смысловой нагрузки. У этих картинок есть атрибут alt=» . Он оставлен пустым, чтобы скринридеры его игнорировали.

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

Одной из самых доступных является CAPTHA от Google.

Чаще всего для проверки по слову используются изображения, но есть и аудиоверсия, предназначенная для слабовидящих пользователей (её можно вызвать, кликнув иконку кресла на колесах). Альтернативный текст для изображения: «Послушайте запись и введите числа, которые были названы». К сожалению, такая CAPTCHA не подходит для слепоглухих людей.

Картинки и ссылки должны иметь альтернативное описание ( alt=»» )

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

Если весь контент на сайте будет правильно структурирован и описан, все элементы, предназначенные только для визуального восприятия, будут заменены текстовым объяснением. Сайты станут доступны даже для полностью незрячих людей, которые используют планшеты и телефоны со шрифтом Брайля.

Управление

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

Для данной категории пользователей предусмотрено управление с помощью клавиатуры. Оно должно отвечать следующим условиям:

отсутствие ограничений по времени нажатия на клавишу

возможность ввода информации другими способами

в случае использования нестандартного перевода курсора и фокуса предлагается описание метода его перемещения

На сайте московского банка «Легион» также присутствует версия для слабовидящих людей. Здесь пользователям помимо удобной панели настройки предоставляется и исчерпывающая справка по управлению функциональностью сайта с помощью клавиатуры. При этом не ограничен доступ ввода с помощью мыши.

Опасность для психики

Часть людей страдает нервными и психическими расстройствами. Резкие звуки, частая смена кадров, неожиданные вспышки — все это может вызвать непредсказуемую реакцию, вплоть до истерии и приступа эпилепсии. В связи с этим, нельзя использовать опасные для психики элементы дизайна и аудиосопровождения. Ни один элемент не должен менять свое состояние более 3 раз в секунду (особенно касается вспышек).

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

Фоновый звук должен либо полностью отсутствовать, либо должна быть возможность его отключения. В случае наличия фоновых звуков, они должны быть тише, чем звук голосового контента переднего плана минимум на 20 дБ (примерно в 4 раза), за исключением отдельных звуков продолжительностью не более

Семантика разметки

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

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

При верстке элементов, имеющих особое назначение, таких как: списки, таблицы, заголовки и т.п. следует использовать соответствующие теги.

Ниже приведены основные из них.

Тэги и атрибуты

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

Стоит помнить, что заголовки с colspan применяются для каждой нижестоящей ячейки.

Нельзя разбивать для отображения (аналогично спискам).

Заголовок детализированной информации

Рекомендуется оформлять кнопки кликабельными элементами.

Ссылка с назначением кнопки

Инпут кнопочного типа

Менее желательно использование некликабельных элементов с использованием:

Последовательность перехода между элементами по нажатию на TAB

Обработка события с клавиатуры при нажатии на enter

Для семантических областей и наименования информационных блоков используются следующие теги и атрибуты.

Заголовок первого уровня

Чаще всего встречается на странице один раз и поясняет суть странички.

В случае структуры Landing Page его используют для наименования каждой из секций ( ).

Отделяют информационные блоки друг от друга

Разметка семантических областей

Весь контент на странице должен принадлежать определенной семантической зоне. На практике это реализуется с помощью атрибутов role. Например:

role=main — блок основного контента

role=navigation — блок служит для навигации по сайту

role=banner — блок является баннером и т.п.

Если зоны с одинаковым атрибутом role встречаются на странице более одного раза, необходимо добавлять каждому из них подпись с помощью атрибута aria-label .

Стоит использовать ссылки для пропуска одинаковых блоков (навигации, баннеров) и перехода к блоку role=»main» для удобочитаемости с помощью скринридера.

Инструменты валидации

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

Проверить сайт на общую валидность html можно с помощью классического валидатора.

С помощью WAVE и расширения WAVE Evaluation Tool для Chrome можно проанализировать любой ресурс на наличие основных ошибок. Ресурс любезно предоставит перечень выявленных ошибок и даст справку по их исправлению, подсветит синтаксис и атрибуты aria .

Найти ошибки в логике применения атрибутов aria поможет AInspector Sidebar for Firefox. Он также выдаст список проверок, которые рекомендуется сделать вручную.

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

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


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

Пример работы этого скринридера можно посмотреть здесь.

Освоить программу на уровне краткой инструкции (см. ниже) рекомендуется всем фронт-энд разработчикам и тестировщикам. Это не займёт много времени. Для этого рекомендуем вам ознакомиться со справкой.

Вывод

Стандарты выдвигают большое количество требований. Многие, такие, как наличие текстового эквивалента мультимедийному контенту, управление с клавиатуры, настройка размера шрифта и разрядки — осуществимы без ущерба дизайну. Однако, если речь о цветах, формах, размерах и инфографике, — дизайнерское видение чаще всего идет вразрез с требованиями стандартов. Ведь любому дизайнеру хочется не только правильно расставить информационные блоки, сделать удобную навигацию и хороший UX, но и создать особую атмосферу сайта, привлечь внимание пользователя, добавить уникальности продукту. Естественно, многие дизайнерские решения не вмещаются в рамки стандартов.

Разумеется, можно делать отдельную версию для людей с ограниченными возможностями, но заказчика такой вариант чаще всего не устраивает. Он хочет все, сразу и в одном продукте. Поэтому задача разработки гибкого (во всех смыслах) веб-ресурса ложится на плечи всех членов рабочей группы: менеджеров, дизайнеров, проектировщиков, разработчиков, аналитиков и даже самих заказчиков. Ведь проектируя сайт, нужно сразу продумывать иерархию смыслов, удобство навигации, популярность тех или иных разделов, функциональное назначение всех элементов, логику расположения инфоблоков. Помимо этого, стоит также учитывать техническую и финансовую грамотность населения, возраст целевой аудитории, ориентированность на платформу и пр.

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

5 Web инструментов для улучшения доступности вашего сайта

В этой небольшой статье мы приведём несколько онлайн инструментов, которые позволят вам увеличить доступность веб ресурсов, разработкой которых вы активно занимаетесь:

Wave – это бесплатный инструмент, который был разработан WebAIM, для оценки веб-доступности вашего веб ресурса. WAVE показывает исходную веб-страницу со встроенными иконками и индикаторами, которые показывают, где у вас есть проблемы и ошибки.

Эта служба проверяет все изображения, найденные на веб-странице на наличие проблем. Ширина, высота, значение атрибутов alt и title.

Используете инструмент Colour Blindness Simulator для того, чтобы увидеть, как изображения на вашем сайте будут выглядеть в зависимости от зрительных отклонений ваших пользователей. Вы можете увидеть, как будут выглядеть изображения для людей, которые страдают от протанопии (слепоте к красному цвету), дейтеранопии (слепоте к зелёному) и тританопии (невосприимчивости к фиолетовому цвету).

Читабельность – это очень важный аспект любого веб ресурса. Однако, трудно получить оценку данного показателя. Этот онлайн инструмент предназначен для оценки текста. Может быть очень полезен.

AccessColor делает оценку контрастности и яркости цветов всех элементов в DOM, чтобы убедиться, что контраст достаточно высок для людей с нарушенным зрением.

Часто нам не хватает инструментов, которые помогли бы нам протестировать наш веб ресурс. Просто нужно знать где искать!

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

Usabilla позволит вам за несколько минут получить десятки отзывов пользователей о вашем сайте.

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

Какой из этих инструментов вы будете использовать? Если вы пользуетесь какими-то другими ресурсами, то не стесняйтесь, пишите комментарии!

Доступность информации Web-сайтов для людей с ограниченными возможностями

Статья просмотрена: 748 раз

Библиографическое описание:

Ромахова И. Ю. Доступность информации Web-сайтов для людей с ограниченными возможностями // Молодой ученый. — 2013. — №4. — С. 683-685. — URL https://moluch.ru/archive/51/6592/ (дата обращения: 09.11.2020).

Похожие статьи

Общественный контроль в Соединенных Штатах Америки

Политическая идея о подотчетности органов власти пронизывает всю историю США.

− требует устанавливать ограничения объемов запроса для ускорения обработки

− продлевает срок решения о возможности ответа на запрос с 10 до 20 дней

Ограничение ответственности провайдера за нарушение в сети.

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

Так же в этой связи может быть интересно законодательство США.

В данной статье определены ограничения ответственности провайдера за нарушение интеллектуальных прав при.

Решение Международного суда ООН от 27 июня 1986 года по делу.

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

Дифференциация содержания понятия «информационная. »

Выбор Российской Федерации (далее — РФ) и Соединенных Штатов Америки (далее — США) для анализа существующих разногласий в

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

Проблемы отнесения субъектов к информационным посредникам.

Практика по признанию отдельных субъектов информационными посредниками и освобождению их от ответственности за нарушение

Между регистратором и администратором (пользователем) доменного имени заключается договор об оказании услуг регистрации.

Южнокорейские вызовы режиму нераспространения ядерного.

В 1975 г. Пак объявил, что Южная Корея приступит к производству ядерного оружия, если США уберут свой «ядерный зонтик».

Так, уже в 1980-90-е гг. Южная Корея в нарушение ограничений ДНЯО проводила тайные эксперименты с ураном и плутонием.

Разработка программного модуля для обеспечения комфортного.

Ключевые слова: информация, информационные потребности, нарушение зрения

Опираясь на Руководство по обеспечению доступности веб-контента WCAG 2.0 и на ГОСТ Р 52872–2007

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

Инклюзивное образование в США | Статья в журнале.

Его разработка осуществляется по следующим критериям: реалистичность, уровень достижения, возможность оценки, активность. Индивидуальный подход распространяется и на рабочее место, где учитываются также потребности и меры ограничений. Нужно отметить, что в США.

Реторсия: правовое объяснение и мировые примеры

Ключевые слова: дипломатические отношения, ограничение, ответные меры. Реторсии являются одним из способов защиты государством своих

Возможность применения реторсий прописана в законодательствах (а конкретно — в гражданских кодексах или специфических.

Доступность информации Web-сайтов для людей с ОВЗ

Доступность информации Web-сайтов для людей с ограниченными возможностями. Ромахова Ирина Юрьевна, Волгоградский государственный университет.

Аннотация: в статье описываются проблемы людей с ограниченными возможностями здоровья при пользовании интернет-ресурсами, приводятся положения, упрощающие работу с сайтами.

Ключевые слова: люди с ограниченными возможностями, Web-сайт.

Общедоступность информации для всех людей — понятие, получившее распространение в США, Великобритании и Европейском Союзе, благодаря принятию в этих странах законов, требующих равных прав для людей в получении доступа к информации, независимо от физических и когнитивных затруднений, которые они могут испытывать в связи с временными или хроническими нарушениями и болезнями.

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

Такими барьерами могут быть, например:

  • Ухудшение и нарушения: зрения, слуха, моторики;
  • Сложности в обучении;
  • Речевые и когнитивные нарушения.

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

Игнорирование проблем, возникающих при использовании информационных технологий людьми с ограничениями — вопрос не только этического плана. Упомянутые законы и акты, поддерживающие принципы общедоступности, требуют того, чтобы компании, предоставляющие информационные услуги, предпринимали разумные меры по уменьшению трудностей использования их услуг людьми с ограниченными возможностями. Незаконным признается отказ от предоставления услуг таким людям. Всё это касается в первую очередь публичных web-сайтов, предоставляющих сервис широким массам пользователей. [1]

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

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

Подобным образом эту проблему решают в США, где с 1998 года действует 508-ая часть Акта о Реабилитации, подписанная президентом Клинтоном. Всемирным веб-конструктором (W3C) подготовлены «Рекомендации по обеспечению доступности веб-контента» (Web Content Accessibility Guidelines, WCAG), которые воспринимаются профессиональным сообществом в качестве де-факто стандарта и используются в большинстве стран при разработке собственных законов или рекомендаций.

Следование этим рекомендациям упростит работу с сайтом не только пользователям с ограниченными возможностями здоровья, но и пользователям с ограниченными техническими возможностями (низкоскоростной Интернет; отсутствие мыши, как на смартфонах; маленький экран), а также пожилым людям. [2]

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

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

Человек с обездвиженной, например, вследствие перелома, рукой будет испытывать серьезные затруднения при необходимости нажать Ctrl+Alt+Del на ноутбуке, у которого клавиши Ctrl и Alt не дублируются в правой части клавиатуры, где располагается кнопка Del. [3]

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

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

  • Дисплеи Брайля, позволяющие читать текст на ощупь;
  • Программы, читающие тексты вслух;
  • Экранные «увеличительные стекла»;
  • Программы распознавания речи, позволяющие управлять компьютером голосом.

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

Существует двенадцать основных положений WCAG 2.0, упрощающих работу с сайтом людям с ограниченными возможностями. [4]

  1. Предоставление текстовой версию любого нетекстового контента для его возможного преобразования в альтернативные формы, удобные для различных пользователей (воспринимаемость текстового контента легко можно улучшить: слабовидящим при помощи экранной лупы или увеличения шрифта средствами операционной системы, слепым — при помощи программ компьютерного озвучивания текста или вывода его на Брайлевский дисплей).
  2. Предоставление альтернативной версию медиа-контента, ограниченного по времени (текстовая, аудио-версии видео-ролики, субтитры).
  3. Создание контента, который можно представить в различных видах без потери данных или структуры (например, с более простым макетом страницы, страницу с облегченным дизайном — версия для печати).
  4. Упрощение просмотра и прослушивание контента, отделением важных частей от второстепенных.
  5. Предоставление возможности управления всей функциональностью с клавиатуры.
  6. Предоставление пользователям достаточного времени для ознакомления и работы с контентом. Речь идет о контенте, ограниченном во времени. Например, сменяющиеся кадры спецпредложений или новинок, онлайн-тесты, настольные онлайн-игры с ограничением на время хода и т. д.
  7. Отсутствие заведомо опасных для здоровья элементов дизайна (вспышки или слишком частых миганиях страницы или ее элементов, резкие неожиданные звуки и т. д.).
  8. Предоставление пользователям помощи и поддержки в навигации, поиске контента и в определении их текущего положения на сайте (наличие ссылки типа «см. также подробную информацию о продукте», нескольких способов поиска нужной ему страницы (стандартная навигация, карта сайта, строка поиска) и т. д.).
  9. Создание удобочитаемого и понятного текстового контента (возможность перевести текст на родной язык, расшифровка редких слов, аббревиатуры или специфических значений слов).
  10. Веб-страницы должны отображаться и функционировать предсказуемым образом (например, не должно быть ситуаций когда, пояснение к полю ввода отображается не рядом с ним, а внутри него и др.).
  11. Помощь пользователям избегать ошибок при вводе информации и исправлять их (не должно быть сообщений об ошибках в духе «Ошибка № 355», должно быть понятное описание ошибки).
  12. Обеспечение максимальной совместимости контента с существующими и разрабатываемыми пользовательскими приложениями.

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

В России зарегистрировано больше 13 миллионов лиц с ограниченными возможностями, то есть 10 % от населения страны. То есть с определенными допущениями можно считать, что каждый десятый посетитель сайтов имеет какие-либо ограничения по здоровью. А если учесть пользователей различных гаджетов, для которых описанные принципы также применимы, а также пожилых людей, их доля в аудитории сайта может вырасти до 30–40 %. Это более чем ощутимая цифра для того, чтобы разработчикам позаботиться о том, чтобы им было удобно читать сайт, писать, делать на нем покупки. [5]

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

Юзабилити веб-сайта

Основные принципы юзабилити: от особенностей дизайна до контента, от интерфейса формы заказа до поиска. Возможности тестирования.

Юзабилити (от английского usability — «удобство использования) — это качественная оценка простоты и комфорта работы с сайтом. Пользователь должен без труда находить нужную информацию, не теряясь в функционале и многочисленных страницах, и при этом получать эстетическое удовольствие от работы с ресурсом.

Почему важно соблюдать принципы юзабилити сайтов?

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

Принципы юзабилити web-ресурса

Разработка юзабилити сайта базируется на главном правиле: «чем проще — тем лучше». Чем более привычную структуру и интерфейс видит пользователь — тем легче ему сориентироваться и тем меньше времени он потратит, чтобы найти нужный раздел, т.к. будет чувствовать себя более уверенно.

Потому, к примеру, ссылки в тексте лучше делать привычного цвета — ярко-синими. Можно использовать и другие выделяющиеся цвета, но человек потратит больше времени на поиск.

1. Дизайн — залог доверия к сайту

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

Еще один важный момент: грамотно продуманный «внешний вид» сайта — залог доверия со стороны потребителя, попавшего к вам впервые. Простота и доступность использования, цветовые сочетания, стиль, подходящие вашей целевой аудитории картинки, качество контента, отсутствие ошибок — все это влияет на расположение к ресурсу.

Пример сайта, перенасыщенного графикой. Дизайн пестрит рассеивающими внимание цветовыми сочетаниями, обилием картинок.

2. Логичный структурированный контент

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

Согласно отчетам компаний Clicktale и CX Partners, длина страницы не влияет на то, будет ли пользователь изучать контент ниже или нет. Важнее грамотно продуманная структура графики и текста: выделение приоритетной информации, последовательность расположения.

3. Важная информация — в левом углу

Посетители просматривают web страницу по F-образному шаблону: внимание концентрируется в верхнем левом углу и ограничивается первыми несколькими абзацами текста в убывающем порядке. Потому при распределении важной информации использование такой схему увеличит вероятность того, что посетитель быстро найдет нужные данные, увидит самое важное, бегло пробежавшись по разделу взглядом.

4. Общение с пользователем

Успешная регистрация, принятый заказ, несуществующая страница — человек должен быть всегда в курсе происходящего. Причем во всех подробностях. Если он зарегистрирован в системе — расскажите, что делать дальше, если заказ принят: укажите номер, время ожидания звонка, контактные данные; если попал на страницу 404 — как найти нужную информацию или куда вернуться.

Попав на такую страницу 404, пользователь не растеряется и, скорее всего, не сразу покинет ресурс.

5. Отмена действия

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

6. Ненавязчивое предложение помощи

Не нужно настаивать на общении. Большие выскакивающие окна с предложением помочь в выборе, цветная полоска с номером телефон, занимающая треть экрана — подобные элементы не только смотрятся навязчиво, отталкивают посетителя, но и закрывают часть функционала. В примере ниже — форму подбора товара. Окно помощи должно легко скрываться, потому крестики и другие подобные значки нужно делать заметными, а не полупрозрачными или сливающимися с фоном.

Лучше, чтобы изначально данная форма была в свернутом состоянии, но при этом заметной — к примеру, в виде яркой боковой вкладки. И при этом не перекрывала часть контента на странице. Последнее относится и к кнопкам социальных сетей.

7. Разговор на понятном языке

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

8. Отказ от резких перемен

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

То же самое относится к веб-дизайну: пользователь не только потратит больше времени, но и разочаруется, заметив, что вместо значка корзины теперь — «Добавить товар», вместо «Каталог» — «Продукция», а привычные объемные кнопки обтекаемой кнопки стали плоскими и рублеными. Потому задумав «перестановку», не шокируйте посетителя — изменения должны быть постепенными и не менять кардинально привычную структуру.

9. Все возможности — на виду

Удачное решение — когда пользователь видит все разделы, в которые может перейти, т.к. в любой момент может быстро сориентироваться, где находится и как вернуться обратно. Если на сайте планируется много контента — резонно предусмотреть горизонтальное верхнее, вертикальное меню (и то, и другое — возможно, с подразделами), а также «подвал». Если речь идет о минималистичной «визитке» или landing page — достаточно только верхнего горизонтального меню.

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

Пример удачной карты сайта

10. Форма регистрации и заказа: чем лаконичнее — тем лучше

Чем больше полей для заполнения — тем меньше пользователю хочется тратить на это время. Причем компоновка полей, надписей, подбор шрифтов могут быть идеальными, а вот длина — отталкивающей. Современные основы юзабилити заставляют веб-разработчиков сокращать длину этих форм до минимума, нещадно выкидывая вопросы об образовании, уровне дохода, профессии и т.д. Но! Сравните две формы: несмотря на наличие всего пары дополнительных полей, заполнять первую хочется меньше, чем вторую. Не говоря уже о требовании обязательно указать номер телефона.

11. Заметное длинное поле поиска

Соответствующая кнопка — лучший помощник посетителя. Особенно если речь идет о крупном ресурсе. Строку поиска пользователь должен обнаружить без труда. Чтобы при первом знакомстве он не тратил на обнаружение соответствующей строки даже несколько секунд.

Еще один важный момент — длина поля поиска. Согласно исследованию Якоба Нильсена, в среднем туда вмещается 18 символов, а оптимальная длина — 27 символов. В 90% случаев сюда поместится даже длинный запрос, чтобы пользователь его полностью увидел и исправил при надобности. Для установки нужной ширины используйте относительную единицу «em», равную размеру используемого шрифта.

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

12. Больше свободного пространства

Сайт можно сравнить с жилой комнатой: если каждый квадратный метр чем-то занят — человек будет чувствовать себя неуютно. Аналогично и здесь: если страница будет переполнена полезными блоками, разделами, ремарками и прочей информацией — посетитель потеряется и не поймет, куда устремить внимание в первую очередь. Современный дизайн склонен к минимализму: на странице — только самое важное.

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

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

Топ-пост этого месяца:  Google Friend Connect для блога
Добавить комментарий