Checkbox Component

Contributed by Heran Wang

A checkbox component allows users to make a binary choice.

Basic Checkbox Component

Usability

1. Size: The size of the custom checkbox is made to be easily clickable but not overwhelmingly large. It's important to ensure that the checkbox is easily toggled by all users, including those with limited dexterity.

2. colour Contrast: The colours chosen for the checkbox provide sufficient contrast to ensure visibility for users with varying degrees of visual acuity.

3. Cursor Pointer: The cursor changes to a pointer when hovering over the checkbox, indicating an interactive element.

4. User Select: Text is set to be non-selectable, improving the checkbox interaction and reducing the likelihood of accidental text selection instead of checkbox toggling.

5. Font Size: The font size is not too small, ensuring readability.

Accessibility

1. Keyboard-Navigable: Since the checkbox is an HTML <input> element, it is natively keyboard-navigable, allowing for users with screen readers or those who rely on keyboard navigation to use the checkbox.

2. colour Choices: While the colour contrast is generally good for users with reasonable vision, it's essential to note that relying solely on colour to convey information could be problematic for colour-blind users. However, in this case, the checkbox's state (checked/unchecked) is apparent due to the shape changes (the checkmark), not just colour.

3. Semantic HTML: The use of semantic HTML elements like <label> and <input> aids screen readers and other assistive technologies in understanding the content and providing appropriate user interaction.

Version