TW & accessibilty (vision impairement)

[A Gloom]

This concerns low vision impairments not blindness which involves ARIA & screenreaders (which I remember a previous topic covered) and I'm not at that stage yet so I really can't speak on it (I have one-- Zoomtext but it got crippled by a Windows update).  I am not a certified "expert" on the subject-- there's plenty of references onlline (including Microsoft)-- but have plenty of first hand experience.

This covers some of the vision impairments, accessibility solutions and how they may impact content display and how TW works with them.

TLDR:
Most wiki creators fortunatley won't have to worry too much because there's OS & browser accessibilty features, 3rd party browser extensions and full fledged accessibilty programs to handle the task for you.  TW seems to work with Windows & Firefox's accessibility features (from user experienve with Windows 150% DPI & High Contrast Black system theme).  What the wiki creator or dev needs to do is avoid things that could disable such accessibilty features/programs such as "!important" on css (reason why: "Why CSS !important Should Be Used Carefully" section at https://www.developeracademy.io/blog/css-important-rule-use-correctly/).

Don't override the default underlining on links, its a well known attribute of links, even if the color of links is overridden.  TW shows the underlining when links are mouse over.

Instead of relying exclusively on colors, use labels, icons for buttons etc.  Use tooltips to identify such, provide instructions.

A point was made that users set their own styling in their browser not just because of visual impairment but to make web content more "readable" to their eyesight/preference.

The full details:

Vision impairment is actually a wider subject than complete blindness-- there is more low vison sufferers (17% users with mild vision impairment) than blind people (9% with severe)-- it's the stage where vision exists but its restricted in some way-- that could make their vision ineffective in certian situations.  Like having a leg that works except it can't bend at the knee.

Colorblindness is a common example-- someone else is going to broach that subject...

Color blindness will prevent people from potentionally fully seeing or understanding any color coding you may use with themes or things such as color coded text, buttons, borders, etc.

Low vision impairment is the other. It has several aspects:

Blurry vision/unable to read small text- user will use accessiblity features like larger monitor set at lower screen resoltion or zoom (Windows screen scaling/DPI scaling, browser zoom features, font size settings)

Results will be like with mobile device screens, wide screen layouts may get broken up into several lines or overlapped.  Responsive layouts may end up with content in very narrow & tall containers.

TW seems to handle Windows & Firefox's zoom abilities, font settings well.

Loss of contrast in vision:
and
Unable to view light color backgrounds (common to people suffering from vision loss due to diabeties):

Current low contrast themes for normal sighted people (lighter colors instead of dark (like text) on white background or grey (instead of white or bright light colors) on dark backgrounds).  Where these are designed for ease of eye strain for normal sighted people but they can be hard for someone with loss of contrast vision to see-- the text will seem to fade into the background.

Windows has user set themes for background colors and for user adjusted contrast or preset high contrast system themes (high contrast - black on white background) and "high contrast black" - white on black background for maximum contrast between foreground element colors and the background.  Firefox applies the Windows system theme to its chrome/UI and webpages.

What this entails-- at least for high contrast black (I don't know about standard high contrast)-- is that all css/html colors (backgrounds, text, border colors) are disabled and replaced by white on black (including default html colors such as links).

Web browsers also have settings/custom global stylesheets, extensions/add ons that do the same thing-- override css/html color settings, fonts and sizes, even images.

TW applies Windows & Firefox's High Contrast Black theme well, except for:

- - the toolbar icons-- with Vanilla theme, they nearly disappear (faded grey) except whrn mouse over, them they appear white.

[PMario]

Hi Gloom,

This post reads like a general statement. ... Is there a rant? or a question?

In the right sidebar: Tools: Palettes  there are 2 palette settings.

 - Contrast (dark)

 - Contrast (light)

-m

[A Gloom]

Hello PMario

 

This post reads like a general statement. ... Is there a rant? or a question?

Just a general statement-- though more like a discourse-- covering the subject and how TW performs in it.  TW is one of the few browser "app's" that works well with basic accessibility which Google app'a like Groups fail at.

 

In the right sidebar: Tools: Palettes  there are 2 palette settings.

Palettes are not functional for me -- the system/Firefox theme overrides/negates any css/html colors and replaces with white foreground elements (borders, text, etc) on black background.  The only way I can get color into Firefox is through images or svg's.  Now the toolbar icons issue I belive is because they're svg icons with decreased opacity till hovered over and they color fill (on my system they're dim grey that I can't usually see but when I hover over them they become white and visible)

Any ranting would be off topic like Chrome having extensions for inversed colors but you have to use their non accessible browswer and setting page to set up accessibility.  Or Inkscape's forum registration supposedly set up for accessibilty but uses color coded text-- so I can't register cause my browser doesn't show the colors.  So I can't post the invisible tooltip text fix for the gtk dark/black theme for Inkscape.

[PMario]

On Saturday, August 31, 2019 at 6:50:03 AM UTC+2, A Gloom wrote:

 

In the right sidebar: Tools: Palettes  there are 2 palette settings.

Palettes are not functional for me -- the system/Firefox theme overrides/negates any css/html colors and replaces with white foreground elements (borders, text, etc) on black background.  The only way I can get color into Firefox is through images or svg's.  Now the toolbar icons issue I belive is because they're svg icons with decreased opacity till hovered over and they color fill (on my system they're dim grey that I can't usually see but when I hover over them they become white and visible)

How do you set up this high-contrast mode... In windows 10 I can enable/disable "high contrast". But that only works for the window elements. So FireFox content is still light background.

The normal "black" theme for FF only decorates the UI elements. ... So site content is still light background and the TW palette setting takes effect for me ... that's strange.

-m

[Jed Carty]

I have been working on putting together some guidelines for accessibility. The current list mainly focuses on dyslexia because that is what I have experience with, but if you have suggestions I would like to include them.

https://www.ooktech.xyz:8443/Public#Making%20interfaces%20accessible

[@TiddlyTweeter]

Ciao Jed

I have broad comments (as someone guilty of EXTREME text :) 

Part of the problem is complexity.

Your list is very long and some of it not necessarily intuitively obvious to someone without dyslexia.

FYI, I have MS. Vision and numerical comprehension problems for decades (MS is non-specific), but its like "-x "of the population so I can't see point of emphasising it.

I do think Dyslexia needs more attention as it is quite common (5-15% -- differs by country).

TBH, I think we need to see examples of good design that try to balance needs on disability. Otherwise its in the "too difficult" category?

TT

[@TiddlyTweeter]

A Gloom

Problem is this, in TW, I think: how to convert your need into a pallet? 

But you also say stuff about o/s too ...

Blurry vision/unable to read small text- user will use accessiblity features like larger monitor set at lower screen resoltion or zoom (Windows screen scaling/DPI scaling, browser zoom features, font size settings)
Results will be like with mobile device screens, wide screen layouts may get broken up into several lines or overlapped.  Responsive layouts may end up with content in very narrow & tall containers.
TW seems to handle Windows & Firefox's zoom abilities, font settings well.
Loss of contrast in vision:
and
Unable to view light color backgrounds (common to people suffering from vision loss due to diabeties):
Current low contrast themes for normal sighted people (lighter colors instead of dark (like text) on white background or grey (instead of white or bright light colors) on dark backgrounds).  Where these are designed for ease of eye strain for normal sighted people but they can be hard for someone with loss of contrast vision to see-- the text will seem to fade into the background.

How should we do that? What is the minimal path in TW that might help?

 

TT

[A Gloom]

Jed

Hopefully this may help

https://www.dyslexiefont.com/en/typeface/

The Effect of Colored Overlays on Reading Fluency in Individuals with Dyslexia

https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4999357/

[A Gloom]

Problem is this, in TW, I think: how to convert your need into a pallet?

I don't believe a palette would solve things.  if I made TW viewable without FF's inverted colors theme so I could turn off that setting then all other browser tabs would also lose the inverted colors theme so web pages and even FF settings window would display in their original black text on white.  FF's theme setting seems to be all or nothing, not adjustable for certain sites (like their user set stylesheets used to be, which I don't believe it has any longer).  As for an FF extension to alloqw for on demand theme setting, I gave up on them cause every other day they were getting disabled by FF so they were proving unreliable.  The theme issue isn't a matter of user comfort but a necessity-- I lose the color inverting, I lose my ability to work with a computer.

TW had worked well with my setup-- use it daily-- I don't really need colors for my personal use.

What I do is use Opera (with its dark theme for its UI/chrome) for viewing pages in their original colors if I know they're dark backgrounds-- how I work on my web domain pages, while keeping FF with its color inverting for normal web browsing.

I have adjusted to the reality that I will be seeing things in white on black for now on-- I have a specially modified tablet (the Ruby) that lets me read printed material in the same fashion.  It has a cam that views a letter or book and displays it as white or yellow text on a black background on its screen.

How should we do that? What is the minimal path in TW that might help?

 

The main thing is that TW applies user OS and browser settings, which is seems to do well, which is why in the TLDR section I advised on not what to do but what not to do that may interfere with what users have already set up for their vision impairment.  Most sufferers of vision impairment will already have their systems set up wtih OS accessibilty features or prograqms for being able to use their computer in general.

The only problem I noticed with TW is the faded svg icons (like in the edit toolbar) but I don't believe that is so easily addressed since their reduced opacity if linked to function (that they gain full opacity for a hilited effect on mouse over)

Now the issue of colors for color coding and color blindness is a whole other can of worms-- I use to do planning documents for an organization that had 3 managers-- each with a different form of color blindness-- which really limited color choices.

[Ton Gerner]

Hi

The only problem I noticed with TW is the faded svg icons (like in the edit toolbar) but I don't believe that is so easily addressed since their reduced opacity if linked to function (that they gain full opacity for a hilited effect on mouse over)

It has nothing to do with opacity; there are just separate colors for standard, hovered (and sometimes selected) colors of the button svg icons.

Create a stylesheet with the following CSS code (extracted from the Vanilla theme):

/* COLOR TIDDLER CONTROL BUTTONS */
.tc-tiddler-controls button svg, .tc-tiddler-controls button img, .tc-search button svg, .tc-search a svg {
     fill: Magenta;
}

.tc-tiddler-controls button.tc-selected svg, .tc-page-controls button.tc-selected svg {
     fill: LimeGreen;
}

.tc-tiddler-controls button.tc-btn-invisible:hover svg, .tc-search button:hover svg, .tc-search a:hover svg {
     fill: Blue;
}

/* COLOR PAGE CONTROL BUTTONS */
.tc-page-controls svg {
     fill: Magenta;
}

.tc-page-controls button:hover svg, .tc-page-controls a:hover svg {
     fill: Blue;
}

/* COLOR TOPBAR BUTTON */
.tc-topbar svg {
     fill: Magenta
}

.tc-topbar button:hover svg {
     fill: Blue;
}

/* COLOR EDITOR TOOLBAR BUTTONS */
.tc-editor-toolbar button {
     fill: Navy;
     background-color: Silver;
}
.tc-editor-toolbar button:hover {
     fill: Cyan;
     color: Cyan;
     background-color: CornflowerBlue;
}

And adjust the colors to your liking.

Hope that helps.

Cheers,

Ton

[A Gloom]

TY Ton, I shall pursue what you have suggested-- just need to alter the edit toolbar icons, the rest display fine-- see screenshot (their grey may be visible to most ppl but only on good days can I see them, most of the time I can't)

[A Gloom]

PMario,

 

How do you set up this high-contrast mode... In windows 10 I can enable/disable "high contrast". But that only works for the window elements. So FireFox content is still light background.

The normal "black" theme for FF only decorates the UI elements. ... So site content is still light background and the TW palette setting takes effect for me ... that's strange.

I'm using Win8.1 in desktop mode (not Metro), latest FF -- don't know if that has bearing.

I use in Options>General>Language & Appearance>Colors

"Override the colors specified..." dropdown menu

-- "Always" or "Only with high contrast" is what i use, it applies white text on black background-- the Windows High Contrast Black to FF chrome and Options pages as well as web pages-- I know this for certain because I modified the system theme for purple text hiliting (see screenshot I posted in the reply to Ton, you'll see the system theme text hiliting with the tiddler title)

the colors selection area for text, background, Use system colors don't seem to have any effect when I set override.

Now unless I have overlooked something, I believe this is the best option for me cause FF's Option page and many website won't apply the text & background colors settings or use system colors or only partially applies them.  Using an extension proved unreliable because whenever FF disables them, I'm stuck trying to reinstall them with the default white background.

Now I applied a manually edit preferences file at one time to try to get Dev Tools to follow the inverted theme but no luck-- it stayed a low contrast dark theme with is nearly unusable for me and difficult to use.  I don't know if its effecting the theme-- I figure it isn't cause when I turn off the override I get normal white theme for FF and webpages.

[PMario]

Hi Gloom,

I was finally able to switch FF latest using windows 10 to your settings. ... I needed to restart FF so the global black / white setting did also apply to the site content.

I'll have a look, if I can post an issue at FF Dev-tools. ... Since this seems to be an oversight = bug!

-m

[PMario]

You can try to create a Stylesheet tiddler with this content.

.tc-image-button {
  fill: white;
}

It should give you high contrast SVG button.

-m

[@TiddlyTweeter]

we need an SVG Tips section :-)

[A Gloom]

@PMario

 

I was finally able to switch FF latest using windows 10 to your settings. ... I needed to restart FF so the global black / white setting did also apply to the site content.

with Win8.1 it applies the override real time without restart, I sometimes switch to normal theme if I need to look at a page without the override (not often cause it can be painful, especially tryin to set the override agian, cause Options page turns to white background),  How I set/used Twilight theme was with Opera.

even tho the background and text settings don't seem to have any effect, the links and visited settings do, even with the override

 

I'll have a look, if I can post an issue at FF Dev-tools. ... Since this seems to be an oversight = bug!

that would be great, being able to use Dev Tools more, many thanks-- especially for the css styling info

[TonyM]

I would love to help in this endeavor but my css skills are perhaps insufficient. 

In passing I noted mention in the latest FireFox release

• Firefox Developer Tools now offers an audit for the presence of text alternatives for non-text content, the a11y panel checks toolbar has been augmented to better help developers adhere to WCAG Guideline 1.1.
• And whilst removed from default points to a possible method 
• Firefox no longer loads userChrome.css or userContent.css by default improving start-up performance. Users who wish to customize Firefox by using these files can set the toolkit.legacyUserProfileCustomizations.stylesheets preference to true to restore this ability.

Perhaps someone could map a css to support different vision needs for users on tiddlywiki.

Regards

Tony

[PMario]

On Saturday, September 7, 2019 at 9:48:51 AM UTC+2, TonyM wrote:

...

Perhaps someone could map a css to support different vision needs for users on tiddlywiki.

I think, we have to file a bug. ... Most devs are able to work with "low contrast" themes. ... So we need to create awareness first.

-m