search

foundryvtt / foundryvtt

Public issue tracking and documentation for Foundry Virtual Tabletop - software connecting RPG gamers in a shared multiplayer environment with an intuitive interface and powerful API.
https://foundryvtt.com/
202 stars 10 forks source link

Visually impaired player needs high contrast text so that he can read it. #3574

Open aaclayton opened 3 years ago

aaclayton commented 3 years ago

Originally in GitLab by @adventuremagic123

In order to submit an effective feature request, please include the following information along with your request.

Feature Summary

All text, including disabled text, needs to be displayed using high contrast colors vs the background color -- or my visually impaired player cannot read it. Part of the reason for this problem has to do with his screen reader -- it needs high contrast text or it can't read it to him.

User Experience

Provide a configuration option to always use high contrast text -- or you might simply provide an option to turn off the background color. Or you might provide both options. That would probably be best so that visually impaired players can adjust their experience.

The following text is not high enough contrast for him:

image

Priority/Importance

My visually impaired player can't read the chat log (critical) nor disabled text in other parts of the product.
He really likes Foundry VTT but the current situation for him may not be playable and certainly is not as fun as it could be. I will investigate options we might use as a work-around like browser settings, cutting-and-pasting text into Notepad, my modifying the text for all the things used by his characters, etc.

Implementing this feature would main a lot to my player and make the game much more fun. So far, this appears to be his only issue.

aaclayton commented 3 years ago

Originally in GitLab by @adventuremagic123

Okay. I've got a macro for my visually impaired player to use to apply the accessibility styling from above (I called the macro "Acessibility Styling"):

var accessibilityStyle = document.createElement('style');

accessibilityStyle.innerHTML = '#chat-log .message {font-size: 1.8em !important; font-weight: bold !important; color: black !important;} #chat-log .card-content {font-size: 1.8em !important; font-weight: bold !important; color: black !important;} #chat-message {font-size: 1.8em !important; font-weight: bold !important; color: black !important;} #chat-log .message {background: white !important;} #chat-controls [name="rollMode"] {background: white !important;} #chat-message {background: white !important;} .window-content {background: white !important; font-size: 1.8em !important; font-weight: bold !important; color: black !important;} .item-detail {background: white !important; font-weight: bold !important; color: black !important;} .editor-content {background: white !important; font-size: 1.8em !important; font-weight: bold !important; color: black !important;} .item-summary {background: white !important; font-size: 0.8em !important; font-weight: bold !important; color: black !important;} .alignment {background: white !important; font-size: 0.8em !important; font-weight: bold !important; color: black !important;}';

var scriptReference = document.querySelector('script');

scriptReference.parentNode.insertBefore(accessibilityStyle, scriptReference);

aaclayton commented 3 years ago

Originally in GitLab by @adventuremagic123

With regard to Andrew's comment, how do I write javascript that applies to our specific visually impaired player? Where do I put it?

Also, I do know where your macro documentation is. Can someone tell me where it is?

For the option of writing a macro, how would I do that?

I'd like to know how to implement both options.

aaclayton commented 3 years ago

Originally in GitLab by @adventuremagic123

I'll just clarify. Our visually impaired player can only see and read text in a comfortable sitting down position if it is:

  1. bold
  2. 1.8em

All of the other styling smaller than that exists because I simply can't make it 1.8em. If I do, everything gets screwed up. For example, spell descriptions.

aaclayton commented 3 years ago

Originally in GitLab by @adventuremagic123

We use PF1e.

aaclayton commented 3 years ago

Originally in GitLab by @adventuremagic123

I did more work on our styling and tested it with our visually impaired player. Using a white background gave us more contrast and enabled me to use smaller fonts.

There's some parts of Foundry VTT that I'd like to style -- but nothing I've done has any affect on it (so apparently I haven't created a working CSS selector):

1. Skill names.

2. Editing text in the Notes and Background editors (and others if they exist).

Can someone help us with the above two items?

These are the styles that seem to be working very well for my visually impaired person and yet are probably not too bad for our other players (will get feedback at the next game):

chat-log .message {font-size: 1.8em !important; font-weight: bold !important; color: black !important;}

chat-log .card-content {font-size: 1.8em !important; font-weight: bold !important; color: black !important;}

chat-message {font-size: 1.8em !important; font-weight: bold !important; color: black !important;}

chat-log .message {background: white !important;}

chat-controls [name="rollMode"] {background: white !important;}

chat-message {background: white !important;}

.window-content {background: white !important; font-size: 1.8em !important; font-weight: bold !important; color: black !important;}

.item-detail {background: white !important; font-weight: bold !important; color: black !important;}

.editor-content {background: white !important; font-size: 1.8em !important; font-weight: bold !important; color: black !important;}

.item-summary {background: white !important; font-size: 0.8em !important; font-weight: bold !important; color: black !important;}

.alignment {background: white !important; font-size: 0.8em !important; font-weight: bold !important; color: black !important;}

aaclayton commented 3 years ago

Originally in GitLab by @adventuremagic123

These are the settings my visually impaired player needed as a minimum to be able to see the text without having to stand up and look at the screen. He can see these comfortably while seated.

chat-log .message {font-size: 2.2em !important; font-weight: bold !important; color: black !important;}

chat-log .card-content {text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff,-1px 1px 0 #fff, 1px 1px 0 #fff;}

chat-log .card-content {font-size: 2.2em !important; font-weight: bold !important; color: black !important;}

chat-message {font-size: 2.2em !important; font-weight: bold !important; color: black !important;}

Also, because the text for things like spell names in the chat window were higher contrast (white text on dark purple), he can read those also at the current (smaller) font size.

I'll still be working on our styling to support this player -- and will keep you up-to-date on the styling we're using. There's more changes I plan to make to make the character sheet more accessible and I will probably try to make the chat window background white (and reduce the font size).

aaclayton commented 3 years ago

You can do this in a simple way:

  1. Namespace your CSS rules to only apply if the document body has the "accessibility-mode" class, i.e.

    .accessibility-mode #chat-log .message { ... }

  2. Apply the accessibility-mode class to the body element only for the player who needs it.

    $(body).addClass("accessibility-mode");

You can either do this in a simple javascript file which automatically applies it for your specific player in question, or just give this as a macro that your player can run to apply the change.

aaclayton commented 3 years ago

Originally in GitLab by @adventuremagic123

Hopefully, when you guys implement the long-term solution, we can have that affect just the particular user (player), rather than globally affect everyone.

We are, though, very happy with this short-term solution -- and thank you for jumping on this so quick! Very much appreciate it!

aaclayton commented 3 years ago

Originally in GitLab by @adventuremagic123

What I'm going with for now is the following:

chat-log .message {font-size: 1.2em !important; color: black !important;}

chat-log .card-content {text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff,-1px 1px 0 #fff, 1px 1px 0 #fff;}

chat-log .card-content {font-size: 1.2em !important; color: black !important;}

chat-message {font-size: 1.2em !important; color: black !important;}

aaclayton commented 3 years ago

Originally in GitLab by @adventuremagic123

Okay. Thank you, Anathema Mask! Yes, that's a great start. I think I'll need to tweek this a bit more -- but now it's much clearer.

aaclayton commented 3 years ago

Originally in GitLab by @anathemamask

Hi @adventuremagic123 - we're definitely planning to add more accessibility options in the future but I might recommend the following for your player's specific use.

-install the Custom CSS module for FVTT. https://foundryvtt.com/packages/custom-css/ -enable the extension as gm set the following rule: 

#chat-log .message {font-size 1.1em !important; color: black !important;}

This should increase font size sufficiently that it should be visible without breaking too much in the chat window (though a browser level zoom might be best for that.

Additionally this one will add a slight white outline to all text which may help provide some additional contrast:

#chat-log .message {text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff,-1px 1px 0 #fff, 1px 1px 0 #fff;}
aaclayton commented 3 years ago

Originally in GitLab by @adventuremagic123

Could someone provide us with explicit instructions for how to do that and the CSS rules we need to help him out?

On a scale of 1 to 10 with 10 the most important, I'd say this for us is a 10.

aaclayton commented 3 years ago

A short-term workaround would be to simply include some extra CSS rules in your world which changes the style of the text that you're player is having trouble with - but I agree an option that everyone can use would be the right long-term solution.

aaclayton commented 3 years ago

Originally in GitLab by @adventuremagic123

I've explored the accessibility settings and extensions for Google Chrome and there does not appear to be a solution there. Probably, isn't a work-around for this issue.

aaclayton commented 3 years ago

marked this issue as related to #3028

aaclayton commented 3 years ago

Originally in GitLab by @adventuremagic123

Another issue is that the text is too small, so another option to use a larger font size is desired.