Создание сайтов Коломна » Обсуждения


Bookmark and Share




8 советов по улучшению доступности веб-проектов

июл 13, 2018 | 17:07
Веб-доступность является ключевым компонентом, является важным аспектом современного веб-дизайна. Без применения надлежащего рассмотрения в процессе создания, люди исключены из использования веб-сайта легко, вообще. Ниже обсудим быстрые и простые советы реализовать в проектах, обеспечить всем пользователям равный доступ к веб-сайту и содержимому и функциональности. 
 
1. Всегда добавлять теги Alt изображений
 
Это особенно, поскольку позволяет читателям экрана, обеспечить визуальное описание изображения пользователь не в состоянии просмотреть. Описание кратким информативным. 
 
Образец
 
<img src= " тропический. png «alt=» пальмы с морем и закатом позади">
2. Использовать метки H последовательно и правильно
 
Структура бирок H должна последовательна повсеместно в конструкции. Заголовки сайтов использовать тег H1, заголовки тег H2, подзаголовки тег H3 и второстепенные подзаголовки тег H4. Позволяет читателю экрана и другой ассистивной технологии эффектно и точно транспортировать иерархию содержания к потребителю. 
 
3. Разработка простых в использовании веб-форм
 
При разработке веб-формы необходимо учитывать три основных момента. 
 
Первый-структурировать формы интуитивно. Держите простыми, универсальными и совместимыми со стандартными потоками форм. 
 
Второй включает метки с каждым полем. Распространенной ошибкой включение меток в раздел заполнителя поля. Не подобран читателем экрана и привести к путанице и проблемам пользователя. Обязательно поместите метку снаружи рядом с полем, используйте раздел заполнитель, предоставить дополнительные подсказки, пример содержимого. Не забудьте включать визуальные подсказки, звездочки, наряду с необходимыми входными данными. 
 
Последний момент заключается включить большую и заметную кнопку под полями с описательной меткой фиксируемого действия. Типичная кнопка действия формы использовать метку, такую «отправить» и «отправить». 
 
4. Использовать большие размеры шрифта основного текста
 
Размер шрифта браузера по умолчанию установлен на 16px, 1em. Попробуйте придерживаться содержания дизайн позволит. Люди с хорошим зрением, не имеют проблем с чтением текста 11px, 12px и 13px он быстро ограничить пользователей с плохим зрением от чтения Контента легко и вообще. Отличная практика, легко реализовать, мгновенно сделает веб-проекты доступными. 
 
5. Реализация высокой контрастности цветов
 
Наиболее распространенная проблема с контрастом — использование тонов серого слишком легки многих пользователей, читать с легкостью. Практика выбирать контрастные цвета текста и кнопок. Используйте инструмент WebAIM измерения контраста в проектах. 
 
6. Избегайте «нажмите здесь» ссылки
 
Использование «нажмите здесь» в качестве текста ссылки создает трудности всех пользователей, особенно тех, кто использует программы чтения с экрана. Всегда проверяйте, ссылки были описательными и однозначными. 
 
7. Не полагайтесь исключительно на цвет визуальной обратной связи
 
Для состояний ошибок полей сайты часто передают ошибку через цветовую обратную связь, такую красные контуры и красный текст. Сделать трудным дальтоников пользователей, понять ошибку. Поэтому предоставить визуальные подсказки, описания ошибок под полем и/или соответствующее использование значков. 
 
Этот пример является хорошо выполненным и доступным состоянием ошибки предоставляет три различных формы визуальной обратной связи: цвет, иконография и описательное сообщение ошибке. 
 
8. Включить состояния фокуса всех полей ввода
 
Это ключевой визуальный индикатор, особенно пользователей обращаются к сайту исключительно с помощью клавиатуры. Без состояния фокусировки у пользователей клавиатуры не визуальной индикации положения нажимают клавишу Tab навигации по странице. 
 
Эта функциональность включена по умолчанию в браузерах CSS сброс часто удалить в надежде заменены чем-то лучше. Убедитесь протестировали конкретный вариант использования на веб-сайте. 
 
http://sozdanie-saytov-kolomna.tilda.ws
https://sozdanie-saytov-kolomna.tumblr.com

Нет комментариев  

Вам необходимо зайти или зарегистрироваться для комментирования