Исходный код дела:
https://codepen.io/shadeed/pen/03caf6b36727accb692eecbc38f95d39?editors=1100
5. Влияние доступности на видимость: скрыто
Элемент скрыт, его потомки удаляются из дерева доступности, а программы чтения с экрана не отображают элемент.
(1) Расположение
Чтобы скрыть элемент с атрибутом позиции, нам следует переместить его за пределы экрана и установить его размер равным 0 (ширина и высота). Примером являются переходные навигационные ссылки. Рассмотрим следующую диаграмму:
Чтобы разместить ссылку за пределами экрана, мы должны добавить следующее
「css」
.skip-ссылка {
позиция: абсолютная;
верх: -100%;
}Значение -100% поднимет элемент на 100% высоты области просмотра. В результате он будет полностью скрыт. Как только он сфокусируется на клавиатуре, он будет выглядеть так
.skip-link:focus {
позиция: абсолютная;
верх: 0;
}Исходный код дела:
https://codepen.io/shadeed/pen/707992e7c98ea633fc6606e576ef8a04?editors=0100
6. Влияние доступности на позицию: абсолютное фиксированное |
Элемент доступен для программ чтения с экрана и фокусируется на клавиатуре. Он просто скрыт от окна просмотра.
Clip Path Когда в элементе используется clip-path, он создает область отсечения, которая определяет, какие части следует показывать, а какие скрывать.
В приведенном выше примере прозрачная черная область имеет клип-путь. Когда к элементу применяется clip-path, все, что находится под прозрачной черной областью, не отображается.
Чтобы продемонстрировать вышесказанное более наглядно, я воспользуюсь инструментом Clippy. В GIF ниже у меня есть следующий клип-путь:
Установите значение многоугольника в каждом направлении на 0 0, и размер области обрезки будет изменен на 0. В результате изображение не будет отображаться. Точно так же это можно сделать, заменив многоугольник кругом:
изображение {
клип-путь: круг (0 при 50% 50%);
} 
7. Влияние доступности на путь клипа
Элемент скрыт только визуально, его по-прежнему можно использовать для программ чтения с экрана и фокусировки клавиатуры.
Исходный код дела:
https://codepen.io/shadeed/pen/9fdbd7be9fd9dac17a614c96ba7f64b1?editors=0100
3. Управляйте цветом и размером шрифта.
Хотя эти два метода не так распространены, как те, которые мы обсуждали ранее, они могут быть полезны в определенных случаях использования.
1. Прозрачный цвет
Если сделать цвет текста прозрачным, он будет визуально скрыт. Это полезно для кнопок, которые имеют только значки.
2. Размер шрифта
Кроме того, полезно установить размер шрифта равный 0, поскольку это визуально скроет текст. Рассмотрим следующий пример, где есть кнопка со следующей структурой:
<кнопка> <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="false" focusable="false"> <!-- Данные пути --> </svg> <span>Нравится</span> </кнопка>
Наша цель — скрыть текст доступным способом. Для этого я добавил следующий CSS
.button диапазон {
цвет: прозрачный;
размер шрифта: 0;
}Таким образом, текст будет скрыт. Он даже работает без изменения цвета, но я добавил его в целях пояснения.
Исходный код дела:
https://codepen.io/shadeed/pen/4eacdf50c3339fced7f787156c569372?editors=1100
3. Ария Скрытая
Когда вы добавляете к элементу атрибут aria-hidden, он удаляет элемент из дерева специальных возможностей, что может улучшить работу пользователей программ чтения с экрана. Обратите внимание, что он визуально не скрывает элемент, он предназначен только для пользователей программ чтения с экрана.
<кнопка> Меню <svg aria-hidden="true"><!-- --></svg> </кнопка>
В приведенном выше примере у нас есть кнопка меню с меткой и значком. Чтобы скрыть значки от программ чтения с экрана, был добавлен aria-hidden.
По данным Mozilla Developer Network (MDN), ниже приведены варианты использования свойств.
Скройте декоративное содержимое, такое как значки и изображения. Скрыть скопированный текст. Скройте закадровый или свернутый контент.
4. Влияние доступности на aria-hidden="true"
предназначен для программ чтения с экрана, поскольку скрывает содержимое только от программ чтения с экрана. Однако контент остается видимым для зрячих пользователей, а клавиатура может быть фокусируемой.
(1) Анимация и взаимодействие
Когда мы хотим анимировать скрытый элемент, например, чтобы показать скрытую мобильную навигацию, это нужно сделать доступным способом. Для обеспечения доступности мы рассмотрим несколько хороших примеров, на которых можно поучиться, и несколько плохих примеров, чтобы избежать ошибок, которые могут создать неприятные впечатления для пользователей программ чтения с экрана.
Анимация меню — плохой пример
У нас есть меню, которое при раскрытии должно иметь скользящую анимацию. Самый простой способ — добавить в меню следующее:
ул {
непрозрачность: 0;
преобразование: TranslateX (100%);
переход: замедление 0,3 с;
}
ул.активный {
непрозрачность: 1;
преобразование: TranslateX (0);
}С учетом вышеизложенного меню будет расширяться и сворачиваться на основе класса .active, который будет добавлен через JavaScript следующим образом:
MenuToggle.addEventListener('click', function(e){
е.preventDefault();
navMenu.classList.toggle('активный');
});
Результат может выглядеть хорошо, но в нем есть большая ошибка. Использование непрозрачности: 0 не скроет навигацию по дереву доступности. Даже если навигация визуально скрыта, она по-прежнему доступна для фокусировки с помощью клавиатуры и для программ чтения с экрана. Его необходимо скрыть, чтобы не вводить пользователей в заблуждение.
Вот скриншот дерева доступности из Chrome Dev Tools:
Проще говоря, дерево доступности — это список всего контента, доступного пользователям программ чтения с экрана. В нашем случае список навигации есть, но визуально он скрыт. Нам нужно решить две проблемы:
Не используйте фокус клавиатуры, когда меню скрыто. Не указывайте навигацию с помощью программы чтения с экрана, когда навигация скрыта.
На снимке экрана ниже показано, как ротор VoiceOver в Mac OS видит страницу. Список навигации присутствует, хотя он скрыт
Исходный код дела:
https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0100
Анимация меню — хороший пример
Чтобы исправить эту ошибку, нам нужно использовать видимость: скрыто для меню навигации. Это гарантирует, что меню будет скрыто от визуальных средств и средств чтения с экрана.
「css」
ул {
видимость: скрыта;
непрозрачность: 0;
преобразование: TranslateX (100%);
переход: замедление 0,3 с;
}
ул.активный {
видимость: видимая;
непрозрачность: 1;
преобразование: TranslateX (0);
}После добавления меню будет скрыто от программ чтения с экрана. Давайте проверим еще раз и посмотрим, что отобразит VoiceOver:
Исходный код дела:
https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0110
5. Пользовательский флажок
Дизайн флажка по умолчанию сложно настроить, поэтому нам необходимо создать собственный дизайн флажка. Давайте посмотрим на базовый HTML:
<p class="c-checkbox"> <input class="sr-only" type="checkbox" name="" id="c1"> <label class="c-checkbox__label" for="c1">Пользовательский флажок</label> </p>
Чтобы настроить чекбокс, нам нужно скрыть ввод в доступном виде. Для этого следует использовать позицию и другие свойства. Существует общий класс CSS, называемый sr-only или Visual-Hidden, который только визуально скрывает элемент и делает его доступным для пользователей клавиатуры и программ чтения с экрана.
.sr-только {
граница: 0;
клип: прямоугольник (0 0 0 0);
-webkit-clip-path: многоугольник (0px 0px, 0px 0px, 0px 0px);
клип-путь: многоугольник (0px 0px, 0px 0px, 0px 0px);
высота: 1 пиксель;
поле: -1 пиксель;
переполнение: скрыто;
заполнение: 0;
позиция: абсолютная;
ширина: 1 пиксель;
пробел: nowrap;
}Исходный код дела: https://codepen.io/shadeed/pen/b722aa72dbe3574617f6506d14e5ac03?editors=1100.
Скрыть кнопку
В Твиттере есть кнопка «Просмотреть новые твиты», которая скрыта для программ чтения с экрана со скрытым содержимым в виде арий и появляется только тогда, когда появляются новые твиты.
Подвести итог
На этом завершается статья, посвященная подробному руководству по методам, преимуществам и недостаткам сокрытия элементов в Интернете. Для получения дополнительной информации о сокрытии элементов в Интернете выполните поиск по предыдущим статьям на сайте downcodes.com или продолжайте просматривать соответствующие статьи ниже. надеюсь, пожалуйста, поддержите downcodes.com больше в будущем!