Как добавить роль кнопки в пользовательский элемент в angular, чтобы сделать его доступным для программы чтения с экрана?

Question

У меня есть пользовательский компонент в angular, который обрабатывает изображения. У меня есть альтернативный текст для ввода элемента, и программа чтения с экрана подбирает его, чтобы произнести его. Но всякий раз, когда я вкладываю изображение, появляется надпись «Tra sh». Я хочу, чтобы программа чтения с экрана считывала ее как кнопку «Tra sh». Как мне этого добиться? Ниже приведена моя текущая реализация:

Icn-компонент:

<img [ngClass]="class" [file]="file" [alt]="alt">

Использование:

<icn class="del-icon" [file]="'trash'" [alt]="Trash"></icn>

Я пробовал role = "button", но это не сработало. Любая помощь / руководство приветствуется.

Answer 1

Я не знаю Angular, поэтому вам, возможно, придется покопаться в том, как это структурировать, но ваш подход усложняет задачу.

Вместо этого сделайте кнопку <button>. Таким образом, вы получаете встроенную встроенную доступность (например, доступ по умолчанию через вкладку, принимает фокус, имеет hover и focus состояния и т. Д. c.), А также вы получаете правильные объявления в программах чтения с экрана.

Затем поместите значок внутри <button> и просто стилизуйте его соответствующим образом.

<button> <!--add whatever directives angular requires here-->
   <img [ngClass]="class" [file]="file" [alt]="alt">
</button>

Также вы можете рассмотреть возможность использования встроенных SVG для ваших значков, поскольку они предлагают варианты стилей и могут изменять цвет в соответствии с пользователем. предпочтения. Это также на один ресурс меньше для загрузки, поэтому поможет с производительностью.

Answer 2

Я нашел решение этой проблемы, поэкспериментировав с ролями.

Тег изображения не принимает в качестве атрибута role = "button". Вместо этого необходимо назначить роль родительскому элементу тега изображения, т. Е. В моем случае компонент icn выглядит следующим образом:

<icn class="del-icon" role="button" [file]="'trash'" [alt]="Trash"></icn>

Теперь программа чтения с экрана считывает «Tra». sh button 'и дает дополнительные инструкции о том, как взаимодействовать с кнопкой. А также, если вышеперечисленное не работает, просто добавление пользовательского компонента в тег span и назначение role="button" тегу span работает как шарм.

<span class="del-btn-container" role="button">
   <icn class="del-icon" [file]="'trash'" [alt]="Trash"></icn>
</span>

Примечание: Роль кнопки примеры