From 20d3f4537a578c581285ae8c90da2af9f929be66 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sat, 13 Jul 2019 23:41:11 +0200
Subject: many changes to forms. starting to add labels

---
 StoneIsland/www/css/account.css                   |  60 ++---
 StoneIsland/www/css/blogs.css                     |  11 +-
 StoneIsland/www/css/cart.css                      |  24 +-
 StoneIsland/www/css/index.css                     |  12 +
 StoneIsland/www/css/nav.css                       |  44 ++--
 StoneIsland/www/css/products.css                  |  21 +-
 StoneIsland/www/index.html                        | 275 ++++++++++++----------
 StoneIsland/www/js/lib/cart/CartSummary.js        |   3 +-
 StoneIsland/www/js/lib/etc/accessibility.js       |   9 +-
 StoneIsland/www/js/lib/products/CollectionView.js |   2 +
 StoneIsland/www/js/lib/products/Selector.js       |   2 +-
 StoneIsland/www/js/lib/view/Serializable.js       |   7 +-
 12 files changed, 276 insertions(+), 194 deletions(-)

diff --git a/StoneIsland/www/css/account.css b/StoneIsland/www/css/account.css
index 32c7df79..c8c03aec 100755
--- a/StoneIsland/www/css/account.css
+++ b/StoneIsland/www/css/account.css
@@ -67,7 +67,7 @@
   content:'';
   width:calc(100% + 100px);
   height:1px;
-  background:#bbb;
+  background:#666;
   position:absolute;
   bottom:0;
   left:-50px;
@@ -128,6 +128,17 @@
   font-weight: bold;
 }
 
+label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 16px;
+  color: #000;
+  letter-spacing:1px;
+  text-transform:uppercase;
+  height: 48px;
+}
 input[type=text], input[type=password], input[type=number], input[type=date], input[type=email]  {
   font-family:pfd, sans-serif;
   font-size:14px;
@@ -135,13 +146,13 @@ input[type=text], input[type=password], input[type=number], input[type=date], in
   color:#000;
   letter-spacing:1px;
   text-transform:uppercase;
-  height:35px;
+  height: 48px;
   text-align:center;
   margin: 0px auto;
   display:block;
-  margin-top:4px;
+  margin-top: 0px;
   width: calc(100vw - 10px);
-  border:1px solid #a9a9a9;
+  border:1px solid #696969;
   padding: 0;
   border-radius: 0;
 }
@@ -164,12 +175,12 @@ input[type=text], input[type=password], input[type=number], input[type=email] {
   border:none;
   box-sizing: border-box;
   float: left;
-  border: 1px solid #a9a9a9;
+  border: 1px solid #696969;
   width: 50%;
 }
 
 .half-input > input:first-child {
-  border-right: 1px solid #a9a9a9;
+  border-right: 1px solid #696969;
 }
 
 #signup .toggle-container, #profile .toggle-container {
@@ -351,7 +362,7 @@ input.switch:checked + label:after {
 }
 
 .checkbox-container {
-  font-size:11px;
+  font-size:14px;
   width:calc(100vw - 10px);
   display:table;
   box-sizing:border-box;
@@ -463,13 +474,13 @@ input.switch:checked + label:after {
   color: #000;
   letter-spacing: 1px;
   text-transform: uppercase;
-  height: 35px;
+  height: 48px;
   text-align: center;
   margin: 0px auto;
   display: block;
   margin-top: 4px;
   width: calc(100vw - 10px);
-  border: 1px solid #a9a9a9;
+  border: 1px solid #696969;
 }
 .date-wrapper span {
   display: block;
@@ -480,7 +491,7 @@ input.switch:checked + label:after {
   margin-top: 0px;
   float: left;
   box-sizing: border-box;
-  border: 1px solid #a9a9a9;
+  border: 1px solid #696969;
   border-left: 0px;
 }
 
@@ -491,18 +502,17 @@ input.switch:checked + label:after {
 .select-wrapper [type=date] {
   opacity: 0;
   width: 100%;
-  height: 35px;
-  line-height: 35px;
+  height: 48px;
+  line-height: 48px;
   position: absolute;
   top: -5px;
   left: -1px;
-  width: 1px; height: 1px;
 }
 .select-wrapper select {
   opacity: 0;
   width: 100%;
-  height: 35px;
-  line-height: 35px;
+  height: 48px;
+  line-height: 48px;
   position: absolute;
   top: 0; left: 0;
   box-sizing: border-box;
@@ -512,8 +522,8 @@ input.switch:checked + label:after {
 }
 .select-wrapper span {
   position: relative;
-  top: 8px;
-  color: #888;
+  top: 15px;
+  color: #666;
 }
 .select-wrapper.picked span {
   color: #000;
@@ -521,33 +531,25 @@ input.switch:checked + label:after {
 
 .country-wrapper-static {
   text-align: center;
-  color: #a9a9a9;
+  color: #696969;
   border: 1px solid;
   padding-top: 9px;
   font-size: 14px;
-  height: 35px;
+  height: 48px;
   box-sizing: border-box;
 }
 
-.container-row input:first-child {
-margin-top:10px
-}
-
 .container-row .half-input input {
 margin-top:0px
 }
 
-#login .container-row input:first-child {
-margin-bottom:9px!important
-}
-
 .newuser {
   display:inline-block;
-  padding:14px;
+  padding:18px;
   text-decoration:underline
 }
 
 .forgotpassword {
-  padding:14px;
+  padding:18px;
   text-decoration:underline
 }
\ No newline at end of file
diff --git a/StoneIsland/www/css/blogs.css b/StoneIsland/www/css/blogs.css
index bf5ab68f..241cbecb 100755
--- a/StoneIsland/www/css/blogs.css
+++ b/StoneIsland/www/css/blogs.css
@@ -6,11 +6,18 @@
   margin: 15px 0 0;
   text-align: center;
   text-transform:uppercase;
+  display:flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
 }
 #story .links li {
-  padding: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 48px;
+  padding: 0 15px;
   list-style-type: none;
-  display: inline-block;
 }
 #story .links li:before {
   content: ' | ',
diff --git a/StoneIsland/www/css/cart.css b/StoneIsland/www/css/cart.css
index 7619a82b..8c31cf74 100755
--- a/StoneIsland/www/css/cart.css
+++ b/StoneIsland/www/css/cart.css
@@ -6,20 +6,24 @@
 
 #cart .steps {
   width: 100%;
-  border-bottom: 1px solid #bbb;
+  border-bottom: 1px solid #666;
   font-size: 0;
+  display: flex;
+  flex-direction: row;
 }
 #cart .steps span {
-  display: inline-block;
+  display: flex;
   font-size: 13px;
   text-align: center;
-  padding: 11px 0 10px;
-  color: #bbb;
+  color: #666;
   width: 33%;
   position:relative;
+  height: 48px;
+  justify-content: center;
+  align-items: center;
 }
 .summary_step, .shipping_step {
-  border-right: 1px solid #bbb
+  border-right: 1px solid #666;
 }
 
 #cart.summary .summary_step,
@@ -155,7 +159,7 @@ padding-left:5px;
 display:block;
 width:20px;
 height:20px;
-border:1px solid #d2d2d2;
+border:1px solid #b2b2b2;
 float:right;
 margin-bottom:10px;
 position:relative;
@@ -165,7 +169,7 @@ position:relative;
 content:'';
 width:1px;
 height:22px;
-background:#bbb;
+background:#333;
 position:absolute;
 top:50%;
 left:50%;
@@ -178,7 +182,7 @@ transform:rotate(45deg) translateX(-50%) translateY(-50%)
   content:'';
   width:1px;
   height:22px;
-  background:#bbb;
+  background:#333;
   position:absolute;
   top:50%;
   left:50%;
@@ -241,7 +245,7 @@ transform:rotate(45deg) translateX(-50%) translateY(-50%)
   width:calc(100vw - 30px);
   margin:0 auto;
   display:table;
-  color:#bbb;
+  color:#666;
   font-size:11px;
 }
 
@@ -274,7 +278,7 @@ transform:rotate(45deg) translateX(-50%) translateY(-50%)
 
 #orders .order_section {
   padding-bottom: 16px;
-  border-bottom: 1px solid #bbb;
+  border-bottom: 1px solid #666;
 }
 
 
diff --git a/StoneIsland/www/css/index.css b/StoneIsland/www/css/index.css
index 4d8e5514..9e665a4d 100755
--- a/StoneIsland/www/css/index.css
+++ b/StoneIsland/www/css/index.css
@@ -60,3 +60,15 @@ body {
   color: red !important;
   border-color: red !important;
 }
+.error_hilite ~ span.err {
+  display: flex;
+}
+span.err {
+  display: none;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  height: 48px;
+  color: red !important;
+}
diff --git a/StoneIsland/www/css/nav.css b/StoneIsland/www/css/nav.css
index 885ee500..9a4f63d8 100755
--- a/StoneIsland/www/css/nav.css
+++ b/StoneIsland/www/css/nav.css
@@ -79,7 +79,7 @@
   display: block;
   font-size: 14px;
   letter-spacing:1.25px;
-  color: #bbb;
+  color: #666;
   padding: 4px 0 12px 20px
 }
 
@@ -94,7 +94,7 @@
   float: left;
   width: 61px;
   border-left: 1px solid #ddd;
-  color: #bbb;
+  color: #666;
   font-size: 18px;
   padding: 5px 0;
   text-align: center;
@@ -137,10 +137,13 @@ padding-bottom:0px;
 }
 #intro div {
   position: absolute;
-  top: 50%; left: 50%;
+  top: 50%;
+  left: 50%;
   width: 200px;
-  padding: 50px;
-  text-align: center;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   font-size: 17px;
 }
 #intro #compass {
@@ -219,30 +222,30 @@ padding-bottom:0px;
 }
 
 #header .cart_rapper {
-  display: inline-block;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
   position: relative;
   float: right;
-  width: 48px; height: 48px;
+  width: 44px; height: 48px;
 }
 #header .cart {
   position: relative;
-  float: right;
   width: 18px;
-  top: 5px;
+  margin-bottom: 10px;
   height: 18px;
-  margin-right: 0px;
   background: #fff;
   background-image:url(../img/cart-box.png);
   background-size:100%;
   background-repeat:no-repeat;
 }
 
-.cart .cart_count {
+#header .cart .cart_count {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateY(-50%) translateX(-50%);
-  color: #bbb;
+  color: #666;
   font-size:12.35px;
 }
 
@@ -273,12 +276,16 @@ padding-bottom:0px;
 }
 #footer div {
   width: 50%;
+  height: 48px;
   text-align: center;
-  padding: 12px 0;
   color: #000;
   float: left;
   font-size:14px;
   font-weight:bold;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 #footer .ok {
   color: #000;
@@ -287,7 +294,7 @@ padding-bottom:0px;
   width: 100%;
 }
 #footer .ok.disabled {
-  color: #bbb;
+  color: #666;
 }
 
 
@@ -400,7 +407,7 @@ padding-bottom:0px;
 #selector:not(.selector-outer-wrap) .options div {
   background: white;
   text-align: center;
-  padding: 7px 12px;
+  padding: 12px 12px;
   box-sizing:border-box;
   font-size: 14px;
   border-left:1px solid black;
@@ -481,9 +488,12 @@ padding-bottom:0px;
 h1 {
   text-align: center;
   margin: 0;
-  padding: 16px 10px 12px 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   border-bottom: 1px solid #000;
-  font-size: 14px;
+  height: 48px;
+  font-size: 16px;
   color: #000;
   letter-spacing: 1px;
   font-weight: bold;
diff --git a/StoneIsland/www/css/products.css b/StoneIsland/www/css/products.css
index 1a7d5ba2..002c086b 100755
--- a/StoneIsland/www/css/products.css
+++ b/StoneIsland/www/css/products.css
@@ -143,7 +143,11 @@
 
 .product .share {
   float:right;
-  padding: 12px 12px;
+  padding: 0 12px;
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   border:1px solid black;
 }
 
@@ -152,13 +156,20 @@
   font-size:14px;
 }
 
-.product span {
+.product .size-color {
+  display: flex;
+  flex-direction: row;
+}
+.product .size-color span {
   position:relative;
   box-sizing:border-box;
-  display: inline-block;
-  padding: 12px;
+  padding: 0 12px;
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-.product span.size {
+.product .size-color span.size {
   border-right: 1px solid #444;
 }
 
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index 9ea46a85..bad250d3 100755
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -28,95 +28,95 @@
   <link rel="stylesheet" type="text/css" href="css/blogs.css">
   <title>Stone Island</title>
 </head>
-<body class="loading">
+<body class="loading" role="application">
 
 <div id="nav">
   <div id="nav-container">
   <div id="nav-row">
   <!-- flex -->
   
-  <span class="menu">
-    <div class="logo"></div>
-    <div class="main_menu">
-      <span class="store">STORE</span>
-      <span class="hub">HUB</span>
-      <span class="story">STORY</span>
-      <span class="archive">ARCHIVE</span>
+  <span role="menu" class="menu">
+    <div class="logo" aria-label="Stone Island"></div>
+    <div role="menu" aria-label="Main Menu" class="main_menu">
+      <span role="link" class="store">STORE</span>
+      <span role="link" class="hub">HUB</span>
+      <span role="link" class="story">STORY</span>
+      <span role="link" class="archive">ARCHIVE</span>
     </div>
-    <div class="account_menu">
-      <span class="account_back menu-emphasis">&lt; MY ACCOUNT</span>
-      <span class="profile">MY PROFILE</span>
-      <span class="payment">MY CARD</span>
-      <span class="shipping">ADDRESS BOOK</span>
-      <span class="orders">MY ORDERS</span>
-      <span class="return_link">RETURNS</span>
-      <span class="settings">NOTIFICATIONS</span>
+    <div role="menu" aria-label="Account Menu" class="account_menu">
+      <span role="link" class="account_back menu-emphasis">&lt; MY ACCOUNT</span>
+      <span role="link" class="profile">MY PROFILE</span>
+      <span role="link" class="payment">MY CARD</span>
+      <span role="link" class="shipping">ADDRESS BOOK</span>
+      <span role="link" class="orders">MY ORDERS</span>
+      <span role="link" class="return_link">RETURNS</span>
+      <span role="link" class="settings">NOTIFICATIONS</span>
     </div>
-    <div class="faq_menu">
-      <span class="faq_back menu-emphasis">&lt; FAQ</span>
-      <span class="privacy">PRIVACY POLICY</span>
-      <span class="account_terms">MY ACCOUNT TERMS AND CONDITIONS OF USE</span>
-      <span class="terms">TERMS AND CONDITIONS</span>
-      <span class="returns">RETURN POLICY</span>
-      <span class="care">CUSTOMER CARE</span>
+    <div role="menu" aria-label="FAQ Menu" class="faq_menu">
+      <span role="link" class="faq_back menu-emphasis">&lt; FAQ</span>
+      <span role="link" class="privacy">PRIVACY POLICY</span>
+      <span role="link" class="account_terms">MY ACCOUNT TERMS AND CONDITIONS OF USE</span>
+      <span role="link" class="terms">TERMS AND CONDITIONS</span>
+      <span role="link" class="returns">RETURN POLICY</span>
+      <span role="link" class="care">CUSTOMER CARE</span>
     </div>
   </span>
   
   </div>
   <div id="nav-fill">
   <!-- flex fill -->
-  <span class="submenu">
+  <span role="menu" class="submenu">
     <div class="main_menu">
-      <span class="account">MY ACCOUNT</span>
-      <span class="login">LOGIN</span>
-      <span class="faq">FAQ</span>
+      <span role="link" class="account">MY ACCOUNT</span>
+      <span role="link" class="login">LOGIN</span>
+      <span role="link" class="faq">FAQ</span>
     </div>
     <div class="account_menu">
-      <span class="logout">LOGOUT</span>
-      <span class="faq">FAQ</span>
-      <span class="main">MAIN MENU</span>
+      <span role="link" class="logout">LOGOUT</span>
+      <span role="link" class="faq">FAQ</span>
+      <span role="link" class="main">MAIN MENU</span>
     </div>
     <div class="faq_menu">
-      <span class="account">MY ACCOUNT</span>
-      <span class="login">LOGIN</span>
-      <span class="logout">LOGOUT</span>
-      <span class="main">MAIN MENU</span>
+      <span role="link" class="account">MY ACCOUNT</span>
+      <span role="link" class="login">LOGIN</span>
+      <span role="link" class="logout">LOGOUT</span>
+      <span role="link" class="main">MAIN MENU</span>
     </div>
   </span>
   </div>
   <!-- end flex -->
   </div>
 
-  <span class="social">
-    <span class="fb ion-social-facebook"></span>
-    <span class="insta ion-social-instagram-outline"></span>
-    <span class="tw ion-social-twitter"></span>
-    <span class="yt ion-social-youtube"></span>
+  <span class="social" role="list" aria-label="Social Links">
+    <span role="link" class="fb ion-social-facebook"></span>
+    <span role="link" class="insta ion-social-instagram-outline"></span>
+    <span role="link" class="tw ion-social-twitter"></span>
+    <span role="link" class="yt ion-social-youtube"></span>
   </span>
 </div>
 
 <div id="content">
 
-  <div id="intro">
+  <div id="intro" role="menu" aria-label="Stone Island Home Screen">
     <div id="compass"></div>
-    <div class="store">STORE</div>
-    <div class="hub">HUB</div>
-    <div class="story">STORY</div>
-    <div class="archive">ARCHIVE</div>
+    <div role="link" class="store">STORE</div>
+    <div role="link" class="hub">HUB</div>
+    <div role="link" class="story">STORY</div>
+    <div role="link" class="archive">ARCHIVE</div>
     <div class="alert"></div>
-    <span class="latlng">+40&deg; 58' 90.9" N&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;74&deg; 04' 46.3" W</span>
+    <span class="latlng" role="note" aria-label="Your Latitude and Longitude">+40&deg; 58' 90.9" N&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;74&deg; 04' 46.3" W</span>
   </div>
 
   <div id="header">
-    <span class="burger ion-android-menu"></span>
-    <span class="logo"></span>
-    <span class="cart_rapper"><span class="cart"><span class="cart_count">0</span></span></span>
+    <span role="menu" aria-label="Show main menu" class="burger ion-android-menu"></span>
+    <span role="link" aria-label="Homepage. Stone Island logo" class="logo"></span>
+    <span role="link" aria-label="View cart" class="cart_rapper"><span class="cart"><span role="display" class="cart_count">0</span></span></span>
   </div>
 
   <div id="footer">
     <!-- 'Cancel' i think needs to go BACK in the navigation.. rather than jumping to the home screen -->
-    <div class="cancel">CANCEL</div>
-    <div class="ok">OK</div>
+    <div role="button" class="cancel">CANCEL</div>
+    <div role="button" class="ok">OK</div>
   </div>
 
 
@@ -124,7 +124,7 @@
 
   <div id="story">
     <div class="scroll">
-      <h1>STORY</h1>
+      <h1 aria-label="Current section: Stone Island Story">STORY</h1>
       <img>
       <ul class="links"></ul>
       <div class="content">
@@ -139,19 +139,19 @@
 
   <div id="hub">
     <div class="scroll">
-      <h1>HUB</h1>
+      <h1 aria-label="Current section: Stone Island Hub">HUB</h1>
       <div class="content">
         <script type="text/html" class="template">
           <div class="hub_item" data-id="{{id}}">
-            <div class="gallery gallery-{{id}}"></div>
-            <div class="gallery-left"></div>
-            <div class="gallery-right"></div>
-            <div class="content-header">
-            <div class="content-share">
-            SHARE +
+            <div class="gallery gallery-{{id}}" role="carousel"></div>
+            <div role="button" class="gallery-left"></div>
+            <div role="button" class="gallery-right"></div>
+            <div role="heading" class="content-header">
+            <div role="button" class="content-share">
+              SHARE +
             </div>
-            <span class="title">{{title}}</span>
-            <span class="subtitle">{{subtitle}}</span>
+            <span role="heading" class="title">{{title}}</span>
+            <span role="heading" class="subtitle">{{subtitle}}</span>
             <span class="date">
               {{date}}
               <span class="store">
@@ -195,20 +195,21 @@
       </div>
     </div>
     <div class="heading">
-      <h1>ARCHIVE</h1>
-      <div class="subtitle">'982'015</div>
+      <h1 role="heading" aria-label="Current section: Stone Island Archive">ARCHIVE</h1>
+      <div role="heading" class="subtitle" aria-label="1982 to 2015">'982'015</div>
     </div>
   </div>
   
   <div id="privacy" class="page">
     <div class="scroll">
-      <h1>PRIVACY POLICY</h1>
+      <h1 aria-label="Current section: Privacy Policy">PRIVACY POLICY</h1>
       <div class="content"></div>
     </div>
   </div>
+
   <div id="account_terms" class="page">
     <div class="scroll">
-      <h1>MY ACCOUNT TERMS AND CONDITIONS OF USE</h1>
+      <h1 aria-label="Current section: My Account terms and conditions of use">MY ACCOUNT TERMS AND CONDITIONS OF USE</h1>
       <div class="content">
         <h2>1. Services</h2>
         <p>
@@ -261,21 +262,24 @@
       </div>
     </div>
   </div>
+
   <div id="terms" class="page">
     <div class="scroll">
-      <h1>TERMS AND CONDITIONS</h1>
+      <h1 aria-label="Current section: Terms and conditions">TERMS AND CONDITIONS</h1>
       <div class="content"></div>
     </div>
   </div>
+
   <div id="returns" class="page">
     <div class="scroll">
-      <h1>RETURN POLICY</h1>
+      <h1 aria-label="Current section: Return policy">RETURN POLICY</h1>
       <div class="content"></div>
     </div>
   </div>
+
   <div id="care" class="page">
     <div class="scroll">
-      <h1>CUSTOMER CARE</h1>
+      <h1 aria-label="Current section: Customer care">CUSTOMER CARE</h1>
       <div class="content"></div>
     </div>
   </div>
@@ -285,12 +289,12 @@
 
   <div id="collection">
     <div class="scroll">
-      <h1>LOADING...</h1>
+      <h1 aria-label="Current section: Store loading...">LOADING...</h1>
       <div class="loader"></div>
       <div class="content">
         <script type="text/html" class="template">
-          <div class="item" data-code="{{code8}}">
-            <img src="{{image}}">
+          <div role="link" class="item" data-code="{{code8}}">
+            <img src="{{image}}" alt="{{title}}">
           </div>
         </script>
       </div>
@@ -299,7 +303,7 @@
 
   <div id="search">
     <div class="scroll">
-      <h1>SEARCH</h1>
+      <h1 aria-label="Current section: Search">SEARCH</h1>
       <div class="form">
         <input type="text" class="q" placeholder="ENTER YOUR SEARCH">
       </div>
@@ -309,16 +313,16 @@
   <div id="product">
     <div class="scroll">
       <div class="loader"></div>
-      <div id="gallery" class="gallery">
+      <div id="gallery" class="gallery" role="carousel">
         <script type="text/html" class="template">
-          <div class="item" aria-label="{{alt}}" style="background-image:url({{image}})"></div>
+          <div role="link" class="item" aria-label="{{alt}}" style="background-image:url({{image}})"></div>
         </script>
       </div>
-      <div class="gallery-left" aria-label="Scroll gallery left"></div>
-      <div class="gallery-right" aria-label="Scroll gallery right"></div>
+      <div role="button" class="gallery-left" aria-label="Scroll gallery left"></div>
+      <div role="button" class="gallery-right" aria-label="Scroll gallery right"></div>
       <div class="content">
         <div class="product-header">
-        <span class="title"></span>
+          <span role="heading" class="title"></span>
         </div>
         <div class="type-price">
           <span class="type"></span>
@@ -327,11 +331,11 @@
         <div class="style-share">
         <span class="style">
           <div class="size-color">
-            <span class="size"></span>
-            <span class="color"></span>
+            <span role="button" class="size" aria-label="Tap to select size. Current size"></span>
+            <span role="button" class="color" aria-label="Tap to select color. Current color"></span>
           </div>
         </span>
-        <span class="share">SHARE +</span>
+        <span role="button" class="share">SHARE +</span>
         </div>
         <div class="fit">Fits Large</div>
         <div class='fitHeader'></div>
@@ -354,7 +358,7 @@
       </h3>
       <h4>
       </h4>
-      <div class="website_link">
+      <div role="link" class="website_link">
         visit<br>
         <b>www.stoneisland.com</b>
       </div>
@@ -366,31 +370,33 @@
 
   <div id="login">
     <div class="scroll">
-      <h1>LOGIN</h1>
+      <h1 aria-label="Current section: Log In">LOGIN</h1>
       <div class="form">
         <div class="container">
           <div class="container-row">
-            <input type="email" name="Email" placeholder="EMAIL ADDRESS" required tabindex="1">
-            <form><input type="password" name="Password" placeholder="PASSWORD" required tabindex="2"></form>
+            <label for="login_email_address">Email Address</label>
+            <input type="email" id="login_email_address" name="Email" aria-placeholder="EMAIL ADDRESS" required tabindex="1">
+            <label for="login_password">Password</label>
+            <form><input type="password" id="login_password" name="Password" aria-placeholder="PASSWORD" required tabindex="2"></form>
           </div>
           <div class="container-fill">
             <div class="container-message premessage">               
-              <div class="newuser">New User?</div>
-              <div class="forgotpassword">Forgot Password?</div>
+              <div rel="link" class="newuser">New User?</div>
+              <div rel="link" class="forgotpassword">Forgot Password?</div>
             </div>
             <div class="container-message submessage">
               <span class="msg"></span>
             </div>
           </div>
         </div>
-        <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;">
+        <input type="submit" aria-label="Submit form" style="position: absolute; left: -9999px; width: 1px; height: 1px;">
       </div>
     </div>
   </div>
 
   <div id="logout">
     <div class="scroll">
-      <h1>LOGOUT</h1>
+      <h1 aria-label="Current section: You are now Logged Out">LOGOUT</h1>
       <div class="container">
         <div class="container-fill">
         <span class="container-message msg">
@@ -403,50 +409,69 @@
 
   <div id="signup">
     <div class="scroll">
-      <h1>NEW USER</h1>
+      <h1 aria-label="Current section: New User. Create an account">NEW USER</h1>
       <div class="form">
         <div class="container">
           <div class="container-row">
-          <input type="text" name="Name" placeholder="FIRST NAME" required tabindex="1">
-          <input type="text" name="Surname" placeholder="LAST NAME" required tabindex="2">
-          <input type="email" name="Email" placeholder="EMAIL ADDRESS" required tabindex="3">
-          <input type="email" name="ConfirmEmail" placeholder="CONFIRM EMAIL ADDRESS" required tabindex="4">
+          <label for="signup_name">First Name</label>
+          <input type="text" id="signup_name" name="Name" aria-placeholder="FIRST NAME" required tabindex="1">
+          <span class='err' id="signup_name_error"></span>
+
+          <label for="signup_surname">Last Name</label>
+          <input type="text" id="signup_surname" name="Surname" aria-placeholder="LAST NAME" required tabindex="2">
+          <span class='err' id="signup_surname_error"></span>
+
+          <label for="signup_email">Email Address</label>
+          <input type="email" id="signup_email" name="Email" aria-placeholder="EMAIL ADDRESS" required tabindex="3">
+          <span class='err' id="signup_email_error"></span>
+
+          <label for="signup_confirmemail">Confirm Email Address</label>
+          <input type="email" id="signup_confirmemail" name="ConfirmEmail" aria-placeholder="CONFIRM EMAIL ADDRESS" required tabindex="4">
+          <span class='err' id="signup_confirmemail_error"></span>
+
+          <label for="signup_birthday">Birthday (MM/DD/YYYY)</label>
           <div class="select-wrapper date-wrapper">
-            <span>BIRTHDAY (MM/DD/YYYY)</span>
-            <input type="date" name="BirthDay" min="1900-01-01" placeholder="BIRTHDAY (MM/DD/YYYY)" required tabindex="5">
+            <span></span>
+            <input type="date" id="signup_birthday" name="BirthDay" aria-label="Birthday" min="1900-01-01" aria-placeholder="BIRTHDAY (MM/DD/YYYY)" required tabindex="5">
           </div>
+          <span class='err' id="signup_birthday_error"></span>
 
           <h2>PASSWORD</h2>
-          <input type="password" name="Password" placeholder="PASSWORD (7 CHARACTERS OR MORE)" required tabindex="6">
-          <input type="password" name="Password2" placeholder="CONFIRM PASSWORD" required tabindex="7">
+          <label for="signup_password">Password (7 Characters or more)</label>
+          <input type="password" id="signup_password" name="Password" aria-placeholder="PASSWORD (7 CHARACTERS OR MORE)" required tabindex="6">
+          <span class='err' id="signup_password_error"></span>
+
+          <label for="signup_confirm_password">Confirm Password</label>
+          <input type="password" id="signup_confirm_password" name="Password2" aria-placeholder="CONFIRM PASSWORD" required tabindex="7">
+          <span class='err' id="signup_confirm_password_error"></span>
           </div>
 
           <div class="container-row">
-            <div class="checkbox-container ">
+            <div class="checkbox-container">
               <div class="checkbox-row">
                 <div class="checkbox-toggle">
-                   <input type="checkbox" id="checkbox-data-profiling" name="YooxLetter" value="true" required tabindex="8">
+                   <input type="checkbox" id="checkbox-data-profiling" aria-labelledby="checkbox-data-profiling-label" name="YooxLetter" value="true" required tabindex="8">
                    <label for="checkbox-data-profiling"></label>
                 </div>
-                <label class="checkbox-caption" for="checkbox-data-profiling">
+                <label class="checkbox-caption" for="checkbox-data-profiling" id="checkbox-data-profiling-label">
                   I AGREE TO STONE ISLAND - SPORTSWEAR COMPANY COLLECTING AND PROCESSING MY PERSONAL INFORMATION FOR MARKETING PURPOSES.
                 </label>
               </div>              
               <div class="checkbox-row">
                 <div class="checkbox-toggle">
-                   <input type="checkbox" id="checkbox-shopping-data-profiling" name="DataProfiling" value="true" required tabindex="9">
+                   <input type="checkbox" id="checkbox-shopping-data-profiling" aria-labelledby="checkbox-shopping-data-profiling-label" name="DataProfiling" value="true" required tabindex="9">
                    <label for="checkbox-shopping-data-profiling"></label>
                 </div>
-                <label class="checkbox-caption" for="checkbox-shopping-data-profiling">
+                <label class="checkbox-caption" for="checkbox-shopping-data-profiling" id="checkbox-shopping-data-profiling-label">
                   I AGREE TO STONE ISLAND - SPORTSWEAR COMPANY COLLECTING AND PROCESSING MY PERSONAL INFORMATION TO CUSTOMIZE MY SHOPPING EXPERIENCE BASED ON MY INTERESTS AND HABITS.
                 </label>
               </div>
               <div class="checkbox-row">
                 <div class="checkbox-toggle">
-                   <input type="checkbox" id="checkbox-shopping-account-terms" name="GdprTerms" value="true" required tabindex="10">
+                   <input type="checkbox" id="checkbox-shopping-account-terms" aria-labelledby="checkbox-gdpr-terms-label"  name="GdprTerms" value="true" required tabindex="10">
                    <label for="checkbox-shopping-data-profiling"></label>
                 </div>
-                <label class="checkbox-caption" for="checkbox-shopping-account-terms">
+                <label class="checkbox-caption" for="checkbox-shopping-account-terms" id="checkbox-gdpr-terms-label">
                   I ACCEPT MY ACCOUNT TERMS AND CONDITIONS OF USE *
                 </label>
               </div>
@@ -467,21 +492,21 @@
   
   <div id="profile">
     <div class="scroll">
-      <h1>MY PROFILE</h1>
+      <h1 aria-label="Current section: My Profile">MY PROFILE</h1>
       <div class="form">
         <div class="container">
           <div class="container-row">
-            <input type="text" name="Name" placeholder="FIRST NAME" required tabindex="1">
-            <input type="text" name="Surname" placeholder="LAST NAME" required tabindex="2">
-            <input type="email" name="Email" placeholder="EMAIL ADDRESS" required tabindex="3">
+            <input type="text" name="Name" aria-label="First name" placeholder="FIRST NAME" required tabindex="1">
+            <input type="text" name="Surname" aria-label="Last name" placeholder="LAST NAME" required tabindex="2">
+            <input type="email" name="Email" aria-label="Email address" placeholder="EMAIL ADDRESS" required tabindex="3">
             <div class="select-wrapper date-wrapper">
               <span>BIRTHDAY (MM/DD/YYYY)</span>
-              <input type="date" name="BirthDay" min="1900-01-01" placeholder="BIRTHDAY (MM/DD/YYYY)" required tabindex="4">
+              <input type="date" name="BirthDay" aria-label="Birthday" min="1900-01-01" placeholder="BIRTHDAY (MM/DD/YYYY)" required tabindex="4">
             </div>
 
             <h2>CHANGE PASSWORD</h2>
-            <input type="password" name="CurrentPassword" placeholder="CURRENT PASSWORD" required>
-            <input type="password" name="NewPassword" placeholder="NEW PASSWORD (7 CHARACTERS OR MORE)" required tabindex="5">
+            <input type="password" name="CurrentPassword" aria-label="Current password" placeholder="CURRENT PASSWORD" required>
+            <input type="password" name="NewPassword" aria-label="New password (seven characters or more)" placeholder="NEW PASSWORD (7 CHARACTERS OR MORE)" required tabindex="5">
             <div class="container-fill container-fill-condensed">
               <div class="container-message container-message-condensed">
                 <span class="msg msg-condensed">
@@ -492,19 +517,19 @@
               <div class="checkbox-container">
                 <div class="checkbox-row">
                   <div class="checkbox-toggle">
-                     <input type="checkbox" id="checkbox-data-profiling-profile" name="YooxLetter" value="true" required tabindex="7">
+                     <input type="checkbox" id="checkbox-data-profiling-profile" aria-labelledby="yoox-letter-checkbox" name="YooxLetter" value="true" required tabindex="7">
                      <label for="checkbox-data-profiling-profile"></label>
                   </div>
-                  <label class="checkbox-caption" for="checkbox-data-profiling-profile">
+                  <label class="checkbox-caption" for="checkbox-data-profiling-profile" id="yoox-letter-checkbox">
                     I AGREE TO STONE ISLAND - SPORTSWEAR COMPANY COLLECTING AND PROCESSING MY PERSONAL INFORMATION FOR MARKETING PURPOSES.
                   </label>
                 </div>
                 <div class="checkbox-row">
                   <div class="checkbox-toggle">
-                     <input type="checkbox" id="checkbox-shopping-data-profiling-profile" name="DataProfiling" value="true" required tabindex="8">
+                     <input type="checkbox" id="checkbox-shopping-data-profiling-profile" aria-labelledby="yoox-data-profiling-checkbox" name="DataProfiling" value="true" required tabindex="8">
                      <label for="checkbox-shopping-data-profiling-profile"></label>
                   </div>
-                  <label class="checkbox-caption" for="checkbox-shopping-data-profiling-profile">
+                  <label class="checkbox-caption" for="checkbox-shopping-data-profiling-profile" id="yoox-data-profiling-checkbox">
                     I AGREE TO STONE ISLAND - SPORTSWEAR COMPANY COLLECTING AND PROCESSING MY PERSONAL INFORMATION TO CUSTOMIZE MY SHOPPING EXPERIENCE BASED ON MY INTERESTS AND HABITS.
                   </label>
                 </div>
@@ -524,7 +549,7 @@
   
   <div id="shipping">
     <div class="scroll">
-      <h1>ADDRESS BOOK</h1>
+      <h1 aria-label="Current section: Your address book">ADDRESS BOOK</h1>
       <div class="form">
         <div class="container">
           <div class="container-row">
@@ -548,7 +573,7 @@
   
   <div id="payment">
     <div class="scroll">
-      <h1>MY CARD</h1>
+      <h1 aria-label="Current section: My Card">MY CARD</h1>
       <div class="form">
         <div class="container">
           <div class="container-row">
@@ -573,7 +598,7 @@
 
   <div id="settings">
     <div class="scroll">
-      <h1>NOTIFICATIONS</h1>
+      <h1 aria-label="Current section: Notifications">NOTIFICATIONS</h1>
       <div class="form">
         <div class="toggle-container">
           <div class="toggle-row">
@@ -603,7 +628,7 @@
   
   <div id="orders">
     <div class="scroll">
-      <h1>MY ORDERS</h1>
+      <h1 aria-label="Current section: My orders">MY ORDERS</h1>
       <div id="order_list">
         <div class="list"></div>
         <div class="empty">You have no orders.</div>
@@ -682,11 +707,11 @@
   <!-- CART ================================================ -->
 
   <div id="cart">
-    <h1>
-      <span class="full_msg">
+    <h1 role="presentation">
+      <span class="full_msg" role="heading" aria-label="Current section: Your cart">
         YOUR CART / <span class="itemcount"></span>
       </span>
-      <span class="empty_msg">
+      <span class="empty_msg" role="heading" aria-label="Current section: Your cart is empty">
         YOUR CART IS EMPTY
       </span>
     </h1>
@@ -718,7 +743,7 @@
                 </div>
               </div>
               <div class="cart_item_price">
-                <span class="remove"></span>
+                <span class="remove" aria-label="Remove item from your cart. Item to be removed: {{cleantitle}}"></span>
                 <span class="price">{{price}}</span>
               </div>
             </script>
@@ -916,7 +941,7 @@
     
     <div id="cart_confirm">
       <div class="scroll">
-        <h1>CONFIRM</h1>
+        <h1 aria-label="Current section: Confirm your cart">CONFIRM</h1>
         
         <div class="order_section">
           <h2>ORDER SUMMARY</h2>
@@ -1030,9 +1055,9 @@
   </div>
 
   <div id="selector">
-    <div class="options">
+    <div class="options" role="select">
       <script type="text/html" class="template">
-        <div data-id="{{id}}">{{label}}</div>
+        <div aria-label="Pick {{label}}" data-id="{{id}}">{{label}}</div>
       </script>
     </div>
   </div>
diff --git a/StoneIsland/www/js/lib/cart/CartSummary.js b/StoneIsland/www/js/lib/cart/CartSummary.js
index 9b5da7b7..0a45d937 100755
--- a/StoneIsland/www/js/lib/cart/CartSummary.js
+++ b/StoneIsland/www/js/lib/cart/CartSummary.js
@@ -111,7 +111,8 @@ var CartSummary = ScrollableView.extend({
         var t = this.template
                     .replace(/{{image}}/, sdk.image(item['Code10'], '11_f'))
                     .replace(/{{sku}}/, num)
-                    .replace(/{{title}}/, title)
+                    .replace(/{{title}}/g, title)
+                    .replace(/{{cleantitle}}/g, stonewash(title))
                     .replace(/{{type}}/, type)
                     .replace(/{{size}}/, size_name)
                     .replace(/{{color}}/, color_name)
diff --git a/StoneIsland/www/js/lib/etc/accessibility.js b/StoneIsland/www/js/lib/etc/accessibility.js
index 5acb0723..ad04980c 100644
--- a/StoneIsland/www/js/lib/etc/accessibility.js
+++ b/StoneIsland/www/js/lib/etc/accessibility.js
@@ -1,5 +1,10 @@
 $(function(){
   $("h1").each(function(el){
-    $(el).attr('aria-label', "Page title: " + el.innerText)
+    console.log(el)
+    el['aria-label'] = 'Section title is ' + el.innerText
   })
-})
\ No newline at end of file
+})
+
+function stonewash (s) {
+  return s.replace(/'0/g, '20').replace(/_/g, ' ')
+}
\ No newline at end of file
diff --git a/StoneIsland/www/js/lib/products/CollectionView.js b/StoneIsland/www/js/lib/products/CollectionView.js
index 4674fc18..b7af235a 100755
--- a/StoneIsland/www/js/lib/products/CollectionView.js
+++ b/StoneIsland/www/js/lib/products/CollectionView.js
@@ -196,6 +196,7 @@ var CollectionView = ScrollableView.extend({
     this.items[ item['Code8'] ] = item
     var t = this.template.replace(/{{image}}/, sdk.image(item['DefaultCode10'], is_single_product ? '13_f' : '11_f'))
                          .replace(/{{code8}}/, item['Code8'])
+                         .replace(/{{title}}/, stonewash(item['ModelNames']))
     var $t = $(t)
     if (app.store.ShowProductNameOnCollectionPage) {
       var $title = $("<span>")
@@ -217,6 +218,7 @@ var CollectionView = ScrollableView.extend({
   setCollectionName: function(name){
     this.collectionName = name
     this.$title.html(this.collectionName)
+    this.$title.attr('aria-label', stonewash(this.collectionName))
   },
   
   // filter by department
diff --git a/StoneIsland/www/js/lib/products/Selector.js b/StoneIsland/www/js/lib/products/Selector.js
index 9c1109f6..e3376a4d 100755
--- a/StoneIsland/www/js/lib/products/Selector.js
+++ b/StoneIsland/www/js/lib/products/Selector.js
@@ -21,7 +21,7 @@ var Selector = View.extend({
     options.forEach(function(opt){
       this.lookup[String(opt.id)] = opt
       var t = this.template.replace(/{{id}}/, opt.id)
-                           .replace(/{{label}}/, opt.label)
+                           .replace(/{{label}}/g, opt.label)
       this.$options.append(t)
     }.bind(this))
     this.$el.show()
diff --git a/StoneIsland/www/js/lib/view/Serializable.js b/StoneIsland/www/js/lib/view/Serializable.js
index 4155f102..3181fddd 100755
--- a/StoneIsland/www/js/lib/view/Serializable.js
+++ b/StoneIsland/www/js/lib/view/Serializable.js
@@ -105,6 +105,7 @@ var SerializableView = View.extend({
     console.log(errors)
     var msgs = []
     this.$('.error_hilite').removeClass('error_hilite')
+    this.$('.err').html('')
     errors.forEach(function(e, i){
       // if (i > 0) { return }
       if (e[0]) {
@@ -112,13 +113,15 @@ var SerializableView = View.extend({
         var el = $el[0]
         if (el && el.nodeName === 'SELECT') {
           $el.parent().addClass('error_hilite')
+          $el.parent().next('.err').html(e[1])
         } else {
           $el.addClass('error_hilite')
+          $el.next('.err').html(e[1])
         }
       }
-      msgs.push(e[1])
+      // msgs.push(e[1])
     }.bind(this))
-    this.$msg.html(msgs.join("<br>"))
+    // this.$msg.html(msgs.join("<br>"))
     this.$msg.addClass('alert-notice')
   },
   
-- 
cgit v1.2.3-70-g09d2