Общедоступность

Сделайте ваши иконки прекрасными для всех ваших пользователей

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

Иконочные шрифты и Общедоступность

Современные версии вспомогательных технологий, таких как чтение с экрана, будут читать таблицы стилей сгенерированного контента (как объявить иконки Font Awesome), а также спецсимволы юникода. Если попробовать объявить иконки нашим стандартным методом, то у некоторых вспомогательных технологий могут возникнуть проблемы:

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

Use Font Awesome CDN's auto accessibility

Font Awesome CDN helps you automate accessibility support more easily so your icons work for the most people possible. You only need turn on a setting, use our simple syntax, and any icons you use will have all of the best practices and manual techniques below applied automatically.

или

Как сделать иконки общедоступными самому

Когда используете иконки в вашем интерфейсе, то данный мануал подскажет вам как помочь вспомогательным технологиям проигнорировать или лучше понять Font Awesome.

Иконки, используемые для декорирования или визуального стиля

Если иконка используется для декорирования или отображения бренда, то они не должны быть объявлены общедоступно, тк они влияют на приложения, читающие сайты в слух. Кроме того, если вы используете иконки, чтобы визуально подчеркнуть или добавить стиль контенту, то в существующем HTML они не должны быть продублированы в описании для вспомогательных технологий, используемых пользователем. Вы можете убедиться в том, что элемент не читается, добавив ему атрибут aria-hidden="true".

<i class="fa fa-fighter-jet" aria-hidden="true"></i>
иконка используется для простого декорирования
<h1 class="logo">
  <i class="fa fa-pied-piper" aria-hidden="true"></i>
  Pied Piper, A Middle-Out Compression Solution Making Data Storage Problems Smaller
</h1>
иконка используется как логотип
<a href="https://github.com/FortAwesome/Font-Awesome"><i class="fa fa-github" aria-hidden="true"></i> View this project's code on Github</a>
иконка используется перед текстом ссылки

Иконки с семантической или интерактивной целью

Если вы используете иконку для того, чтобы передать смысл (а не только в качестве декоративного элемента), убедитесь, что значение иконки также передается вспомогательным технологиям. Это касается контента, который вы сокращаете с помощью иконок, а также интерактивных элементовуправления (кнопки, элементы форм, переключатели и тд). Есть несколько способов для выполнения этой задачи:

Если иконка не является интерактивным элементом

The simplest way to provide a text alternative is to use the aria-hidden="true" attribute on the icon and to include the text with an additional element, such as a <span>, with appropriate CSS to visually hide the element while keeping it accessible to assistive technologies. In addition, you can add a title attribute on the icon to provide a tooltip for sighted mouse users.

<dl>
  <dt>
    <i class="fa fa-car" aria-hidden="true" title="Time to destination by car"></i>
    <span class="sr-only">Time to destination by car:</span>
  </dt>
  <dd>4 minutes</dd>

  <dt>
    <i class="fa fa-bicycle" aria-hidden="true" title="Time to destination by bike"></i>
    <span class="sr-only">Time to destination by bike:</span>
  </dt>
  <dd>12 minutes</dd>
</dl>
an icon being used to communicate travel methods
<i class="fa fa-hourglass" aria-hidden="true" title="60 minutes remain in your exam"></i>
<span class="sr-only">60 minutes remain in your exam</span>

<i class="fa fa-hourglass-half" aria-hidden="true" title="30 minutes remain in your exam"></i>
<span class="sr-only">30 minutes remain in your exam</span>

<i class="fa fa-hourglass-end" aria-hidden="true" title="0 minutes remain in your exam"></i>
<span class="sr-only">0 minutes remain in your exam</span>
an icon being used to denote time remaining

If an icon represents an interactive element

In the case of focusable interactive elements, there are various options to include an alternative text or label to the element, without the need for any visually hidden <span> or similar. For instance, simply adding the aria-label attribute with a text description to the interactive element itself will be sufficient to provide an accessible alternative name for the element. If you need to provide a visual tooltip on mouseover/focus, we recommend additionally using the title attribute or a custom tooltip solution.

<a href="path/to/shopping/cart" aria-label="View 3 items in your shopping cart">
  <i class="fa fa-shopping-cart" aria-hidden="true"></i>
</a>
an icon being used to communicate shopping cart state
<a href="#navigation-main" aria-label="Skip to main navigation">
  <i class="fa fa-bars" aria-hidden="true"></i>
</a>
an icon being used as a link to a navigation menu
<a class="btn btn-danger" href="path/to/settings" aria-label="Delete">
  <i class="fa fa-trash-o" aria-hidden="true" title="Delete this item?"></i>
</a>
an icon being used as a delete button's symbol with a title attribute to provide a native mouse tooltip

While the scenarios and techniques here help avoid some serious issues and confusion, they are not exhaustive. There are many complex contexts and use cases when it comes to accessibility, such as users with low vision who need a high color contrast ratio to see UI. There are some great tools and resources to learn from and work on these issues out there. Here are a few reads we recommend.

We'll continue to work on these under the larger topic of accessibility, but in the meantime, let us know if any bugs or issues.