Поддержка специальных возможностей для клавиатуры с элементом span - PullRequest
Новая
       72

Поддержка специальных возможностей для клавиатуры с элементом span

0 голосов
/ 01 мая 2020

У меня есть несколько элементов, которые можно нажимать и работать как кнопки. Тем не менее, они не видны читателям экрана. Чтобы исправить это, я пытаюсь добавить функцию, которая добавит такую ​​поддержку любому элементу, для которого роль установлена ​​как кнопка. 

<span role="button">clickable</span>

Я написал эту jQuery функцию, но она не совсем работает , 

$(document).on("keypress", "[role='button']", function(e) {
    var code = e.which;
    // 13 = Return, 32 = Space
    if ((code === 13) || (code === 32)) {
        $(this).click();
    });
}

Чего мне не хватает?

Ответы [ 2 ]

2 голосов
/ 01 мая 2020

Почему бы просто не использовать <button> - вы можете оформить их так, чтобы они выглядели как <span>, и воспользоваться всеми встроенными функциями.

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

важно - ниже показано Вы, как «сбросить» <button> - пожалуйста, не используйте это в производстве, не добавляя некоторые различия между кнопкой и окружающим текстом. 

html{
   font-size: 1em;
}
.like-span{
  background: none; /*essential*/
	border: none; /*essential*/
	padding: 0; /*essential*/
	font: inherit; /*important as otherwise the text will look slightly different*/
  color: inherit; /*if you want the span the same colour as the rest of the sentence*/
	cursor: pointer; /*make sure you add this, but if you really want it to behave like a span you would leave this out*/
	outline: inherit; /*I would not recommend this as it removes focus indicator, but is fine as part of a reset if you are adding your own style */
}
.blue{
    color: blue;
}
<p>This is a sentence with a <button class="like-span">button</button> that looks just like a span</p>
<p class="blue">This is a sentence with a <button class="like-span">button</button> that looks just like a span</p>
2 голосов
/ 01 мая 2020

<span> с обычно не фокусируются; без фокуса он не будет захватывать нажатия клавиш.

Вы можете поставить на него tabindex, как описано на странице роли кнопки MDN .

При проектировании для обеспечения доступности особенно при использовании нестандартных элементов UX в качестве входов UX, tabindex становится супер-важным ... и супер-раздражающим.

...