Два способа решить эту проблему: визуально скрытый текст или добавление <title> к вашему SVG.
Не используйте aria-label, поскольку поддержка невелика .
Визуально скрытый текст (только текст для чтения с экрана)
Визуально скрытый текст не отображается на экране, но все равно будет прочитан программой чтения с экрана.
Используйте класс CSS ниже, поскольку он имеет лучшую совместимость, чем класс bootstrap sr-only, поскольку объяснил в этом ответе, я дал
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
<a target="_blank" rel="nofollow noopener noreferrer" href="https://www.youtube.com/test">
<span class="visually-hidden">Visit our YouTube channel (opens in new tab)</span>
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="youtube" class="svg-inline--fa fa-youtube fa-w-18 " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z">
</path>
</svg>
</a>
Добавьте элемент <title> в свой SVG.
Элемент <title> фактически такой же, как alt на обычном образ. Это дает программе чтения с экрана возможность сообщить об этом.
Очевидно, вы затем удалите из него aria-hidden="true", чтобы его можно было прочитать программой чтения с экрана!
Что лучше?
Go для визуально скрытого текста.
Он работает вплоть до IE6, который предшествует SVG!
Он также работает в текстовом браузере (который не понимает CSS), так как он по-прежнему будет отображаться. Это крайний случай, но все же выигрыш для визуально скрытого текста!