0Pricing
Web Accessibility Academy · Урок

Встроенный SVG: роль img и заголовок

Давайте значимой графике имя, понятное пользователям программ чтения с экрана.

«Встроенный SVG: роль img и заголовок» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

A Picture With No Words

An inline SVG draws shapes the eye loves, but a screen reader sees a pile of paths and says nothing useful about it. 🖼️

Meaningful or Just Pretty?

Before naming anything, ask one question: is this graphic meaningful or purely decorative? Your whole markup choice flows from that answer.

Tell the Browser It Is an Image

For a meaningful graphic, add role="img" so assistive tech treats the whole SVG as one image instead of loose shapes.

<svg role="img" viewBox="0 0 24 24">
  <path d="M12 2 L22 22 H2 Z" />
</svg>

Give It a Name With title

A <title> inside the SVG supplies the accessible name a screen reader will read aloud for the graphic.

<svg role="img" viewBox="0 0 24 24">
  <title>Warning</title>
  <path d="M12 2 L22 22 H2 Z" />
</svg>

Put title First

Place <title> as the very first child of the SVG. Some screen readers only pick it up reliably when it comes before the shapes.

Connect It With aria-labelledby

For rock-solid support, give the title an id and point to it with aria-labelledby on the svg element.

<svg role="img" aria-labelledby="t1">
  <title id="t1">Search</title>
  <path d="..." />
</svg>

aria-label as a Shortcut

Short on markup? An aria-label on the svg names it directly, no child title needed. It also overrides any inner title text.

<svg role="img" aria-label="Home">
  <path d="M3 11 L12 3 L21 11" />
</svg>

Name the Meaning, Not the Shapes

Write the name as the graphic's purpose, like Download, not its visual parts like a down arrow over a line.

desc Adds Longer Detail

Need more than a short name? A <desc> element holds a longer description, paired via aria-describedby for extra context.

<svg role="img" aria-labelledby="t2" aria-describedby="d2">
  <title id="t2">Sales chart</title>
  <desc id="d2">Revenue rose each quarter in 2025.</desc>
</svg>

focusable Trips Up IE Legacy

Old browsers let SVGs grab keyboard focus. Adding focusable="false" keeps a non-interactive graphic out of the tab order.

<svg role="img" focusable="false" aria-label="Star">
  <path d="..." />
</svg>

Verify in the Inspector

Open your browser's accessibility panel and confirm the SVG shows as an image with the exact name you intended.

Quick Check

You want a meaningful inline SVG to be announced as a single image with a spoken name. Which combination does that?

Recap: Name the Meaningful

Meaningful SVGs get role="img" plus a title or aria-label naming their purpose. Inspect to confirm, and your graphics finally speak. ✅

Часто задаваемые вопросы

Урок «Встроенный SVG: роль img и заголовок» бесплатный?

Да — полный текст урока «Встроенный SVG: роль img и заголовок» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.

Чему я научусь в уроке «Встроенный SVG: роль img и заголовок»?

Давайте значимой графике имя, понятное пользователям программ чтения с экрана. Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Web Accessibility Academy?

Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Встроенный SVG: роль img и заголовок»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Web Accessibility Academy?

Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Встроенный SVG: роль img и заголовок
  2. Скрытие декоративных значков с помощью aria-hidden
  3. Кнопки со значками, у которых всё ещё есть имя
  4. Шрифты значков и их проблемы с доступностью
← Назад к Web Accessibility Academy