chrisdill
Examples: Iteration Proposal on Accessibility
- [x] The issue is specific to Raylib-cs and not raylib (?)
- [x] I checked there is no similar issue already reported
Issue description
Some example screens violate accessibility principles, which reduces both the visual appeal and the usability of the examples:
(all of these apply "sometimes")
- very small text
- low contrast text
- camera looking in wrong direction
- no alternate controls to mouse controls
- cursor keys, but not WASD
- no interaction prompt at all
- missing / concealed / elided / wrapped text
- no prompt how to calibrate mouselook
- no mouselook auto-calibration
- no explanation of what is happening on the screen
- there's no example selector (other than command line argument)
- can't move back to previous example
Environment
Windows 11 Pro, probably elsewhere, too.
Issue screenshot (non-exhaustive list)
Code example
I would like to discuss a unifying pass across the examples:
- unify screen layouts (where the prompts are, how they are worded, indented, etc.)
- unify fonts used (where applicable) and possibly use more legible font (sacrilege? :))
- select and apply a triadic (or split complementary color) palette for texts and interactive elements (ideally from raylib builtin colors)
- palette should also include a set of lowlights / dimmed / disabled colors
- aim for 5:1 contrast (or better) in all text
- add dark boxes or outlines around bright text that renders on dark and bright or noisy images
- increase minimum text size across the board
- add short summary explanations text to each example screen
- add clear interaction prompts with a unified control scheme
- everything should be controllable with keyboard only (mouse optional)
- auto-calibrate mouselook (it's somehow very broken on Windows 11, may warrant a separate issue)
- create a simple example selection screen (that comes back up when leaving examples)
- create a simple baseline GUI to switch between examples that is available everywhere
Each individual one of these is simple, but the sheer number of examples and differences in taste warrant a detailed discussion and action plan before submitting a +9000/-9000 line PR 🗡️
Also, I don't know whether this is within the scope of this repository.
Tbh, the contrast issue seems to be an overall narrative in Raylib. 🫨
Feel free to close this without discussion if you believe it to be out of scope here!
(yiiikes... let's give this awesome library some UI love 👍 )
@thygrrr Definitely in scope though needs planning like you said. Not against large PR's if necessary though splitting it up makes review easier. :)
For context the examples were copied from raylib then ported across so initially the design was to make that as easy for me as possible. For example the use of using static Raylib_cs.Raylib; cause I didn't want to go through and type Raylib. everywhere. Not ideal but it helped get it going quickly.
Over time I have made some changes though mostly styling, naming and porting new examples from raylib. I have wanted to do more with it but never got around to it due to the work involved. At one point I tried a imgui demo as I also wanted an example selection screen. Could revisit that idea using https://github.com/raylib-extras/rlImGui-cs prehaps.
Accessibility wise feel free to update the example designs. As long as the example fulfills the same general purpose then that works for me.
@thygrrr To clarify I closed this since the project is being passively maintained and I felt keeping the issue open might be confusing since the proposal is not being actively worked on. Though the issue can be reopened if that changes.