Как сделать элемент игнорируемым голосом, но читаемым с помощью голосового управления ⇐ CSS

[Anonymous]

Я создаю инструмент специальных возможностей, в котором есть кнопка переключения, при наведении на нее курсора открывается меню дополнительного контента. Чтобы сделать его доступным для людей с ограниченными возможностями моторики, я создал скрытый элемент, который выполняет функцию наведения курсора на кнопку, так как отображаемые номера голосового управления и имя пользователя смогут понять, что кнопка выполняет 2 действия: переключение и дополнительное меню содержимого.
Это решит проблему двигательной инвалидности с помощью голосового управления, но не будет работать для пользователей голосового управления (программ чтения с экрана), поскольку использование навигационных клавиш для голосового управления (ctrl + opt + клавиша со стрелкой) переместит фокус на скрытый элемент и сбивает с толку пользователей.
Я создал небольшой POC

https://codepen.io/code-freaking/pen/XWQqXJV


Button







.parent {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}

.button{
width: 40px;
height: 20px;
background: green;
padding: 2px;
position: relative;

}

.hiddenelement{
width: 1px;
height: 1px;
opacity: 0;
position: absolute;
left: 0;
top:0;
z-index: -1;
pointer-events: none;

}


Подробнее здесь: https://stackoverflow.com/questions/782 ... ce-control