better forms for screen readers

Author: jwcooper

assets/sass/base/_base.scss

@@ -33,3 +33,12 @@ a.purple-button-link {
     padding-left: 10px;
   }
 }
+
+fieldset {
+    border: 0;
+
+    legend {
+      font-size: 1.5em;
+      font-weight: 500;
+    }
+}

blinka.html

@@ -24,19 +24,26 @@ <h1>Blinka</h1>
     </div>
     <div>
       <div class="manufacturers">
-        <h2>Manufacturers</h2>
-        <ul class="content"></ul>
+        <fieldset>
+          <legend>Manufacturers</legend>
+          <ul class="content"></ul>
+        </fieldset>
       </div>
       <div class="features">
-        <h2>Features</h2>
-        <ul class="content"></ul>
+        <fieldset>
+          <legend>Features</legend>
+          <ul class="content"></ul>
+        </fieldset>
       </div>
       <div class="sort-by">
-        <h2>Sort By</h2>
-        <ul class="content">
-          <li><input type="radio" name="sort-by" value="alpha-asc" checked> Board Name (A to Z)</li>
-          <li><input type="radio" name="sort-by" value="alpha-desc"> Board Name (Z to A)</li>
-        </ul>
+        <fieldset>
+          <legend>Sort By</legend>
+          <ul class="content">
+            <li><input type="radio" name="sort-by" value="downloads" aria-label="Downloads" checked> Downloads</li>
+            <li><input type="radio" name="sort-by" value="alpha-asc" aria-label="Board Name (A to Z)"> Board Name (A to Z)</li>
+            <li><input type="radio" name="sort-by" value="alpha-desc" aria-label="Board Name (Z to A)"> Board Name (Z to A)</li>
+          </ul>
+        </fieldset>
       </div>
     </div>
   </div>

downloads.html

@@ -24,20 +24,26 @@ <h1>Downloads</h1>
     </div>
     <div>
       <div class="manufacturers">
-        <h2>Manufacturers</h2>
-        <ul class="content"></ul>
+        <fieldset>
+          <legend>Manufacturers</legend>
+          <ul class="content"></ul>
+        </fieldset>
       </div>
       <div class="features">
-        <h2>Features</h2>
-        <ul class="content"></ul>
+        <fieldset>
+          <legend>Features</legend>
+          <ul class="content"></ul>
+        </fieldset>
       </div>
       <div class="sort-by">
-        <h2>Sort By</h2>
-        <ul class="content">
-          <li><input type="radio" name="sort-by" value="downloads" checked> Downloads</li>
-          <li><input type="radio" name="sort-by" value="alpha-asc"> Board Name (A to Z)</li>
-          <li><input type="radio" name="sort-by" value="alpha-desc"> Board Name (Z to A)</li>
-        </ul>
+        <fieldset>
+          <legend>Sort By</legend>
+          <ul class="content">
+            <li><input type="radio" name="sort-by" value="downloads" aria-label="Downloads" checked> Downloads</li>
+            <li><input type="radio" name="sort-by" value="alpha-asc" aria-label="Board Name (A to Z)"> Board Name (A to Z)</li>
+            <li><input type="radio" name="sort-by" value="alpha-desc" aria-label="Board Name (Z to A)"> Board Name (Z to A)</li>
+          </ul>
+        </fieldset>
       </div>
     </div>
   </div>