Руководство дизайнера по основам веб-дизайна доступности

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

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

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

Введение в доступность

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

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

Возможно, еще важнее то, что может предложить веб-доступность, как описано здесь в определении Википедии:

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

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

1. визуальный - плохое зрение или плохое зрение
2. слуховой - слабослышащие или глухие
3. познавательный - проблемы с пониманием или потреблением информации
4. двигатель - проблемы физической доступности, которые могут потребовать специальных устройств ввода, таких как клавиатуры или программы голосовых команд

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

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

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

W3C и доступный дизайн

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

• W3C (Консорциум World Wide Web) - Международная группа, определяющая веб-стандарты для протоколов, языков и правил. Все официальные правила доступности подпадают под эту организацию.
• WAI (Инициатива веб-доступности) - Официальная программа, которая охватывает все о доступности. Этот общий термин содержит все правила, руководства и методы для современной доступности.
• WCAG (Правила доступности веб-контента) - Группа стандартов и правил, помогающих дизайнерам оценивать свои сайты в зависимости от уровня доступности..
• ARIA (Доступные богатые интернет-приложения) - Специальный стандарт, определяющий, как создавать доступные многофункциональные приложения, основанные на JavaScript / Ajax и аналогичных технологиях. Подробнее об этом в этом посте Анна Монус.

Другие правила существуют под эгидой WAI, в том числе UAAG для пользовательских агентов а также ATAG для инструментов веб-авторинга. На данный момент вас больше всего должны интересовать предложения WAI и рекомендации, изложенные в наборе правил WAI под названием WCAG..

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

Еще одна важная тема, которую вы должны понять, это соответствие WCAG. Это относится к уровень доступности сайта охватывающих широкий спектр факторов. Уровни основаны на соответствии с рейтинговая система A, AA и AAA. Вы можете проверить это с помощью инструмента проверки доступности сети. Лучший результат - ААА.

Чтобы узнать больше об этих рекомендациях, ознакомьтесь со статьей W3C «Введение в понимание WCAG 2.0». Также взгляните на эти ссылки для более подробной информации:

• WCAG 2.0 упрощенный
• Раздел 508 Производительность WCAG

Шаги к доступному дизайну

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

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

Трудно выучить все эти вещи и реализовать их одновременно. Делайте это шаг за шагом, и будьте готовы исследовать больше, если вы запутались.

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

Рассмотрим слепых пользователей, которые могут использовать автоматическое устройство чтения контента. Они также могут иметь аудио переводчик или даже специальную клавиатуру для навигации по сети с помощью клавиш, а не мыши. Вот почему правильный семантический HTML (посмотрите на эту статью) так важно с такими свойствами, как TabIndex а также ключ доступа.

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

Инструменты тестирования доступности

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

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

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

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

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

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

На сайте Cynthia Says есть еще одно бесплатное приложение, которое может проверить сайты на WCAG рейтинги успеха A, AA, AAA, а также раздел 508 для соблюдения правительства.

И если вы в открытый исходный код, посмотрите на эти бесплатные инструменты тестирования доступности на GitHub.

• HTML CodeSniffer
• Инструмент автоматического тестирования доступности
• WCAG Validator

Дополнения к браузеру

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

AInspector для Firefox считается обязательным для доступности. Это проверяет все, и это гораздо более тщательно, чем тестер WAVE.

Пользователям Mozilla также может понравиться средство проверки контрастности WCAG, которое также является бесплатным дополнением..

У пользователей Chrome нет AInspector, но у них есть средства разработчика специальных возможностей, официально созданные Google. Это добавляет дополнительные инструменты в окно инспектора для проверки рекомендаций по доступности..

Пользователи Chrome также имеют средства проверки яркости для цветового контраста и некоторые другие бесплатные расширения..

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

Дальнейшее чтение

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

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

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

• Как улучшить доступность таблиц HTML с помощью разметки
• Доступный дизайн для пользователей с ограниченными возможностями
• 6 советов по улучшению доступности сайта
• Убедитесь, что ваш сайт доступен для слабовидящих