Руководство по веб-доступности для оптимизаторов

Posted on by riasevastopol

Вы оптимизируете собственный лендинг только для 81% визитёров. Независимо от того, доводили ли вы юзабилити целевой страницы до совершенства в течение многих лет либо лишь начали работату над ним, вы желаете определить про оставшиеся 19%, правда? Эти 19% — миллионы людей с инвалидностью, не талантливые на классическое сотрудничество с сайтами.

Вот тогда обращение и заходит о веб-доступности (web accessibility). Она возвращает потерянные конверсионные возможности, о которых вы кроме того не вспоминали.

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

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

Из-за чего это принципиально важно для оптимизаторов?

В соответствии с последней переписи населения США, приблизительно у 56 700 000 людей, другими словами 19%, была инвалидность (в широком смысле) в 2010 году. Больше половины из этих людей сказали, что их инвалидность тяжелая.

Сайт, дешёвый калекам, имеет два главных преимущества:

1. Имидж. Вы — хороший человек, потому, что снабжаете возможность и доступ приобрести что-то на вашем сайте всем людям. (А время от времени делать это обязывает закон).Руководство по веб-доступности для оптимизаторов
2. Доход. Вы не теряете впустую миллионы потенциальных конверсий.

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

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

Просматривайте кроме этого: Пользовательская доступность как залог социальной ответственности и высокой конверсии ресурса

Нарушения, каковые необходимо учитывать оптимизаторам

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

1. Зрение

Под нарушениями зрения в большинстве случаев понимается слепота, дальтонизм и слабое зрение.

Опрос, совершённый в 2015 году, продемонстрировал, что приблизительно 23 700 00 взрослых людей в Соединенных Штатах, другими словами 10% населения, или не хорошо видят (кроме того в очках), или не видят по большому счету.

Представьте, что вы не различаете цветов и пробуете выбрать цвет свитера на этом сайте:

В собственной статье об оптимизации сайтов для людей, страдающих цветовой слепотой, Адам Сильвер (Adam Silver) пишет:

«Имеется множество инструментов, разрешающих оказать помощь людям с цветовой слепотой:

1. Check My Colours: в случае если у вас уже имеется сайт, вам достаточно ввести его URL, и вы определите, что необходимо улучшить.
2. WebAim s color contrast checker: инструмент, разрешающий ввести два цвета и определить, отвечают ли они требованиям веб-доступности.
3. I Want To See Like The Color Blind: фильтр дальтонизма, используемый к страницам прямо в Chrome.
4. Color Oracle: симулятор цветовой слепоты для Windows, Mac и Linux, показывающий, что видят люди с распространенными формами дальтонизма».

2. Слух

Нарушения слуха — это тугоухость и глухота. Согласно данным социальных служб и Министерства здравоохранения США, у 15% людей старше 18 лет имеется неприятности со слухом. Еще одно изучение продемонстрировало, что 12,7% обитателей США старше 12 лет глухи на оба уха.

В случае если учитывать тех, кто не слышит лишь одним ухом, цифра вырастает до 20,3%.

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

3. Двигательные нарушения

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

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

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

Неприятность

Ответ

Человек неимеетвозможности пользоваться мышью.

Удостоверьтесь, что все функции дешёвы с клавиатуры (пройдитесь по ним клавишей Tab).

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

Сделайте собственный сайт устойчивым к неточностям (к примеру, он обязан выдавать запрос: «Вы уверены, что желаете удалить данный файл?»), не делайте ссылки через чур мелкими либо движущимися.

Человек может пользоваться лишь программами с голосовым вводом.

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

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

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

4. Мышление

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

1. Память.
2. Решение проблем.
3. Внимание.
4. Познание написанного устной речи и текста.
5. Познание математических действий.
6. Визуальное познание.

Эти виды инвалидности воздействуют на доступность и юзабилити сайта равно как и двигательные нарушения.

Просматривайте кроме этого: Как компьютерная грамотность воздействует на оптимизацию юзабилити?

Управления по ее-критерии и веб доступности: WCAG 2.0

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

Вот четыре столпа WCAG 2.0: заметность, работоспособность, надёжность и понятность.

А вот 12 главных рекомендаций из WCAG 2.0:

1.1. Предоставьте текстовые альтернативы для всего нетекстового контента, дабы его возможно было переводить в другие формы, нужные различным людям: более большой шрифт, шрифт Брайля, обращение, знаки либо упрощенный язык.
1.2. Предоставьте альтернативы для видео- и аудиоматериалов, слайдшоу и т. д.
1.3. Создайте контент, что возможно преподнести различными методами (к примеру, в более несложной разметке), не теряющий наряду с этим структуры и смысла.
1.4. Сделайте так, дабы пользователям было несложнее видеть и слышать, и отделите передний замысел от заднего.
2.1. Сделайте все функции дешёвыми с клавиатуры.
2.2. Дайте пользователям достаточно времени, дабы прочесть ваш контент и воспользоваться им.
2.3. Избегайте способов размещения контента, о которых как мы знаем, что они приводят к припадкам.
2.4. Предоставьте пользователям помощь в поиске и навигации контента.
3.1. Сделайте текстовый контент читабельным и понятным.
3.2. Сделайте страницы собственного сайта предсказуемыми.
3.3. Помогите пользователям избегать неточностей и исправлять их.
4.1. Увеличивайте совместимость сайта с существующими и будущими агентами пользователя, а также техническими средствами реабилитации.

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

Кроме этого существуют Управление по доступности агентов пользователя (User Agent Accessibility Guidelines, UAAG) и Управление по доступности инструментов авторизации (Authoring Tool Accessibility Guidelines, ATAG). UAAG оказывает помощь сделать более дешёвыми агентов пользователя (браузеры, браузерные приложения, проигрыватели и без того потом), а ATAG — инструменты авторизации (авторизация на сайте, в блогах и без того потом).

WCAG 2.0 — главное управление, с которым направляться ознакомиться практически всем оптимизаторов. В Соединенных Штатах имеется законы, требующие делать сайты максимально дешёвыми. В Канаде, Японии, Испании, Англии, Швеции и на Филиппинах также приняты соответствующие своды правил.

Просматривайте кроме этого: Как сделать мир лучше посредством универсального дизайна?

Оценка веб-доступности вашего сайта

Принятая цель в разработке дешёвых сайтов — это уровень АА по версии WCAG 2.0. Имеется три метода оценить сегодняшний уровень доступности вашего сайта: автоматизированные инструменты, пользовательское тестирование и экспертная оценка.

1. Автоматизированные инструменты оценки веб-доступности

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

  • WAVE
  • Accessibility Developer Tools

Пример того, что такие инструменты смогут найти:

2.4. Навигация: Предоставьте пользователям помощь в поиске и навигации контента.
Критерии успеха 2.4.5. ярлыки и Заголовки.
Неприятность: Размещение заголовков — заголовок h1 некорректен.
Исправление: Исправьте уровни заголовков так, дабы за h1 следовали лишь h1 и h2.
3.3. Помощь при вводе информации: Помогите пользователям избегать неточностей и исправлять их.
Критерии успеха 3.3.2. инструкции и ярлыки (А).
Неприятность: Текст ярлыка отсутствует.
Исправление: Введите текст ярлыка.

2. Экспертная оценка

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

Большая часть специалистов пользуется Методикой оценки соответствия сайтов требованиям доступности (Website Accessibility Conformance Evaluation Methodology, WCAG-EM). Процесс складывается из пяти следующих шагов:

1. Задать рамки оценки. Что необходимо оценить? Какова цель оценки?

К какому уровню доступности по версии WCAG вы стремитесь?
2. Изучить сайт. функции и Какие страницы — главные? Какие конкретно типы контента представлены?

Какие конкретно разработки требуются?
3. Выбрать репрезентативный пример. В случае если оценить все страницы нереально, необходимо применять структурированную случайную выборку.
4. Проверить выбранные страницы. Отвечают ли они заданным параметрам? Чего не достаточно на сайте?

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

В случае если захотите воспользоваться этим методом, вот инструмент, что совершит вас через эти пять шагов.

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

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

Пользовательское тестирование: 4 идеи от The Home Depot
Как вносить исправления для увеличения веб-доступности?

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

1. воронки формы и Ключевые: задачи подписки, поиск по сайту, процесс оплаты и без того потом.
2. Главный контент — тот, к которому чаще обращаются пользователи.
3. Контент, на неприятности с которым ваши визитёры уже жаловались.
4. Разрабатываемый контент. Контролируйте, соответствует ли то, что вы додаёте на сайт, требованиям веб-доступности, дабы не создавать новые неприятности.

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

1. Исправления, требующие меньше всего сил, требуют меньше времени, денег, навыков и/либо валидации.
2. самые действенные исправления. Они в большинстве случаев касаются навигации, основной страницы, проблем и процесса покупки, относящихся к уровню А в WCAG 2.0.

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

Дизайн веб-дешёвых сайтов

Создавая веб-дешёвый сайт, опирайтесь на следующие советы:

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

Вот пример применения ясных сообщений, цвета и иконок для обозначения неточностей при заполнении форм от BustedTees:

MailChimp оформляет подобным образом сообщения об успешном заполнении форм:

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

Просматривайте кроме этого: 5 психотерапевтических изучений по восприятию визуальной информации

Веб-дешёвый текстовый контент

При создании дешёвого текстового контента руководствуйтесь следующими рекомендациями:

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

К примеру, на сайте CXL Institute контент дешёв в трех вариантах: видео, аудио и текстовая расшифровка.

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

А вот второй пример: требования к ручной клади на сайте Air Canada — неясные, но долгие.

Компания Canadian Air Transport Security Authority (CATSA) подошла к организации для того чтобы же контента совсем в противном случае:

Значительно меньше и яснее, правда? Когнитивная нагрузка на данной странице существенно снижена.

Просматривайте кроме этого: Секреты контент-маркетинга: правила создания читабельных текстов

Разработка дешёвых продуктов

Разрабатывая доступные для калек продукты, имейте в виду следующее:

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

Многие калеки пользуются клавиатурой для навигации по сайтам. На картине ниже продемонстрировано, как возможно перемещаться по сайту Air Canada посредством клавиши tab.

Просматривайте кроме этого: ТОП-10 неточностей информационной архитектуры сайтов

Простые шаги к увеличению веб-доступности

Для начала задайте себе следующие вопросы.

подзаголовки и Заголовки

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

Текст

  • Образовывает ли уровень контраста на странице хотя бы 4.5:1 для текста?
  • Вероятно ли поменять размер текста? Целый ли текст поддается повышению?
  • Не пропадают ли части текста при повышении?
  • Не накладываются ли они друг на друга?

Управление с клавиатуры

  • Все ли кнопки и формы прекрасно заметны и удобны для применения?
  • Требуется ли горизонтальная прокрутка, дабы прочесть текст?
  • Возможно ли пройти по всем элементам клавишей tab?
  • Возможно ли осознать, какой элемент на данный момент выбран, при применении клавиши tab?
  • Целый ли функционал сайта дешёв без помощи мыши?
  • Возможно ли открыть выпадающий перечень клавишей tab и применять клавиши перемещения курсора, дабы прокрутить перечень?
  • Заметны ли графические ссылки и возможно ли активировать их клавишей Enter?

поля и Формы

  • Все ли элементы управления дешёвы с клавиатуры?
  • Размещены ли подписи к элементам верно для тех, кто просматривает слева направо?
  • Выделены ли все необходимые поля чем-то, не считая цвета?
  • Отмечены ли необходимые поля соответствующими индикаторами?
  • Имеется ли инструкции по заполнению форм перед самими формами?
  • Указан ли требуемый номера телефона и формат даты в подписи к форме?
  • Легко ли подметить неточности при заполнении форм? Даны ли ясные и конкретные руководства по заполнению?
  • В случае если поле не выдает сообщения об неточности, значит ли это, что оно заполнено верно?

Медиа

  • Возможно ли осуществлять контроль проигрывание медиа с клавиатуры?
  • Трудится ли автовоспроизведение? В случае если так, оно должно прекращаться через 3 секунды, а у проигрывателя должны быть клавиши «Пауза» либо «Стоп», и регулятор громкости.
  • Сами ли вы писали субтитры? Автоматические субтитры практически в любое время содержат неточности.
  • Синхронизированы ли субтитры с аудио-контентом?
  • Неизменно ли светло, кто говорит? Обозначено ли это?
  • Включены ли в субтитры контекст и важные звуки (к примеру, хлопанье двери, звук телефонного звонка и другое)?
  • Имеется ли расшифровка? Легко ли ее отыскать? Включает ли она в себя визуальную данные?
  • Доступно ли обрисованное аудио?

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

Просматривайте кроме этого: Эргономичный сервис начинается с пользовательского опыта: кейс от BBC iPlayer

Заключение

Ваш сайт должен быть дешёв не просто калекам, а всем людям по большому счету. Изучить WCAG 2.0 и оценить доступность ресурса — не только верно, но и выгодно: вы оптимизируете его не для 81% населения, а для 100%. Само собой разумеется, обрисованные выше техники не заменяют понимания WCAG 2.0, но любой мелкий ход в этом направлении свидетельствует, что вы повышаете конверсию собственного сайта.

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

Высоких вам конверсий!

По данным: conversionxl.com. Источник картины: alimasduki

Случайные статьи:

Лекция 6: Оптимизация производительности веб-сайтов, повышение доступности серверов IIS 7.0


Подборка похожих статей:

riasevastopol

More Posts