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

StackOverflow https://stackoverflow.com/questions/61399

  •  09-06-2019
  •  | 
  •  

Вопрос

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

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

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

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

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

Это было полезно?

Решение 2

Проверить Клыки

Клыки — это встроенный в браузер инструмент Firefox, который имитирует то, что «видит» программа чтения с экрана при посещении веб-страницы.Его функция проста:для вывода расшифровки того, что программа чтения с экрана зачитает пользователю при посещении веб-страницы.Это полезный инструмент для быстрого анализа того, эффективно ли вы структурировали свой контент, чтобы он был понятен и удобен для использования людьми с нарушениями зрения, не заставляя вас учиться использовать (и покупать) приложение для чтения с экрана, такое как JAWS или Windows Eyes.

Другие советы

Создание доступных страниц — это то, о чем трудно подумать, если вы никогда этого не делали.Однако, как только вы изучите основные понятия, в 95% случаев это будет очень легко сделать.В основном я буду повторять то, что сказали другие, но:

  1. Используйте таблицы только для табличных данных
  2. Убедитесь, что вы используете семантические инструменты, доступные вам через HTML.Это означает использование TH с атрибутом области действия.Используйте <em> вместо <i> и <strong> вместо <b>.Использовать акроним и сокращение теги.Используйте списки определений.Я могу подробнее рассказать об этих вещах, если кто-то желает.

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

    <label for="username">Имя пользователя:</label><input name="username" />

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

  5. Не используйте цвета для акцента.

  6. Убедитесь, что весь ваш текст можно изменить.Это в значительной степени означает, что не используйте «px» в своем CSS.

  7. Я еще раз подчеркну это: создавать смысловые страницы. Использовать ЧАС теги для ваших заголовков.Использовать ул/ли для навигации.

  8. Использовать альтернативный вариант атрибут включен все изображений.Если у вас есть спейсер-гифка...хорошо..не.В противном случае объясните, что представляет собой изображение и какое значение оно имеет для содержания, с которым оно связано.не используйте «диаграмму» в качестве альтернативного тега.Используйте «График финансов с начала года»:5000 долларов США в первом квартале, 4000 долларов США во втором квартале, 8000 долларов США в третьем квартале» или что-то подобное.

  9. Предоставьте субтитры или расшифровки для всех аудио- и видеокомпонентов.

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

Вам следует часто просматривать свой сайт без таблиц стилей (ctrl-shift-s, если у вас есть Firefox и Панель инструментов веб-разработчика), чтобы увидеть, имеет ли страница смысл.Если это не имеет смысла для вас как зрячего человека, это не будет иметь смысла для тех, кто использует программу чтения с экрана.

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

  1. Используйте таблицы только для данных.Не используйте таблицы для разметки, если этого можно избежать.
  2. При использовании таблиц для данных заголовки столбцов должны быть вложены в теги TH, и вам следует использовать атрибуты заголовка и области действия.Теги вашей таблицы должны использовать атрибут summary.
  3. Все изображения должны иметь значение атрибута alt, который описывает, что происходит на изображении, и если изображение не служит никакой цели (это промежуточное изображение или что-то подобное), тогда для атрибута alt должна быть установлена ​​пустая строка.
  4. Попробуйте использовать программу чтения текста в речь и/или перемещаться только с помощью клавиатуры и/или отключить таблицы стилей.Я считаю, что вам необходимо приобрести JAWS, но я уверен, что существуют бесплатные программы чтения с экрана.Вам необходимо просмотреть сайт с помощью программы чтения с экрана, чтобы по-настоящему понять, насколько сложно перемещаться по большинству веб-страниц без подсказок, которые интерпретируют программы чтения с экрана.

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

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

Код многих веб-страниц структурирован следующим образом:

  1. Заголовок
  2. Верхняя навигация
  3. Левая навигация
  4. Содержание
  5. Нижний колонтитул

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

  1. Содержание
  2. Заголовок
  3. Верхняя навигация
  4. Левая навигация
  5. Нижний колонтитул

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

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

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

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

http://redish.net/content/papers/interactions.html

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top