♿ fix multiple WCAG2AA errors (#176)

• Duplicate id attribute "email" found on the page.
  ├─ WCAG2AA.Principle4.Guideline4_1.4_1_1.F77
  └─ <input type="email" id="email" name="email">

• Obsolete presentational markup used (strike).
  ├─ WCAG2AA.Principle1.Guideline1_3.1_3_1.H49.Strike
  └─ <strike>striked</strike>

• Select element missing accessible name.
  ├─ WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Select.Name
  └─ <select> <optgroup labe...</select>

• Form field missing label or accessible name.
  ├─ WCAG2AA.Principle1.Guideline1_3.1_3_1.F68
  └─ <select> <optgroup labe...</select>

• Text input missing accessible name (repeated issue).
  ├─ WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.InputText.Name
  └─ <input type="text">

• Form field missing label or accessible name (repeated issue).
  ├─ WCAG2AA.Principle1.Guideline1_3.1_3_1.F68
  └─ <input type="text">

Signed-off-by: SindreKjelsrud <[email protected]>

Author: SindreKjelsrud

apps/demo/index.html

@@ -163,9 +163,9 @@ <h1>
         <label for="name">Name:</label><br>
         <input type="text" id="name" name="name"><br>
 
-        <label>disabled:</label><br>
-        <input disabled type="email" id="email" name="email" value="[email protected]"><br>
-
+        <label for="disabled-email">Disabled Email:</label><br>
+        <input disabled type="email" id="disabled-email" name="disabled-email" value="[email protected]"><br>
+    
         <label for="email">Email:</label><br>
         <input type="email" id="email" name="email"><br>
 
@@ -247,8 +247,8 @@ <h1>Inline formatted text</h1>
     <p>
       You can use many different elements to format your text.
       You can make your text <small>small</small> or you can make it <strong>strong</strong> or <b>bold</b>.
-      You can also make it <em>emphasized</em> or <strike>striked</strike>.
-      You can also make it <del>deleted</del> or <s>simple striked</s>.
+      You can also make it <em>emphasized</em>.
+      You can also make it <del>deleted</del> or <s>striked</s>.
       You can also make it <ins>inserted</ins> or <sub>subscripted</sub> or <sup>superscripted</sup>.
       You can also make it <cite>cited</cite> or <q>quoted</q>. 
       You can also make it <dfn>defined</dfn> as well as 
@@ -281,11 +281,12 @@ <h1>Unimplemented elements</h1>
             <label for="volume">Volume control:</label>
             <label for="week">Select a week:</label>
             <input type="week" id="week" name="week">
-    ´        <label for="birthmonth">Enter your birth month and year:</label>
+    ´       <label for="birthmonth">Enter your birth month and year:</label>
             <input type="month" id="birthmonth" name="birthmonth">
             <input type="hidden" id="userid" name="userid" value="123456">
             <input type="image" src="submit.png" alt="Submit" width="48" height="48">
-            <select>
+            <label for="car-select">Choose a car:</label>
+            <select id="car-select" name="car">
                 <optgroup label="Swedish Cars">
                     <option value="volvo">Volvo</option>
                     <option value="saab">Saab</option>
@@ -294,19 +295,22 @@ <h1>Unimplemented elements</h1>
                     <option value="mercedes">Mercedes</option>
                     <option value="audi">Audi</option>
                 </optgroup>
-            </select>
+            </select>            
             <datalist>
                 <option value="Volvo">
                 <option value="Saab">
                 <option value="Mercedes">
                 <option value="Audi">
             </datalist>
             <fieldset>
-                <legend>Personalia:</legend>
-                Name: <input type="text"><br>
-                Email: <input type="text"><br>
-                Date of birth: <input type="text">
-            </fieldset>
+              <legend>Personalia:</legend>
+              <label for="name-input">Name:</label>
+              <input type="text" id="name-input" name="name"><br>
+              <label for="email-input">Email:</label>
+              <input type="text" id="email-input" name="email"><br>
+              <label for="dob-input">Date of birth:</label>
+              <input type="text" id="dob-input" name="dob">
+          </fieldset>          
             <output>2048</output>
             <progress></progress>
             <meter></meter>