制作可点击的< div>通过标签结构可访问? [英] Making a clickable <div> accessible through tab structure?

问题描述

所以我正在一个需要<div>和onclick事件的项目中工作.我已经完成了主要功能，但是有一个问题.当用户切换到<div>并按Enter时，我需要发生onclick事件.我在<div>上添加了一个tabindex，它可以使它获得焦点，但是当用户按下Enter键(或任何其他键)时，什么也没发生.

So I am working on a project that requires a <div> with an onclick event. I've got the main functionality working, but there is one problem. I need the onclick event to happen when the user tabs to the <div> and presses enter. I added a tabindex to the <div> which allows it to gain focus, but nothing happens when the user presses enter (or any other key).

有人可以帮我吗?还是我什至想不到?

Can anyone help me with this? Or is what I want not even possible?

这是一个演示我的问题的jsfiddle. http://jsfiddle.net/logiwan992/suwq7r09/

Here is a jsfiddle demonstrating my problem. http://jsfiddle.net/logiwan992/suwq7r09/

在此先感谢您的帮助.

推荐答案

我注意到这个问题被标记为WCAG和可访问性".

I note the question is tagged WCAG and "accessibility".

因此，对您的问题的答案是不要那样做".此页面上的其他答案对所有需要的人都适用，除了需要使用它的人(即使用屏幕阅读器或其他辅助技术的人)之外.这里所有基于javascript的解决方案都不符合WCAG.

The answer to your question is therefore "don't do that." The other answers on this page will all work fine, for everyone except the people who need it to work, i.e. those using screenreaders or other assistive technology. None of the javascript-based solutions here are WCAG compliant.

您想要的是<button>.这使您可以免费使用tabindex和键盘控件.

What you want is a <button>. That gives you your tabindex and keyboard control for free.

您还可以通过添加ARIA标记来强制<div>像<button>一样工作(尽管仅使用已经完成您需要执行的操作的标记会更好，更容易.)

You can also force a <div> to work like a <button> by adding ARIA markup (though it's better and easier to just use the tag that already does what you need it to do.)

如果绝对必要，请在此处很好地介绍如何将ARIA用于伪按钮: https://developer.mozilla.org/zh-CN /docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role

If absolutely necessary, a good introduction to using ARIA for pseudo-buttons is here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role

其要点是，您需要添加role="button"属性，并手动管理aria-pressed属性的状态(通过捕获javascript中的关键事件和点击；其他答案已经相当详尽地涵盖了这一点，所以我赢了'不再重复细节)

The gist of it is, you need to add the role="button" attribute, and manage the state of the aria-pressed attribute manually (by capturing key events and clicks in javascript; other answers have covered this pretty thoroughly so I won't repeat the details)

这篇关于制作可点击的< div>通过标签结构可访问?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！