Когда вы используете inline-SVG без текстового пояснения (например, как пиктограмму на кнопке), то неплохо было бы снабдить это изображение заголовком. В SVG-документе есть описательные теги: <title>, <desc>, <metadata>. Для наших целей хорошо подходит тег <title>.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document title</title>
</head>
<body>
<p>This is a test page</p>
<button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="32" height="32">
<title>Next page</title>
<polygon points="15,7 11,11 20,20 11,29 15,33 28,20"/>
</svg>
</button>
<p>Actually, there is no next page here.</p>
</body>
</html>
Содержимое <title>
не отображается, но может использоваться вспомогательными технологиями.
Более того, каждый графический элемент может иметь собственный заголовок.
Таким образом, нарушая все запреты о наличии только одного тега
<title>
на странице, мы получили абсолютно валидный документ с несколькими тегами.