processing / processing/p5.js-website

Design of checkboxes in monochrome mode - proposal

Open
#580 2 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Web Design
Dominant language
MDX
Stars
96
Forks
322
Avg merge
5d 22h
Merged PRs (30d)
8

Description

Current checkboxes in accessibility menu look like circles, that do not clearly reflect their state in monochrome mode. They are differentiated only by color, which is acceptable in color mode, but in monochrome they're a little confusing:
monochrome_checkboxes_current

I propose to use some check marks to make them more clear. For example, I tested it by modifying the SVGs in HTML like this:

<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m 16.371092,6.6210937 c 0.513245,0.5203285 0.507123,1.3583198 -0.01367,1.8710938 L 9.8535158,14.896484 c -0.5147559,0.506589 -1.3407128,0.506589 -1.8554687,0 L 3.6425783,10.607422 C 3.1217848,10.094649 3.1156616,9.2566574 3.6289063,8.7363283 4.1416797,8.2155349 4.9796709,8.2094117 5.5,8.7226563 L 8.9257813,12.097656 14.5,6.6074219 c 0.519236,-0.5121001 1.35949,-0.5058647 1.871092,0.013672 z M 10,20 C 15.5228,20 20,15.5228 20,10 20,4.47715 15.5228,0 10,0 4.47715,0 0,4.47715 0,10 0,15.5228 4.47715,20 10,20 Z" fill="currentColor"></path></svg>

The result:
monochrome_checkboxes_proposal

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start from the accessibility menu's checkbox markup and the inline HTML/SVG example in this issue, then compare the current and proposed monochrome screenshots. Done means the checkbox states are distinguishable without relying on color, with the behavior and appearance checked in monochrome mode.

Written by the indexing model from the issue text.

Assessment

Domain
accessibility, design, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.