Доступный атрибут для рейтинга для всех людей

Question

Я пытаюсь добавить атрибут accessiblity к своим звездам в TotalRating... можете ли вы сказать мне, какой атрибут мне нужно добавить... Я добавил метку arial со значением, заданным для этого атрибута... но он не работает... можете ли вы скажите мне, что мне нужно добавить.. предоставив мой код ниже...

это мой сгенерированный код

<div class="OverallRating" aria-label="0"><i class="OverallRating__star small-star"></i>
    <div class="OverallRating__filled" style="width: 0%;"><i class="OverallRating__star small-star"></i>
    </div>
</div>

Answer 1

Конечно, вы хотели бы сохранить aria-label атрибут, но, вероятно, также добавить простой title атрибут:

{ 'title': 'Your hover text' }

Различные браузеры и специальные программы читают разные атрибуты (или порядок их чтения различен).

Answer 2

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

Если вы дополнительно используете атрибут title="0", может быть еще некоторая поддержка, так как title атрибут старый и может иметь лучшую поддержку. Однако многие вспомогательные технологии говорят о его значении только по желанию, в зависимости от пользовательских настроек, которые по умолчанию часто отключены.

Чтобы сделать код доступным, его необходимо переработать. Теперь он опирается исключительно на таблицы стилей. Если таблицы стилей отключены, содержимое полностью пустое. Лучше всего использовать изображения. Наиболее доступным было бы создать, скажем, шесть изображений, представляющих 0 tp 5 звезд, с адекватным alt атрибуты, например <img src="stars0.png" alt="no stars">,