I am still on JavaScript basics. I decided to do one of the projects and built myself a calculator. It wasn’t difficult since JavaScript had a built-in function eval(). I wanted to share and tell me what you guys think
https://codepen.io/iicestudio/full/JjWKQYj
Version II
https://codepen.io/iicestudio/full/MWppjWq
Version III
https://codepen.io/iicestudio/full/jOBBerj
It looks okay @iicestudio. Some things,
On a side note, I don’t believe the JS section has you build a JS calculator. That’s in the front-end section and you’ll want to use React to build the calculator.
Completed
I got this fixed
Yeah I cannot go on React yet. I don’t even have a solid grasp of JavaScript. And thank you for your feedbacks as always
Do you have an updated codepen link that includes this accessibility enhancement?
It should be the same link
OK, the calculator at that link still isn’t quite keyboard accessible. One of the basic rules of accessibility is to use the semantically correct HTML element when available. I would say that all of the buttons on your calculator are in fact “buttons” and thus should be using the <button> element instead of <div>. Change them all to <button> and you will automatically gain all the keyboard accessibility you need.
FYI, these buttons are not accessible right now because I cannot Tab to them with my keyboard and thus I can’t “click” on them with my keyboard.
I can change them into buttons but why use Tab when you can just press the numbers
Good question. Some screen readers may hijack certain keys and thus the user won’t be able to just press on a key and have it work the way you want it to, especially since this isn’t a form so the screen reader won’t go into form mode but rather stay in document mode. Some browsers may also hijack certain keys. For example, when I press “/” using Firefox my browser opens up a search bar and the focus goes directly into that bar, so I can’t just press the “/” key and use it in your calculator. The Tab key is special and will never do anything other than move you to the next focusable element (or backwards to the previous focusable element if you hold down Shift), so Tab is guaranteed to work no matter what screen reader/browser someone is using. Tab is basically the foundation of keyboard accessibility and you should always be able to Tab to all focusable/interactive elements on the page.
But really, as I mentioned earlier, one of the basic rules of accessibility is that you should use the semantically appropriate element when possible and clearly these are buttons and thus you should use a <button>. Technically, there is a way you could continue to use <div> but it requires extra work, both in the HTML and with JS, and I’m not going to elaborate further on that because I don’t see any reason why you shouldn’t just use <button>s. I can tell you from personal experience that my projects would never pass accessibility audits where I work if I used a <div> for an obvious <button>.
My JavaScript skills were lacking so I kept redoing my calculator. And I wanted to share the result
It’s good to play. That’s how we learn. Some takeaways,
Yeah I noticed that but my primary focus was to expand my JavaScript skills. I will focus more on the UX once I get to the calculator project using React
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.