Скрыть чисто декоративный элемент для чтения с экрана?

Question

Аналогичный вопрос здесь задал Hide text ONLY for screen readers рекомендация была использовать aria-hidden, и это не похоже на работу с изображениями и SVG.

У меня есть SVG, который является просто строкой, поэтому я не хочу, чтобы считыватели экрана читали его. В настоящий момент устройство чтения с экрана читает «изображение» при прохождении этого SVG.

Я пробовал aria-hidden="true", role="presentation", style="speak:none;", tabindex="-1" и все вместе, но никто не работал. Я тестировал Mac OSX 10.11.5 Voice Over, который ВСЕГДА читал слово «изображение». Невозможно скрыть декоративные предметы от читателей экрана? Как вы справляетесь с этим?

<h2 class="copy works__title"> 
    portfolio 
    <svg xmlns="http://www.w3.org/2000/svg" role="presentation" aria-hidden="true" class="zigzag--small"> 
    <use role="presentation" xlink:href="assets/svg/sprite.svg#zigzag-small"></use> 
    </svg> 
</h2> 

Answer 1

Все права так

• Это кажется Firefox ошибка (46.0.1) с VoiceOver на Mac OSX 10.11.5

Я сделал много больше тестов: кажется, что было бы невозможно подавить чтение некоторых элементов в firefox (по крайней мере для VoiceOver на Mac). Я пробовал несколько вещей, и я не мог скрыть изображения и svg, если они не являются частью более сильного контекста, поскольку в теге. Но в нормальном контексте любое изображение со всеми этими причудливыми тегами aria-hidden="true", role="presentation", style="speak:none;", tabindex="-1" и удалением тега alt или оставлением тега alt будет иметь VoiceOver для чтения «изображения» (даже для svg) - где слепой может чувствовать себя опущенным ... Однако это работает во всех других браузерах ... Позор FF :(

Если кто-нибудь знает решение/хак, пожалуйста, поправьте меня.

Answer 2

Существует открытая ошибка с Firefox, который сам собирает ошибки, связанные и зависимостей. It в последний раз видел деятельности 20 января 2016 года, в то время как связанные ошибки не были обновлены недавно.

Некоторые из этих ошибок:

• Bug 974351 - (aria-hidden) [meta] aria-hidden implementation (агрегирующего ошибка)
• Bug 948540 - aria-hidden ignored by VoiceOver
• Bug 1123248 - incorrect accessible name calculation - includes hidden content
• Bug 974351 - (aria-hidden) [meta] aria-hidden implementation
• Bug 1147359 - aria-hidden state not honoured with CSS generated content

В этой ситуации вы, вероятно, следует включать в себя доступное имя, говоря пользователям, что это декоративный. Существует замечательная статья, которая может быть полезна: Tips for Creating Accessible SVG

Answer 3

Вы можете установить пустой текстовый вариант. Тогда браузер должен считать, что это чисто декоративный образ

<svg aria-labelledby="svgtitle1"> 
    <title id="svgtitle1"></title> 
    [other svg code] 
</svg>