Svg внутри тега h1

Два способа решить эту проблему: визуально скрытый текст или добавление <title> к вашему SVG.

Не используйте aria-label, так как поддержка невелика (вы увидите, что люди рекомендуют это для SVG, aria-label обычно плохо работает со статическими / неинтерактивными элементами).

Визуально скрытый текст (только текст для чтения с экрана)

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

Пожалуйста, используйте класс 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 */
}

<h1>
  <span class = "visually-hidden">Welcome To Our Site</span>
    <svg aria-hidden = "true" focusable = "false" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 576 512">
        <path fill = "#666" 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>
</h1>

важно: обратите внимание, как я добавляю focusable = "false" и aria-hidden = "true" в SVG, это делается для исправления ошибки в Internet Explorer, из-за которой SVG можно сфокусировать, и чтобы скрыть SVG от средств чтения с экрана. Я использовал значок YouTube для представления вашего текста, так как это был самый близкий SVG, который у меня был!

Добавьте элемент <title> в свой SVG.

Элемент <title> фактически такой же, как alt на обычном изображении. Использование этого дает средству чтения с экрана что-то объявить.

Очевидно, вы затем удалите aria-hidden = "true" из него, чтобы он мог быть прочитан программой чтения с экрана!

Обновление после комментариев, чтобы включить лучшие практики для <title> и или <desc>

Благодаря комментариям я понял, что в этом ответе не хватает ключевой информации о том, как правильно использовать <title>.

В этом ответе я дал я сослался на серию тестов deque, которые показывают, что наиболее надежным методом маркировки SVG для программ чтения с экрана с помощью WAI-ARIA было использование aria-labelledby и указание на <title> (и <desc>, если вы есть оба).

Итак, примерное представление о том, как это сделать, выглядит следующим образом:

<h1>
    <svg aria-labelledby = "welcome-title" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 576 512">
        <title id = "welcome-title">Welcome To Our Site</title>
        <path fill = "#666" 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>
</h1>

Как лучше?

Используйте визуально скрытый текст.

Он работает вплоть до IE6, который предшествует SVG!

Он также работает в текстовом браузере (тот, который не понимает CSS), поскольку он все равно будет отображаться. Это крайний случай, но все же выигрыш для визуально скрытого текста!