sr only bootstrap для чего
Что такое sr-only в Bootstrap 3?
Вот пример используемого стиля:
Это важно или можно удалить? Работает нормально без.
Это важно, не удаляйте это.
Вы всегда должны рассматривать программы для чтения с экрана в целях доступности. Использование класса в любом случае скрывает элемент, поэтому визуальной разницы не должно быть.
Если вы заинтересованы в чтении о доступности:
Как сказал JoshC, класс используется для сокрытия информации, используемой для программ чтения с экрана. Но не только для того, чтобы скрыть ярлыки, вы можете скрыть от зрячего пользователя внутреннюю ссылку «перейти к основному содержанию», что желательно для слепых пользователей, если у вас есть сложная навигация или реклама перед основным содержанием.
По данным Всемирной организации здравоохранения, 285 миллионов человек имеют нарушения зрения. Поэтому важно сделать сайт доступным.
Я нашел это в примере с навигационной панелью и упростил его.
Вы видите, какой из них выбран ( sr-only часть скрыта):
Вы слышите, какой из них выбран, если вы используете программу чтения с экрана:
В результате этой техники слепые люди должны легче ориентироваться на вашем сайте.
Наконец, для того, чтобы иметь очень хорошее представление о том, что программа чтения с экрана видит и передает своему ослабленному пользователю, отключите стилизацию страницы для своего браузера. Для Firefox вы можете сделать это, перейдя в:
Я надеюсь, что предоставленная мною информация будет полезна кому-то в дополнение к другим ответам.
На этом уроке мы познакомимся со вспомогательными классами Bootstrap 3.
Контекстуальные цвета (цвета для выделения текста)
В Twitter Bootstrap 3 имеются вспомогательные акцентные классы, с помощью которых вы можете установить цвет некоторому фрагменту тексту. Кроме текста эти классы также можно применять к ссылкам, которые не только изменяют цвет данной ссылки, но и делают её темнее при поднесении к ней курсора.
Lorem ipsum dolor sit amet. Officiis debitis aut reiciendis voluptatibus maiores alias consequatur aut fugit.
Sint et dolorum fuga sit voluptatem accusantium. Cum soluta nobis est et dolorum fuga obcaecati cupiditate.
Delectus, ut aut perferendis doloribus asperiores repellat.. Excepturi sint, obcaecati cupiditate non provident, similique sunt.
Optio, cumque nihil impedit, quo minus. Similique sunt in culpa. Nam libero tempore, cum soluta.
Magni dolores et voluptates repudiandae. Voluptatem sequi nesciunt, neque porro quisquam est, omnis dolor repellendus quibusdam.
Repudiandae sint et aut fugit. Odit aut fugit, sed quia dolor sit, aspernatur aut rerum. Consectetur, adipisci velit, sed ut enim ipsam voluptatem, quia consequuntur magni.
Примечание: Иногда акцентные классы могут не изменить цвет текста, который заключен в некоторый элемент в связи c влияния на данный элемент стилей других классов или селекторов. В большинстве случаев для решения подобной проблемы достаточно обернуть данный текст с помощью элемента span и добавить к нему акцентный класс.
Контекстуальные фоны (цвета для установления фона)
Кроме классов, предназначенных для выделения текста цветом, в Twitter Bootstrap 3 есть ещё несколько классов, которые предназначены для установления цветного фона блочным элементам HTML.
Абзацы с различным фоном:
Lorem ipsum dolor sit amet. Officiis debitis aut reiciendis voluptatibus maiores alias consequatur aut fugit.
Sint et dolorum fuga sit voluptatem accusantium. Cum soluta nobis est et dolorum fuga obcaecati cupiditate.
Delectus, ut aut perferendis doloribus asperiores repellat.. Excepturi sint, obcaecati cupiditate non provident, similique sunt.
Optio, cumque nihil impedit, quo minus. Similique sunt in culpa. Nam libero tempore, cum soluta.
Magni dolores et voluptates repudiandae. Voluptatem sequi nesciunt, neque porro quisquam est, omnis dolor repellendus quibusdam.
Примечание: Иногда контекстуальные классы, предназначенные для задания фона некоторому элементу, могут не изменить его цвет в связи с тем, что на данный элемент могут оказывать стили других классов или селекторов. В большинстве случаев для решения подобной проблемы достаточно обернуть некоторый контент в элемент div и добавить к нему класс для задания цветного фона.
Иконка Close
Иконка «Close» применяется для закрытия модальных окон (modals) и сообщений (alerts).
Значок Carets
Значок «Carets» указывает на наличие у элемента выпадающего списка. Кроме этого этот значок также указывает направление, в каком данный список будет выпадать (вверх или вниз).
Быстрое создания плавающих элементов (float)
Центрирование блоков, содержащих контент
Класс clearfix
Например, рассмотрим создания макета, состоящего из 4 блоков, каждый из которых должен занимать по 6 колонок Twitter Bootstrap. Причём блоки 3 и 4 должны располагаться с новой строки.
Блоки, состоящие из колонок Bootstrap, являются плавающими и стремятся сместиться насколько возможно влево. После создания данного макета мы получим следующую картину:
Отображение и скрытие контента
Настройка сайта под технологии, которые выполняют чтение с экрана
Класс Bootstrap для скрытия текста
Доступность
Краткий обзор возможностей и ограничений Bootstrap для создания доступного контента.
Bootstrap – легкий в использовании фреймворк готовых стилей, инструментов разметки и интерактивных компонентов, позволяющий разработчикам создавать красивые, богатые функционалом и создаваемые за считанные часы приложения и сайты.
Обзор и ограничения
Итоговая доступность и «user-friendliness» проекта на Bootstrap зависит в большой степени от разметки автора, его дополнительных стилей и добавленных им скриптов. Однако, при условии, что все перечисленное работает корректно, созданные на BS4 сайты в идеале должны отвечать WCAG 2.0 (A/AA/AAA), Section 508 и прочим стандартам и требованиям доступности.
Структурная разметка
Расположение элементов и стили Bootstrap могут применяться в широком спектре видов структуры разметок. Данная документация помогает обеспечить разработчиков лучшими примерами использования Bootstrap и демонстрирует правильную семантику разметки, включая пути разрешения потенциальных проблем с доступностью.
Интерактивные компоненты
Из-за того, что компоненты Bootstrap созданы как generic (т.е. могут иметь много экземпляров одного класса), разработчикам в их дальнейшей работе может понадобиться включить в проект роли и атрибуты ARIA или скрипты JS для более аккуратного использования точной функциональности такого компонента. Это обычно отмечается в документации.
Контраст цвета
Использование большинства цветов стандартной палитры Bootstrap на светлом бэкграунде (кнопки, вариации отзывов на действия, индикаторы форм валидации) может привести к недостаточному контрасту (смотрите WCAG 2.0 color contrast ratio of 4.5:1). В этом случае для придания контрасту адекватных значений разработчикам потребуется вручную изменить/расширить палитру, существующую по умолчанию.
Спрятанный контент
What is sr-only in Bootstrap 3?
What is the class sr-only used for? Is it important or can I remove it? Works fine without.
6 Answers 6
According to bootstrap’s documentation, the class is used to hide information intended only for screen readers from the layout of the rendered page.
Here is an example styling used:
Is it important or can I remove it? Works fine without.
It’s important, don’t remove it.
You should always consider screen readers for accessibility purposes. Usage of the class will hide the element anyways, therefore you shouldn’t see a visual difference.
If you’re interested in reading about accessibility:
If you want make your website even more accessible I recommend to start here:
According to the World Health Organization, 285 million people have vision impairments. So making a website accessible is important.
I found this in the navbar example, and simplified it.
You see which one is selected ( sr-only part is hidden):
You hear which one is selected if you use screen reader:
As a result of this technique blind people supposed to navigate easier on your website.
The above CSS hides content in desktop and mobile browsers wrapped with this class, but is seen by a screen reader like JAWS: http://www.freedomscientific.com/Products/Blindness/JAWS. Example markup is as follows:
Lastly, to have a very good idea of what a screen reader sees and relays to its impaired user, turn off page styling for your browser. For Firefox, you can do this by going to:
I hope the information I provided here is of further use to someone in addition to the other responses.
Доступность
Краткий обзор возможностей и ограничений Bootstrap для создания доступного контента.
Bootstrap предоставляет простую в использовании структуру готовых стилей, инструментов макета и интерактивных компонентов, позволяющую разработчикам создавать веб-сайты и приложения, которые визуально привлекательны, функционально богаты и доступны прямо из коробки.
Обзор и ограничения
Общая доступность любого проекта, созданного с помощью Bootstrap, во многом зависит от разметки автора, дополнительных стилей и сценариев, которые они включили. Однако при условии, что они были реализованы правильно, должно быть вполне возможно создание веб-сайтов и приложений с помощью Bootstrap, которые соответствуют WCAG 2.0 (A / AA / AAA), раздел 508 и аналогичным стандартам и требованиям доступности.
Структурная разметка
Стиль и макет Bootstrap можно применять к широкому спектру структур разметки. Эта документация направлена на то, чтобы предоставить разработчикам примеры передового опыта, чтобы продемонстрировать использование самого Bootstrap и проиллюстрировать соответствующую семантическую разметку, включая способы решения потенциальных проблем доступности.
Интерактивные компоненты
Цветовой контраст
Визуально скрытый контент
Сниженное движение
Дополнительные ресурсы
Разработан и построен с любовью к миру, командой Bootstrap и помощью наших участников.
В настоящее время v5.0.0-alpha1. Код под лицензией MIT, документы CC BY 3.0.