21 05, 2018

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: , , |

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.