Доступный поддельный флажок со ссылкой в ​​ярлыке

Question

Я пытаюсь сделать поддельный флажок доступным.У меня есть эта разметка:

<label role="checkbox" aria-checked="false" aria-labelledby="acceptedAgreementLabel" tabindex="0" >
    <span><!-- FAKE CHECKBOX ICON --></span>
    <span id="acceptedAgreementLabel">Jag bekräftar att jag tagit del av och godkänt 
        <a target="_blank" href="/anvandarvillkor">användarvillkoren</a> för Vinos.
    </span>
</label>

Как бы то ни было, при попытке сделать это с VoiceOver, он пропускает флажок и останавливается только на ссылке внутри описания.Я не уверен, что я делаю не так?

Answer 1

Вы фактически пытаетесь объединить элемент ввода и элемент метки в одно, и это почти наверняка приведет к непредсказуемым результатам.Вот почему так важно следовать установленным стандартам доступности.

Здорово, что вы используете Voiceover для тестирования, но результаты того, что вы здесь делаете, могут быть очень непредсказуемыми в других программах чтения с экрана /настройки браузера.Кроме того, поведение, которое вы получаете сегодня, может измениться с обновлениями продукта.

Если есть какая-то причина, вы не можете использовать реальный элемент ввода для своего флажка, тогда рассмотрите возможность использования универсального div с ролью флажка вместо того, что вы делаете здесь.

• MDN Web Docs - Документация по роли флажка ARIA
• Элементы управления маркировкой формы W3C - Неявная маркировка входных данных HTML

Answer 2

Вместо метки попробуйте использовать тег привязки, он будет работать как положено