processing / processing/p5.js-website
Design of checkboxes in monochrome mode - proposal
Nobody has claimed this yet.
- 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:
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:
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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