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

Question

Я слушал recent episode of Hanselminutes, где Scott Hanselman обсуждал доступность в веб-приложениях, и это заставило меня задуматься о доступности в моих собственных приложениях.

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

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

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

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

Answer 1

Заканчивать Fangs

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

Answer 2

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

Answer 3

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

Answer 4

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

1. Заголовок
2. Top Navigation
3. Left Navigation
4. Содержание
5. Footer

Когда структурирована таким образом, то скрытая ссылка для «Skip to Main Content» - bene ficial. Тем не менее, с макета CSS, вы можете быть в состоянии изменить порядок это так, что у вас есть:

1. Содержание
2. Заголовок
3. Top Navigation
4. Left Navigation
5. Footer

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

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

Answer 5

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

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

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

Кроме того, Американский фонд для слепых есть section of their website dedicated to advice for web developers on how to cater for vision impaired users.

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

Answer 6

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

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

Answer 7

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

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

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

   < метку = "имя пользователя"> Имя пользователя: </метка> < ввода имя = "имя пользователя" />

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

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

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

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

8. Используйте альт атрибут всех изображений. Если у вас есть spacer gif ... ну .. нет. В противном случае объясните, что такое картина и каково ее значение для контента, с которым он связан. не используйте «диаграмму» в качестве тэга alt. Используйте «График финансовых результатов с начала года: $ 5,000 Q1, $ 4,000 Q2, $ 8,000 Q3» или что-то подобное.

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

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

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