Accessible Menus or Closed Items Using the Input Checkbox Method

By | 2018-05-21T07:02:38+00:00 May 21st, 2018|Categories: Web Development|Tags: , , |

Est. Reading Time: 2 minute

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.

About the Author:

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.