• Keyboard support MUST be present for all interactive elements in the calculator.
• Accessible name MUST be defined for all interactive elements in the calculator. For more information, refer to the Images and Buttons with Identical Names components.
• For color contrast requirements pertaining to textual and non-textual content, refer to the Color Contrast component.
  For example –
  • For textual interactive elements and textual results displayed, the color contrast MUST be at least 4.5:1 against the background color if it is standard text in default state (in case of interactive elements, it is applicable in focused and hover states as well).
  • The contrast requirement of 3:1 ratio MUST be met with the adjacent colors for the custom focus indicator for the interactive elements.
• Provide an accessible name to the input field used to display the calculated answer using a title or aria-label attribute.
• On activating any of the interactive elements used to enter the values to be calculated, ensure that dynamic updates are announced for screen reader users.
  • Provide aria-live="polite" attribute or role="status" to the container such as <div> element used to display the results. This will ensure the dynamic update to the screen reader users is announced. For more information on how to handle the announcements, refer to the Dynamic Update component.
• A clear focus indicator SHOULD be provided for all interactive components in the calculator.
• Provide keyboard shortcuts for users so that they can easily access the calculator. For example, a keyboard shortcut to switch focus between the keypad and the answer area can be provided for ease of access. For more information on ensuring the keyboard shortcuts are implemented in an accessible manner, refer to the Character Key Shortcuts component.
• Ensure that all elements of the calculator ARE visible in Windows High Contrast mode.
• Ensure that text CAN be resized at 200% zoom and reflow at 400% zoom modes. For more information on meeting this requirement, refer to the Reflow component.
• An Esc key mechanism SHOULD be implemented to clear the values. Also, feedback SHOULD be announced when the values are cleared. For example, feedback stating, the values cleared from the screen.
• The value entered SHOULD get calculated in the answer area using an Enter key. For example, if any value is entered in the field that is to be calculated (5+5), on pressing Enter key, the results should be displayed.
• The screen and the control areas CAN be defined within a region along with an accessible name for the region. For more information, refer to Landmarks component.
• All the interactive elements SHOULD be navigable using Tab and Shift+Tab keys. Also, they SHOULD be navigable using arrow keys (e.g., left, right)
  For example,

  <div class="calc">
      <div class="calc__header">
          <h1 class="calc__heading">Calculator</h1>
      </div>
      <!-- Calculator display -->
      <div class="calc__display">
          <p id="display">
              <span class="sr-only" aria-live="polite" id="sr-info"></span>
              <span id="display-screen" aria-hidden="true">0</span>
          </p>
      </div>
      // Calculator buttons
      <div class="calc__keypad-wrapper">
          <div class="calc__keypad" id="keypad" role="grid"
                  aria-label="Calculator Keypad">
              <div role="row" class="calc__keypad__row">
  				<span role="gridcell" class="calc__keypad__gridcell">
  					<button class="calc__btn btn-num js-calc-btn" id="7"
                              type="button" tabindex="0">7</button>
  				</span>
                  <span role="gridcell" class="calc__keypad__gridcell">
  					<button class="calc__btn btn-num js-calc-btn" id="8"
                              type="button" tabindex="-1">8</button>
  				</span>
                  <span role="gridcell" class="calc__keypad__gridcell">
  					<button class="calc__btn btn-num js-calc-btn" id="9"
                              type="button" tabindex="-1">9</button>
  				</span>
                  <span role="gridcell" class="calc__keypad__gridcell">
  					<button class="calc__btn btn-func js-calc-btn"
                              id="delete" type="button"
                              aria-label="Backspace" tabindex="-1">delete
                      </button>
  				</span>
              </div>
              <div role="row" class="calc__keypad__row">
  				<span role="gridcell" class="calc__keypad__gridcell">
  					<button class="calc__btn btn-num js-calc-btn" id="4"
                              type="button" tabindex="-1">4</button>
  				</span>
                  <span role="gridcell" class="calc__keypad__gridcell">
  					<button class="calc__btn btn-num js-calc-btn" id="5"
                              type="button" tabindex="-1">5</button>
  				</span>
                  <span role="gridcell" class="calc__keypad__gridcell">
  					<button class="calc__btn btn-num js-calc-btn" id="6"
                              type="button" tabindex="-1">6</button>
  				</span>
                  <span role="gridcell" class="calc__keypad__gridcell">
  					<button class="calc__btn btn-num js-calc-btn" id="+"
                              type="button" aria-label="Add by"
                              tabindex="-1">+</button>
  				</span>
              </div>
              (…)
              <div role="row" class="calc__keypad__row">
  				<span role="gridcell" class="calc__keypad__gridcell">
  					<button class="calc__btn btn-func js-calc-btn"
                              id="Reset" type="button" aria-label="Reset"
                              tabindex="-1">reset</button>
  				</span>
                  <span role="gridcell" class="calc__keypad__gridcell">
  					<button class="calc__btn btn-equals js-calc-btn"
                              id="Equals" type="button" aria-label="Equals"
                              tabindex="-1">=</button>
  				</span>
              </div>
          </div>
          <div class="grid__NUX hidden" id="grid-nux" role="region"
                  aria-label="Calculator Keypad Instructions" tabindex="0">
              <p>
                  Move keyboard focus inside the keypad with arrow keys.
                  Press <code>Space</code> to activate key.
              </p>
              <p>
                  Press Home to jump to the top left key (7). Press End to
                  jump to the last key (=).
              </p>
              <p>
                  You can also use number keys and numeric keyboard. Press
                  Enter to calculate.
              </p>
              <button id="close-nux-btn">Close Tutorial</button>
          </div>
      </div>
  </div>
  

A well-defined calculator majorly benefit the below users.

• People with cognitive disabilities
• People with visual disabilities
• People using speech input
• People using keyboard only
• People with limited dexterity