0

I am making a Flask website and trying to implement an 'Accessibility settings' bar for the users so that they can adjust the colour contrast, font-size and letter-spacing throughout the page.

However, the styles are only being applied to the current page and when I come back to the initial page the new styling doesn't exist. Is this because the server is causing the stylesheet to reload every time that I change page? Could AJAX help my situation?

Here is my current Javascript:

function settings(element, degree) {
    const page = document.getElementsByTagName('*');
    if (degree == "low") {
        for (i = 0; i < page.length; i++) {
            page[i].style.filter = "contrast(80%)";
            console.log(page[i]);
        }
    }
}
react_or_angluar
  • 1,568
  • 2
  • 13
  • 20
Ambassador Kosh
  • 459
  • 5
  • 19
  • When changing the styles with your accessibility bar, you can save those values as cookie or in browser storage. Then on page load/reload you can check if those cookies / storage are set and load them again. – Alex Berger Dec 11 '20 at 11:24
  • Thank you, this sounds great. Though I don't know anything about using cookies or browser storage, could you signpost me to a resource or suggest a phrase that I should research? – Ambassador Kosh Dec 11 '20 at 11:30
  • 1
    [this answer](https://stackoverflow.com/a/24103596/2702894) should give you a good start. Set the cookies for the styles (store them as a JSON object) and then every time you load the page check the cookies and set the styles. Alternatively you can set them at the server (submit the changes via a form and set the cookies on the server). The advantage of this way of doing it is that the cookies can be checked on the first request to the server and you can send the relevant styles with the initial HTML, stopping any flashes when the styling changes. Cookies have 4kb capacity so be careful. – GrahamTheDev Dec 11 '20 at 11:33
  • Thank you @GrahamRitchie ! This looks like an appropriate solution and I am excited to learn about cookies. Hope you have a good day. – Ambassador Kosh Dec 11 '20 at 11:53
  • browser plugin maybe? – react_or_angluar Dec 12 '20 at 22:37

0 Answers0