Альтернативный текст изображений при копировании

7

Все мы хорошо знаем, что у изображений необходимо указывать альтернативный текст в атрибуте alt. Однако что будет, если пользователь скопирует текст с таким изображением.

Попробуем:

1
<p>Я люблю <img src="soccer.png" width="16" height="16" alt="Футбол" /></p>

Скопируйте и вставьте следующую строчку в какой-либо текстовый редактор.

Я люблю Футбол

Как видите на данный момент полноценное копирование есть только в FF. Остальные основные браузеры не копируют альтернативный текст.

10 советов по обеспечению доступности

2

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

  1. Сделайте структуру документа такой, чтобы страница выглядела нормально без CSS. Это наиболее важный пункт. Убедитесь что страница имеет правильную логическую последовательность структурных элементов. Не полагайтесь на css в этом вопросе.
  2. Разделяйте ссылки. Помимо простых пробелов разделяйте смежные ссылки еще чем-нибудь. Устройства для чтения с экрана воспринимают ссылки без пробелов как одну.
  3. Придайте ссылкам смысл. Убедитесь что ссылки имею определенный смысл. Например используйте следующий тест для ссылки: «прочитать статью полностью», вместо такого: «нажмите здесь».
  4. Сделайте ссылку на основное содержимое. Позвольте пользователю пропустить навигацию. Если вы используете навигационное меню в начале каждой страницы такая ссылка позволит сразу перейти к основному содержимому, не тратя каждый раз время на навигацию. Это имеет отношение не только к пользователям с ограниченными возможностями, но также будет полезным и для обычных пользователей и мобильного интернета.
  5. Сделайте текстовую альтернативу для нетекстовых данных. Обычно в этом случае речь идет об изображениях. Для изображений нужно использовать атрибут alt, значение которого должно отражать содержание изображения. Также существует атрибут longdesc для длинных описаний. Для изображений не имеющих смысла можно использовать пустой атрибут alt="". Также можно описать содержимое изображения прямо на странице.
  6. Таблицы. Выделяйте заголовки строк и столбцов. В этом вам поможет элемент th со специальным оформлением вместо обычного td. Чтобы описать содержимое таблицы используйте элемент caption. Для описания несколькими словами можно использовать атрибут title у элемента table. Чтобы описать назначение таблицы нужно использовать атрибут summary. Это особо важно для пользователей с ограниченными возможностями.
  7. Скрипты. Убедитесь что ваш сайт корректно работает с отключенными скриптами. Не используйте JS для навигации или для просмотра содержимого. Если же без скриптов обойтись нельзя, обеспечьте альтернативные способы взаимодействия с этими элементами.
  8. Цвет. Убедитесь что информация представленная на странице в цветовом оформлении, хорошо воспринимается и без него. В противном случае, пользователи с цветовой слепотой не смогут нормально воспринимать такую информацию.
  9. Ссылка на специальную страницу. Если вы можете сделать отдельную страницу для пользователей с ограниченными возможностями, сделайте ссылку на нее.
  10. Проверка. Проверяйте сайт на наличие ошибок с помощью различных сервисов.

Оригинал: 11 Accessibility Tips

Основы доступности: Цветовая слепота

3

По некоторым оценкам, до 10% мужского и 0,4% женского населения в мире страдает от некоторых форм цветовой слепоты. Наиболее распространенная форма — Дальтонизм (Протанопия), врожденное нарушение цветового зрения, при котором человек не отличает красный цвет от зеленого. Существует также такие формы как сине-желтая цветовая слепота и полная цветовая слепота.

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

30 советов по улучшению читабельности

9

ЧитабельностьЛюди заходят на ваш блог чтобы прочитать новые статьи и чем легче им это сделать тем лучше. Дизайн который не нацелен на пользователя будет только отпугивать читателей.

Что же можно сделать для того чтобы улучшить удобочитаемость и заставить пользователей читать. (далее…)

Доступные ссылки

8

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