Предлагаю вашему вниманию перевод (с моими комментариями) преполезнейшей статьи «12 Tips for a More Accessible Website», опубликованной недавно на сайте Designshack. Под доступностью в ней подразумевается не скорость или корректная работа хостинга, а именно доступность сайта для разных людей, в том числе и имеющих различные нарушения зрения.
Сделать оформление сайта доступным для всех категорий граждан — это не только моральный долг, но и правовое обязательство. Многие организации в США, включая Международный олимпийский комитет, получили иск за то, что их сайты недостаточно доступны людям, страдающим некоторыми видами неспособности (называть их инвалидами не слишком корректно). А их, с теми или иными отклонениями, имеет место быть порядка 50m (в США только). Очевидно, что и с коммерческой точки зрения, терять такой жирный кусок пирога крайне не выгодно.
Улучшение доступности также означает не только увеличение аудитории за счет привлечения «инвалидов», но и дает возможность почти 57% взрослых пользователей Интернета извлечь выгоду из такой расширенной доступности. Только 19% вебсайтов в настоящее время отвечают самым основным требованиям доступности (опять же применительно к США). Таким образом, вы действительно сможете выделиться среди конкурентов, произведя несколько изменений на своем вебсайте.
В данной статье мы рассмотрим 12 способов, которые позволят сделать ваш сайт более доступным. Некоторые методы являются достаточно дешевыми и моментально осуществимыми. Другие потребуют немного больше времени и финансовых вливаний.
1. WAI-ARIA
WAI-ARIA. Это первый адрес, куда следует заглянуть. На сайте Консорциума W3C опубликована подборка директивных материалов, коим и надлежит следовать. В частности, необходимо добавлять в код страниц сайта специальные метаданные для улучшения доступности. Более подробно с технологией WAI-ARIA можно ознакомиться непосредственно на сайте Консорциума. Скажу лишь, что она определяет пути и способы отображения таких вещей как, например, Ajax и DHTML для инвалидов, которые не могут управлять мышью или пользуются экранными «авто-читалками».
2. Постепенное совершенствование
Статья об этом была опубликована в журнале Smashingmagazine. Смысл действа в том, что для отображения сайта используется стандартный базовый метод с постепенным наращиванием всевозможных аксессуаров. То есть, это путь от простого к сложному. Любой сайт должен иметь так называемую «незыблемую базу», которую сможет отобразить даже ваша кофеварка. А все последующие навороты должны проверяться на той же кофеварке. И если она бунтует, то необходимо изыскивать иные методы для отображения конкретного наворота, а если не выходит, то, возможно, и вовсе от такого «улучшения» отказаться.
3. Альтернативный контент
Здесь подразумевается необходимость предоставлять текстовый эквивалент заведомо нетекстовых элементов сайта. К изображениям или видео необходимо добавлять альтернативные метки, чтобы люди, использующие программы чтения с экрана, могли понять, что именно находится на данной странице. Для ссылок также необходим текст описания (title). Более подробно об этом можно почитать здесь
4. Подписи
Как и альтернативные теги, изображениям и видео-клипам необходимо также добавлять текстовые подписи, чтобы люди со слабым зрением, например, могли знать точно, что такое они смотрят. В альт-тэги нет смысла заносить целый абзац текста, а вот рядом с картинкой или видео он будет очень даже уместен. Кроме того, это также полезно с точки зрения seo. Исчерпывающий материал на эту тему есть опять же у Консорциума W3C
5. Программы чтения с экрана
Большинство слепых и слабовидящих людей используют программы чтения с экрана при просмотре веб-сайтов. Один из лучших способов, чтобы убедиться, что ваш сайт является доступным для них — это использовать то же программное обеспечение самостоятельно. Найти и опробовать необходимый софт можно здесь — textScreen
6. Аудит
Для серьезных проектов никакая самостоятельная проверка доступности не сравнится с работой профессионалов-экспертов. Существует целый ряд компаний и частных лиц, готовых помочь осуществить аудит вашего сайта и снабдить кучей полезной информации по его улучшению. Найти их в сети не составит большого труда.
7. Юзабилити тестирование
Самый простой по смыслу, но и самый неоднозначный по результатам способ выявить недостатки вашего сайта. Набирается группа людей с различными потребностями, усаживается за компы и вперед! Что нравится, что не нравится. Обо всем пишутся доклады и затем анализируются. Сложность состоит в подборе участников группы, а еще больше — в их различных потребностях. Все люди разные и всем не угодишь. Поэтому проводить подобное тестирование имеет смысл также при участии специалистов. Если же решитесь сами, то вот краткий, но полезный гид
8. Таблицы стилей
Здесь рекомендуется уделить особое внимание размерности шрифтов. Вы не поверите, какое количество людей на самом деле использует возможность изменения размера шрифтов. Поэтому никогда не следует использовать фиксированные размеры, а только относительные. Подробнее — здесь
9. Контроль над шрифтом
Многие современные браузеры позволяют легко и оперативно изменять размер шрифта на странице сайта. Однако многие люди не знают о такой возможности или используют древние браузеры. Специально для них следует предусмотреть возможность изменения размера шрифта средствами самого сайта (java-script или что-то иное), непосредственно указав это на странице сайта заметной ссылкой.
10. Последовательность
Последовательность в дизайне от страницы к странице. Этот пункт особенно важен для людей, использующих программы чтения с экрана. Если каждая страница сайта будет иметь различный по составу и размещению блоков дизайн, то ориентироваться на таком сайте будет крайне сложно. Причем, не только людям с ограничениями, но и обычным пользователям.
11. Текст для навигации
Избегайте использовать для навигации по сайту изображения. Лучшая навигация — текстовая. Пользователи программ чтения с экрана легко смогут по ним передвигаться. И кроме того, такую навигацию намного легче изменить при необходимости, чем перерисовывать картинки.
12. Цвета
Цвет — пожалуй наиболее действенное визуальное средство отображения содержимого сайта. Современные мониторы позволяют оперировать такими цветами, которые несколько лет назад были просто немыслимы. Поэтому цвету стоит уделить особое внимание. Для комфортного чтения текст должен в достаточной степени контрастировать с фоном, но не резать глаза. Наилучшим сочетанием во все времена был белый фон и черный текст. Ссылки, соответственно, голубые и подчеркнутые. Однако это редко производит приятное в плане дизайна впечатление. Поэтому имеет смысл творить красиво, но чисто и понятно.
В любом случае следует забыть про светло-серые или пастельные цвета для шрифта, так как множество даже обычных людей имеют проблемы со зрением, и такой текст читать — одно мучение. Обширная статья на данную тему с тучкой полезных ссылок есть здесь
Заключение:
Доступность сайта — часто игнорируемый аспект веб дизайна. Хотя это именно то, что должно стать ядром еще на стадии проектирования и рисования бумажных набросков. И дело тут даже не в корысти и алкании посетилей массы, а чисто в человеческом подходе. Не красоты ради создается сайт, а в первую очередь для людей.
А что вы думаете по поводу доступности сайтов? Есть ли смысл заморачиваться об этом в рунете или так сойдет?
