Accessible Menus or Closed Items Using the Input Checkbox Method

Beacon Blog Article

By Zedric Myers | Published May 21, 2018 | Categories: Web Development

When using the checkbox method to open and close an element, you don’t want to hide the input box. Doing that will make it non-accessible. Instead use this method for visual reference, but still allowing a keyboard to access the input checkbox.

Input Checkbox CSS:

input#IDname { position: absolute; display: inline; height: 0; width: 0; margin: 0; padding: 0; border: none; opacity: 0; }
Note: Make the action item the end user sees with an outline to indicate that they have something to access.

Let's get to work!

Contact Us