Иконки, значки
Способ описания иконок на сайте использующим bootstrap 3.3.1
В последнее время все больше попадается сайтов, на которых для совершения определенных действий используются ссылки/кнопки со значками и иконками, без текстового описания. Это доставляло неудобства
С выходом фреймворка bootstrap 3.3.1 надеюсь таких неудобств не будет, так как в этой версии улучшена поддержка вспомогательных технологий, на которых основаны скринридеры.
Как использовать
1 все иконки должны содержать базовый класс и индивидуальный класс иконки.
Для использования, поместите следующий код практически
в любом месте.
<span class="glyphicon glyphicon-search"> <span>.
Вместо glyphicon-search подставить необходимый, полный список в офиц. документации.
Не забудьте оставить
Пространство между иконкой и текстом для правильного заполнения.
2 Классы Иконок нельзя смешивать с другими компонентами.
В элементах, где используются классы иконок, нельзя применять другие классы.
Вместо этого добавьте вложенный
3 Только для использования на пустых элементов
Классы Иконок должны использоваться только в элементах, которые не содержат текстовое содержимое и не имеют дочерние элементы.
Изменение местоположения шрифтов иконок
Bootstrap предполагает что файлы шрифтов иконок будут расположены в каталоге на уровень выше (../fonts/), по отношению к компелированным файлов CSS.
Перемещение или переименование файлов шрифтов возможно обновлением CSS одним из трех способов:
список из 3 элементов
Изменение @icon-font-path и/или @icon-font-name переменных в исходниках Less файлов.
Использование опции относительных URL-адресов Less компилятора.
Изменение url() пути в компелированном CSS.
конец списка
Используйте вариант, который лучше всего подходит для вашей разработки проекта.
Доступность для скринридеров
Современные версии скринридеров объявляют CSS контент, а также конкретные символы Unicode.
Чтобы избежать путанницы и вылетов в скринридерах(особенно, когда иконки используются исключительно для украшения), мы прячем их с помощью атрибута aria-hidden="true".
Если вы используете иконку, чтобы передать смысл (а не только в качестве декоративного элемента), убедитесь, что этот смысл также передан скринридеру
- Например, включать дополнительный контент, визуально скрытый с помощью класса sr-only.
Если вы создаете управления без текста (например, <button>, которая содержит только иконку вы всегда должны обеспечить текстовое описание для скринридера, так что это будет иметь смысл для пользователей с проблемами зрения.
В этом случае, вы можете добавить атрибут aria-label на управляющий элемент.
Используйте в кнопки, группе кнопок для инструментов, навигации, или формах на элементах input.
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
иконка используется в сообщениях alert, например чтобы передать сообщение об ошибке, с дополнительным текстом в классе sr-only для пользователей скринридеров.
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Ошибка:</span>
Введите действительный E-mail
</div>
Это перевод официальной документацииhttp://getbootstrap.com/components/