Accessible Menus or Closed Items Using the Input Checkbox Method

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.
Recent Posts

Hello from Beaconville: High Ed Conference Wrap-Up
View this Story

Cue the Confetti: Celebrating 2022's Higher Ed Wins So Far
View this Story

Beacon Technologies Opens Second Location in Carolina Beach, NC
View this Story

Why You Need Audience Personas For Your Website Content
View this Story