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

Question

Кто-нибудь может дать мне несколько советов или связать меня хорошими ссылками на это?

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

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

также не уверен, как все будет работать в разных браузерах ....

спасибо!

Answer 1

1) Используйте теги заголовков HTML для каждого раздела контента на ваших страницах. Теги заголовков: h1, h2, h3, h4, h5, h6

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

3) Не используйте JavaScript для динамического изменения содержимого на экране без предварительного уведомления пользователя об изменении текста. Если JavaScript изменяет текст на экране до того, как программа чтения с экрана сможет прочитать содержимое, пользователь с ослабленным зрением не сможет узнать, что содержимое было изменено.

4) Не обслуживайте пользователя 1000 изображений. Если изображение не передает релевантный контент, сделайте его фоновым изображением CSS.

5) Будьте добры к атрибуту title, особенно к тегам привязки. Это может сказать пользователю, куда он собирается пойти.

6) Не помещайте текст на изображение, которое не может быть передано в качестве альтернативного содержимого. Лица со слабым зрением не читают изображения.

7) Убедитесь, что все ваши метаданные актуальны. Если вы изменяете какой-либо контент, убедитесь, что не забыли лишние биты описательных данных.

8) AJAX побеждает доступность. Будьте добры с использованием AJAX.

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

10) Не используйте теги представления или атрибуты представления в своем HTML. Используйте таблицу стилей. Если ваш HTML содержит соглашения о представлении, он, вероятно, недоступен.

11) Если ваш контент визуально существует в другом порядке, чем то, как он написан в HTML, сверху вниз, он, вероятно, не сможет обеспечить доступ. Держите вещи в порядке и последовательности. Пользователи ожидают, что контент будет перетекать сверху вниз, а индексирование вкладок будет следовать потоку контента.

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

Answer 2

Я совершенно слепой, и вы будете удивлены тем, сколько вещей все еще не имеет альт-атрибутов после всех этих лет ... Будьте осторожны, есть еще много мифов, таких как нет разрешенная графика (неправильно), тальбы плохие (неправильно) и фреймы плохие (неправильно, хотя я понимаю, что фреймы плохие по другим причинам.) В идеале у вас должен быть кто-то, кто слепо проверяет ваш сайт, если вам нужна дополнительная помощь в этом бесплатно напишите мне на westbchris@gmail.com. Еще одна вещь, попробуйте создать элементы управления, которые на самом деле делают кнопки и / или ссылки. Активируемые div'ы - это не круто, потому что не очевидно, что они что-то делают, и в зависимости от того, какую вспомогательную технологию вы используете, вы даже не сможете нажать на них.

Answer 3

Ну, похоже, никто не упомянул WAI- ARIA , который предназначен для приложений с доступным богатым Интернетом. IE делает доступными такие вещи, как gmail. И достойный поисковый термин, чтобы найти такие вещи, как эта отдельная статья о вай-арии . Уже довольно поддерживается.

Answer 4

Существуют подробные определения, которые сложно освоить и реализовать. Примеры включают Рекомендации по обеспечению доступности веб-контента (WCAG) и Раздел 508 .

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

РЕДАКТИРОВАТЬ : Я хотел бы добавить, что вам не стоит беспокоиться о тестировании своего сайта с помощью JAWS или другого средства чтения с экрана. Ваша неспособность перемещаться по сайту будет больше связана с вашей неопытностью с программой чтения с экрана, а не с недоступностью сайта. Тем не менее, тестирование сайта на предмет удобства использования очень полезно для вашей целевой аудитории.

РЕДАКТИРОВАТЬ # 2: Как обсуждалось в комментариях, я намеревался сообщить, что вы не должны судить о юзабилити сайта, основываясь на вашем опыте с программой для чтения с экрана. Тем не менее, я бы порекомендовал всем, кто занимается веб-разработкой, иметь доступ к браузерам / оборудованию, используемому для просмотра веб-сайтов, включая программы чтения с экрана. Это была плохая формулировка в оригинальной редакции.

Answer 5

Термин для этого - Доступность. Взгляните на WAI-сайт W3C . Я всегда считал Juicy Studio бесценным ресурсом для статей, обсуждающих доступность.

Answer 6

Проверьте это объяснение из Alertbox:

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

... затем перейдите по ссылке внизу к 148-страничному отчету с Руководствами по дизайну (документ защищен авторским правом 2001 года, поэтому он должен быть обновлен с оригинала).