У меня есть компонент звездного рейтинга, который в настоящее время имеет следующую семантику.SVG - это просто звезды.
<div role='img' aria-label="6 out of 6 ratings">
<svg role="presentation"></svg>
<svg role="presentation"></svg>
<svg role="presentation"></svg>
<svg role="presentation"></svg>
<svg role="presentation"></svg>
<svg role="presentation"></svg>
</div>
Я использовал роль арии role='img', так как хочу, чтобы в идеале я воспринимал это изображение как одно изображение.Затем я использовал роль арии role='presentation' на SVG, так как я думаю, что только SVG не предоставляют никакой дополнительной информации, поэтому хочу удалить семантическое значение для SVG и его детей.Я прочитал о роли представления здесь.
Я прочитал статью о доступности SVG, и они идут с немного отличающимся подходом.Вот пример, который они приводят:
<body>
...
<svg xmlns=http://www.w3.org/2000/svg role="img" aria-labelledby="title desc">
<title id="title">Circle</title>
<desc id="desc">Large red circle with a black border</desc>
<circle role="presentation" cy="60" r="55" stroke="black" stroke-width="2"
fill="red" />
</svg>
…
</body>
- Они используют
role='img в svg.Я считаю, что это не относится к моей ситуации, и было бы лучше, чтобы я оставил role='presentation' в моем SVG? - Они используют
title и desc.Я полагаю, что как одна звезда SVG не принесет никакой дополнительной выгоды пользователю?Кроме того, при наведении курсора на SVG будет отображаться название (и desc?), Которое мне не нужно.
Возвращаясь к моему примеру того, как оно у меня сейчас:
- Что я могу сделать, чтобы улучшить доступность / семантический дизайн, чтобы сделать его более удобным для пользователя?
- Правильно ли я использовал правильную роль арии для контейнера и SVG?
- Должен ли я бытьМожно ли просмотреть мое рейтинговое изображение (в целом) относительно считываемой метки арии?
- Какие еще атрибуты арии я должен использовать?
Lookingна примере semantic-ui у них нет ролей арии из того, что я вижу.