diff options
| author | Jules Laplace <julescarbon@gmail.com> | 2019-07-13 23:41:11 +0200 |
|---|---|---|
| committer | Jules Laplace <julescarbon@gmail.com> | 2019-07-13 23:41:11 +0200 |
| commit | 20d3f4537a578c581285ae8c90da2af9f929be66 (patch) | |
| tree | 9afd4c77c3d3529dd6080533775bb450a7c917aa /StoneIsland/www/index.html | |
| parent | 90a550943188af41dfe8e82ddc386f56436c5a7e (diff) | |
many changes to forms. starting to add labels
Diffstat (limited to 'StoneIsland/www/index.html')
| -rwxr-xr-x | StoneIsland/www/index.html | 275 |
1 files changed, 150 insertions, 125 deletions
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">< 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">< 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">< 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">< 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° 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> + <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> |