Для чего используется класс sr-only
? Это важно или я могу удалить его? Прекрасно работает.
Вот мой пример:
<div class="btn-group">
<button type="button" class="btn btn-info btn-md">Departments</button>
<button type="button" class="btn btn-info dropdown-toggle btn-md" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Sales</a></li>
<li><a href="#">Technical</a></li>
<li class="divider"></li>
<li><a href="#">Show all</a></li>
</ul>
</div>
В соответствии с загрузочной документацией класс используется для скрытия информации, предназначенной только для читателей экрана, из макета отображаемой страницы.
Считыватели экрана будут иметь проблемы с вашими формами, если вы не включаете метку для каждого входа. Для этих встроенных форм вы можете скрыть метки, используя класс .sr-only.
Вот пример :
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
Это важно или я могу удалить его? Прекрасно работает.
Важно, не удаляйте его.
Вы всегда должны учитывать программы чтения с экрана для целей доступности. Использование класса в любом случае скроет элемент, поэтому вы не должны видеть визуальной разницы.
Если вам интересно узнать о доступности:
Как сказал JoshC, класс используется для скрытия информации, используемой для чтения с экрана. Но не только для того, чтобы скрыть ярлыки, вы можете убрать из видимого пользователя внутреннюю ссылку "перейти к основному контенту", что желательно для слепых пользователей, если у вас сложная навигация или добавляется в заголовок страницы перед контентом. Им нужно будет нажимать клавишу со стрелкой вниз слишком много раз, чтобы достать ее с помощью программы чтения с экрана.
Если вы хотите, чтобы ваш сайт еще больше взаимодействовал с программами чтения с экрана, используйте W3C стандартизованные атрибуты ARIA, и я определенно рекомендую посетить онлайн-курс Google, который займет всего 1-2 часа или меньше всего смотрите Google 40min video.
По данным Всемирной организации здравоохранения, 285 миллионов человек имеют нарушения зрения. Поэтому важно сделать сайт доступным.
Я нашел это в примере navbar и упростил его.
<ul class="nav">
<li><a>Default</a></li>
<li><a>Static top</a></li>
<li><b><a>Fixed top <span class="sr-only">(current)</span></a></b></li>
</ul>
Вы видите, какой из них выбран (sr-only
часть скрыта):
Вы слышите, какой из них выбран, если вы используете программу чтения с экрана:
В результате этого метода слепые люди должны легко перемещаться по вашему сайту.
Обеспечивает, чтобы объект отображался (или должен быть) только для считывателей и подобных устройств. Это дает больше смысла в контексте с другим элементом с атрибутом aria-hidden = "true".
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
Глификон будет отображаться на всех других устройствах, слово Ошибка: для чтения текста.
.sr-only
- это имя класса, специально используемое для чтения с экрана. Вы можете использовать любое имя класса, но .sr-only
довольно часто используется. Если вы не заботитесь о разработке с соблюдением требований, то его можно удалить. Это никак не повлияет на пользовательский интерфейс, если удалено, потому что CSS для этого класса не отображается в браузерах для настольных компьютеров и мобильных устройств.
Здесь, как представляется, имеется некоторая информация об использовании .sr-only
для объяснения его цели и для чтения с экрана. Прежде всего, это очень важно всегда держать людей с ограниченными возможностями. Обесценение является целью соблюдения 508: https://www.section508.gov/, и это здорово, что бутстрап учитывает это. Однако использование .sr-only
- это не все, что необходимо учитывать при соблюдении 508. У вас есть цвет, размер шрифтов, доступность через навигацию, дескрипторы, использование арии и многое другое.
Но что касается .sr-only
- что делает на самом деле CSS? Существует несколько немного разных вариантов CSS, используемых для .sr-only
. Ниже приведена одна из немногих:
.sr-only {
position: absolute;
margin: -1px 0 0 -1px;
padding: 0;
display: block;
width: 1px;
height: 1px;
font-size: 1px;
line-height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
outline: 0;
}
Вышеприведенный CSS скрывает содержимое в настольных и мобильных браузерах, завернутых в этот класс, но видно с помощью устройства чтения с экрана, такого как JAWS: http://www.freedomscientific.com/Products/Blindness/JAWS. Пример разметки выглядит следующим образом:
<a href="#" target="_blank">
Click to Open Site
<span class="sr-only">This is an external link</span>
</a>
Кроме того, если элемент DOM имеет ширину и высоту 0, элемент не видит DOM. Вот почему приведенный выше CSS использует width: 1px; height: 1px;
. Используя display: none
и устанавливая CSS в height: 0
и width: 0
, элемент не видит DOM и, следовательно, является проблематичным. Вышеупомянутый CSS с помощью width: 1px; height: 1px;
- это не все, что вы делаете, чтобы сделать контент невидимым для настольных и мобильных браузеров (без overflow: hidden
, ваш контент все равно будет отображаться на экране) и доступен для чтения с экрана. Скрытие содержимого с настольных и мобильных браузеров осуществляется путем добавления смещения от width: 1px
и height: 1px
, ранее упомянутых с помощью:
position: absolute;
margin: -1px 0 0 -1px;
overflow: hidden;
Наконец, чтобы иметь очень хорошее представление о том, что читатель экрана видит и передает его ослабленному пользователю, отключите стиль страницы для своего браузера. Для Firefox вы можете сделать это, выбрав:
View > Page Style > No Style
Надеюсь, что информация, которую я предоставил здесь, будет более полезной для кого-то в дополнение к другим ответам.
Класс .sr-only скрывает элемент для всех устройств, кроме программ чтения с экрана:
Перейти к основному содержанию Объедините .sr-only с .sr-only-focusable, чтобы снова отображать элемент, когда он сфокусирован.