Небольшая статистика

В Великобритании:

• у2млн.жителей нарушения зрения;
• 9млн.жителей имеют нарушения слуха;
• 3.4млн.людей имеют физические нарушения;
• 1.5млн.людей имеют умственные нарушения;
• у 6млн.человек дислексия.

В США:

• у10млн.жителей нарушения зрения;
• 28млн.жителей имеют нарушения слуха;
• 8млн.людей имеют физические нарушения;
• 6.8млн.людей имеют умственные нарушения;
• у 25млн. человек дислексия.

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

Нарушение зрения—слепота

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

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

Располагайте инструкции перед полями формы

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

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

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

Создание ссылки «перейти к основному контенту»

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

Убедитесь, что текст ссылок информативен

Слепые пользователи, использующие ПО JAWS, могут слушать называния ссылок на веб-странице через опцию «список ссылок». Если текст ссылки не информативен—в нем используются лишь фразы вида «нажмите сюда» или «подробнее», слепые пользователи никак не смогут определить, куда приведет их эта ссылка.

При использовании этой опции рекомендуется писать в тексте ссылки место её назначения. Например, вместо «нажмите здесь, чтобы узнать больше об Agoo IT» было бы лучше написать: «узнайте больше о Agoo IT». Слова «нажмите здесь» убраны из второго варианта, так как это термин, относящийся к работе смышкой.

Создавайте информативные заголовки веб-страниц

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

Используйте сжатый альтернативный текст

Слепые пользователи узнают, что изображено на картинке по ее альтернативному тексту. Когда изображение несет важную информацию, к нему необходимо добавить краткий подходящий альтернативный текст. Например, логотип веб-сайта компании «ЭЮЯ» должен быть обозначен, как alt="Компания ЭЮЯ". Размещение слишком большого количества информации, как, например, «Компания ЭЮЯ, синий фон с фиолетовым текстом и желтой подсветкой» может запутать слепых пользователей.

В случае, если изображение чисто декоративное или использовано для разметки, к нему нужно добавить пустой альтернативный текст: alt=«». Тогда этого читающее экран ПО не будет произносить название файла с изображением.

Создавайте информативные заголовки

Важно создавать наглядные заголовки, которые семантически отмечаются тегами от

до

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

 

Тег

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

 

Создавайте аудио описание и транскрипции видео файлов

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

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

Помните, что слепые пользователи не могут использовать мышь

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

Нарушения зрения—слабое зрение

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

Ключевые принципы доступного и практичного дизайна для пользователей со слабым зрением:

Не используйте изображения с текстом

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

Убедитесь, что размер текста можно изменять

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

Размещайте ключевую информацию в специальных местах экрана

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

Используйте цвета с высоким контрастом

Для повышения читабельности сайта для людей с нарушениями зрения, убедитесь, что цвета, применяемые насайте, имеют хороший контраст. Этого можно достичь, проверив выбранные цвета с помощью Juicy Studio color contrast analyzer. Тестируя различные сочетания основного и фонового цветов можно определить, соответствуют ли выбранные цвета рекомендациям WCAG. Кроме того, можно сделать несколько различных цветовых схем, чтобы облегчить читаемость.

Нарушения слуха

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

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

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

Создавайте титры для любого видео контента

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

Создавайте расшифровки исполняемого аудио

Если контент проговаривается без видео, как например в подкастах, важно сделать расшифровку. Рекомендуется создавать расшифровки с помощью простого и доступного HTML, а не ввиде документа Microsoft Word или Adobe PDF, чтобы как можно более широкая публика получила доступ к ним.

Физические нарушения

Люди с физическими нарушениями варьируются от тех, кто имеет временные повреждения, например сломаную руку, до людей с параличем, которые не могут пользоваться ни одной конечностью. В зависимости от тяжести физического нарушения эти пользователи могут заходить на веб-сайты, используя распознающее голос ПО,например Dragon Naturally Speaking. Однако имеется то,что объединяет всех пользователей с физическими нарушениями—ограничение или отсутствие возможности использования мыши. Это означает, что контент веб-сайта, требующий клика мышкой или хорошей моторики недоступен таким пользователям.

Ключевые принципы доступного и практичного дизайна для пользователей с физическими нарушениями:

Убедитесь, что весь контент может быть доступен с помощью клавиатуры

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

Создавайте состояние focus для ссылок

Так как пользователи сфизическими нарушениями постоянно пользуются клавиатурой для всех действий, важно создавать состояние :focus для ссылок. Это можно осуществить, присваивая другой стиль текста ссылке, из-за чего при наведении курсора цвет или что-либо другое изменяется и делает понятным то,где находится пользователь на странице. Если вставить в CSS следующий пример, ссылки будут становиться черными при наведении курсора либо мышкой, либо клавиатурой.

a:hover, a:focus, a:active {color: #000000;}

В результате получится:

Создавайте видимые ссылки перехода

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

Убирайте двигающиеся объекты

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

Создавайте большие активные области

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

Правильно называйте ссылки на изображения и элементы управления

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

Нарушения познавательных способностей и не обучаемость

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

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

Создайте единообразный дизайн

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

Сделайте карту сайта

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

Используйте выровненный слева шрифт без засечек с изменяющимся размером

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

Создавайте полезные сообщения об ошибках

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

Предложите словесный вывод

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

Создавайте различные цветовые схемы

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

Заключение

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

Английская версия статьи—Understanding disabilities when designing a website.

codeisart.ru/understanding-disabilities-when-designing-a-website/

Написать письмо на e-mail
icq 415547094  romverinbox.ru
© 1997 - 2024 romver.ru