Question

我在将我的按钮设置为选项卡时无法使按钮可访问突出显示，但我无法在MDN和W3学校中查看我尝试了ARIA：在MDN上的按钮角色，但无法正常工作。

你好，对不起，我正在做一个计算器。视障人士必须可以使用计算器上的按钮。我正在尝试突出显示“清除”按钮或“第一个”按钮，然后使用Tab键访问其余按钮

这是按钮的html。我应该改用跨度吗？

<div id="keyboard">
  <button class="operator addMore" title="Clear" id="clear">C</button>
  <button class="operator" id="backspace">CE</button>
  <button class="operator" id="%">%</button>
  <button class="operator" id="/">&#247;</button>
  <button class="number" id="7">7</button>
  <button class="number" id="8">8</button>
  <button class="number" id="9">9</button>
  <button class="operator" id="*">&times;</button>
  <button class="number" id="4">4</button>
  <button class="number addMore" title="Number 5">5</button>
  <button class="number" id="6">6</button>
  <button class="operator" id="-">-</button>
  <button class="number" id="1">1</button>
  <button class="number" id="2">2</button>
  <button class="number" id="3">3</button>
  <button class="operator" id="+">+</button>
  <button class="empty" id="empty"></button>
  <button class="number" id="0">0</button>
  <button class="number" id="decimal">.</button>
  <button class="operator" id="=">=</button>
</div>
So far I got this this from my research.

<script>
document.onkeydown = checkKey;

function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '38') {
        // up arrow
    }
    else if (e.keyCode == '40') {
        // down arrow
    }
    else if (e.keyCode == '37') {
       // left arrow
    }
    else if (e.keyCode == '39') {
       // right arrow
    }

</script>

使用选项卡时，我无法使按钮的可访问性突出显示，这是行不通的，我曾尝试过ARIA：在MDN和W3学校中尝试过的ARIA：在MDN上的按钮角色，并且不起作用。

Answer 1

将“ button”标签插入“ a href =“”标签

Answer 2

尝试此代码，并为所有按钮添加所有CSS类。

let data = response.result.value as! NSDictionary

print(data)

if data["error-code"] != nil {
    if data.object(forKey: "error-code")as! String == "\(200)"
    {

        let arrTimer = ((data.object(forKey: "data") as! NSDictionary).object(forKey: "timers") as! NSArray).mutableCopy() as! NSMutableArray

        UserDefaults.standard.set(arrTimer , forKey: "ArrayTimer")
        UserDefaults.standard.set((data.object(forKey: "data") as! NSDictionary), forKey: "Login_Data")

$('body').on('keydown', '#keyboard', function(e) {
  debugger;
  var focusName = $(document.activeElement).html();
  $(document.activeElement).addClass(focusName);
  if (e.which == 13) {
    e.preventDefault();
  }
});

.c {
  background-color: red;
}

.ce {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="keyboard">
  <button class="operator addMore" title="Clear" id="clear">C</button>
  <button class="operator" id="backspace">CE</button>
  <button class="operator" id="%">%</button>
  <button class="operator" id="/">&#247;</button>
  <button class="number" id="7">7</button>
  <button class="number" id="8">8</button>
  <button class="number" id="9">9</button>
  <button class="operator" id="*">&times;</button>
  <button class="number" id="4">4</button>
  <button class="number addMore" title="Number 5">5</button>
  <button class="number" id="6">6</button>
  <button class="operator" id="-">-</button>
  <button class="number" id="1">1</button>
  <button class="number" id="2">2</button>
  <button class="number" id="3">3</button>
  <button class="operator" id="+">+</button>
  <button class="empty" id="empty"></button>
  <button class="number" id="0">0</button>
  <button class="number" id="decimal">.</button>
  <button class="operator" id="=">=</button>
</div>

使按钮可访问

2 个答案: