Доступность текста SVG

У меня следующая структура

<h2>
  <svg viewBox='-5 -40 100 50'>
    <!-- some filters that get applied on the elements below -->
    
    <clipPath id='c'>
      <text id='t'>Scooby</text>
    </clipPath>
    
    <g clip-path='url(#c)'>
      <rect x='-5' y='-40' width='100%' height='100%'/>
      <path/>
    </g>
    
    <use xlink:href='#t'/>
    <use xlink:href='#t'/>
  </svg>
</h2>

Как я могу гарантировать, что text внутри clipPath («Скуби») будет виден программами чтения с экрана и только один раз?

Я знаю, что SVG text должен читаться программами чтения с экрана, но это все еще так, когда он находится внутри элемента clipPath? А как насчет его копий use?

Я использую эту структуру, чтобы получить некоторые причудливые эффекты (например, такие вещи) в тексте заголовка (и отказаться от изображения .jpg, которое в настоящее время используется).

svg text accessibility screen-readers

26.10.2018 08:04

Создание фильтров для вашего сайта

Фильтры - удобный инструмент в арсенале веб-дизайнера. Они позволяют изменять элементы на странице с помощью всего нескольких строк кода. Эти...

Анимация SVG-узоров без единой строки CSS

Недавно я работал над веб-проектом, который позволил мне поэкспериментировать с шаблонами SVG. С SVG очень приятно работать, как только вы получите...

Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?

D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...

500

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Добавьте aria-hidden к чтению экрана подавлять для определенных элементов, он прочитает "Scooby" только один раз:

<h2>
  <svg viewBox='-5 -40 100 50'>
    <!-- some filters that get applied on the elements below -->

    <clipPath id='c'>
      <text id='t'>Scooby</text>
    </clipPath>

    <g clip-path='url(#c)'>
      <rect x='-5' y='-40' width='100%' height='100%'/>
      <path/>
    </g>

    <use aria-hidden = "true" xlink:href='#t'/>
    <use aria-hidden = "true" xlink:href='#t'/>
  </svg>
</h2>

26.10.2018 08:26

Атрибут aria-label предназначен для использования, когда текст не отображается на экране.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

<h2 aria-label = "Scooby">
  <svg> ... </svg>
<h2>

или, наоборот, я считаю, что большинство программ чтения с экрана будут использовать элемент SVG <title>.

<h2>
  <svg>
    <title>Scooby logo</title>
    ...
  </svg>
<h2>

У вас также есть возможность использовать другие атрибуты ARIA, например aria-labelledby.

<title> (или <desc>) - твердый общий совет, хотя вашему фрагменту кода все равно потребуется aria-hidden, как в моем ответе

— 26.10.2018 10:19

26.10.2018 08:51

Ответ принят как подходящий

Удалите SVG из программы чтения с экрана с помощью aria-hidden и определите метку для вашего h2 с помощью aria-labelledby.

<h2 aria-labelledby = "t">
  <svg viewBox='-5 -40 100 50' aria-hidden = "true">
    <!-- some filters that get applied on the elements below -->

    <clipPath id='c'>
      <text id='t'>Scooby</text>
    </clipPath>

    <g clip-path='url(#c)'>
      <rect x='-5' y='-40' width='100%' height='100%'/>
      <path/>
    </g>

    <use xlink:href='#t'/>
    <use xlink:href='#t'/>
  </svg>
</h2>

@RobertMonfera, у меня это работает в Chrome, используя NVDA

— 26.10.2018 11:18

Это лучший / самый простой подход для программ чтения с экрана. Обратной стороной является то, что это не влияет на копирование и вставку: некоторые браузеры копируют и вставляют две копии вашего текста (для текстовых элементов shadow-DOM в двух элементах <use>), некоторые ничего не получат (потому что они не обрабатывают теневые копии как настоящий текст). Текст внутри clipPath никогда не доступен или недоступен для выбора.

— 26.10.2018 20:09

26.10.2018 10:11