diff options
Diffstat (limited to 'StoneIsland/platforms/ios/www/index.html')
| -rwxr-xr-x | StoneIsland/platforms/ios/www/index.html | 530 |
1 files changed, 307 insertions, 223 deletions
diff --git a/StoneIsland/platforms/ios/www/index.html b/StoneIsland/platforms/ios/www/index.html index b6fc8317..c46e37c3 100755 --- a/StoneIsland/platforms/ios/www/index.html +++ b/StoneIsland/platforms/ios/www/index.html @@ -28,103 +28,97 @@ <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" role="directory"> <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="menuitem" class="store">STORE</span> + <span role="menuitem" class="hub">HUB</span> + <span role="menuitem" class="story">STORY</span> + <span role="menuitem" class="archive">ARCHIVE</span> </div> - <div class="account_menu"> - <span class="account_back menu-emphasis">< 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="menuitem" class="account_back menu-emphasis">< MY ACCOUNT</span> + <span role="menuitem" class="profile">MY PROFILE</span> + <span role="menuitem" class="payment">MY CARD</span> + <span role="menuitem" class="shipping">ADDRESS BOOK</span> + <span role="menuitem" class="orders">MY ORDERS</span> + <span role="menuitem" class="return_link_us">RETURNS (US)</span> + <span role="menuitem" class="return_link_ca">RETURNS (CANADA)</span> + <span role="menuitem" class="settings">NOTIFICATIONS</span> </div> - <div class="faq_menu"> - <span class="faq_back menu-emphasis">< 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="menuitem" class="faq_back menu-emphasis">< FAQ</span> + <span role="menuitem" class="privacy">PRIVACY POLICY</span> + <span role="menuitem" class="account_terms">MY ACCOUNT TERMS AND CONDITIONS OF USE</span> + <span role="menuitem" class="terms">TERMS AND CONDITIONS</span> + <span role="menuitem" class="returns">RETURN POLICY</span> + <span role="menuitem" 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="menuitem" class="account">MY ACCOUNT</span> + <span role="menuitem" class="login">LOGIN</span> + <span role="menuitem" 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="menuitem" class="logout">LOGOUT</span> + <span role="menuitem" class="faq">FAQ</span> + <span role="menuitem" 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="menuitem" class="account">MY ACCOUNT</span> + <span role="menuitem" class="login">LOGIN</span> + <span role="menuitem" class="logout">LOGOUT</span> + <span role="menuitem" 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="menuitem" class="fb ion-social-facebook"></span> + <span role="menuitem" class="insta ion-social-instagram-outline"></span> + <span role="menuitem" class="tw ion-social-twitter"></span> + <span role="menuitem" 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="menuitem" class="store">STORE</div> + <div role="menuitem" class="hub">HUB</div> + <div role="menuitem" class="story">STORY</div> + <div role="menuitem" class="archive">ARCHIVE</div> <div class="alert"></div> - <span class="latlng">+40° 58' 90.9" N 74° 04' 46.3" W</span> + <span class="latlng" role="note" aria-label="Your Latitude and Longitude">+40° 58' 90.9" N 74° 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> - </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 id="header" role="menubar" aria-label="Menu bar"> + <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> - <!-- BLOGS ================================================ --> - <div id="story"> + <div id="story" role="region" aria-label="Stone Island 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"> @@ -137,21 +131,21 @@ </div> </div> - <div id="hub"> + <div id="hub" role="region" aria-label="Stone Island 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" aria-details="{{cleantitle}}" class="title">{{title}}</span> + <span role="heading" aria-details="{{cleansubtitle}}"class="subtitle">{{subtitle}}</span> <span class="date"> {{date}} <span class="store"> @@ -167,7 +161,7 @@ <div class="fade-cover"></div> </div> - <div id="archive"> + <div id="archive" role="region" aria-label="Stone Island Archive"> <div class="scroll"> <div class="content"> @@ -187,28 +181,29 @@ </div> </div> - <div class="menu"> + <div class="menu" role="menu"> <div class="items"> <script type="text/html" class="template"> - <div class="item">{{title}}</div> + <div role="button" class="item">{{title}}</div> </script> </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 id="privacy" role="region" aria-label="Privacy Policy" 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 id="account_terms" role="region" aria-label="My Account Terms and Conditions of Use" 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 +256,24 @@ </div> </div> </div> - <div id="terms" class="page"> + + <div id="terms" role="region" aria-label="Terms and Conditions" 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 id="returns" role="region" aria-label="Return Policy" 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 id="care" role="region" aria-label="Customer 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> @@ -283,42 +281,42 @@ <!-- STORE ================================================ --> - <div id="collection"> + <div id="collection" role="region" aria-label="Store"> <div class="scroll"> - <h1>LOADING...</h1> + <h1 aria-label="Current section: Store">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> </div> </div> - <div id="search"> + <div id="search" role="search" aria-label="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> </div> </div> - <div id="product"> + <div id="product" role="region" aria-label="Product view"> <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" 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"></div> - <div class="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 +325,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> @@ -347,14 +345,14 @@ </div> </div> - <div id="closed"> + <div id="closed" role="region" aria-label="The store is closed"> <div class="closed_store_msg"> <h3> LOADING THE STORE, PLEASE WAIT </h3> <h4> </h4> - <div class="website_link"> + <div role="link" class="website_link"> visit<br> <b>www.stoneisland.com</b> </div> @@ -364,33 +362,38 @@ <!-- ACCOUNT ================================================ --> - <div id="login"> + <div id="login" role="region" aria-label="Log In"> <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"> + <span class='err'></span> + + <label for="login_password">Password</label> + <form><input type="password" id="login_password" name="Password" aria-placeholder="PASSWORD" required tabindex="2"></form> + <span class='err'></span> </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 id="logout" role="region" aria-label="You are now logged out"> <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"> @@ -401,52 +404,71 @@ </div> </div> - <div id="signup"> + <div id="signup" role="region" aria-label="New User. Create an account"> <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'></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'></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'></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'></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'></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'></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'></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> @@ -465,54 +487,71 @@ </div> </div> - <div id="profile"> + <div id="profile" role="region" aria-label="My 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"> + <label for="profile_name">First Name</label> + <input type="text" id="profile_name" name="Name" aria-placeholder="FIRST NAME" required tabindex="1"> + <span class='err'></span> + + <label for="profile_surname">Last Name</label> + <input type="text" id="profile_surname" name="Surname" aria-placeholder="LAST NAME" required tabindex="2"> + <span class='err'></span> + + <label for="profile_email">Email Address</label> + <input type="email" id="profile_email" name="Email" aria-placeholder="EMAIL ADDRESS" required tabindex="3"> + <span class='err'></span> + + <label for="profile_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="4"> + <span></span> + <input type="date" id="profile_birthday" name="BirthDay" aria-label="Birthday" min="1900-01-01" aria-placeholder="BIRTHDAY (MM/DD/YYYY)" required tabindex="5"> </div> + <span class='err'></span> <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"> - <div class="container-fill container-fill-condensed"> - <div class="container-message container-message-condensed"> - <span class="msg msg-condensed"> - </span> - </div> + <label for="profile_password">Current Password</label> + <input type="password" id="profile_password" name="CurrentPassword" aria-placeholder="CURRENT PASSWORD" required tabindex="6"> + <span class='err'></span> + + <label for="profile_confirm_password">New Password (7 characters or more)</label> + <input type="password" id="profile_confirm_password" name="NewPassword" aria-placeholder="NEW PASSWORD (7 CHARACTERS OR MORE)" required tabindex="7"> + <span class='err'></span> + </div> + + <div class="container-fill container-fill-condensed"> + <div class="container-message container-message-condensed"> + <span class="msg msg-condensed"> + </span> </div> - <div class="container-row"> - <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"> - <label for="checkbox-data-profiling-profile"></label> - </div> - <label class="checkbox-caption" for="checkbox-data-profiling-profile"> - 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"> - <label for="checkbox-shopping-data-profiling-profile"></label> - </div> - <label class="checkbox-caption" for="checkbox-shopping-data-profiling-profile"> - 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="container-row"> + <div class="checkbox-container"> + <div class="checkbox-row"> + <div class="checkbox-toggle"> + <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> - <div class="privacy-msg"> - Personal data will be electronically processed by SPORTSWEAR COMPANY and YOOX NET-A-PORTER GROUP in order to complete your request. Please note that you are responsible for third party data that you disclose to SPORTSWEAR COMPANY and YOOX NET-A-PORTER GROUP. - <br> - Consult our <a href="#/page/privacy">PRIVACY POLICY</a> for further information. + <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" 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" 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> + <div class="privacy-msg"> + Personal data will be electronically processed by SPORTSWEAR COMPANY and YOOX NET-A-PORTER GROUP in order to complete your request. Please note that you are responsible for third party data that you disclose to SPORTSWEAR COMPANY and YOOX NET-A-PORTER GROUP. + <br> + Consult our <a href="#/page/privacy">PRIVACY POLICY</a> for further information. </div> </div> </div> @@ -520,11 +559,10 @@ </div> </div> </div> - - <div id="shipping"> + <div id="shipping" role="region" aria-label="Address Book"> <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"> @@ -537,7 +575,7 @@ information will always remain private </span> </div> - <div class="privacy-msg"> + <div rel="link" class="privacy-msg"> Consult our <u>PRIVACY POLICY</u> for further information. </div> </div> @@ -546,9 +584,9 @@ </div> </div> - <div id="payment"> + <div id="payment" role="region" aria-label="My Card"> <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"> @@ -562,7 +600,7 @@ information will always remain private </span> </div> - <div class="privacy-msg"> + <div rel="link" class="privacy-msg"> Consult our <u>PRIVACY POLICY</u> for further information. </div> </div> @@ -571,9 +609,9 @@ </div> </div> - <div id="settings"> + <div id="settings" role="region" aria-label="Notifications"> <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"> @@ -582,7 +620,7 @@ Receive notifications for Store </div> <div class="toggle"> - <input type="checkbox" id="store-notifications" name="store" class="switch"> + <input type="checkbox" aria-label="Receive notifications for Store" id="store-notifications" name="store" class="switch"> <label for="store-notifications"></label> </div> </div> @@ -592,7 +630,7 @@ Receive notifications for Hub </div> <div class="toggle"> - <input type="checkbox" id="hub-notifications" name="hub" class="switch"> + <input type="checkbox" aria-label="Receive notifications for Hub" id="hub-notifications" name="hub" class="switch"> <label for="hub-notifications"></label> </div> </div> @@ -601,9 +639,9 @@ </div> </div> - <div id="orders"> + <div id="orders" role="region" aria-label="My 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> @@ -681,12 +719,12 @@ <!-- CART ================================================ --> - <div id="cart"> - <h1> - <span class="full_msg"> + <div id="cart" role="region" aria-label="Your Cart"> + <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> @@ -694,10 +732,10 @@ <div class="steps"> <span class="summary_step">SUMMARY</span> <span class="shipping_step">SHIPPING</span> - <span class="payment_step">BILLING</span> + <span class="payment_step">PAYMENT</span> </div> - <div id="cart_summary"> + <div id="cart_summary" role="region" aria-label="Cart Summary"> <div class="scroll"> <div class="summary-container container"> <div class="container-row"> @@ -705,20 +743,20 @@ <div class="rows"> <script type="text/html" class="template"> <div class="cart_item_image"> - <img src="{{image}}"> + <a href="#/store/{{code8}}" aria-label="{{cleantitle}}"><img src="{{image}}"></a> </div> <div class="cart_item_info"> - <span class="sku">{{sku}}</span> - <span class="title">{{title}}</span> - <span class="type">{{type}}</span> + <span class="sku" aria-label="SKU">{{sku}}</span> + <span class="title" aria-label="Product name: {{cleantitle}}">{{title}}</span> + <span class="type" aria-label="Product type">{{type}}</span> <div class="meta"> - <div class="meta-size"><b>SIZE:</b> {{size}}</div> - <div class="meta-color"><b>COLOR:</b> {{color}}</div> - <div class="meta-quantity"><b>QUANTITY:</b> {{quantity}}</div> + <div class="meta-size" aria-label="Size"><b>SIZE:</b> {{size}}</div> + <div class="meta-color" aria-label="Color"><b>COLOR:</b> {{color}}</div> + <div class="meta-quantity" aria-label="Quantity"><b>QUANTITY:</b> {{quantity}}</div> </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> @@ -752,7 +790,7 @@ </div> </div> - <div id="cart_shipping"> + <div id="cart_shipping" role="region" aria-label="Cart Shipping"> <div class="scroll"> <div class="form"> <div class="dropdown-wrapper"> @@ -810,9 +848,11 @@ information will always remain private </span> </div> - <div class="privacy-msg"> - Consult our <u>PRIVACY POLICY</u> for further information. - </div> + <a href="#/page/privacy"> + <div class="privacy-msg"> + Consult our <u>PRIVACY POLICY</u> for further information. + </div> + </a> </div> </div> @@ -820,7 +860,7 @@ </div> </div> - <div id="cart_payment"> + <div id="cart_payment" role="region" aria-label="Cart Payment"> <div class="scroll"> <div class="form"> @@ -877,7 +917,7 @@ <script type="text/html" class="cc_template"> <div class="checkbox-row"> <div class="checkbox-toggle"> - <input id="cc-checkbox-{{id}}" type="radio" name="CCId" value="{{id}}" {{checked}}> + <input id="cc-checkbox-{{id}}" aria-label="Select this credit card" type="radio" name="CCId" value="{{id}}" {{checked}}> <label for="cc-checkbox-{{id}}"></label> </div> <label class="checkbox-caption" for="cc-checkbox-{{id}}"> @@ -903,20 +943,20 @@ information will always remain private </span> </div> - <div class="privacy-msg"> - Consult our <u>PRIVACY POLICY</u> for further information. - </div> + <a class='privacy-link'> href="#/page/privacy"> + <div class="privacy-msg"> + Consult our <u>PRIVACY POLICY</u> for further information. + </div> + </a> </div> </div> - <br><br><br><br> - </div> </div> </div> - <div id="cart_confirm"> + <div id="cart_confirm" role="region" aria-label="Confirm your order"> <div class="scroll"> - <h1>CONFIRM</h1> + <h1 aria-label="Current section: Confirm your cart">CONFIRM</h1> <div class="order_section"> <h2>ORDER SUMMARY</h2> @@ -997,11 +1037,17 @@ </div> + <div id="footer" role="menubar" aria-label="Footer"> + <!-- 'Cancel' i think needs to go BACK in the navigation.. rather than jumping to the home screen --> + <div role="button" class="cancel">CANCEL</div> + <div role="button" class="ok">OK</div> + </div> + <div id="curtain"> <div class="loader"></div> </div> - <div class="modal" id="consent_modal"> + <div class="modal" id="consent_modal" role="modal" aria-label="Please accept the new terms"> YOUR MY ACCOUNT <br><br> We have improved the My Account Terms and Conditions of Use. @@ -1017,6 +1063,7 @@ </label> </div> </div> + <br><br> For more information, please consult our <a href="#/page/privacy">Privacy Policy</a> or visit <a href="#" id="care-link">Customer Care</a>. @@ -1030,22 +1077,31 @@ </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> </div> +<!-- Forms --> + <script type="text/html" id="creditcard_template"> - <input type="number" name="Number" placeholder="CREDIT CARD NUMBER" required> + <label for="creditcard_id_{{_id}}">Credit Card Number</label> + <input type="number" id="creditcard_id_{{_id}}" name="Number" aria-placeholder="CREDIT CARD NUMBER" required> + <span class='err'></span> + <div class="half-input"> + <label for="cc_expiration_month_{{_id}}">EXPIRATION MONTH</label> + <label for="cc_expiration_year_{{_id}}">EXPIRATION YEAR</label> + </div> + <div class="half-input"> <div class="select-wrapper"> - <span>EXPIRATION MONTH</span> - <select name="ExpirationMonth"> + <span></span> + <select name="ExpirationMonth" id="cc_expiration_month_{{_id}}"> <option value="NONE">EXPIRATION MONTH</option> <option value="01">01</option> <option value="02">02</option> @@ -1062,10 +1118,9 @@ </select> </div> <div class="select-wrapper"> - <span>EXPIRATION YEAR</span> - <select name="ExpirationYear"> + <span></span> + <select name="ExpirationYear" id="cc_expiration_year_{{_id}}"> <option value="NONE">EXPIRATION YEAR</option> - <option value="2018">2018</option> <option value="2019">2019</option> <option value="2020">2020</option> <option value="2021">2021</option> @@ -1081,25 +1136,50 @@ </select> </div> </div> - <input type="number" name="Cvv" placeholder="SECURITY CODE" required> + <label for="cc_cvv_{{_id}}">Security Code</label> + <input type="number" id="cc_cvv_{{_id}}" name="Cvv" aria-placeholder="SECURITY CODE" required> + <span class='err'></span> </script> <script type="text/html" id="address_template"> - <input type="text" name="Name" placeholder="First Name"> - <input type="text" name="Surname" placeholder="Last Name"> - <input type="text" name="Address1" placeholder="Address Line 1"> - <input type="text" name="Address2" placeholder="Address Line 2"> + <label for="address_name_{{_id}}">First Name</label> + <input type="text" id="address_name_{{_id}}" name="Name" aria-placeholder="First Name"> + <span class="err"></span> + + <label for="address_surname_{{_id}}">Last Name</label> + <input type="text" id="address_surname_{{_id}}" name="Surname" aria-placeholder="Last Name"> + <span class="err"></span> + + <label for="address_address1_{{_id}}">Address line 1</label> + <input type="text" id="address_address1_{{_id}}" name="Address1" aria-placeholder="Address Line 1"> + <span class="err"></span> + + <label for="address_address2_{{_id}}">Address line 2</label> + <input type="text" id="address_address2_{{_id}}" name="Address2" aria-placeholder="Address Line 2"> + <span class="err"></span> + + <div class="half-input"> + <label for="address_city_{{_id}}">City</label> + <label for="address_state_{{_id}}">State</label> + </div> + <div class="half-input"> - <input type="text" name="City" placeholder="City"> + <input type="text" id="address_city_{{_id}}" name="City" aria-placeholder="City"> <div class="select-wrapper"> - <span>STATE</span> - <select name="Province"> + <span></span> + <select id="address_state_{{_id}}" name="Province"> {{PROVINCES}} </select> </div> </div> + <div class="half-input"> - <input type="text" name="ZipCode" placeholder="ZIP" required> + <label for="address_zip_{{_id}}">Zip</label> + <label>Country</label> + </div> + + <div class="half-input"> + <input type="text" id="address_zip_{{_id}}" name="ZipCode" aria-placeholder="ZIP" required> <div class="country-wrapper-static"> <span class="country-label">UNITED STATES</span> <!-- @@ -1109,7 +1189,10 @@ --> </div> </div> - <input type="number" name="Phone" placeholder="PHONE NUMBER"> + + <label for="address_phone_{{_id}}">Phone Number</label> + <input type="number" id="address_phone_{{_id}}" name="Phone" aria-placeholder="PHONE NUMBER"> + <span class="err"></span> <!-- <div class="checkbox-container save_as_default"> <div class="checkbox-row"> @@ -1227,6 +1310,7 @@ <script src="js/lib/etc/geo.js"></script> <script src="js/lib/etc/sim.js"></script> <script src="js/lib/etc/backup_db.js"></script> +<script src="js/lib/etc/accessibility.js"></script> <script src="js/lib/view/View.js"></script> <script src="js/lib/view/Router.js"></script> |