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

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

Когда используете иконки в вашем интерфейсе, то данный мануал подскажет вам как помочь вспомогательным технологиям проигнорировать или лучше понять 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>

<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>

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>

<a href="#navigation-main" aria-label="Skip to main navigation">
  <i class="fa fa-bars" aria-hidden="true"></i>
</a>

<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>