Commits

Raphaël BECK  committed 03c9983

Colorblind, low vision & (light) blind

  • Participants
  • Parent commits 4b71f25

Comments (0)

Files changed (10)

File css/common.css

   float: left;
   padding: 8px 20px 12px;
   margin-left: -20px;
-  font-size: 20px;
+  font-size: 1.538em;
   font-weight: 200;
   line-height: 1;
   color: #999999; }
   margin-top: 0;
   opacity: 0.5; }
   body > footer:hover {
-    opacity: 1; }
+    opacity: 1;
+    background-color: #ffffff; }
 
 .row {
   *zoom: 1; }
   .tweet footer ul > li {
     display: inline; }
     .tweet footer ul > li img {
-      width: 24px;
+      width: 2.462em;
       -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
       border-radius: 4px;
 span.expand {
   font-family: 'EntypoRegular';
   cursor: pointer; }
+
+article.colorblind .images div {
+  width: 50%;
+  float: left; }
+  article.colorblind .images div img {
+    width: 60%;
+    border: 1px solid black; }
+  article.colorblind .images div:after {
+    clear: both;
+    display: table;
+    content: ""; }

File css/sass/blind.scss

+article{
+  float: none;
+}
+
+.container {
+  .row{
+    article {
+      float: none;
+      width: 100%;
+
+      header{
+        .icons{
+          display: none;
+          visibility: hidden;
+        }
+      }
+
+      &.art-icle .corpse{
+        height: auto;
+      }
+
+    }
+  }
+}
+
+.picturefill_wrapper{
+  visibility: hidden;
+}
+
+.tweet{
+  footer{
+    ul{
+      & > li {
+        display: block;
+      }
+    }
+  }
+}

File css/sass/common.scss

   float: left;
   padding: 8px 20px 12px;
   margin-left: -20px;
-  font-size: 20px;
+  //font-size: 20px;
+  font-size: px2em(20px, $base_font_size);
   font-weight: 200;
   line-height: 1;
   color: #999999;
   opacity: 0.5;
   &:hover{
     opacity: 1;
+    background-color: #ffffff;
   }
 }
 
         display: inline;
 
         img{
-          width: 24px;
+          width: px2em(32px, $base_font_size);
           @include border-radius(4px);
           float: left;
           margin-right: 5px;
 span.expand{
   font-family: 'EntypoRegular';
   cursor: pointer;
+}
+
+article.colorblind{
+  .images{
+    div{
+      width:50%;
+      float:left;
+
+      img{
+        width: 60%;
+        border: 1px solid black;
+      }
+
+      &:after {
+        clear: both;
+        display: table;
+        content: "";
+      }
+
+    }
+  }
+
 }

File css/sass/lowvision.scss

+body{
+  font-size: 3em;
+  line-height: 120%;
+  word-break: break-all;
+  background-color: #000000;
+  color: #ffffff;
+}
+
+h1{
+  line-height: 150%;
+}
+
+.container{
+  width: 100%;
+
+  .row article {
+    width: auto;
+    padding: 0.4em;
+    margin: 0.2em;
+
+    &.column1{
+     width: auto;
+    }
+
+    &.location{
+      width: 96%;
+      .corpse{
+        color: #000;
+      }
+    }
+
+    &.adaptations{
+      min-width: 80%;
+    }
+
+    &.art-icle .corpse{
+      height: auto;
+
+      .tag {
+        color: #008389;
+      }
+
+      .atn {
+        color: #FF00D9;
+      }
+
+      .com{
+        color: #FF0000;
+      }
+
+    }
+
+  }
+}
+
+.container .row article.column1.art-icle{
+  height: auto;
+}
+
+.tweet {
+  footer {
+    ul > li{
+      a{
+        strong{
+          display: inline;
+          color: #adff2f;
+        }
+      }
+    }
+  }
+}
+
+body > footer {
+  font-size: 0.3em;
+}
   <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
        chromium.org/developers/how-tos/chrome-frame-getting-started -->
   <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
-  <div class="navbar navbar-fixed-top">
+  <div class="navbar navbar-fixed-top" role="menubar">
       <div class="navbar-inner">
           <div class="container">
               <a class="btn btn-navbar">
               </a>
               <a class="brand" href="#">Adaptive.js</a>
               <div class="nav-collapse collapse">
-                  <ul class="nav">
-                      <li class="active"><a href="#">Home</a></li>
-                      <li><a href="tests_framework.html">Tests framework</a></li>
-                      <li><a href="tests_functional.html">Tests functional</a></li>
+                  <ul class="nav" role="menu">
+                      <li class="active"><a href="#" role="menuitem">Home</a></li>
+                      <li><a href="testsframework.html" role="menuitem">Tests framework</a></li>
+                      <li><a href="tests_functional.html" role="menuitem">Tests functional</a></li>
                   </ul>
               </div><!--/.nav-collapse -->
           </div>
             </div>
             <footer></footer>
         </article>
+        <article class="colorblind" data-url="colorblind">
+            <header>
+                <div class="title">
+                    <h1>Colorblind adaptation</h1>
+                </div>
+                <div class="icons">
+                    <span class="expand">Ñ</span>
+                </div>
+            </header>
+            <div class="corpse">
+                <p>Click on the red square on the left image</p>
+                <div class="images">
+                    <div>
+                        <p>What a normal person see</p>
+                        <img src="img/colorblind1.jpg" data-tips="The red is on the top-left" title="A picture with four squares. The red is on the top-left" alt="A picture with four squares. The red is on the top-left"/>
+                    </div>
+                    <div>
+                        <p>What a colorblind person see</p>
+                        <img src="img/colorblind2.jpg" title="A picture with four squares. The red is on the top-left" alt="A picture with four squares. The red is on the top-left"/>
+                    </div>
+                </div>
+                <div class="clearfix"></div>
+            </div>
+            <footer></footer>
+        </article>
     </div>
   </div>
 
   <footer>
       <button title="Launch adaptations" type="button" onclick="Adaptive.adapt(Adaptive.detect());">Launch adaptations</button>
+      <button title="I'm colorblind" type="button" onclick="setColorBlind();reloadWindow(window);">I'm colorblind</button>
+      <button title="I'm blind" type="button" onclick="setBlind();reloadWindow(window);">I'm blind</button>
+      <button title="I have low-vision" type="button" onclick="setLowVision();reloadWindow(window);">I have low-vision</button>
+      <button title="I don't have disabilities" type="button" onclick="setNoDisabilites();reloadWindow(window);">I don't have disabilities</button>
+      This website uses cookies
   </footer>
 
 

File js/adaptive.js

     })()
 };
 
+//Cookies helpers (http://www.w3schools.com/js/js_cookies.asp)
+function setCookie(c_name,value,exdays)
+{
+    var exdate=new Date();
+    exdate.setDate(exdate.getDate() + exdays);
+    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
+    document.cookie=c_name + "=" + c_value;
+}
+
+function getCookie(c_name)
+{
+    var i,x,y,ARRcookies=document.cookie.split(";");
+    for (i=0;i<ARRcookies.length;i++)
+    {
+        x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
+        y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
+        x=x.replace(/^\s+|\s+$/g,"");
+        if (x==c_name)
+        {
+            return unescape(y);
+        }
+    }
+}
+
 //======================================================================================================================
 // Adaptive.js
 // Author: R.BECK @rphbck
         });
     });
 
+    u.detection("colorblind", function(){
+        var colorBlind = getCookie("colorblind");
+        console.log("Detect:colorblind:"+((typeof colorBlind !== 'undefined') && colorBlind === "true"));
+        return (typeof colorBlind !== 'undefined') && colorBlind === "true";
+    });
+
+    u.adaptation("colorblind", function(w){
+        console.log("Adapt:colorblind");
+        tellAdaptation("Adapt:colorblind");
+        //Add tips for clickables images
+        $('img').each(function(){
+            var tips = $(this).data("tips");
+            if(typeof tips !== 'undefined'){
+                $(this).after($("<p></p>").text(tips));
+            }
+            //Raise the contrast of images
+            $(this).css("-webkit-filter", "contrast(200%)");
+        });
+    });
+
+    u.detection("lowvision", function(){
+        var lowVision = getCookie("lowvision");
+        console.log("Detect:lowvision:"+((typeof lowVision !== 'undefined') && lowVision === "true"));
+        return (typeof lowVision !== 'undefined') && lowVision === "true";
+    });
+
+    u.adaptation("lowvision", function(w){
+        console.log("Adapt:lowvision");
+        tellAdaptation("Adapt:lowvision");
+        Modernizr.load(
+            {
+                test: false,
+                nope: "css/lowvision.css",
+                complete: function(){
+                    console.log("Low vision complete");
+                }
+        });
+    });
+
+    u.detection("blind", function(){
+        var blind = getCookie("blind");
+        console.log("Detect:blind:"+((typeof blind !== 'undefined') && blind === "true"));
+        return (typeof blind !== 'undefined') && blind === "true";
+    });
+
+    u.adaptation("blind", function(w){
+        console.log("Adapt:blind");
+        tellAdaptation("Adapt:blind");
+
+        var tabIndexCandidates = ["[role='menu']", "[role='menuitem']", "article", "a[role!='menuitem']"];
+        for(var i=0, l=tabIndexCandidates.length; i < l; i++){
+            var $nodes = $(tabIndexCandidates[i]);
+            $nodes.attr("tabindex", i);
+        }
+        Modernizr.load("css/blind.css");
+    });
+
 })(window);
 /* Normalized hide address bar for iOS & Android (c) Scott Jehl, scottjehl.com MIT License */
 (function(a){var b=a.document;if(!location.hash&&a.addEventListener){window.scrollTo(0,1);var c=1,d=function(){return a.pageYOffset||b.compatMode==="CSS1Compat"&&b.documentElement.scrollTop||b.body.scrollTop||0},e=setInterval(function(){if(b.body){clearInterval(e);c=d();a.scrollTo(0,c===1?0:1)}},15);a.addEventListener("load",function(){setTimeout(function(){if(d()<20){a.scrollTo(0,c===1?0:1)}},0)})}})(this);
 
+function reloadWindow(w){
+    w.location.href = w.location.href;
+}
+
+/*********************Setters for current users specificities*******************************/
+//Colorblind
+function setColorBlind(){
+    setCookie("colorblind", true);
+    setCookie("lowvision", false);
+    setCookie("blind", false);
+}
+
+//Low vision
+function setLowVision(){
+    setCookie("lowvision", true);
+    setCookie("colorblind", false);
+    setCookie("blind", false);
+}
+
+//Blind
+function setBlind(){
+    setCookie("blind", true);
+    setCookie("colorblind", false);
+    setCookie("lowvision", false);
+}
+
+//No disabilities (unset others
+function setNoDisabilites(){
+    setCookie("colorblind", false);
+    setCookie("lowvision", false);
+    setCookie("blind", false);
+}
+

File tests/qunit/qunit.js

 		for ( i = 0; i < length; i++ ) {
 			current = params[ i ].split( "=" );
 			current[ 0 ] = decodeURIComponent( current[ 0 ] );
-			// allow just a key to turn on a flag, e.g., test.html?noglobals
+			// allow just a key to turn on a flag, e.g., tests.html?noglobals
 			current[ 1 ] = current[ 1 ] ? decodeURIComponent( current[ 1 ] ) : true;
 			urlParams[ current[ 0 ] ] = current[ 1 ];
 		}

File tests_framework.html

-<!doctype html>
-<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
-<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
-<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
-<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
-<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
-<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
-<head>
-    <meta charset="utf-8">
-
-    <!-- Use the .htaccess and remove these lines to avoid edge case issues.
- More info: h5bp.com/i/378 -->
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-
-    <title>Adaptive.js — A framework for managing polyfills</title>
-    <meta name="description" content="">
-
-    <!-- Mobile viewport optimized: h5bp.com/viewport -->
-    <meta name="viewport" content="width=device-width">
-
-    <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
-
-    <link rel="stylesheet" href="css/reset.css">
-    <link rel="stylesheet" href="css/common.css">
-
-    <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->
-
-    <!-- All JavaScript at the bottom, except this Modernizr build.
-Modernizr enables HTML5 elements & feature detects for optimal performance.
-Create your own custom Modernizr build: www.modernizr.com/download/ -->
-    <script src="js/libs/modernizr-2.5.3.min.js"></script>
-</head>
-<body>
-<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
-chromium.org/developers/how-tos/chrome-frame-getting-started -->
-<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
-<div role="main"></div>
-<footer>
-    <button onclick="Modernizr.load('tests/run_framework.js');">Launch tests</button>
-</footer>
-<!-- JavaScript at the bottom for fast page loading -->
-<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
-<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>
-
-<!-- scripts concatenated and minified via build script -->
-<script src="tests/utils.js"></script>
-<script src="js/libs/harvey.js"></script>
-<script src="js/adaptive.js"></script>
-
-<script src="tests/qunit/qunit.js" async="async"></script>
-
-<div class="overlay" id="tests" style="display: none;"><div><h1 id="qunit-header">Adaptive.js tests</h1><h2 id="qunit-banner"></h2><h2 id="qunit-userAgent"></h2><p id="qunit-testresult" class="result"></p><ol id="qunit-tests"></ol></div></div>
-
-</body>
-</html>

File testsframework.html

+<!doctype html>
+<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
+<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
+<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
+<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<head>
+    <meta charset="utf-8">
+
+    <!-- Use the .htaccess and remove these lines to avoid edge case issues.
+ More info: h5bp.com/i/378 -->
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+    <title>Adaptive.js — A framework for managing polyfills</title>
+    <meta name="description" content="">
+
+    <!-- Mobile viewport optimized: h5bp.com/viewport -->
+    <meta name="viewport" content="width=device-width">
+
+    <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
+
+    <link rel="stylesheet" href="css/reset.css">
+    <link rel="stylesheet" href="css/common.css">
+
+    <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->
+
+    <!-- All JavaScript at the bottom, except this Modernizr build.
+Modernizr enables HTML5 elements & feature detects for optimal performance.
+Create your own custom Modernizr build: www.modernizr.com/download/ -->
+    <script src="js/libs/modernizr-2.5.3.min.js"></script>
+</head>
+<body>
+<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
+chromium.org/developers/how-tos/chrome-frame-getting-started -->
+<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
+<div role="main"></div>
+<footer>
+    <button onclick="Modernizr.load('tests/run_framework.js');">Launch tests</button>
+</footer>
+<!-- JavaScript at the bottom for fast page loading -->
+<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>
+
+<!-- scripts concatenated and minified via build script -->
+<script src="tests/utils.js"></script>
+<script src="js/libs/harvey.js"></script>
+<script src="js/adaptive.js"></script>
+
+<script src="tests/qunit/qunit.js" async="async"></script>
+
+<div class="overlay" id="tests" style="display: none;"><div><h1 id="qunit-header">Adaptive.js tests</h1><h2 id="qunit-banner"></h2><h2 id="qunit-userAgent"></h2><p id="qunit-testresult" class="result"></p><ol id="qunit-tests"></ol></div></div>
+
+</body>
+</html>