[recovery mode] Аккордеон, faq, спойлер и другие раскрывающиеся виджеты


Аккордеон и faq

Создать аккордеон, faq, спойлер и подобное, можно при помощи Div и JavaScript.
Но лучше: Details и Summary

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

Людям с ограниченными возможностями проще будет пользоваться вашим сайтом! Их софт (скринридеры и подобное) прекрасно понимает html5 теги и будет правильно обрабатывать их и правильно информировать людей о содержимом.

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

Будет доступно управление элементами с клавиатуры и других устройств.

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

Улучшаются показатели в Lighthouse, Google PageSpeed и других подобных инструментах.

Работает при выключенном javascript.

Читать дальше →


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



Похожие публикации

[recovery mode] SEO и контекст: что выбрать, и нужно ли выбирать?

Все последние обновления алгоритмов поисковых машин (особенно Яндекса) приводят представителей SEO-индустрии к одному и тому же неутешительному выводу: поисковики намеренно и планомерно... читать далее

FrontFest.Vyorstka: поговорим о доступности, экономии трафика и будущем CSS

JavaScript там, JavaScript здесь, JavaScript везде, но давайте вспомним, с чего начинался web и без чего существовать не может и сегодня — VYORSTKA, и две ее основные составляющие — HTML и CSS. В... читать далее

[Из песочницы] Above-the-Fold CSS — как ускорить загрузку сайта не замедлив разработку

В старые добрые времена мы с Google PageSpeed Insights были на короткой ноге. Я — клепал дешевые шаблоны, Google — ставил высокую оценку за скорость их загрузки. Однако со временем многое поменялось,... читать далее

[Из песочницы] [Select-Form]: Пишем свой select-список, используя jQuery и CSS

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

Оптимизируем производительность веб-страницы: CSS

В наше время скорость интернета довольно высока. Казалось бы, можно забыть о тех временах, когда нам приходилось ждать по 20-30 (а то и больше) секунд, чтобы веб-страница загрузилась и отобразилась... читать далее

Google / Google вводит в поисковую выдачу элементы Веб 2.0

В результатых поиска у Google (по любым запросам) появились новые кнопки: «поднять сайт» и «опустить/удалить сайт». При нажатии кнопки «поднять» он помещается в начало выдачи. При первом... читать далее

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте