Jquery to switch stylesheets for accessibility


Firstly, I am assuming jQuery questions are submitted here as it based on Javascript. Apologies if I am wrong and please feel free to correct me.

Secondly I am seeking some code/app in jQuery; I don’t really understand that well, so when visitors have visual impairments they can select a stylesheet by just clicking a image icon depicting the colour change. Where is the best place to seek such coding/app?

Thirdly, would I be right in assuming the additional stylesheets only list the items that will be changed and not everything that’s in the main stylesheet?

The plan is to just change the colours for background and text, much like the BBC website has.

Kind regards,

This could be as easy as adding/removing classes on the <body> element and in your CSS, just make rules inside of it :slight_smile: . So adding an event listener to those icons to do this.

E.g. body.style1, body.style2, etc.

1 Like

Hello Ryan,

I am all new to this so can you please give me some examples?

Kind regards,

Something like this: https://www.sitepoint.com/creating-simple-style-switcher/ ?

“jQuery to switch stylesheets for accessibility” is a bit of an oxymoron as many users who need accessibility functions will also have javascript switched off. :upside_down:

Well that me completely confused now :dizzy_face: What I was hoping to copy, to some degree, was the colour options on the BBC website bbc.co.uk/accessibility/best_Practice/policy.shtml# your can see on the top right various screen colour options.

I am open to suggestions…

You can define alternate stylesheets in the HTML - then when people using a browser that supports alternate stylesheets they can select the one they want from their browser menu.

For those using other browsers you can include a very simple JavaScript to allow which stylesheet is active to be changed. The plain JavaScript to do this is so short that there’s no reason for considering jQuery.


1 Like

Many thanks to everyone who replied. The suggestions offered have given me something to play with and think about.

One thing I have learnt is that designing for accessibility is somewhat a nightmare, certainly not an easy task. One would have thought by now that modern browsers would have some form of filters that could be applied to change colours for visually impaired users?

Whilst I don’t have the technical skills I do know any photo can be quickly visually changed by applying filter/s, so why not apply the same technology to a webpage?

Kind regards,

An interesting thought, @Morrile. You might find this site useful for accessibility issues.

1 Like

Which ones don’t?

All the modern browsers I have seen allow you to add user CSS to apply whatever filters you want to all the sites you visit.

Hello Felgall,

I got it to work very well with Firefox yet could not see how for Google chrome and Microsoft Edge. I did try and search Google to ascertain how and found nada!

I would be very happy to be enlightened how this can be achieved on the two aforementioned browsers, assuming you do know how?

Kind regards,

The JavaScript should allow it to work in ALL browsers even if they don’t have the functionality built into the browser itself.

But what happens if someone has the JavaScript switched off as gandalf458 wrote? I did write to the Royal National Institute for the Blind and not heard back from them yet.

One final question: your script I understand that we change the word (title) with it’s respective stylesheet name yet I have three additional stylesheets, so what lines within your code does not need to be repeated as I am assuming I don’t have to repeat all the code for each stylesheet?

Many thanks for your patience and time helping me out, very much appreciated,

I did start doing one a while back, but only got so far with it.

1 Like

Hello SamA74,

Many thanks for the CodePen as I get the opportunity to learn from seeing how something has been put together.

Kind regards,

Then provided the person is using an appropriate browser the code will still work without the JavaScript as the HTML is coded in such a way that browsers that allow stylesheet selection will offer all those in the list from the browser menu whether or not JavaScript adds an option to the web page itself to make the selection from there as well.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.