1

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.

TheGreen Lightbulb
  • 163
  • 13
  • 1
    What exactly do you mean by "making my buttons accessible highlight when tabbed?" – tshimkus Apr 02 '19 at 00:52
  • 1
    The buttons 'highlight' for me using the default browser caret/focus when I use the tab key after using the `Run code snippet` button above, so more detail is needed. – Paul T. Apr 02 '19 at 02:01
  • why do you have id values like this -> id="%" , id="*" ? never seen that before – Vishwa Apr 02 '19 at 03:34
  • 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 the arrow keys – TheGreen Lightbulb Apr 02 '19 at 04:26
  • Possible duplicate of [Detecting arrow key presses in JavaScript](https://stackoverflow.com/questions/5597060/detecting-arrow-key-presses-in-javascript) – Martin Zeitler Apr 02 '19 at 04:29

2 Answers2

0

Add the insert the "button" tag into a "a href=""" tag

Tobenteeny
  • 1
  • 2
0

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>
Manish Vadher
  • 1,524
  • 15
  • 14