Home Entrance Everyone Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
May 28, 2024 - @463.03 (what is this?)
Unread Topics | Unread Replies | Own Posts | Own Topics | Random Topic | Recent Posts
News: :transport: :transport: More is More :transport: :transport:

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  Accessibility toggle for elements?


« previous next »
Pages: [1] Print
Author Topic: Accessibility toggle for elements?  (Read 728 times)
zj
Jr. Member ⚓︎
**


StatusCafe: zeejay
iMood: zeejay

View Profile WWW

First 1000 Members!Joined 2023!
« on: November 11, 2023 @844.38 »

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?  :dunno:

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]
Logged

why dontcha have a peek at my site :eyes:
(23 years old)
this is Kurt ↓
gif of a ""tamaNOTchi". Click to feed!
click to feed him :3
wetnoodle
Jr. Member ⚓︎
**


a silly lil goose


View Profile WWW

Participated in the 2023 Profile Design Contest!First 1000 Members!Joined 2023!
« Reply #1 on: November 11, 2023 @854.35 »

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
« Last Edit: November 11, 2023 @866.45 by wetnoodle » Logged


zj
Jr. Member ⚓︎
**


StatusCafe: zeejay
iMood: zeejay

View Profile WWW

First 1000 Members!Joined 2023!
« Reply #2 on: November 11, 2023 @873.18 »

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
« Last Edit: November 11, 2023 @876.45 by zj » Logged

why dontcha have a peek at my site :eyes:
(23 years old)
this is Kurt ↓
gif of a ""tamaNOTchi". Click to feed!
click to feed him :3
wetnoodle
Jr. Member ⚓︎
**


a silly lil goose


View Profile WWW

Participated in the 2023 Profile Design Contest!First 1000 Members!Joined 2023!
« Reply #3 on: November 11, 2023 @884.62 »

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));}
	  	  }
« Last Edit: November 11, 2023 @890.17 by wetnoodle » Logged


aribluejeans
Casual Poster ⚓︎
*


she/they

iMood: aribluejeans

View Profile WWW

First 1000 Members!Joined 2023!
« Reply #4 on: November 11, 2023 @901.02 »

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 :ohdear:

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.
Logged

zj
Jr. Member ⚓︎
**


StatusCafe: zeejay
iMood: zeejay

View Profile WWW

First 1000 Members!Joined 2023!
« Reply #5 on: November 11, 2023 @914.22 »

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?
« Last Edit: November 11, 2023 @933.28 by zj » Logged

why dontcha have a peek at my site :eyes:
(23 years old)
this is Kurt ↓
gif of a ""tamaNOTchi". Click to feed!
click to feed him :3
zj
Jr. Member ⚓︎
**


StatusCafe: zeejay
iMood: zeejay

View Profile WWW

First 1000 Members!Joined 2023!
« Reply #6 on: November 11, 2023 @914.62 »

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 :ohdear:

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
« Last Edit: November 11, 2023 @933.11 by zj » Logged

why dontcha have a peek at my site :eyes:
(23 years old)
this is Kurt ↓
gif of a ""tamaNOTchi". Click to feed!
click to feed him :3
wetnoodle
Jr. Member ⚓︎
**


a silly lil goose


View Profile WWW

Participated in the 2023 Profile Design Contest!First 1000 Members!Joined 2023!
« Reply #7 on: November 12, 2023 @4.34 »

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);
Logged


seraph
Casual Poster ⚓︎
*


you're telling me a queer coded this?


View Profile WWW

First 1000 Members!Joined 2023!
« Reply #8 on: November 12, 2023 @138.56 »

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
Logged

aribluejeans
Casual Poster ⚓︎
*


she/they

iMood: aribluejeans

View Profile WWW

First 1000 Members!Joined 2023!
« Reply #9 on: November 12, 2023 @456.09 »

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.
Logged

zj
Jr. Member ⚓︎
**


StatusCafe: zeejay
iMood: zeejay

View Profile WWW

First 1000 Members!Joined 2023!
« Reply #10 on: November 12, 2023 @597.26 »



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 :)
Logged

why dontcha have a peek at my site :eyes:
(23 years old)
this is Kurt ↓
gif of a ""tamaNOTchi". Click to feed!
click to feed him :3
Pages: [1] Print 
« previous next »
 

Vaguely similar topics! (3)

Forum feature requests and Ideas

Started by MelooonBoard ⛄︎ ∙ Forum Info & Questions

Replies: 255
Views: 23221
Last post May 26, 2024 @716.46
by grubbyfox
xX Welcome to the Forum & Rules Xx

Started by MelooonBoard ⛄︎ ∙ Forum Info & Questions

Replies: 0
Views: 5665
Last post November 14, 2021 @627.84
by Melooon
How to use a forum?! - A guide for those who have forgotten/never knew!

Started by MelooonBoard ⛄︎ ∙ Forum Info & Questions

Replies: 2
Views: 3479
Last post April 22, 2023 @739.62
by Aloe

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines | Terms and Policies Forum Guide | Rules | RSS | WAP2


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi