Как посмотреть скрытый элемент на сайте

Увидеть скрытое или как хорошее сделать еще лучше

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

Периодически я вспоминал об этой идее, но беглый взгляд в гугл не давал ничего интересного. До недавнего времени.

Когда в январе мне снова захотелось посмотреть, а не появилось ли чего интересного на эту тему, я нашел прекрасный букмарклет Visual Event 2, написанный Allan Jardine. Букмарклет работал как часы, но нашлась и пара ложек дегтя, маленьких, но неприятных.

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

Поэтому было решено оформить букмарклет в виде расширения для браузера Opera. К тому же я давно хотел познакомиться с Opera Extension API. Вот ссылка на страницу расширения для самых нетерпеливых. Остальных же прошу под кат, где описаны все этапы конвертации букмарклета в расширение для Оперы, проблемы, с которыми я столкнулся и методы их решения.

Ради чего все это

Для начала хочу вас познакомить с тем, что же в итоге получилось. После установки расширения
Visual Event на панели инструментов Opera появится новая кнопка. С ее помощью можно включать и выключать режим VisualEvent.

Внимание! Кнопка будет действовать только на страницах, загруженных после установки расширения!

После активации кнопки открытая HTML-страница будет затемнена и все элементы, на которые повешены какие-либо обработчики событий подсветятся разноцветными прямоугольниками:

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

Повторное нажатие на кнопке с глазом выключит режим VisualEvent. На этом, собственно все, ничего более расширение не делает. Заинтересовавшиеся, могут установить его из каталога расширений Opera. Тех же, кого интересуют подробности преобразования букмарклета в расширение, приглашаю в следующий раздел.

Разбираем букмарклет

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

Букмарклет стостоит собственно из кода, добавляемого в ссылку и нескольких дополнительных файлов с таблицей стилей и реализацией всего функционала. Код букмарлета предельно прост:

(function() < var url = 'http://example.com/VisualEvent/builds/VisualEvent_Loader.js'; if( typeof VisualEvent!='undefined' ) < if ( VisualEvent.instance !== null ) < VisualEvent.close(); >else < new VisualEvent(); >> else < var n=document.createElement('script'); n.setAttribute('language','JavaScript'); n.setAttribute('src',url+'?rand='+new Date().getTime()); document.body.appendChild(n); >>)();

Переменная url содержит адрес скрипта-загрузчика, который обеспечивает активацию всей логики. Из листинга видно, что код проверяет наличие объекта VisualEvent и, если он не обнаружен, инициирует его загрузку. Если же объект обнаружен то проверяется, активирован ли режим VisualEvent или нет. И, в зависимости от результатов проверки, либо выключает его либо включает.

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

• VisualEvent_Loader.js
• VisualEvent.js
• VisualEvent-jQuery.js

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

Дополнительно к JS-файлам букмарклет использует собственную таблицу стилей из внешнего файла VisualEvent.css.

Делаем кнопку на панели

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

Как создать базовую структуру расширения, как заполнить файл описания config.xml и как добавить кнопку на тулбар я рассказывать не буду, все это есть в официальном руководстве, да и на Хабре описывалось.

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

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

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

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

В результате, функция обработки нажатия кнопки приняла вид:

function buttonClicked() < var tab = opera.extension.tabs.getFocused(); if ( tab ) < opera.extension.broadcastMessage( JSON.stringify(opera.extension.tabs.getFocused().url)+ '|' + 'VisualEvent-1.0'); >>;

Где вызов opera.extension.broadcastMessage() как раз и шлет широковещательное сообщение. А background-скрипт получил такую логику:

opera.extension.onmessage = function(e) < var dataArray = e.data.split('|'); if ( window.top == window.self && e.data && JSON.parse(dataArray[0]) == window.decodeURI(window.location.href.replace(window.location.hash, '')) ) < if ( 'VisualEvent-1.0' == dataArray[1] ) < enableVisualEvent(); >> >;

Здесь видно, что после получения сообщения проверяется его формат и URL страницы, на которой кнопка была нажата. Да проверяется именно URL, поэтому, если у вас открыто несколько одинаковых вкладок, то VisualEvent будет активироваться на всех одновременно.

Механизм не лишен недостатков, поэтому, если кто-нибудь знает более простой способ взаимодействия кнопки и страницы, буду рад прочитать о нем в комментариях.

Пишем скрипт для обработки страницы

Мы уже начали писать скрипт для обработки страницы и добавили в него обработчик сообщений от кнопки тулбара. И этот скрипт вызывает функцию enableVisualEvent(). В эту функцию я поместил код букмарклета с той лишь разницей, что он вместо подгрузки файла лоадера просто вызовет его код, оформленный в виде отдельной функции.

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

Адаптируем JavaScript

Sometimes the UserJS doesn’t work as an extension, for various reasons. (Иногда UserJS не работает в режиме расширения, по разным причинам)

И это верно, по крайней мере у меня не заработало :). Но то же руководство содержит и рецепты как с этим безобразием бороться. Основной причиной является то, что расширение работает в своей песочнице и доступ к глобальной области видимости страницы имеет только через явное указание объекта window. Т.е. обращение к jQuery как к «$» или «jQuery» работать не будет, вместо этого следует использовать «window.$» или «window.jQuery». И такие исправления необходимо сделать для всех глобальных переменных, используемых в скриптах.

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

Подключаем CSS

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

function initCss() < var css = ''; var n = document.createElement('style'); n.type = 'text/css'; var rules = document.createTextNode(css); if ( n.styleSheet ) < n.styleSheet.cssText = rules.nodeValue; >else < n.appendChild(rules); >document.getElementsByTagName('head')[0].appendChild(n); >;

В результате таблицы стилей прекрасно заработали. Единственным неудобством является то, что весь CSS-код приходится включать в одну строку и вручную заботиться об экранировании кавычек.

Выводы

Спасибо всем, кто дочитал! 🙂

Хотелось бы парой предложений подытожить статью. Изучать новое всегда полезно, а иногда даже и интересно. Люди, знакомые с JavaScript никаких особых сложностей при разработке расширений не встретят. При разработке расширений можно столкнуться с некоторыми их неочевидными особенностями, но удобное руководство разработчика и код уже существующих расширений легко позволят со всем разобраться.

Кстати, пользователи Chrome могут найти аналогичное расширение и для него.

Методы скрытия элементов веб-страниц

Веб-разработчикам приходится скрывать элементы веб-страниц по самым разным причинам. Например, есть кнопка, которая должна быть видимой при просмотре сайта на мобильном устройстве, и скрытой — при использовании настольного браузера. Или, например, имеется некий навигационный элемент, который должен быть скрыт в мобильном браузере и отображён в настольном. Элементы, невидимые на странице, могут пребывать в различных состояниях:

• Некий элемент совершенно невидим и, более того, удалён из потока документа.
• Глазами элемент не увидеть, но он присутствует в документе и доступен для ассистивных технологий наподобие средств для чтения с экрана.
• Элемент видим, но скрыт от средств для чтения с экрана.

HTML5-атрибут hidden

Hidden — это логический HTML-атрибут, скрывающий элементы, которым он назначен. Когда браузер загружает страницу, он не выведет элементы с атрибутом hidden , за исключением тех случаев, когда видимость элементов будет включена вручную средствами CSS. Действие этого атрибута похоже на применение к элементу CSS-правила display: none .

Рассмотрим следующий пример:

Spring is on the way

Тут имеется разметка, задающая заголовок, изображение и описание. Изображение должно выводиться только в том случае, если ширина области просмотра превышает 400px . К элементу я добавил атрибут hidden .

В CSS я воспользовался атрибутом hidden для вывода элемента только в том случае, если область просмотра страницы имеет необходимый размер.

Фрагмент веб-страницы

Вот CSS-код, который здесь использован:

img[hidden] < display: none; >@media (min-width: 400px) < img[hidden] < display: block; >>

→ Вот пример этой страницы на CodePen

Тут у вас может появиться вопрос о том, почему бы просто не использовать display: none . Хороший вопрос. Когда селектор изображения вызывается через его атрибут hidden , мы можем быть уверены в том, что даже если CSS-код по какой-то причине не загрузился, элемент будет скрыт.

▍Атрибут hidden и доступность контента

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

CSS-свойство display

Каждый элемент веб-страницы обладает неким значением свойства display , назначаемым ему по умолчанию. Это может быть inline-block , block , table и так далее. Для того чтобы скрыть элемент с помощью свойства display , мы можем воспользоваться конструкцией display: none . Если элемент скрыт с помощью этой конструкции, то вместе с ним будут скрыты и все его потомки.

Представим, что мы хотим скрыть изображение из предыдущего примера и решили воспользоваться следующим CSS-кодом:

img < display: none; >@media (min-width: 400px) < img < display: block; >>

При таком подходе изображение будет полностью исключено из документа (из так называемого document flow — «потока документа»), оно будет недоступно программам для чтения с экрана. Возможно, вы не очень хорошо представляете себе понятие «поток документа». Для того чтобы с этим понятием разобраться — взгляните на следующий рисунок.

Синюю книгу убрали из стопки

«Поток документа» сравнивается здесь со стопкой книг. Если к синей книге будет применено свойство display: none , это будет означать, что её просто убрали из стопки. При этом пространство, которое раньше занимала эта книга, будет занято другими книгами. То же самое происходит и при скрытии HTML-элементов. Место, которое занимал бы скрытый элемент, занимают другие элементы, это влияет на расположение элементов в документе. В нашем примере это повлияло на положение книг в стопке.

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

Если убрать книгу из стопки — положение других книг в ней изменится

▍Производится ли загрузка ресурсов, скрытых средствами CSS?

Если коротко ответить на этот вопрос — то да, загрузка таких ресурсов производится. Например, если элемент скрыт средствами CSS, и мы показываем этот элемент в некий момент работы со страницей, к этому моменту изображение уже будет загружено. Наличие на странице изображения, даже скрытого средствами CSS, приведёт к выполнению HTTP-запроса на его загрузку.

Здесь можно найти демонстрацию работы с изображением, скрытым средствами CSS. Если исследовать этот пример, открыв инструменты разработчика Chrome и посмотрев на вкладку Network , там можно увидеть соответствующий запрос.

Исследование страницы, содержащей скрытое изображение

▍Элемент style

Тут стоит упомянуть о том, что существуют HTML-элементы, свойство display которых по умолчанию установлено в значение none . Например, это элемент , который может быть добавлен в тело HTML-страницы. Его свойство display можно изменить на block и сделать его видимым.
Вот HTML-код тела страницы:

  .title 

Вот CSS, с помощью которого мы делаем элемент style видимым:

style

Подобный приём может быть полезен в том случае, если нужно, чтобы блок style был бы видимым и, кроме того, редактируемым. Для того чтобы сделать такой блок редактируемым, можно добавить к тегу style атрибут contenteditable=true .

Вот как это выглядит.

Видимый редактируемый блок style

→ Вот демо-версия этого примера

▍CSS-свойство display и доступность контента

При использовании свойства display: none элемент становится невидимым и, кроме того, недоступным для средств чтения с экрана.

CSS-свойство opacity

Установив CSS-свойство opacity в значение 0 , можно скрыть элемент и все вложенные в него элементы. Это свойство не наследуется. Однако это свойство скрывает элементы лишь от того, кто смотрит на страницу, а не от программ для чтения с экрана. Тут стоит сказать и о том, что элемент, значение opacity которого отличается от 1 , создаёт новый контекст наложения.

Синяя книга невидима, но место, которое она занимает, всё ещё зарезервировано

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

В CSS-коде использование свойства opacity выглядит так:

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

Изображение скрыто с использованием CSS-свойства opacity

Как видно, изображение всё ещё присутствует на странице, но его место ничем не занято. Оно скрыто лишь от наблюдателя, но никуда не девается со страницы. Мне, после публикации материала, подсказали, что свойство pointer-events: none | auto можно использовать для отключения событий мыши на элементах, скрытых с помощью свойства opacity: 0 . Это — важная идея, так как пользователя может запутать взаимодействие со скрытым элементом (щелчки по нему, наведение на него указателя мыши, выделение текста).

→ Вот демонстрация использования свойства opacity

▍CSS-свойство opacity и доступность контента

Элемент, скрытый с помощью opacity: 0 , остаётся доступным для средств чтения с экрана. Такой элемент может получить фокус при работе со страницей с помощью клавиатуры.

CSS-свойство visibility

Используя свойство visibility: hidden можно показывать или скрывать элементы, делая это так же, как мы делали с помощью opacity: 0 . Это не влияет на поток документа.

При использовании visibility: hidden книга исчезает, но её место остаётся незанятым

Обратите внимание на то, что синяя книга исчезла, но это не повлияло на расположение других книг в стопке.

Надо отметить, что когда visibility: hidden используется для родительского элемента, скрытыми оказываются и все его потомки, но если одному из потомков назначено свойство visibility: visible , то этот потомок будет видимым.

Стопка книг скрыта, но синяя книга сделана видимой

Вернёмся к нашему обычному примеру с заголовком, изображением и описанием. Перепишем его HTML-код так:

 
Spring is on the way
 

Стилизуем его с помощью следующего CSS-кода:

article < visibility: hidden; >img

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

Вложенный элемент оказывается видимым

Здесь элементу назначено CSS-свойство visibility: hidden . А если добавить свойство visibility: visible к элементу — изображение окажется видимым. Опять же, дело тут в том, что рассматриваемое свойство применяется к потомкам элемента, но оно может быть переопределено в элементе-потомке.

→ Вот демонстрация работы со свойством visibility

▍CSS свойство visibility и доступность контента

При применении свойства visibility: hidden элемент оказывается скрытым. Он, кроме того, удаляется из дерева доступности и, в результате, его не замечают средства для чтения с экрана.

Скрытие элементов и позиционирование

Для того чтобы скрыть элемент, воздействовав на его позицию на странице, нужно вывести его за пределы видимой области страницы и установить его размеры (ширину и высоту) в 0 . В качестве примера использования подобной методики скрытия элементов можно привести ссылку, позволяющую быстро перейти к главному содержимому страницы. Рассмотрим следующее изображение.

Ссылка, скрытая за пределами области видимости страницы

Для того чтобы расположить элемент за пределами области видимости страницы, можно воспользоваться следующим CSS-кодом:

.skip-link

Значение top: -100% уведёт элемент из области просмотра на 100% её высоты. В результате элемент окажется совершенно невидимым. А вот если он получит фокус после того, как пользователь доберётся до него, используя клавиши на клавиатуре, этот элемент можно показать:

.skip-link:focus

→ Вот демонстрация этой методики скрытия элементов

▍CSS-свойство position и доступность контента

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

CSS-свойство clip-path

Если к элементу применяется CSS-свойство clip-path — оно позволяет описать область, определяющую то, какая часть элемента должна быть скрытой, а какая — видимой.

Область обрезки изображения

В предыдущем примере к тому, что в левой части рисунка затемнено, применено свойство clip-path . При применении этого свойства затемнённые фрагменты изображения исчезнут.

Для того чтобы посмотреть на это свойство в действии, воспользуемся инструментом clippy. Работа начинается со следующих значений clip-path , заданных в CSS и описывающих маску в виде многоугольника:

Эксперименты со свойством clip-path, область обрезки задаётся в виде многоугольника

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

Вот как это выглядит.

Эксперименты со свойством clip-path, область обрезки задаётся в виде круга

Здесь можно поэкспериментировать с этим свойством.

▍CSS-свойство clip-path и доступность контента

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

Манипуляции с цветом текста и с размером шрифта

Хотя скрытие текста путём изменения его цвета или размеров шрифта распространено не так широко, как ранее рассмотренные методики скрытия элементов, в некоторых случаях это может пригодиться.

▍Настройка прозрачности цвета

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

▍Настройка размера шрифта

Кроме того, если установить размер шрифта в значение 0 , это тоже позволит скрыть текст.

Рассмотрим следующий пример. Здесь имеется кнопка, структура которой задана следующим HTML-кодом:

  Like 

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

.button span

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

1. Содержимое кнопки выровнено по центру. 2. Тексту назначен прозрачный цвет. 3. Размер шрифта установлен в 0

→ Вот демонстрация для этого примера

HTML-атрибут aria-hidden

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

 Menu 

В этом примере имеется кнопка Menu со значком и меткой. Атрибут aria-hidden=»true» позволяет скрыть эту кнопку от программ для чтения с экрана.

Этот атрибут, в соответствии с материалами MDN, находит применение в следующих сценариях:

• Скрытие декоративных элементов наподобие значков и изображений.
• Скрытие дублирующегося текста.
• Скрытие свёрнутых элементов или элементов, находящихся за пределами экрана.

▍Атрибут aria-hidden и доступность контента

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

Анимация и интерактивность

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

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

▍Анимация меню: неправильный подход

У нас имеется меню, которое, при раскрытии, должно выезжать из-за пределов экрана. Легче всего это сделать с помощью следующего CSS-кода:

ul < opacity: 0; transform: translateX(100%); transition: 0.3s ease-out; >ul.active

Благодаря этому коду меню будет разворачиваться и сворачиваться, основываясь на классе .active , который будет добавлен с помощью следующего JavaScript-кода:

menuToggle.addEventListener('click', function(e)< e.preventDefault(); navMenu.classList.toggle('active'); >);

Вот как выглядит работа с таким меню.

Выезжающее меню в действии

Может показаться, что мы добились хороших результатов, создавая это меню, но тут допущена одна большая ошибка. Использование свойства opacity: 0 не уберёт навигационные элементы из дерева доступности. Даже если меню на странице не видно, до него можно добраться с помощью клавиатуры, с ним смогут работать средства для чтения с экрана. Для того чтобы не путать пользователей, пользующихся такими средствами, меню нужно скрыть и от этих средств.

Вот дерево доступности рассматриваемой страницы, построенное средствами вкладки Accessibility инструментов разработчика Chrome.

Дерево доступности неудачно спроектированного скрытого меню

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

1. Нужно сделать так, чтобы до скрытых элементов меню нельзя было добраться с помощью клавиатуры.
2. Нужно, чтобы средства для чтения с экрана не видели бы скрытое меню и не читали бы соответствующее содержимое.

Программа для чтения с экрана видит то, чего она видеть не должна

→ Вот рабочий вариант этого примера

Займёмся исправлением вышеозначенных ошибок.

▍Анимация меню: исправление ошибок

Для того чтобы улучшить работу меню и исправить ошибки, нужно воспользоваться CSS-свойством visibility: hidden . Это позволит и скрыть меню со страницы, и не дать работать с ним средствам для чтения с экрана. Вот CSS-код, исправляющий проблему:

ul < visibility: hidden; opacity: 0; transform: translateX(100%); transition: 0.3s ease-out; >ul.active

После применения этого кода свёрнутое меню исчезнет с экрана и из «поля зрения» ассистивных технологий. Снова исследуем страницу с помощью VoiceOver.

Программа для чтения с экрана не видит ничего лишнего

→ Вот проект, иллюстрирующий пример

Элементы checkbox собственной разработки

Элемент checkbox

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

 
 Custom checkbox 

Для настройки флажка требуется возможность скрывать элемент с учётом нужд ассистивных технологий. Для того чтобы это сделать, нужно пользоваться свойством position , а также и другими свойствами. Вот CSS-класс, который можно назвать sr-only или visually-hidden , который скрывает элемент лишь визуально, но оставляет доступным для средств чтения с экрана и для клавиатурной навигации.

.sr-only

Благодаря использованию подобного класса элемент checkbox собственной разработки не теряет доступности. Вот более подробный рассказ о таком элементе. А вот — демонстрация работы с подобным элементом.

Скрытие содержимого от программ для чтения с экрана

▍Скрытие некоторых символов

Заголовок, в котором нужно скрыть смайлик

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

Hiding On The Web grinning face with open mouth

Разные смайлики имеют разные текстовые описания, озвучиваемые средствами для чтения с экрана. Представьте себе ощущения пользователя, который, заглянув на страницу, услышит нечто подобное. Он, наверняка, почувствует, что с этой страницей что-то не так. Для того чтобы не перегружать пользователей ненужной информацией, тут стоит воспользоваться атрибутом aria-hidden . А именно, я поместил смайлик в тег с атрибутом aria-hidden=»true» и скрыл тем самым его от средств для чтения с экрана.

Hiding On The Web
 

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

▍Скрытие кнопок

Скрытие кнопки

В Twitter есть кнопка с меткой See New Tweets , которая скрыта от средств для чтения с экрана с помощью aria-hidden . Эта кнопка выводится на странице (оставаясь скрытой для ассистивных технологий) при появлении новых твитов.

▍Скрытие декоративных элементов

Скрытый декоративный элемент

Точка между именем пользователя и датой носит декоративный характер. В результате эта точка имеет атрибут aria-hidden=»true» , благодаря чему она не «озвучивается» средствами для чтения с экрана.

Итоги

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

Уважаемые читатели! Какими методами скрытия элементов веб-страниц вы пользуетесь?

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

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

Для каких целей нужен навык чтения кода и как в несколько кликов посмотреть содержимое сайта? Об этом и многом другом поговорим в сегодняшней статье.

Зачем мне нужен исходный код сайта?

Думаете, если вы не программист или верстальщик, то код вам вряд ли понадобится? На самом деле, он может помочь в разных ситуациях. Код может быть полезен:

• SEO-специалистам. Не всегда есть возможность проанализировать страницу и узнать, есть ли с ней какие-либо проблемы. Например, чтобы узнать Description страницы, можно не пользоваться специальными плагинами и прочими средствами – достаточно открыть исходный код, и описание будет перед глазами. Аналогичным образом можно посмотреть заголовок страницы, узнать, подключена ли Яндекс.Метрика и другие скрипты.
• Для более глубокого анализа конкурентов. Посмотреть, какими способами продвигается сайт, мы можем через код: ключевые слова, мета-теги и прочее – все это доступно для обычного пользователя.
• Веб-дизайнерам. Речь снова идет о конкуренции, но и не только. Когда дизайнер создает свой сайт, он часто обращается к различным ресурсам, чтобы посмотреть, как расположены те или иные элементы. Все это мы можем узнать на любом сайте: какой отступ у этой кнопки, какого она размера, сколько пикселей та фотография и так далее.
• Для лучшего понимания кода. Изучив основы HTML-кода и CSS-стилей, вы сможете понять, как работает ваш верстальщик и какие элементы следует оптимизировать.

Еще несколько возможностей при просмотре кода страницы: выгрузка картинок с исходным размером, просмотр сайта в адаптивном режиме, возможность изменять содержимое веб-страницы. Последнее работает в локальном режиме – изменения будут применены только на текущем ПК до тех пор, пока страница не будет обновлена.

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Как узнать код сайта

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

Как видите, здесь все логично и понятно.

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

Способ 1: Функция «Посмотреть код»

Открываем страницу, код которой нужно просмотреть, и кликаем по любой области правой кнопкой мыши. В отобразившемся меню выбираем «Посмотреть код». Также вы можете воспользоваться комбинацией клавиш «CTRL+SHIFT+I».

В результате мы попадаем в инспектор браузера – на экране появляется дополнительное окно, где сверху находится код страницы, а снизу – CSS-стили.

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

Способ 2: «Просмотр кода страницы»

Если в предыдущем случае мы могли открыть всю подноготную сайта, то сейчас нам будет доступен лишь HTML-код. Чтобы его посмотреть, находим на сайте пустое поле и кликаем по нему правой кнопкой мыши, затем выбираем «Просмотр кода страницы» (можно воспользоваться комбинацией клавиш «CTRL+U»). Если вы кликните правой кнопкой по элементу сайта, то кнопка «Просмотр кода страницы» будет отсутствовать.

После этого нас перенаправит на новую страницу со всем исходным кодом:

Здесь мы также можем посмотреть все содержимое страницы, однако узнать CSS и изменить данные у нас не получится.

Что такое HTML и CSS

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

Например, часто используется такая конструкция:

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

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

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

Рассмотрим на небольшом примере, как работают стили:

1. Допустим, у нас есть HTML-тег с текстом «Привет! Это мой первый сайт»:
2. Мы хотим, чтобы текст стал другого цвета. Давайте сделаем его красным! Для этого используются каскадные стили (CSS), в данном случае достаточно для тега body прописать стиль «color: red;». В результате текстовый элемент преобразится, а информацию о его стилях мы можем посмотреть в инспекторе браузера:

view-source:https://timeweb.com/ru

      Скрыть/Показать элемент
 
 
Тут любой текст и html код 
 
Дизайн студия OX2 разрабатывает сайты и интернет магазины любой сложности. 
По низким ценам!