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

Перевод статьи Developing sites for users with Cognitive disabilities and learning difficulties

Эта статья написана Roger Hudson, Russ Weakley и Peter Firminger, которые изучали типы проблем, с которыми приходится сталкиваться интернет-пользователям с оглядкой на веб-разработчиков, которые, разумеется, и создают сайты - в том числе и для пользователей с ограниченными способностями.

Вступление

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

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

Большинство сложностей люди испытывают при доступе к следующего рода информации:

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

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

Адрес веб-страницы нужен всем различным группам? Вероятно, что да, но с разных сайтов.

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

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

Для просмотра более подробной версии статьи, перейдите на страницу Граница доступности: сложности восприятия и чтения

[Назад к содержанию]

1. Работа с содержанием

1.1 Простое и понятное содержание

Хорошо написанный текст легкий для восприятия, включая людей с ограниченными способностями.

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

1.2 Оптимальная длина строки

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

  • Пример слишком длинной строки
  • Пример строки с оптимальным диапазоном
  • Оптимальная ширина содержания [внешняя ссылка]

1.3 Реки белого

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

  • Пример выровненного текста
  • Пример не выровненного текста

1.4 Написание перевернутой пирамиды

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

  • Пример написания пирамиды
  • Техника написания перевернутой пирамиды (DFL Bulletin) [внешняя ссылка]

[Назад к содержанию]

2. Показ и сокрытие содержания

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

2.1 Длинное и краткое содержание

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

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

  • Пример длинного и краткого содержания

2.2 Расширение с помощью пунктов

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

  • Пример организации на пункты

2.3 Скрытие-показ пунктов

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

  • Пример скрытия-показа пунктов

2.4 Содержание слайдшоу

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

  • Пример содержания слайдшоу

[Назад к содержанию]

3. CSS в помощь кликабельности и читабельности

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

3.1 Увеличение высоты строки

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

  • Пример увеличения высоты строки

3.2 Увеличение расстояния после абзаца

В целом строка с пробелом стоит после каждого абзаца в блоке контента. Увеличение расстояния до 1,5 или 2 сплошных линий может помочь читаемости некоторым пользователям.

  • Пример увеличение расстояния после абзаца

3.3 Эффект наведения для ссылок

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

  • Пример эффекта наведения на ссылку

3.4 Нижняя граница для ссылок

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

  • Пример нижней границы для ссылок

3.5 Увеличение активной области ссылок

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

  • Пример увеличение активной области ссылок

3.6 Наведение на абзацы, списки и ячейки таблицы

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

К сожалению, Internet Explorer не поддерживает наведение на абзацы, списки и строки таблицы. Однако, если вы чувствуете, что это хороший вариант для вашего пользователя, технология JavaScript может быть использован для имитации этого эффекта в Internet Explorer (используя IE7 от Dean Edward).

  • Пример наведения на абзац
  • Пример наведения на строку таблицы

Подчеркнутые абзацы

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

  • Пример подчеркивания пунктов

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

  • Пример подчеркивания абзацев

3.8 Реверсированные цвета

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

  • Пример реверсии цветов

3.9 Сокращение фоновых бликов

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

  • Пример уменьшения бликов

[Назад к содержанию]

4. Пользовательский контроль содержания и представления

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

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

  • Содержание: длинная или сокращенная версия информации.
  • Размер шрифта: возможность уменьшения или увеличения размера текста.
  • Читабельность: изменение интервала между абзацами.
  • Цветовые темы: предоставляют широкий спектр возможностей, включая отмену цвета и снижение бликов.
  • Длина строки: для широкого или узкого макета содержимого.
  • Высота строки: предоставляют широкий спектр возможностей для изменения высоты строки содержания текста и ссылки.
  • Пример инструмента управления [внешняя ссылка]

[Назад к содержанию]

Резюме

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

[Назад к содержанию]

Дополнительное чтение:

  • Граница доступности в сложности восприятия и трудностями в обучении
  • Руководство по практичному дизайну и Руководящие принципы юзабилити
  • Подростки, аутизм и средняя школа
  • Включение сложности восприятия в движении доступа к Интернету

[Назад к содержанию]