Как сделать VoiceOver ссылкой с SVG внутри?

У меня есть якорь с svg внутри него. Используя Voiceover на iPhone, я не могу заставить ссылку сосредоточиться, нажав на нее. Если я заменил тег <img>, с помощью встроенного тега <svg>, я могу. Он также отлично работает на OSX.Как сделать VoiceOver ссылкой с SVG внутри?

<a href="index.html"><img src="image/btn-arrow-left.svg" alt="Logo"/></a>

Я бы предпочел не иметь встроенный svg здесь. Мне это кажется ошибкой. Но есть ли способ заставить VoiceOver признать эту ссылку?

источник

2015-05-22 Damon

выглядит как ошибка, вы можете создать jsfiddle? – unobf

Я не уверен в том, что где-то я могу связать svg с ..., но в основном это было бы точно так же, как и выше, но с работающим SVG. Я проверил несколько svgs и несколько разных контекстов, и, похоже, это происходит во всех ситуациях. Почувствуйте, что это, вероятно, тоже ошибка, но мне любопытно, как это повлиять на работу или почему это может произойти. – Damon

Какой браузер и операционная система вы используете? – unobf

Чтобы сделать SVG доступным в лучшем случае, к сожалению, я считаю, что вам нужно будет использовать тег <svg>. Здесь есть несколько примеров: Tips for Creating Accessible SVG. Я не думаю, что это ошибка, я думаю, что это по дизайну.

Однако могут быть способы пойти с тем, что вы хотите. Если вы хотите остаться с существующим кодом, вам может потребоваться ввести тег span с классом sr-only.

<a href="index.html"><img src="image/btn-arrow-left.svg" alt="To the Left" title="To the Left" aria-labelledby="linkText" /><span class="sr-only sr-only-focusable" id="linkText">To the Left</span></a>

CSS:

.sr-only { 
    position: absolute; 
    width: 1px; 
    height: 1px; 
    padding: 0; 
    margin: -1px; 
    overflow: hidden; 
    clip: rect(0, 0, 0, 0); 
    border: 0; 
} 
.sr-only-focusable:active, 
.sr-only-focusable:focus { 
    position: static; 
    width: auto; 
    height: auto; 
    margin: 0; 
    overflow: visible; 
    clip: auto; 
}

Надеется, что это помогает вашему делу.

источник

2015-05-22 20:48:55 cfnerd

Я бы надеюсь, что это не по дизайну. Использование svg в теге изображения, безусловно, является нормальным и [довольно хорошо поддерживается] (http://caniuse.com/#feat=svg-img). Я не уверен, что подход sr-only полностью работоспособен bc, а также для ограниченного просмотра пользователей, которые нажимают на экран. – Damon

@ Damon его просто, что использование svg-тега позволяет использовать больше атрибутов и ролей арии, а также дочерние узлы, которые могут воспользоваться преимуществами вспомогательных технологий. – cfnerd

полностью понять это. Но я не думаю, что вложение должно быть требованием для их функционирования. Управление встроенными svgs может быть немного сложной задачей – Damon

я столкнулся с аналогичной проблемой на прошивке 10.1.1, где в подобных случаях, VoiceOver будет признать ссылку, но не буду читать alt текста на изображении в:

<a href="index.html"><img src="image.svg" alt="Logo"></a>

В связи с данным вопросом, VoiceOver будет не подтвердите <img> с svg как src и, таким образом, не прочитает его текст alt.

Я был в состоянии работать вокруг этого путем добавления избыточного role="img" к <img>:

<img src="image.svg" alt="Logo" role="img">

Судя этих потоков отчетов ошибка, это, кажется, не только в том случае, когда SVG не имеет доступное содержимое.

источник

2016-11-16 09:52:26 mirka

Как сделать VoiceOver ссылкой с SVG внутри?

ответ

Смежные вопросы