From d9e42fd09b5d135c498cc9fd31c88f2fa46b1028 Mon Sep 17 00:00:00 2001
From: Justin Cooper <jwcooper@gmail.com>
Date: Wed, 22 May 2019 12:06:31 -0500
Subject: [PATCH] better forms for screen readers

---
 assets/sass/base/_base.scss |  9 +++++++++
 blinka.html                 | 25 ++++++++++++++++---------
 downloads.html              | 26 ++++++++++++++++----------
 3 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/assets/sass/base/_base.scss b/assets/sass/base/_base.scss
index 9d46a9a0..796f5e21 100644
--- a/assets/sass/base/_base.scss
+++ b/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;
+    }
+}
diff --git a/blinka.html b/blinka.html
index 5b98d4f6..7e71c80c 100644
--- a/blinka.html
+++ b/blinka.html
@@ -24,19 +24,26 @@ permalink: /blinka
     </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>
diff --git a/downloads.html b/downloads.html
index 129b0627..cf6984a6 100644
--- a/downloads.html
+++ b/downloads.html
@@ -24,20 +24,26 @@ permalink: /downloads
     </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>