Accessibility Buttons

Hi,

is it possible to add an 'Accessibility button' in Plumsail for people who are visually impaired?

Some people are colour blind and have issues seeing text. Is there a way to add a button that will change the colours and text sizing so it's the forms can accommodate this group of people?

Many thanks!

Dear @Qman,
With JavaScript code, it should be possible. What exact requirements do you have? What text should get bigger? What colors should change?

Hi @Nikita_Kurguzov,

The requirements are increasing text field sizes, changing Overlay Colour and changing font-size and font colour.

Dear @Qman,
First, add a class to the fields that you want to change, for example: my-field
image

If we are talking about text fields (such as Title, for example), the following code should work, add it inside of button's Click property:
$('.my-field input').attr('style', 'height: 100px; font-size: 50px; background: darkblue; color: yellow;');

Hi @Nikita_Kurguzov,

Thank you!

I used the code you provided and followed the instructions but the code affects the Field Title.

Here is the effect:
image

Dear @Qman,
First of all, what type of field are you trying to change? Second of all, can you send me a screenshot of the code inside the editor?

I am just changing a single line text field (SharePoint).

But you're changing the field, it needs to be $('.my-field input') - you need to select the input specifically.

1 Like

I see, so the input needs to be added inside the argument. Cheers!

How can I put the field back to normal once information has been entered? I don't want it to stay big like that.

Dear @Qman,
The following code should work:
$('.my-field input').attr('style', '');

1 Like

Thanks Nikita!

Is it possible to increase the size of the field title?

Dear @Qman,
Didn't you do it already? You can just target the field only, and use the code that you've had:

Yikes! I did, my bad.

I noticed one issue. The multiline text field hides the Add attachment by default. When I activate my accessibility button, it appears out of nowhere. Is there no way to hide it by JS so it never appears.

Is it also possible to apply the same effect to Choice & Lookup fields for added consistency?

Hi @Nikita_Kurguzov,

Can I get an update on how to apply the same effect to look-up, drop-down and multi-line fields?

Dear @Qman,
I am looking at the options, but it's definitely not as easy. For example, Lookup templates can be customized, but only when the form loads, so you'll likely need at least two fields, to switch between by hiding/showing fields, and then copying data to the main field. Here's how the Lookup field can be customized - Customize appearance for lookup fields in a SharePoint form — SharePoint forms

For Multiline text, it is rather easy to do with plain text, like this:
$('.my-plain-text .fd-textarea').attr('style', 'height: 100px; font-size: 50px; background: darkblue; color: yellow;');
But not that easy for Rich Text, looking at the options right now.

1 Like

Oh I see. Not to worry at all you have helped a ton! I only asked for consistency sake.

I mean, if you can resize the field to something slighter bigger, I'm not too fussed.

Thank you for the Multiline text field code.

I really appreciate the help you guys offer! :smile:

1 Like