Making buttons accessible

Question

I am having trouble making my buttons accessible highlight when tabbed, It is not working I have looked on MDN and W3 schools I have tried ARIA: button role on MDN and its not working.

Hello I am sorry, I am making a calculator. the buttons on the calculator need to be accessible to the visually impaired. I am trying to make the Clear button or first button be highlighted and the rest of the buttons be able to be accessed by the tab key

This is the html for the buttons. Should I use span instead?

 <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> 

I am having trouble making my buttons accessible highlight when tabbed, It is not working I have looked on MDN and W3 schools I have tried ARIA: button role on MDN and its not working.

Answer 1

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

Answer 2

Try this code and add all css class for all button.

 $('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> 

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

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