Как я могу убедиться, что мой сайт доступен для инвалидов? - PullRequest
11 голосов
/ 28 августа 2011

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

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

Ответы [ 6 ]

6 голосов
/ 21 октября 2011

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

Зрительные: нарушения зрения, включая слепоту, различные распространенные типы плохое зрение и плохое зрение, различные виды дальтонизма;

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

Слуховые: глухота или нарушения слуха, в том числе лиц с нарушениями слуха;

Судороги: Фотоэпилептические припадки, вызванные визуальным стробом или мигающими эффектами.

Когнитивные / Интеллектуальные: нарушения развития, обучение инвалидность (дислексия, дискалькулия и т. д.) и когнитивные нарушения различного происхождения, влияющие на память, внимание, развитие «зрелость», навыки решения проблем и логика и т. д.

Самым простым здесь является «Изъятие», исключающее мигание / стробирование контента с вашего сайта, или, что более важно, если вы не можете вывести предупреждение перед отображением этого типа контента.

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

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

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

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

Пользователи-дальтоники могут захотеть изменить цветовую схему вашего сайта в соответствии со своими потребностями. Вы можете найти информацию о типах дальтонизма и разработать несколько альтернативных стилей CSS для удовлетворения этих потребностей. Также высококонтрастная опция для всего на вашем сайте может принести пользу слабовидящим пользователям.

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

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

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

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

Как правило, убедитесь, что ваш код правильно сформирован, исправьте теги / закрывающие теги и т. Д. Убедитесь, что это действительный HTML / XHTML / CSS и т. Д., Если вы можете проверить в соответствии со строгими стандартами, это не повредит вашей причине.Тэги, такие как ссылки / изображения, должны иметь соответствующий текст Alt, чтобы описать, что это за элемент, например, alt = "image1" довольно бесполезен для программы чтения с экрана, но alt = "Изображение, показывающее ...... щелчок по этой кнопке приведет вас к....." Полезно.

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

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

Полезные ссылки

http://www.w3.org/TR/WCAG10/ Рекомендации по инвалидности W3C - хорошее место для начала http://en.wikipedia.org/wiki/Web_accessibility Доступность веб-Википедии http://www.etre.com/tools/colourblindsimulator/ Позволяет увидеть, как изображения будут выглядеть для пользователей с дальтонизмом http://colorfilter.wickline.org/ http://www.w3.org/WAI/Рекомендации W3C по обеспечению доступности веб-сайтов

5 голосов
/ 05 сентября 2011

Если вы из Великобритании, то от юридического POV вы хотите ознакомиться с Законом о равенстве (который заменил Закон о дискриминации по признаку инвалидности).

Основа доступности веб-сайтов основана на модели постепенного ухудшения / прогрессивного улучшения (звучит сложнее, чем есть!). A List Apart недавно написал отличную статью об этом.

Хорошей отправной точкой для веб-профессионалов является Центр веб-доступа RNIB . Очевидно, что это в основном относится к тем пользователям, которые испытывают проблемы со зрением, но это очень полезный ресурс.

Web AIM также является хорошим сайтом для ресурсов / статей, хотя я не уверен, как часто он поддерживается в эти дни (тем не менее, информация там уместна).

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

Доступная разработка - это как изменение мышления, так и обучение навыкам. Вам нужно постоянно задавать себе вопрос: «Как могут другие люди использовать это? Какие барьеры могут быть на их пути? Какой браузер они используют? Работает ли это без цвета / JavaScript / CSS?». Узнайте, как разобрать ваш сайт и посмотреть, работает ли он по-прежнему.

5 голосов
/ 28 августа 2011

Раздел 508 - это раздел закона, который требует, чтобы веб-сайты правительства США были доступны.

Более подробная информация приведена здесь, включая рекомендации по обеспечению доступности контента для всех.

http://www.section508.gov/

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

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

3 голосов
/ 15 сентября 2011

Рекомендации по обеспечению доступности веб-контента 2.0 ( WCAG 2.0 ) - это рекомендация W3C от Инициативы веб-доступности (W3C / WAI).

Обзор можно найти здесь: http://www.w3.org/WAI/intro/wcag20
Существуют очень широкие принципы, а также точные методы (для HTML, CSS, JS, Flash и т. Д.) И цель каждого критерия. Это не документы, предназначенные для чтения сразу, и вы захотите узнать больше из учебных пособий и статей, найденных в Интернете (архивы по 456 Berea Street , WebAIM, видео о доступности )

2 голосов
/ 18 октября 2011

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

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

1 голос
/ 22 октября 2011

Множество хороших ответов, но я не могу не добавить свой вклад.

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

Однако вы НЕ должны использовать белый на черном или белый на черном ... дислексики обычно не могут видеть эти цвета.Используйте не совсем белый цвет для фона или текста.

Кроме того, убедитесь, что ваш текст большой.Убедитесь, что как можно больше контента является стандартным текстом, чтобы программы преобразования текста в речь могли «читать» веб-сайт.Текст в речь не может читать изображения.Также рекомендуется использовать текстовые ссылки вместо кнопок по тем же причинам (хотя для этих сценариев могут быть средства связи текста с кнопкой ...?)

...