Что такое sr-only в Bootstrap 3?

Для чего используется класс 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;
}

Это важно или можно удалить? Работает нормально без.

Это важно, не удаляйте это.

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

Если вы заинтересованы в чтении о доступности:

• Инициатива доступности веб (WAI)

• Документация доступности MDN

Как сказал JoshC, класс используется для сокрытия информации, используемой для программ чтения с экрана. Но не только для того, чтобы скрыть ярлыки, вы можете скрыть от зрячего пользователя внутреннюю ссылку «перейти к основному содержанию», что желательно для слепых пользователей, если у вас есть сложная навигация или реклама перед основным содержанием.

Если вы хотите, чтобы ваш сайт еще больше взаимодействовал с программами для чтения с экрана, используйте стандартизированные W3C атрибуты ARIA, и я определенно рекомендую посетить онлайн-курс Google , который займет всего 1-2 часа или, по крайней мере, посмотреть 40-минутное видео от Google .

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

ОБНОВЛЕНИЕ 2019:

Как разработчики, мы должны сделать доступным контент, который просто работает для всех из коробки и не предназначен специально для чтения с экрана. Это не всегда возможно, но будьте осторожны, используя настройки ARIA и «только для чтения с экрана» . Не делай этого, если не до конца понимаешь. Неправильная реализация может быть намного хуже, чем не использовать его вообще. Пожалуйста, прочитайте accessibility-developer-guide по плохим примерам ARIA . Там вы также найдете полностью доступные компоненты / виджеты, которые не требуют каких-либо вмешательств «только для чтения с экрана».

Я нашел это в примере с навигационной панелью и упростил его.

<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часть скрыта):

• По умолчанию
• Статический топ
• Фиксированная вершина

Вы слышите, какой из них выбран, если вы используете программу чтения с экрана:

• По умолчанию
• Статический топ
• Фиксированная вершина (текущая)

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

.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

Я надеюсь, что предоставленная мною информация будет полезна кому-то в дополнение к другим ответам.

Гарантирует, что объект отображается (или должен быть) только для читателей и подобных устройств. Это дает больше смысла в контексте с другим элементом с атрибутом 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Класс скрывает элемент для всех устройств , кромеscreen readers:

Перейти к основному содержанию. Объедините .sr-only с .sr-only-focusable, чтобы снова показать элемент, когда он находится в фокусе.