Короткий ответ
Визуально скрытый текст по-прежнему является наиболее надежным способом обеспечить чтение текста ссылки.
Есть и другие способы сделать это более аккуратно, например, использовать alt атрибут * на внешнем изображении или aria-labelledby на встроенном SVG, поэтому я включил их в ответ ниже.
Длинный ответ
У большинства современных программ чтения с экрана не будет проблем с этим ( NVDA и J AWS оба читают текст заголовка в моем быстром тесте), но некоторые старые (включая старые версии NVDA, J AWs и c.) Не будут работать.
Я считаю, что комментарий о том, что «des c» является эквивалентом «alt», неверен, поскольку я объяснил в этом ответе заголовок и описание в SVG (первые три строки относятся к делу).
Чтобы еще больше расширить это, вот что W3 C говорит о SVG в предлагаемом обновлении SPE c: -
Дочерний элемент 'title' представляет собой короткую текстовую альтернативу для элемент.
По ссылке это может быть заголовком или описанием целевого ресурса; на изображении или графическом объекте это может быть краткое описание графики; в интерактивном контенте это может быть ярлык или инструкции по использованию элемента; и т. д.
источник: https://www.w3.org/TR/SVG2/struct.html#TitleElement
Элемент «desc» представляет более подробную текстовую информацию для элемента, например описание . Обычно это предоставляется вспомогательными технологиями для предоставления более подробной информации, такой как описание внешнего вида графического c или помощи в объяснении функциональности сложного виджета. Обычно он недоступен для других пользователей, поэтому не должен использоваться для важных инструкций.
источник: https://www.w3.org/TR/SVG2/struct.html#DescElement
Внешние SVG
Для внешних файлов SVG рекомендуется использовать теги alt для обеспечения чтения текста. Это может означать небольшое дублирование, но атрибуты alt возвращаются к ie4!
Сохраняйте свой атрибут title, как будто кто-то обращается к изображению напрямую, он все равно получит некоторое описание того, что оно содержит.
Встроенные SVG
Для этого вы должны указать свой title идентификатор. Затем добавьте aria-labelledby к окружающей ссылке. Как указано в вопросе, который я связал, вы также можете указать <description> идентификатор и связать их обоих, если вы используете sh.
Обратной стороной является то, что aria-labelledby не так хорошо поддерживается , как вы могли подумать, но он вполне допустим и соответствует рекомендациям WCAG.
<a href="/fern">
<svg role="img" viewBox="0 0 100 100" aria-labelledby="linkText">
<title id="linkText">Bracken</title>
<use xlink:href="/ferns_sprite.svg#bracken"></use>
</svg>
</a>
Самый надежный способ - визуально скрытый текст.
Это можно сделать двумя способами. правильно, но если вы поддерживаете Inte rnet Explorer (что вам следует делать, если вы заботитесь о доступности, поскольку использование IE выше в сообществе программ чтения с экрана ), тогда наиболее надежным способом остается визуально скрытый текст .
Визуально скрытый текст не отображается на экране, но все равно будет прочитан программой чтения с экрана.
Пожалуйста, используйте класс CSS ниже, чтобы скрыть текст, поскольку он лучше совместимость, чем класс bootstrap sr-only, как описано в этом ответе, который я дал .
Обратите внимание, как я полностью скрываю SVG в обоих случаях, используя aria-hidden="true", а также добавляю focusable="false" во встроенный SVG из-за т o Inte rnet Explorer и старые браузеры Opera, делающие SVG интерактивными. Пустой alt="" по-прежнему требуется в качестве запасного варианта для программ чтения с экрана, которые не полностью поддерживают aria.
Приведенное ниже должно работать вплоть до IE6, а с предоставленным классом CSS следует надеяться работать на несколько лет вперед!
.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 href="/fern">
<span class="visually-hidden">Bracken</span>
<svg role="img" viewBox="0 0 100 100" aria-hidden="true" focusable="false">
<title>Bracken</title>
<use xlink:href="/ferns_sprite.svg#bracken"></use>
</svg>
</a>
<a href="/fern">
<span class="visually-hidden">Bracken</span>
<img src="/bracken" alt="" aria-hidden="true" />
</a>