Остановить чтение с экрана, читая href в <a>

Question

У меня есть тег привязки, определенный ниже:

<a href="www.abc.com">
  <div tabindex="0" aria-label="XXXX"> 
   ...
  <div>
</a>

В настоящее время программа чтения с экрана считывает содержимое тега href в <a>.Однако я не хочу, чтобы href читался, а содержимое в aria-label в div.

Я хотел бы знать, как правильно достичь цели?

Answer 1

Добавьте атрибут aria-hidden=“true” к <a>, чтобы скрыть его от программ чтения с экрана.Это также скроет его дочерние элементы, поэтому добавьте aria-hidden=“false” к <div>, чтобы убрать его.

Answer 2

Ваш

не имеет никакого семантического значения, поэтому aria-label по существу будет игнорироваться.См. https://www.w3.org/TR/using-aria/#label-support. В частности, третий последний пункт маркированного списка:

• Не используйте aria-label или aria-labelledby для или , если это не указанороль.

Вы делаете , а не хотите tabindex="0" для элемента, который не может быть активным или интерактивным.

Просто поместите свой aria-label на якорьсамо по себе:

<a href="www.abc.com" aria-label="XXXX">

Обратите внимание, что если в вашей якорной ссылке есть какой-либо видимый текст (у вас есть "..." в вашем примере кода, поэтому я не был уверен, был ли там какой-либо текст), сделайтеубедитесь, что aria-label содержит тот же текст, а также любой дополнительный текст, который вы хотите.Если вы этого не сделаете, то пользователи речевого интерфейса не смогут выбрать вашу ссылку.

Answer 3

удалить aria-label из элементов или вы можете использовать aria-hidden="true"

<a href="" aria-hidden="true">Screen reader cannot read me</a>

Чтобы узнать больше об этой проверке здесь