Page MenuHomePhabricator

Simple accessibility preferences
Closed, DuplicatePublic

Description

There should be easy to use accessibility options. A couple things to consider:

  • Options to change the main colors (e.g. regular links, visited links, "red" links, button colors, etc.) easily, targeted for color-blind users (I'm not saying our colors are particularly bad for color-blind users, but this still might be a useful option.
  • Font size

Based on suggestions by George Barnick on the design list.


Version: 1.24rc
Severity: enhancement
See Also:
https://bugzilla.wikimedia.org/show_bug.cgi?id=48946

Details

Reference
bz70879

Event Timeline

bzimport raised the priority of this task from to Low.Nov 22 2014, 3:45 AM
bzimport set Reference to bz70879.
bzimport added a subscriber: Unknown Object (MLST).

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:

myImage.png (664×686 px, 51 KB)

(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:

myImage.png (664×686 px, 51 KB)

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.