Как исправить Маяк "У ссылок нет различимого имени"

Question

Маяк предлагает починить мой href текст

У меня есть такой HTML

<a href="https://twitter.com/@some-name-here" target="_blank" rel="noopener" class="social-icon twitter grayscale"></a>

Что на самом деле здесь происходит, так это то, что я просто отображаю изображение внутри href с помощью класса css:

.social-icon.twitter {
  background: url('../images/logo-twitter.png') no-repeat center center;
}

Я не могу сделать <a....>Twitter</a> как в этом случае отображаемый текст разрушит вид.

Я не могу думать ни о чем другом, как просто положить span с текстом внутри моего a и сделать его скрытым, например <a....><span class="hide">Twitter</span></a> но интересно, есть ли какое-то правильное решение?

Любые рекомендации по этому поводу?

Answer 1

По причинам доступности (требуется для программ чтения с экрана) ссылки должны содержать текст или иметь описание в aria-label приписывать. Во многих случаях использования, таких как ваш, вы не хотите добавлять текст в ссылку, а вместо этого используете его в качестве изображения или оболочки для графических элементов.

Исправьте это, добавив aria-label="Twitter" на ваш a элемент, как

<a href="https://twitter.com/@some-name-here" aria-label="Twitter" target="_blank" rel="noopener" class="social-icon twitter grayscale"></a>

Answer 2

Если вы хотите реализовать это в приложении реагирования, тогда нам нужно добавить свойство aria-label в <a> тег.

До:

<a href={`https://${ this.props.info }`} target="_blank" rel="noopener noreferrer">
   <i className="fa fa-circle fa-stack-2x"></i>
   <i className={ `fa fa-${ this.props.icon } fa-stack-1x fa-inverse` }></i>
</a>

После:

<a href={`https://${ this.props.info }`} aria-label={`${ this.props.name }`} target="_blank" rel="noopener noreferrer">
   <i className="fa fa-circle fa-stack-2x"></i>
   <i className={ `fa fa-${ this.props.icon } fa-stack-1x fa-inverse` }></i>
</a>

Answer 3

Решение довольно простое. Просто добавьте заголовок к элементу файла Javascript, который имеет атрибут aria-haspopup = "true" и tabindex = "0". Добавьте заголовок типа title = "Anything" в вышеупомянутой строке. Это решит проблему. Рабочий пример - Oceanspace