2014-09-04 6 views
0

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

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

Прошу совета, если я использую специальный специальный JS-плагин или HTML-тег?

+0

Yup, просто pop '' перед закрытием '' тег. –

+1

Со всей серьезностью: хорошо на вас за заботу об этом. Тем не менее, «люди с ограниченными возможностями» являются довольно широким описанием, и невозможно правильно описать шаги доступности (или включительные принципы проектирования), которые вы, возможно, захотите принять в одном ответе «Переполнение стека». К сожалению, я не знаю большой, простой для чтения стартовой статьи по этому вопросу. Юкка Корпела написала [хороший] (http://www.cs.tut.fi/~jKorpela/acc/index.html) и [Инициативу доступности веб-сайтов W3C] (http://www.w3.org/ WAI/users/Overview.html), есть много советов. –

ответ

3

Вы ошибаетесь, говоря, что слепые люди используют специальные устройства чтения с экрана вместо обычных браузеров. Да, они (на самом деле, мы) действительно используем устройства для чтения с экрана, но с обычными браузерами.
Считыватель экрана представляет собой часть программного обеспечения, которое отображает текст на экране в речь и/или Braille, поэтому слепой может воспринимать его без какой-либо помощи зрячего человека.
Чтобы сделать вашу веб-страницу доступной для слепых, следуйте Web content accessibility guidelines (WCAG 2.0.

В качестве первых шагов для вас, чтобы пойти, проверить, что:

  • Все значимые изображения имеют альтернативный текст (alt атрибут);
  • У вас нет товаров, основанных исключительно на цвете. Например, это недостижимо:

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

Чтобы сделать это доступным, вы можете:

  • Оставьте свой текст как, но метки необходимы поля с required и aria-required="true";
  • Изменить текст (и дизайн, соответственно), как это:

Пожалуйста, заполните форму. Поля, отмеченные звездочкой (*), обязательны для заполнения.

Это действительно доступно. Затем, возвращаясь к тому, что вам нужно проверить:

  • Раздел названия должны были отмечены заголовками (<h1> ... <h6> теги). И никоим образом не следует использовать заголовки для других вещей, например, сделать кусок текста жирным или просто «для приятного взгляда».
  • Все значимые таблицы должны быть помечены правильно. Используйте <caption>, <th> и другие полезные элементы.
  • Использовать семантическую надбавку HTML 5. Статьи, примечания, элементы, разделы, блоки навигации и т. Д. Должны быть соответственно отмечены.

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

+1

508 рекордов устало устарели. Я бы рекомендовал вместо этого указать [WCAG 2] (http://www.w3.org/TR/WCAG20/). – steveax

+0

@steveax, вы абсолютно правы. Просто обновил ответ, спасибо. –