There's a wireframe mockup idea, and some notes, at
https://www.mediawiki.org/wiki/Talk:Requests_for_comment/Redesign_user_preferences#The_Appearance_menu

Ideally it would Not be in Special:Preferences, but would instead be a menu that all users, even readers who are not logged-in, can use. Saved in cookies/localstorage, if the user isn't logged-in.

I included "Appearance" as well as "Accessibility", partially because they often overlap, and partially because FLOE and GPII do the same, eg http://www.floeproject.org/prefsEditors.html (both the top-right live-example of "Show display preferences", and the video).

(In reply to Quiddity from comment #1)

Ideally it would Not be in Special:Preferences, but would instead be a menu
that all users, even readers who are not logged-in, can use. Saved in
cookies/localstorage, if the user isn't logged-in.

If it's available to logged out users, that means it probably has to implemented client-side in JavaScript (to avoid cache fragmentation). That may make sense for certain limited settings, like font size, but probably won't work for everything.

See bug 20151.

Created attachment 16750
wireframe idea

I've simplified the wireframe* to just show: controls for Font-size, Line-height (density), Text-Contrast, and Fixed-width.
Matthew, are all of those possible to implement client-side in javascript, whilst avoiding FOUC (flash of unstyled content)?

(If this is likely to lead to a complicated discussion (?), perhaps we should take it onwiki, or to the design-list. :)

*(old versions accessible at https://commons.wikimedia.org/wiki/File:Wireframe_of_Appearance_menu.png )

Attached:

(In reply to Quiddity from comment #3)

Created attachment 16750 [details]
wireframe idea

I've simplified the wireframe* to just show: controls for Font-size,
Line-height (density), Text-Contrast, and Fixed-width.
Matthew, are all of those possible to implement client-side in javascript,
whilst avoiding FOUC (flash of unstyled content)?

Not sure. I think the most straight-forward way to implement variants within a skin is to have a class name on the body (e.g. mw-accessibility-fixed-width) that affects the behavior of the skin's LESS/CSS. (This is facilitated by the fact that you asked for fixed variants, not arbitrary values).

This could be added in JavaScript, but I'm not sure if there's a way to do so without a FUOC. Even if the CSS and JavaScript is top-loaded, I don't know if the class can be put in place at the top, or would have to be added at the bottom (e.g. in a document ready event).

Adding it in PHP using a preference would not be an issue, and shouldn't cause a FUOC.

We should bear in mind we don't want too many, or non-superficial, variations within a skin. At some point a new skin may become appropriate.

Attached:

I've copied the wireframe from onwiki to

M17 Simple accessibility and appearance preferences

10

This sounds like it could be a part of T91201

Merging this into the newer T91201: [GOAL] Accessibility settings/preferences on desktop and mobile as it has received wider attention & more information.