Accessible Menus or Closed Items Using the Input Checkbox Method

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.

Contact Us To Find Out More

Have questions? Need help? Contact us and we'll be in touch soon!

* Required

Beacon
164 Thatcher Road
Greensboro, NC 27409
Map and Directions

Sales & Marketing
336.232.5687