Улучшение взаимодействия с пользователями с нарушениями зрения

Question

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

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

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

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

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

Answer 1

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

1. Использовать таблицы только для табличных данных
2. Убедитесь, что вы используете семантические инструменты, доступные вам через HTML. Это означает использование TH с атрибутом scope. Используйте вместо и вместо . Используйте теги acronym и abbrev . Используйте списки определений. Я могу расширить эти вещи, если кто-нибудь пожелает.

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

   Имя пользователя:

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

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

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

7. Я еще раз подчеркну это: создайте семантические страницы. Используйте H теги для своих заголовков. Используйте ul / li для навигации.

8. Используйте атрибут alt на всех изображениях. Если у вас есть проставка GIF ... ну .. не надо. В противном случае объясните, что представляет собой изображение и каково его значение для содержания, с которым оно связано. не используйте "диаграмму" в качестве вашего тега alt. Используйте «График финансов с начала года: 5 000 долларов США за 1 квартал, 4 000 долларов США за 2 квартал, 8 000 долларов США за 3 квартал» или что-то подобное.

9. Обеспечить субтитры или стенограммы для всех аудио и видео компонентов

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

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

Answer 2

Выезд Клыки

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

Answer 3

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

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

Answer 4

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

Answer 5

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

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

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

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

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

Answer 6

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

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

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

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

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

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

Answer 7

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