WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] barrier-free wordpress - style-switcher (8 posts)

  1. bej-soan
    Member
    Posted 1 year ago #

    Hello there

    i'm currently working on a theme, with focus on barrier free access. I can't find much on this topic while searching, i'm looking if there are any plugins or articles.

    On a lot of barrier-free Websites theres the ability to deativate the standard style and change to a high-contrast or negative version. For Example here http://lflegal.com/site-help/?prefs=style (see right collumn > page tools)
    I have an idea, close to the suggestions from W3C with GET and if, activating another CSS, but I have some trouble about saving this value through the page via cookies. Is there a plugin or article on this topic somewhere?

    2.) Also on font-sizes: How to make a button to increase or decrease font sizes and saving it through the whole page? The CSS is no problem with EM and stuff. What is the best practice in this area or is there a plugi already available?

    Kind regards

    Björn

  2. bej-soan
    Member
    Posted 1 year ago #

    The only plugin I found so far is WP Accessibility, but that's not the feature I am looking for.

  3. esmi
    Forum Moderator
    Posted 1 year ago #

    As far as I know, thee isn't a decent stylesheet (as opposed to theme) switcher plugin available as yet. Creating one is on my ToDo list. In the meantime, there are some accessibility plugins listed on http://make.wordpress.org/accessibility/useful-tools/

  4. Joe Dolson
    Member
    Posted 1 year ago #

    The next release of WP Accessibility will include a contrast and font-size switcher, but it will be largely dependent on author-driven stylesheets. There'll be some defaults, but I can't guarantee that they'll be usable.

  5. bej-soan
    Member
    Posted 1 year ago #

    I built a working css and font size changer myself now.

    I think this feature will be possible to release in a plugin (the switching buttons) but the auhtors always have to make their own style-sheets for black and white contrast and other way around.

  6. bej-soan
    Member
    Posted 1 year ago #

    This is build from different codes I found on the internet.

    plugins.js

    //Font Size changer
    
    function resizeText(multiply) {
      var sz = document.body.style.fontSize;
      if (sz =='') sz = 1.0; //default font size
    
      var size = parseFloat(sz) + (multiply * 0.2) + "em";
      document.body.style.fontSize = size;
      createCookie("fs",size,365);
    }
    function resetText(){
    document.body.style.fontSize = "1.0em";
    size = "1.0em";
    createCookie("fs",size,365);
    }
    
    // Stylechanger
    function setActiveStyleSheet(title) {
      var i, a, main;
      for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
        if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
          a.disabled = true;
          if(a.getAttribute("title") == title) a.disabled = false;
        }
      }
    }
    
    function getActiveStyleSheet() {
      var i, a;
      for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
        if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
      }
      return null;
    }
    
    function getPreferredStyleSheet() {
      var i, a;
      for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
        if(a.getAttribute("rel").indexOf("style") != -1
           && a.getAttribute("rel").indexOf("alt") == -1
           && a.getAttribute("title")
           ) return a.getAttribute("title");
      }
      return null;
    }
    
    //Build and read Cookies
    function createCookie(name,value,days) {
      if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
      }
      else expires = "";
      document.cookie = name+"="+value+expires+"; path=/";
    }
    
    function readCookie(name) {
      var nameEQ = name + "=";
      var ca = document.cookie.split(';');
      for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
      }
      return null;
    }
    
    window.onload = function(e) {
      var cookie = readCookie("style");
      var title = cookie ? cookie : getPreferredStyleSheet();
      setActiveStyleSheet(title);
    
      var sz = readCookie('fs');
      if (sz != null && sz != '') {
         document.body.style.fontSize= sz;
      }
    }
    
    window.onunload = function(e) {
      var title = getActiveStyleSheet();
      createCookie("style", title, 365);
    }
    
    var cookie = readCookie("style");
    var title = cookie ? cookie : getPreferredStyleSheet();
    setActiveStyleSheet(title);
    
    var sz = readCookie('fs');
    if (sz != null && sz != '') {
       document.body.style.fontSize= sz;
    }

    And the file where the functions are activated (labels are in german)

    <div id="top">
    	<div id="holder">
    		<span id="bold">Erleichtere Bedienung</span>
    		<span>Schriftgröße (Font Size)</span>
    		<ul>
    			<li>
    			<a href="#" onclick="resizeText(1); return false;" title="Die Schrift vergr&ouml;&szlig;ern" ><img class="bigger" alt="+" src="<?php echo get_template_directory_uri(); ?>/styles/images/font_plus.png"></a>
    			</li><li>
    			<a href="#" class="smaller" onclick="resizeText(-1); return false;" title="Die Schrift verkleinern" ><img class="smaller" alt="+" src="<?php echo get_template_directory_uri(); ?>/styles/images/font_minus.png"></a>
    			</li><li>
    			<a href="#" onclick="resetText(); return false;" title="Normale Schrift" >Aus</a>
    			</li>
    		</ul>
    		<span>Kontrast (Contrast)</span>
    		<ul>
    			<li>
    			<a href="#" class="contrast-white" onclick="setActiveStyleSheet('contrast1'); return false;" title="Schwarz auf Wei&szlig;" ><img class="smaller" alt="con1" src="<?php echo get_template_directory_uri(); ?>/styles/images/contrast2.png"></a>
    			</li><li>
    			<a href="#" class="contrast-black" onclick="setActiveStyleSheet('contrast2'); return false;" title="Wei&szlig; auf Schwarz"><img class="smaller" alt="con2" src="<?php echo get_template_directory_uri(); ?>/styles/images/contrast1.png"></a>
    			</li><li>
    			<a href="#" onclick="setActiveStyleSheet('Default'); return false;" title="Kontrast ausschalten">Aus</a>
    			</li>
    		</ul>
    		<span>Leichte Sprache</span>
    		<ul>
    			<?php pll_the_languages();?>
    		</ul>
    	</div>
    </div><!-- #top -->
  7. RichardCoates
    Member
    Posted 1 year ago #

    Thanks for posting this, I need to do similar Accessibility controls for a project.

    I have one question if you don't mind - for the style switcher, it seems to be identifying the stylesheets by their title, which WordPress doesn't have as an attribute for stylesheets if you enqueue them in the usual way. Is there a reason for this when presumably it would be just as easy to use their IDs, or is that just the way you saw it done elsewhere?

  8. WebTrooper
    Member
    Posted 9 months ago #

    If you're still seeking a solution this might help..

    http://wordpress.org/plugins/wp-user-stylesheet-switcher/

    I don't know how well it works, but it does allow the site visitor to switch view using different style sheets.

    I just happened to stumble across that plugin and this post while searching for something similar, so thought I'd share my findings. What I'm looking for is different, but I like what you're trying to do for accessibility. I may look into this later. Best of luck!

Topic Closed

This topic has been closed to new replies.

About this Topic