Accessibility toggle for elements?

[zj]

So I'm trying to make my site more accessible. I use a screen filter that mimicks a CRT screen - which I like, but I realise it could be an issue for some people. So I'd like to add a way for visitors to toggle the effect, and animations in general, on or off. But I'm not sure how I would go about it, as well as keep the toggle consistent across pages. Any advice? 

This is the css:

Spoiler

Code

/* animation */

@keyframes ScanlineAnimationRight {
  	  0% {transform: translateX(0px) translateY(0px);}100% {transform: translateX(32px) translateY(-32px);}
  	  }
      @keyframes ScanlineAnimationLeft {
  	  0% {transform: translateX(0px) translateY(0px);}100% {transform: translateX(-32px) translateY(-32px);}
  	  }
      body::before {
          content: "";
          display: block;
          position: fixed;
          left: 0;
          top: 0;
          width: calc(100% + 32px);
          height: calc(100% + 32px);
          background-image: url(https://zj.neocities.org/images/scanlines.png);
          background-position-x: 0px;
          background-position-y: 0px;
          background-repeat: repeat;
          background-repeat-x: repeat;
          background-repeat-y: repeat;
          z-index: 10000000;
          animation: ScanlineAnimationLeft 2s linear infinite;
          animation-name: ScanlineAnimationLeft;
          animation-duration: 2s;
          animation-timing-function: linear;
          animation-iteration-count: infinite;
          pointer-events: none;
          opacity: 1;
      }

[close]

[wetnoodle]

I had a similar conondrum with my scanlines, I landed on this:

The script to toggle the animation

Code

<script>
     // stop animation
document.body.style.setProperty("--toggle", "0");
document.body.style.setProperty("--playState", "paused");

// play animation
document.body.style.setProperty("--toggle", "1");
document.body.style.setProperty("--playState", "running");
     
var bodyStyle = getComputedStyle(document.body);
var toggleValue = bodyStyle.getPropertyValue("--toggle");

var animationCheck = document.querySelector("#playAnimationCheckbox input");
animationCheck.addEventListener("click", setUserState, false);

var userSetting = sessionStorage.getItem("userAnimationState");
    
function setStoredState() {
  if (userSetting === "play") {
    animationCheck.checked = true;
  } else {
    animationCheck.checked = false;
  }
      
setUserState();
}

function setUserState() {
  if (animationCheck.checked) {
    document.body.style.setProperty("--toggle", "1");
    document.body.style.setProperty("--playState", "running");
    sessionStorage.setItem("userAnimationState", "play");
   } else {
    document.body.style.setProperty("--toggle", "0");
    document.body.style.setProperty("--playState", "paused");
    sessionStorage.setItem("userAnimationState", "stop")
   }
}
  </script>

this is the toggle box for it (goes anywhere on the page, even before the actual script)

Code

<ul style="width=300px"><label style="width=50%" id="playAnimationCheckbox"><input type="checkbox" checked/>Animated Scanlines</label>
</ul>

Then, in the css code for the animation, the --toggle and --playstate are used to either stop or continue the animation.

Code

/********* scanlines **********/

body::before{ 
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(20, 20, 40, 0) 66%, rgba(0, 0, 0, 0.20) 33%);
    background-size: 100% calc(3px * var(--toggle));
    z-index: 9999;
    pointer-events: none;
    
    animation: scanlines-anim 0.7s linear infinite;
        animation-play-state: var(--playState);
}

@keyframes scanlines-anim{
    0% {
		background-position: 0px 0px;
	}
	100% {
        background-position: 0px 9px;
	}
}


@media {

    .mainwindow{
        width: 90vw;
    }

    p{
        font-size: 0.9em;
    }
    .filewindow{
        width: 90vw;
    }
    
    .navbar #status{
        width: 40%;
        text-align: right;
    }

    /********* scanlines **********/
    body::before{
        background-size: 100% 5px;
    }
}

Definitely not the most elegant solution but it works and it most importantly (to me) leaves the paused scanlines there, though with a lil modification could just clear them all out

[zj]

Thank you! I'm not doing it right though, oops..

I added the <script> to my index page and the button to my sidebar. And tried both adding the css onto my pre-existing overlay css file and replacing it. Either way,, the button doesn't work and something in your code is making the scanlines much wider than they used to be.. 0_0

I'm doing something wrong but I'm not sure which part, help please :')

Also how would I make the toggle remove the lines? Would be nice to be able to compare it with and without them

[wetnoodle]

I'm not 100% sure but i think you'd basically only want the --toggle and --playState, this may not be any better but something like this maybe

Code

	/* animation */
	 
	@keyframes ScanlineAnimationRight {
	  	  0% {transform: translateX(0px) translateY(0px);}100% {transform: translateX(32px) translateY(-32px);}
	  	  }
	      @keyframes ScanlineAnimationLeft {
	  	  0% {transform: translateX(0px) translateY(0px);}100% {transform: translateX(-32px) translateY(-32px);}
	  	  }
	      body::before {
	          content: "";
	          display: block;
	          position: fixed;
	          left: 0;
	          top: 0;
	          width: calc(100% + 32px);
	          height: calc(100% + 32px * var(--toggle));
	          background-image: url(https://zj.neocities.org/images/scanlines.png);
	          background-position-x: 0px;
	          background-position-y: 0px;
	          background-repeat: repeat;
	          background-repeat-x: repeat;
	          background-repeat-y: repeat;
	          z-index: 10000000;
	          animation: ScanlineAnimationLeft 2s linear infinite;
	          animation-name: ScanlineAnimationLeft;
	          animation-duration: 2s;
	          animation-timing-function: linear;
	          animation-iteration-count: infinite;	        
                  animation-play-state: var(--playState);
	          pointer-events: none;
	          opacity: 1;
	      }

as for getting rid of them, I think this would do it but again not 100% sure

Code

@keyframes ScanlineAnimationRight {
	  	  0% {transform: translateX(0px) translateY(0px);}100% {transform: translateX(calc(32px * var(--toggle)) translateY(calc(-32px * var(--toggle));}
	  	  }
	      @keyframes ScanlineAnimationLeft {
	  	  0% {transform: translateX(0px) translateY(0px);}100% {transform: translateX(calc(-32px * var(--toggle)) translateY(calc(-32px * var(--toggle));}
	  	  }

[aribluejeans]

I previously had a CRT filter on my site and ended up taking it off entirely after testing a screen reader on it. It does, in fact, make your entire site unreadable with screen readers

Perhaps I will come back to this topic in the future if I ever decide to re-add it with a toggle. But yeah, it is important that it is toggled off by default since if it's blocking screen readers then people may have trouble finding the toggle if they are low vision or blind.

Sorry I don't have advice! Just thought it was important information related to this topic that people may not be aware of.

[zj]

I'm not 100% sure but i think you'd basically only want the --toggle and --playState, this may not be any better but something like this maybe

Code

	/* animation */
	 
	@keyframes ScanlineAnimationRight {
	  	  0% {transform: translateX(0px) translateY(0px);}100% {transform: translateX(32px) translateY(-32px);}
	  	  }
	      @keyframes ScanlineAnimationLeft {
	  	  0% {transform: translateX(0px) translateY(0px);}100% {transform: translateX(-32px) translateY(-32px);}
	  	  }
	      body::before {
	          content: "";
	          display: block;
	          position: fixed;
	          left: 0;
	          top: 0;
	          width: calc(100% + 32px);
	          height: calc(100% + 32px * var(--toggle));
	          background-image: url(https://zj.neocities.org/images/scanlines.png);
	          background-position-x: 0px;
	          background-position-y: 0px;
	          background-repeat: repeat;
	          background-repeat-x: repeat;
	          background-repeat-y: repeat;
	          z-index: 10000000;
	          animation: ScanlineAnimationLeft 2s linear infinite;
	          animation-name: ScanlineAnimationLeft;
	          animation-duration: 2s;
	          animation-timing-function: linear;
	          animation-iteration-count: infinite;	        
                  animation-play-state: var(--playState);
	          pointer-events: none;
	          opacity: 1;
	      }

as for getting rid of them, I think this would do it but again not 100% sure

Code

@keyframes ScanlineAnimationRight {
	  	  0% {transform: translateX(0px) translateY(0px);}100% {transform: translateX(calc(32px * var(--toggle)) translateY(calc(-32px * var(--toggle));}
	  	  }
	      @keyframes ScanlineAnimationLeft {
	  	  0% {transform: translateX(0px) translateY(0px);}100% {transform: translateX(calc(-32px * var(--toggle)) translateY(calc(-32px * var(--toggle));}
	  	  }

I tried the first version and nothing changed :') as the second thing was incomplete I tried adding it in the first version instead of the original, but that just remove all scanlines regardless of the button :/

I really don't know what it is I am doing different from you. Does it matter where the <script> is located or something?

[zj]

I previously had a CRT filter on my site and ended up taking it off entirely after testing a screen reader on it. It does, in fact, make your entire site unreadable with screen readers

Perhaps I will come back to this topic in the future if I ever decide to re-add it with a toggle. But yeah, it is important that it is toggled off by default since if it's blocking screen readers then people may have trouble finding the toggle if they are low vision or blind.

Sorry I don't have advice! Just thought it was important information related to this topic that people may not be aware of.

I've checked my site with a screen reader, my lines don't obstruct screen readers thankfully

[wetnoodle]

The difference is the way we animated the scanlines, I'd need to understand how yours work better to provide any more info on it. The script should be fine anywhere on the page. The toggle provides a 1 value while running and a 0 value when paused so it can be used to change the opacity maybe:

Code

  opacity: var(--toggle);

[seraph]

if you just mean the scanlines, then ive done the same thing on my site and i dont mind you taking a look at the code and using it for your own site, its nothing crazy and the toggle works real well :) although my site uses iframes, so the part of the site where different pages show up is in an iframe on the main page and the main page is where the scanlines and toggle button are

[aribluejeans]

I've checked my site with a screen reader, my lines don't obstruct screen readers thankfully

Ooh good to know, thanks! Yeah, I know there are a few different way to give your site a CRT effect and I suspected that it wouldn't be an issue with all of them. I just thought it was worth noting for anyone concerned about accessibility.

[zj]

The difference is the way we animated the scanlines, I'd need to understand how yours work better to provide any more info on it. The script should be fine anywhere on the page. The toggle provides a 1 value while running and a 0 value when paused so it can be used to change the opacity maybe:

Code

  opacity: var(--toggle);

I can't seem to get it to work :´) thank you though!

Ooh good to know, thanks! Yeah, I know there are a few different way to give your site a CRT effect and I suspected that it wouldn't be an issue with all of them. I just thought it was worth noting for anyone concerned about accessibility.

Yeah for sure worth noting :)

if you just mean the scanlines, then ive done the same thing on my site and i dont mind you taking a look at the code and using it for your own site, its nothing crazy and the toggle works real well :) although my site uses iframes, so the part of the site where different pages show up is in an iframe on the main page and the main page is where the scanlines and toggle button are

Thanks! Imma give it a shot later :)