Как сделать упрощенный просмотр сайта
Добавил пользователь Евгений Кузнецов Обновлено: 04.10.2024
Ни для кого не секрет, что простота зачастую очень хорошо подходит веб-сайтам. Простой интерфейс, который понятен и легок в использовании, с большей вероятностью сделает так, чтобы посетители вернулись на ваш сайт.
Но как упростить сайт? Даже если вы не создаете что-либо с нуля, суть в том, чтобы задавать себе задачи, а затем пытаться решать их так, как это делали бы пользователи. Все, что мешает в достижении этих целей, должно быть убрано. Все, что препятствует пониманию пользователя о том, что он должен делать на вашем сайте, необходимо исключить из дизайна.
Сейчас мы рассмотрим несколько трюков, с помощью которых можно упростить дизайн сайта. Эти идеи работают как для существующих сайтов, так и для проектов, находящихся в процессе разработки. Эта статья содержит примеры простого дизайна, который вы можете просмотреть для большего вдохновения идеей.
1. Фокусируйтесь на призыве к действию
Ваш веб-сайт должен иметь конечную цель для каждого пользователя, которую он должен достичь. Эта цель должна быть очевидно передана дизайном каждому человеку, попавшему на ваш сайт.
Призывы к действию должны быть понятны, достаточно большого размера и встречаться в нескольких локациях, чтобы пользователи никогда не ушли слишком далеко от этого ключевого клика.
2. Оптимизируйте количество страниц
Ваш дизайн состоит из множества страниц информации? Вы уверены, что это так необходимо?
Избавьтесь от страниц, которые содержат старую, неактуальную информацию. Удалите страницы, содержащие бесполезные виджеты или карты – эти элементы, как правило, можно разместить в другом месте.
3. Придерживайтесь цветовой палитры
Большое количество цветов – это весело и увлекательно, а также очень утомительно. Придерживайтесь цветовой палитры из двух-трех цветов, чтобы держать все под контролем.
Если вы хотите максимально упростить дизайн, используйте монотонную цветовую палитру с несколькими оттенками одного цвета. Удивительно, насколько красиво может выглядеть нечто настолько простое. К тому же, простая палитра легко переносится пользователями. Небольшое количество цветов не вызывает умственной утомляемости, и помогает в создании более гармоничного внешнего вида.
4. Используйте стандартную навигацию
Стандарты, тем временем, достаточно скудны. Полоска навигации сверху страницы, или выдвигающееся элементы навигации с 3-8 опциями меню считаются нормой. И забудьте об этих мега-стильных навигационных меню, которые когда-то были популярны. Если вы не крупный e-commerce предприниматель, нет никакой нужды помещать каждую страницу сайта в меню. К тому же, такие меню редко работают на мобильных устройствах.
5. Используйте правило 80-20
Если вы собираетесь поменять дизайн, то начать стоит с правила 80-20.
Существует два варианта понимания этого правила и способа его применения.
- 20 процентов всех элементов вашего сайта лягут в основу 80 процентов желаемых действий пользователей. Это означает, что призывы к действию, кнопки и другие элементы интерфейса будут генерировать подавляющую долю взаимодействий с пользователем. Это совершенно нормально.
- Имея это в виду, перерабатывайте дизайн, фокусируясь на 20 процентах контента, чтобы получить 80 процентов результата. 20 процентов элементов, которые вы, возможно, захотите изменить, включают те элементы, которые генерируют наибольшее количество кликов: кнопки призыва к действию, воронки конверсии и изображения. Пустые пространства – еще один важный фактор.
Правило 80-20 также называют принципом Парето. Он был сформулирован экономистом Вильфредо Парето, но нашел свое применение во многих областях.
6. Осмысленно используйте UI элементы
Иконки, картинки и другие элементы пользовательского интерфейса в дизайне должны использоваться с определенной целью. Просто представьте, насколько раздражающим было бы кликать на иконку Facebook и не попадать на страницу бренда.
Не утомляйте пользователей избытком элементов. Планируйте и используйте их только там, где они выполняют конкретную цель и имеют смысл.
7. Позаботьтесь от типографике
Правило с использованием типографии такое же, как и в случае с цветом – чем меньше, тем лучше.
Семейства шрифтов, которые наиболее читабельны, имеют стандартные формы, высоту строки и ничем не приукрашены. Солидные семейства шрифтов идут с несколькими вариациями, так что вам не придется искать дополнительные шрифты, чтобы подчеркнуть некоторые конкретные участки текста. Буквы должны быть хорошо различимы и читабельны, и контрастировать с фоном.
Вам понадобится всего два шрифта: один для основного текста, а другой для использования в дизайне.
8. Увеличьте размер шрифта
К вопросу о типографике: увеличьте размер шрифта. Экраны становятся все больше, так что сделайте так, чтобы ваш текст было хорошо видно.
Возможно, это звучит нелогично, но на мобильных устройствах это правило также работает. Большие буквы, как правило, легче читать. Забудьте старый миф, что люди не читают текст внизу страницы. Ключевые слова должны побудить пользователей прокутить страницу, но не все должно вмещаться в первый экран. Пользователи уже привыкли к прокрутке, особенно на мобильных телефонах.
9. Сфокусируйтесь на тексте
Да, типографика играет важную роль в формировании дизайна, но не менее важны и сами слова. Каждое слово должно передавать то же значение, что и ваши визуальные элементы.
Веб-сайты – это среда, которая предполагает общение с помощью чтения. Убедитесь, что эта беседа, которую вы ведете с пользователем, понятна, кратка и читабельна. Создайте тон, который проходит сквозь дизайн, и используйте слова и язык для взаимодействия с посетителями.
Прочитайте свои тексты, и удалите те части, в которых нет необходимости.
10. Нарушьте одно правило, но только одно
Правила нужны, чтобы их нарушать. Но нарушьте только одно правило.
Если вы хотите сделать что-то особенное, не перегружайте дизайн кучей необычных и непривычных элементов. Совсем необязательно утомлять и перегружать пользователей, чтобы создать нечто уникальное.
Звучит просто, да?
Заключение
Дизайн сайта, который слишком сложен или наворочен, может нарушить коммуникацию с пользователями. Помните ваши цели, и то, как вы хотите, чтобы пользователи взаимодействовали с вашим дизайном. Заполнение формы, загрузка приложения или покупка плюшевого зайчика – каждый элемент дизайна должен быть на своем месте.
Избавьтесь от всех лишних элементов, которые стоят на пути. Пользователи любят понятный и простой в использовании дизайн. Это особенно актуально на небольших девайсах, типа мобильных телефонов, на которых малейший беспорядок может разрушить опыт использования за считанные секунды.
Адаптивность сайта — это возможность его правильного отображения на устройствах с разными техническими характеристиками. Как сделать сайт адаптивным, что стоит учесть и как проверить правильность отображения сервера? Об этом далее.
Как сделать сайт адаптивным на все экраны?
Чтобы сделать сайт адаптивным на мобильное или стационарное устройство, нужно иметь представление о HTML5, CSS3 и JavaScript. Кроме общих знаний, требуется понимать основные принципы адаптивности.
Только с ними можно начинать делать верстку сайта:
- Поточность — принцип отсутствия смещения информационных блоков во время просмотра сайта с мобильного устройства.
- Относительность в измерении — принцип использования относительных единиц для установки размеров и координат верхней и нижней границы блока экрана ПК и дисплея смартфона.
- Применение контрольных точек — принцип расположения элементов для разных экранов во избежание сдвига содержимого страниц сайта.
- Принцип грамотного использования минимальных и максимальных значений. К примеру, если экран имеет ширину меньше 1000 пикселей, то контент размещают на весь экран. Иначе максимум ширина будет достигать 1000 пикселей.
- Принцип вложенности объектов для предотвращения сложностей контроля за разными элементами сайта. Можно вложить их в один контейнер. Требуется для тех блоков, которые не нужно адаптировать под экран — кнопки с логотипами и др.
- Использование одинаковых шрифтов во избежание перегрузки сайта.
- Правильное применение растровой с векторной графикой. К примеру, если картинка состоит из множества деталей, следует делать ее в растровом формате и, наоборот, если она одна, то лучше использовать векторный формат. Однако стоит помнить о сжатии. Каждая картинка должна быть оптимизирована под новые браузеры.
- Соблюдение макетных размеров и общих стандартов верстки сайта. Стандартными принято считать следующие разрешения, при которых не происходит смена дизайна и неправильное отображение сайта:
- для мобильных устройств – 320px, 480 px;
- для планшетных компьютеров – 768px;
- для нетбуков с некоторыми планшетами – 1024px;
- для ПК – 1280px и больше.
Видео инструкция: Как сделать адаптивный сайт в фотошопе.
Что менять в HTML и CSS коде?
CSS код используется для создания каскадных таблиц, в то время как HTML нужен для указания расположения конкретных элементов, то есть, чтобы сделать разметку страницы. Классы объектов, созданных первым кодом, указываются в тегах для подстраивания выводимых объектов под разрешение.
Адаптивную верстку начинают с создания контейнера для упаковки картинки. Выглядит это следующим образом:
Затем по ширине созданного контейнера задают ширину картинки, благодаря чему при увеличении или уменьшении экрана она будет также сужаться или увеличиваться. Таким образом создается поверхность для любого разрешения:
В целом получаем готовый шаблон для одной картинки на сайт. Чтобы сделать мини-галерею прописываем следующие коды в HTML структуру:
Так загрузили четыре картинки на сайт. В следующем шаблоне придадим картинкам адаптивность с небольшим отступом:
Таким образом, сделали миниатюрную галерею на сайт. Точно так же можно поступать с текстом. Главное – задавать параметры загружаемых файлов под максимальное и минимальное разрешение.
Адаптивное меню
Чтобы сделать адаптивное меню, вначале нужно добавить мега тег meta viewport в раздел шапки. Этот тег нужен, чтобы меню корректно отображалось на любом экране.
Затем добавляем структуру меню по образцу ниже.
Дополнительная седьмая ссылка меню нужна для адаптации сайта под любое мобильное устройство. Далее добавляются стили в body. Это только для декоративных целей. Цвет можно использовать любой. Для примера возьмем бежевое меню. Под body добавляется тег nav. Он позволит сделать навигацию сайта. В этом теге размещаем основные ссылки меню.
Поскольку основных ссылок – 6 штук, то контейнер будет обладать шириной в 600 пикселей, а каждая ссылка – по 100 пикселей. Смотрите ниже.
На данном этапе были созданы стили меню. Однако, чтобы оно выводилось на каждом устройстве правильно, нужно откорректировать медиа-запрос. Он требуется для определения изменения стилей в определенных точках при видоизменении экрана. Поскольку вначале в навигации была использована ширина в 600 пикселей, пропишем следующие значения:
Когда экран станет меньше (при открытии сайта через смартфон), меню будет показано вертикально сверху вниз. В целом, адаптивность готова. Остается только сделать эффект показа меню при нажатии на ссылку. Сделать его можно, прописав следующее body:
Адаптивная шапка сайта
Создать адаптивную шапку на сайт достаточно сложно. До прихода CSS технологии, приходилось использовать обтекание с другими трюками для грамотной верстки страницы. Сегодня все делается просто. Вначале нужно прописать следующий код шапки, состоящий из трех блоков div html кода:
Далее нужно расписать CSS код. Он выполняет всю основную работу и состоит из пары строчек и служит, чтобы расположить элементы шапки в требуемых участках. Выглядит это все примерно так:
В конце нужно сделать созданную шапку сайта адаптивной. Для этого нужно применить свойства justify-content со значением space-between.
В целом, работа окончена. Проверить итог работы можно через удобный сервис Google Mobile Friendly.
Гибкие изображения и видео
Сделать изображения с видео гибкими и адаптивными можно с помощью разных способов. Чтобы не использовать сложный атрибут srcset, рассмотрим примеры настройки картинок и видео через CSS. Для базового расположения одиночных картинок с записями или видео, нужно прописать следующую html и css структуру. Здесь элемент обозначения картинки уже будет адаптивным.
Если нужно собрать на сайте макет из изображений или видео в несколько колонок, то прописываем следующую структуру кодов:
Что касается трехколоночного макета, структура кодов остается такой же. Следует только выбрать ширину сформированного базового контейнера не трех изображениях или видео. Для этого нужно поставить показатели ширины картинок примерно 1/3 ширины контейнера:
Следующий шаблон показывает, как использовать адаптивные изображения с разной расстановкой, в зависимости от устройств. Ниже описана структура, по которой картинки на смартфоне будут отображены в одной колонке, а в планшете — в несколько колонок. На большом экране это будут четыре больших колонки.
Чтобы реализовать задуманное, нужно только расставить в body медиа-запросы и указать тип носителя, для которого будут они применяться. Выглядит все следующим образом:
Последний шаблон позволяет сделать широкоформатные адаптивные картинки и видео, заполняющие всю поверхность окна. Реализовать идею можно удалением свойства максимальной ширины контейнера и установки ширины в 100%.
Как сделать адаптивный фон
Чтобы установить адаптивный фон, следует проделать ряд простых шагов:
- Сделать подборку подходящего качественного изображения с высоким разрешением, и пропорциональным образом сделать его меньше с помощью любого графического редактора. Затем загрузить его на сервер в папку картинок.
- Создать body стилей и между тегами и вставить стили, прописав в них метатег viewport, чтобы превратить изображение в фоновое.
- Прописать путь к папке стилей и его полное название.
- Проверить результат, делая больше и меньше размеры окон.
Адаптивный сайт на Тильде
Адаптивность можно придать сайту с помощью специального конструктора. Одним из самых лучших является Тильда. Он самостоятельно расставляет информационные и графические блоки в нужные места. Однако для начала работы с ним потребуется заплатить порядка 1200 рублей. Особых навыков для работы не требуется.
Подробнее про адаптивность и отзывчивость дизайна сайта.
Преимущества Тильды заключаются в следующем:
- Интуитивно понятный интерфейс для новичков и профессионалов.
- Быстрое и простое редактирование текста (нужно кликнуть на него два раза).
- Быстрая загрузка любого изображения или видео.
- Множество заранее созданных шаблонов дизайна сайта на любой вкус.
- Быстрая работа стандартных блоков, позволяющих редактировать и добавлять информацию, изображения или видео так, как захочется. Причем можно загрузить как обложки с цитатами, так и тарифы с этапами работ.
- Широкий типографический ассортимент и огромная коллекция шрифтов с пятью настройками жирности текста.
- Большое количество адаптированных блоков под мобильные устройства, в том числе и таблиц.
- Простая и быстрая настройка отступов между картинками, таблицами и другими объектами.
- Возможность без сложностей настроить seo-оптимизацию на сайт, чтобы любой поисковик смог правильно индексировать страницу.
- Круглосуточная работа справочного центра, техподдержки и колл-центра.
Также через Тильду можно добавить на сайт прелоадер (устройство, которое уберет шрифты во время загрузки страницы), эффект печатной машинки, эффект презентации и типографа. Единственный минус – с помощью нее нельзя сделать сайт с более 500 страницами.
Работа с Adobe Muse
Как и Тильда, Adobe Muse является еще одним удобным и современным конструктором начинающего и опытного вебмастера. Он позволяет сэкономить много времени на адаптивности. Все, что требуется от вебмастера, – поработать в редакторе с интерфейсом, а коды сгенерирует система.
Преимущества работы с Adobe Muse следующие:
- Возможность сделать шаблон сайта без сложностей;
- Упрощенное создание адаптивного сайта (стандартный сайт можно сделать за 2 часа);
- Широкий функционал интерфейса;
- Понятная и быстрая работа с HTML5 и CSS3.
Обучиться работе с конструктором просто. Для этого есть сотни обучающих видео и книг, рассказывающих о базовом функционале утилиты.
Проверка адаптивности сайта
Чтобы проверить настройку адаптивности сайта и его правильного отображения на всех устройствах, можно воспользоваться браузером или специальным сервисом Google Mobile Friendly (Google Search Console).
В целом, сделать адаптивным сайт несложно. Главное – понимать принципы адаптивности и уметь правильно выставлять базовые интернет-настройки для ее создания.
За время существования этого сайта, я менял шаблон несколько раз и даже создавал собственный с нуля.
Одна из главных задач при выборе нового шаблона — это адаптивная верстка сайта под все разрешения экрана.
Краткий план статьи:
Как достичь адаптивности? Для этого есть разные способы. Кто то использует javascript, кто то что то еще. Но я считаю, что самый простой и правильный способ — это адаптивная верстка сайта с помощью CSS.
Как сделать адаптивную верстку сайта
Во-первых, если вы взялись верстать адаптивный дизайн сайта, между тегами вставьте следующий код:
Какой я был дурак, что не сделал этого сразу, когда пытался сделать адаптивную верстку сайта.
Проблема мобильных браузеров в их масштабировании верстки сайта, даже адаптивной.
Представьте себе, я рисую дизайн, потом прописываю все нужные стили и запросы, проверяю адаптивность сайта при разных разрешениях. Все вроде бы хорошо! Но, когда я открываю свой блог на смартфоне, я вижу, что сайт просто напросто сжался. Он не адаптировался к мобильному устройству, а просто уменьшились размеры шрифта, картинок и т.д.
Как так? Я стал перепроверять все стили, правильно ли я прописал классы, в итоге дошел до того, что через javascript проверил ширину окна браузера в px. Я был в шоке. При проверке на ноутбуке я получил результат 1024px, и примерно такой же результат я получил открыв сайт на смартфоне!
Но ведь этого не может быть!
Оказывается, если не прописать код, который я указал выше, мобильный браузер не понимает, что сайт адаптивный и пытается просто уменьшить страницу сайта, чтобы она влезла в маленький экран мобильника.
Из-за своей глупости и некомпетентности я потерял очень много времени. Зато теперь запомнил навсегда))).
Адаптивная верстка CSS media запросы
Чтобы сделать адаптивную верстку сайта с помощью CSS, необходимо использовать media запросы.
Это как? Да, очень просто. В CSS файле нужно прописать запросы типа:
То есть те стили элементов сайта, которые должны быть адаптированны в зависимости от разрешения экрана, должны быть прописаны отдельно для каждой возможной ширины экрана.
Самые важные разрешения экрана, при адаптивной верстке
- 320 px — Мобильные устройства (портретная ориентация);
- 480 px — Мобильные устройства (альбомная ориентация);
- 600 px — Небольшие планшеты;
- 768 px — Планшеты (портретная ориентация);
- 1024 px — Планшеты (альбомная ориентация)/Нетбуки;
- 1280 px и более — PC.
Именно на эти разрешения и нужно делать упор и уделять им особое внимание при адаптивной верстке. Это самые распространенные виды разрешений экранов.
bootstrap адаптивный дизайн
Очень удобно использовать для создания адаптивной верстки bootstrap. Удобство в том, что все стили для адаптации блоков, кнопок, таблиц и т.д. уже прописаны в bootstpap. Нужно только разобраться какой класс к какому элементу присвоить.
Для начала, качайте свежую версию bootstrap и подключите его к своему сайту. Учтите, что подключение стилей и скриптов к wordpress имеет свои особенности.
Верстка на bootstrap отличается тем, что ширина блока или экрана делится на 12 равных частей. И присваивая определенный класс блоку, можно задать ширину блока равной нужному количеству частей.
Например, такая конструкция позволит выделить один широкий блок для контента шириной в 8 частей и один узкий для сайдбара шириной в 4 части экрана:
Ширина блоков будет рассчитываться автоматически в зависимости от ширины экрана. А при просмотре на мобильном устройстве эти блоки будут смещаться друг под друга.
Также можно регулировать отступ блок от края, опять же, на нужное количество частей. Например такая конструкция:
Будет создан блок шириной в 10 частей с отступом слева в 1 часть экрана.
Если разобраться, то работа с бутстрап делает работу с адаптивным дизайном очень быстрой. При чем эти стили точно работают корректно и не будет ничего кривого на сайте.
В будущем я планирую выложить несколько уроков по работе с bootsrap. Поэтому советую подписаться на обновления блога, чтобы не упустить этот момент.
Проверка адаптивности сайта
Но возникает вопрос: как проверять адаптивность сайта? Вот прописали вы media запросы в CSS, подключили bootstrap и используете нужные классы. А как вы проверите, что на всех разрешениях экрана сайт правильно адаптируется.
Очень точный и главное бесплатный сервис, который заслуживает уважение и благодарности от веб-мастеров и верстальщиков, которые занимаются адаптивной версткой сайтов.
Ну как вам статья? Все понятно? Если нет, пишите в комментарии, будем разбираться вместе.
Да, чтобы сделать адаптивный дизайн сайта, нужно хорошо потрудится. Но эти труды вознаградятся благосклонным отношением к вашему сайту поисковиков, и самое главное посетителей вашего сайта.
От автора: будучи дизайнером, разработчиком или даже менеджером продукта, вы имеете кучу обязанностей. Каждый проект требует большого внимания — макет для десктопа, макет мобильных устройств, макет для iPhone X (спасибо, Apple), поддержка IE, поддержка Safari … И всегда нужно знать, как сделать сайт доступным.
Почему нужно заботиться о доступности?
Вот несколько фактов:
Около 15% населения мира живет с той или иной формой инвалидности, из которых 2-4% испытывают значительные трудности в функционировании (по данным Всемирной организации здравоохранения).
Иногда вы можете быть временно недееспособны — в некотором смысле, — допустим, вы порезали палец или пытаетесь читать на своем низко контрастном экране в солнечный день.
В некоторых случаях доступность может требоваться по закону.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
И самое главное:
Мы все становимся пользователями клавиатуры, когда одной рукой едим, а другой — управляем мышкой. — Adrian Roselli
Улучшая доступность вашего сайта, вы не только поддерживаете людей с ограниченными возможностями, но и делаете его более удобным для всех.
Не изобретайте велосипед
Мы в Site Search 360 разработали плагин, который позволяет клиентам легко интегрировать наше поисковое решение в существующий веб-сайт.
Поскольку мы расширились, нам стало ясно, что необходимо провести аудит доступности. Да, мы должны были рассмотреть доступность с самого начала проекта, но никогда не поздно это сделать.
Но не волнуйтесь. Даже если вы никогда не думали о доступности в своем текущем проекте, некоторые улучшения не займут много времени. Я не могу сказать, сколько времени мы потратили, чтобы сделать плагин более доступным, но это было не более нескольких рабочих дней (и около 30 коммитов).
Теперь я проиллюстрирую весь процесс (на основе нашего плагина JavaScript, а не веб-сайта), поэтому вам не нужно начинать с самого начала. Но сперва:
Что такое доступность?
Прежде чем вы начнете работать, нужно понять, что такое доступность. Я не буду беспокоить вас длинными определениями. Это короткое предложение хорошо её объясняет, на мой взгляд:
Доступность — это искусство сделать продукт полезным для всех.
Слепота и цветовая слепота
Нарушения слуха (да, видео требует субтитров)
Несколько простых шагов
Теперь, когда вы знаете, для кого вы улучшаете свой сайт, мы можем начать изучать основные понятия веб доступности.
Создание семантической разметки
Это, наверное, самый важный шаг. HTML5 есть уже несколько лет, поэтому нет причин (и никаких оправданий), чтобы не использовать его. Section, article, header, nav, banner и многие другие теги — все они должны использоваться.
Вероятно, вы видели такую разметку (я пропустил классы и идентификаторы, поскольку у них нет семантической цели):
Хотите — верьте, хотите – нет, но это была наша навигационная группа контента (вы можете щелкнуть одну группу контента, и страница результатов поиска автоматически перейдет к соответствующим результатам). Вы бы не догадались, не так ли?
У этой разметки существует несколько проблем. Как может кто-то, кто зависит от вспомогательных технологий, запросить навигацию? Никак. Является ли активный элемент представленным div? Да. Посмотрите на следующий фрагмент разметки:
Гораздо лучше, не так ли? Теперь рассмотрим наиболее важные понятия семантической разметки:
Используйте семантических элементов
Всегда используйте , чтобы отметить основной контент
Добавьте атрибут role для поддержки старых браузеров
Используйте sections вместо divs, где это необходимо
Span — это не button — не переставляйте значение элементов (без особой необходимости)
Используйте button для внутристраничных взаимодействий
Заголовки являются одной из самых важных частей каждой веб-страницы. Всегда должен быть один заголовок h1. И не пропускайте уровни заголовка
Я не собираюсь перечислять все изменения, которые мы сделали (их довольно много), но вы всегда можете спросить об этом в комментариях.
Что делать: просмотрите текущую разметку, проверьте структуру содержимого и заголовка, убедитесь, что интерактивные элементы представлены button или элементами и используют семантические теги HTML5.
Обеспечьте доступность всех функций с помощью клавиатуры
Это также очень важно. Каждое взаимодействие должно быть возможно с помощью клавиатуры.
Можем ли мы поддерживать управление клавиатурой для такого элемента? Да, мы могли бы сделать это с помощью фокуса и обработать события click и keyup при проверке нажатия клавиши ввода или пробела.
Тем не менее, это еще сложнее, чем просто изменить разметку с div на button - в этом случае вам просто нужно привязать событие click и не вынуждать элемент DOM быть сфокусированным (и как бонус — не нужно писать кучу стилей).
Все функциональные возможности должны быть доступны с клавиатуры
Не удаляйте контуры у сфокусированных элементов (если вам не нравятся эти контуры, их всегда можно стилизовать)
Взаимодействие на странице должно быть представлено button
Внестраничные взаимодействия (ссылки) должны быть представлены якорем ( )
* Кнопки предназначенные для запуска с помощью щелчка, ввода и пробела, должны быть привязаны к нажатию ввода и щелчку
Что делать: убедитесь, что все интерактивные элементы доступны (и управляемы) с помощью клавиатуры, выделены сфокусированные элементы, и порядок вкладок логичен.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Поддержка скрин ридеров
Взгляните на следующее изображение:
Вы уже видели полное изображение, поэтому знаете, какое действие должна выполнять одна и та же кнопка. Можете сказать, посмотрев на второе изображение? Нет — крестик рендерится с помощью CSS свойства background-image, а в button вообще нет внутреннего контента.
Для этого нужны aria — атрибуты. Увеличивая разметку кнопки с помощью простого атрибута aria-label, вам не нужно стараться скрыть внутренний текст кнопки в слое презентации.
button style = "text-indent:100%;overflow:hidden;padding:0;white-space:nowrap;" > Close layer / button >
Вы заметили, что я также удалил изображения с экрана скрин ридера? Вы можете пометить их, используя ту же технику (где aria-labeled больше подходит). Я удалил эти изображения, потому что в нашем случае они не имеют семантической цели и помечены role=”presentation”. Даже если у них есть семантическая цель, мы обычно этого не знаем. Большинство этих изображений будут иллюстративными, а их маркировка излишней — заголовок уже имеет такое значение.
Атрибуты, которые вы должны знать:
role - полезен для обозначения цели элемента
aria-hidden — использует вспомогательные технологии, чтобы игнорировать элемент
aria-label, aria-labeledby - ярлык элемента
aria-describeby - используйте это для описания нестандартных элементов управления пользовательским интерфейсом
aria-owns - обозначает связь между двумя элементами
Что делать: этот шаг может быть самым сложным в правильной реализации и правильной проверке. Убедитесь, что все изображения имеют атрибут alt, все разделы и интерактивные элементы помечены, и проверьте с помощью программы для чтения с экрана.
Как протестировать: использование скрин ридера в качестве ограниченного человека может показаться неестественным, поэтому сначала потратьте немного времени и ознакомьтесь с программным обеспечением (можно протестировать наиболее распространенные из них - VoiceOver на Mac, NVDA, Jaws на Windows и TalkBack на Android). После этого попробуйте перейти на сайт только с помощью программного обеспечения для чтения с экрана (выключите монитор). Даже короткий тест поможет вам понять, насколько хорошо работает сайт, и выявить наиболее значительные проблемы.
Бонус: Вот короткий (и немного упрощенный) пример того, как мы увеличили аутсорсинг. Выделенные части (и два ) были добавлены как часть наших улучшений доступности.
span aria - live = "polite" aria - atomic = "true" role = "status" class = "ss360-sr-only" > 2 Search Suggestions Shown / span >
Use up and down arrows to select available result . Press enter to go to the selected search result . / span >
Упрощение презентации
Доступность, дизайн пользовательского интерфейса, UX — все это стороны одной и той же трехсторонней монеты. Низкий контраст между фоном и передним планом сделает ваш текст трудночитаемым.
Дикие анимации делают ваш сайт трудным для людей с похмельем (вам все равно? Подумайте о тех, у кого есть СДВГ — им может быть трудно сосредоточиться). Знаете ли вы, что есть предпочтительный медиа-запрос с уменьшенным движением (хотя он еще не получил широкого распространения)? Вы можете просто отключить всю анимацию, если этот мультимедийный запрос установлен. Вот как мы это делаем:
Вы же не думаете, что веб-сайт должен быть каким-то сумасшедшим стробоскопическим световым шоу, не так ли?
Передача информации только по цвету сделает её недоступной для людей с цветовой слепотой.
Ниже приведен пример того, как мы изменили стандартный макет для нашего представления о переходе — более короткие блоки текста и более высокие коэффициенты контрастности.
Одна из болевых точек для нас — автоподстановка на мобильных устройствах. Это меньше проблема доступности, но мы наконец-то добавили возможность переключения на полноэкранные автоподстановки. Для сравнения:
Убедитесь, что блоки текста не более 80 символов, и используйте высоту строки, которая примерно в 1,5 раза больше размера шрифта (который также должен быть достаточно большим — от 16 пикселей и более)
Разрешите масштабирование (по крайней мере, до 200%)
Проверьте коэффициенты контрастности
Убедитесь, что ваши цели касания достаточно велики (44 x 44 пикселя — это эмпирическое правило)
Если цвет передает информацию, убедитесь, что также есть и альтернативный способ получить ту же информацию
Обратите внимание на анимации и подумайте, действительно ли они вам нужны. Также предоставьте механизм, чтобы отключить их.
Забудьте о капчах …
Оценивайте, развивайте и интегрируйте свой рабочий процесс
Тестирование
Однако некоторые вещи трудно оценить с помощью автоматизированных инструментов. Попробуйте использовать свой веб-сайт, используя только клавиатуру. Затем попробуйте использовать его с помощью скрин ридера.
Хорошо, вот и все. Если вас интересуют точные изменения, которые мы сделали, просто спросите в комментариях. И если вы ищете решение для поиска по сайту, которое заботится о доступности (или просто для альтернативной поисковой системы Google), то для этого есть Site Search 360.
Автор: Jaroslav Vaňkát
Редакция: Команда webformyself.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Читайте также: