Sr only bootstrap для чего
Компоненты
Более десятка повторно используемых компонентов построены так, чтобы обеспечить кнопки, выпадающие меню, группы ввода, навигации, оповещения, и многое другое.
Служебные классы
Bootstrap включает в себя десятки утилит—классы с одной-единственной целью. Они предназначены для уменьшения частоты высокой повторяемостью объявления в CSS пока позволяющ для быстрого и легкого развития.
Содержание
Расстояние
Классы имеют имена в формате: < property >— < sides >—
Где property одно из:
Вот некоторые типичные примеры из этих классов:
Горизонтальное центрирование
Выравнивание текста
Легко перестроить текст с компонентами с текстом, классы выравнивания.
Слева, справа и посредине, aдаптивный классы доступны, которые используют такой же ширины области просмотра точки останова как блочная система.
Left aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
Left aligned text on viewports sized SM (small) or wider.
Left aligned text on viewports sized MD (medium) or wider.
Left aligned text on viewports sized LG (large) or wider.
Left aligned text on viewports sized XL (extra-large) or wider.
Преобразования текста
Преобразовать текст в компонентах с текстом классы капитализации.
Обратите внимание, как text-capitalize меняет только первую букву каждого слова, оставляя в случае любого другого письма без изменений.
Жирный и курсивный текст
Быстро изменить жирность текста или наличие курсива.
Normal weight text.
Контекстная цветов и фонов
Передать смысл посредством цвета с горсткой утилита акцент классы. Они также могут быть применены к одной и потемнеет на наведение как наши стили ссылок по умолчанию.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Контекстной классы также хорошо работать на анкеры с наведение и фокусом состояния.
Похожие на контекстной цвет оправы, легко установить фоновый элемент для любого контекстуального класса. Якорь компонентов будет темным на наведении, как и текст классы.
Общаясь со спецификой
Иногда контекстная классы не могут быть применены из-за специфики другой селектор. В некоторых случаях достаточно обойти это, чтобы обернуть содержимое элемента в
Передать смысл для ассистивных технологий
Ширина
Чтобы сделать элемент display: none используйте наш aдаптивный коммунальные услуги вместо.
Доступность
Краткий обзор возможностей и ограничений 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.
Что такое sr-only в Bootstrap 3?
6 ответов
В соответствии с загрузочной документацией класс используется для скрытия информации, предназначенной только для читателей экрана, из макета отображаемой страницы.
Это важно или я могу удалить его? Прекрасно работает.
Важно, не удаляйте его.
Вы всегда должны учитывать программы чтения с экрана для целей доступности. Использование класса в любом случае скроет элемент, поэтому вы не должны видеть визуальной разницы.
Если вам интересно узнать о доступности:
Как сказал JoshC, класс используется для скрытия информации, используемой для чтения с экрана. Но не только для того, чтобы скрыть ярлыки, вы можете убрать из видимого пользователя внутреннюю ссылку «перейти к основному контенту», что желательно для слепых пользователей, если у вас сложная навигация или добавляется в заголовок страницы перед контентом. Им нужно будет нажимать клавишу со стрелкой вниз слишком много раз, чтобы достать ее с помощью программы чтения с экрана.
Если вы хотите, чтобы ваш сайт еще больше взаимодействовал с программами чтения с экрана, используйте W3C стандартизованные атрибуты ARIA, и я определенно рекомендую посетить онлайн-курс Google, который займет всего 1-2 часа или меньше всего смотрите Google 40min video.
По данным Всемирной организации здравоохранения, 285 миллионов человек имеют нарушения зрения. Поэтому важно сделать сайт доступным.
Я нашел это в примере navbar и упростил его.
Вы видите, какой из них выбран ( sr-only часть скрыта):
Вы слышите, какой из них выбран, если вы используете программу чтения с экрана:
В результате этого метода слепые люди должны легко перемещаться по вашему сайту.
Обеспечивает, чтобы объект отображался (или должен быть) только для считывателей и подобных устройств. Это дает больше смысла в контексте с другим элементом с атрибутом aria-hidden = «true».
Глификон будет отображаться на всех других устройствах, слово Ошибка: для чтения текста.
Вышеприведенный CSS скрывает содержимое в настольных и мобильных браузерах, завернутых в этот класс, но видно с помощью устройства чтения с экрана, такого как JAWS: http://www.freedomscientific.com/Products/Blindness/JAWS. Пример разметки выглядит следующим образом:
Наконец, чтобы иметь очень хорошее представление о том, что читатель экрана видит и передает его ослабленному пользователю, отключите стиль страницы для своего браузера. Для Firefox вы можете сделать это, выбрав:
Надеюсь, что информация, которую я предоставил здесь, будет более полезной для кого-то в дополнение к другим ответам.
Что такое sr-only в Bootstrap 3?
Вот пример используемого стиля:
Это важно или можно удалить? Работает нормально без.
Это важно, не удаляйте это.
Вы всегда должны рассматривать программы для чтения с экрана в целях доступности. Использование класса в любом случае скрывает элемент, поэтому визуальной разницы не должно быть.
Если вы заинтересованы в чтении о доступности:
Как сказал JoshC, класс используется для сокрытия информации, используемой для программ чтения с экрана. Но не только для того, чтобы скрыть ярлыки, вы можете скрыть от зрячего пользователя внутреннюю ссылку «перейти к основному содержанию», что желательно для слепых пользователей, если у вас есть сложная навигация или реклама перед основным содержанием.
По данным Всемирной организации здравоохранения, 285 миллионов человек имеют нарушения зрения. Поэтому важно сделать сайт доступным.
Я нашел это в примере с навигационной панелью и упростил его.
Вы видите, какой из них выбран ( sr-only часть скрыта):
Вы слышите, какой из них выбран, если вы используете программу чтения с экрана:
В результате этой техники слепые люди должны легче ориентироваться на вашем сайте.
Наконец, для того, чтобы иметь очень хорошее представление о том, что программа чтения с экрана видит и передает своему ослабленному пользователю, отключите стилизацию страницы для своего браузера. Для Firefox вы можете сделать это, перейдя в:
Я надеюсь, что предоставленная мною информация будет полезна кому-то в дополнение к другим ответам.