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


35

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

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

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


uxexchange.com?
Бобби Джек,

Ответы:


18
  • Убедитесь, что каждое изображение имеет альтернативный текст.
  • Убедитесь, что ваша цветовая схема подходит для людей с дальтонизмом.
  • Предложите высококонтрастный макет или большой текстовый макет для слабовидящих.
  • Убедитесь, что ваши ссылки имеют смысл при чтении вне контекста (т.е. не просто пишите «нажмите здесь»).
  • Убедитесь, что ваш сайт по-прежнему предлагает полную базовую функциональность, если у пользователя нет поддержки JavaScript.

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


1
Есть несколько предостережений для правила 'alt text'. К сожалению, я работал с людьми, которые рассматривают это как жесткое правило - то есть, КАЖДЫЙ образ ДОЛЖЕН иметь атрибут alt. Затем они добавляют такие вещи, как «Логотип нашей компании» к изображению с логотипом и «большой синий цвет» к изображению, связанному с учетной записью Twitter.
Бобби Джек,

С тэгом alt я верю, что КАЖДЫЙ образ должен иметь его. При работе с программой чтения с экрана вам необходимо указать, что делать. Если ваше изображение просто для визуальной привлекательности и не имеет другого значения, тогда используйте alt = "", чтобы программа чтения с экрана могла его игнорировать. Если ваше изображение представляет собой график или, возможно, заголовок, обязательно включите информацию в тег alt, чтобы программа чтения с экрана, а также люди, которые отключают изображения, не пропустили.
ph33nyx

8

Создание вашей семантики разметки - это огромный шаг к доступности, если ваш сайт можно перемещать без применения CSS, а содержание имеет смысл, тогда все остальное - просто визуальное представление!


1
И еще больше веселья в голый день CSS :)
Тим Пост

2
Хаха, естественно! Серьезно, однако, что многие люди полагают, что доступность - это все, что связано с дизайном, это полная противоположность: если вы можете сделать свой контент таким, чтобы он работал без какого-либо дизайна, то машина (и, следовательно, человек) всегда сможет получить доступ Это.
Тоби

7

Во-первых, «инвалид» означает ничто!

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

Бедный человек, у которого есть только тетрадь с маленьким экраном

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

Дальтоник

Может ли кто-то использовать ваш веб-сайт, не видя цвет значков и т. Д., Если вы просматриваете его на черно-белом мониторе.

Человек с плохим сайтом.

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

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

Человек, который не может использовать мышь

Может ли человек, который никогда не пользовался вашим сайтом раньше, получить доступ ко всем функциям / информации просто с помощью клавиатуры. (Клавиша Tab работает полезным способом?)

Кто-то с плохими навыками чтения

Вы используете простой английский как можно больше?

Кто-то, кто не хорош в изучении новых вещей.

Дизайн вашего сайта основан на другом сайте, который ваши пользователи уже знают, как использовать?

Слепой человек

Это трудный вопрос, и большая часть того, что вы читаете, не подходит для использования !!
Сначала закройте все наши другие проблемы с доступом, так как людей с плохим зрением гораздо больше или которые не могут использовать мышь, чем людей, которые связывают.

Затем поймите ваши цели , например, если ваш сайт является сайтом бронирования отелей, может быть лучше предоставить платный номер телефона для бронирования, а затем просто сделать информацию об отеле доступной.

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

Так вы должны предоставить вариант без веб? (Телефон? Человек, который посещает их, чтобы помочь заполнить форму и т. Д.?)

Во-первых, можно ли использовать ваш сайт без изображений? (Альтернативный текст - один из способов сделать это)

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

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

Изменение цвета предметов для изменения состояния также не является хорошим вариантом.

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


1
Я люблю первое предложение в этом ответе! (и, конечно, другие предложения тоже)
Тим Пост

5

Вы можете использовать этот сайт, чтобы получить краткий обзор соответствия: http://wave.webaim.org/

Он выполняет ту же работу, что и старая система «Бобби», которая была закрыта пару лет назад.


3

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

http://www.webrichtlijnen.nl/english/




1

Я думаю, что вы должны использовать этот сайт http://www.totalvalidator.com или доступный плагин Firefox. Он имеет несколько проверок инвалидности и помечает все, что отсутствует.


1

Ответ № 1 прост: напишите правильный, семантически правильный HTML / CSS !!! Все предложения выше хороши. Вот контрольный список, который я написал пару лет назад, который показывает вам несколько вещей, которые вы должны проверять на всех сайтах: https://forge.iowa.gov/wiki/index.php/Web_Checklist . Предполагается, что у вас есть панель инструментов веб-разработчика на FF, но это бесплатно и легко получить.

Пара простых вещей, которые я чувствую, могут реально изменить ситуацию:

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

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

Также приятно позволить кому-то, кто перемещается по вашей странице без всех ваших красивых CSS и изображений, пропускать повторяющийся код к контенту. Обычно это достигается с помощью ссылки SKIP, которая скрыта в CSS. Например, <a href="#skipnav" class="noshow">Skip past navigation to content.</a>чтобы пропустить длительную навигацию.

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


На тему тегов ALT ... каждое изображение должно быть тегом ALT. Если изображение является содержимым, оно должно иметь что-то описательное в теге ALT, если это просто украшение, используйте пустые кавычки, alt=""чтобы указать, что программы чтения с экрана, такие как JAWS, могут просто пропустить их.
ph33nyx
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.