better forms for screen readers

This commit is contained in:
Justin Cooper 2019-05-22 12:06:31 -05:00
parent 19d3f335c3
commit d9e42fd09b
3 changed files with 41 additions and 19 deletions

View file

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

View file

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

View file

@ -24,20 +24,26 @@ permalink: /downloads
</div> </div>
<div> <div>
<div class="manufacturers"> <div class="manufacturers">
<h2>Manufacturers</h2> <fieldset>
<legend>Manufacturers</legend>
<ul class="content"></ul> <ul class="content"></ul>
</fieldset>
</div> </div>
<div class="features"> <div class="features">
<h2>Features</h2> <fieldset>
<legend>Features</legend>
<ul class="content"></ul> <ul class="content"></ul>
</fieldset>
</div> </div>
<div class="sort-by"> <div class="sort-by">
<h2>Sort By</h2> <fieldset>
<legend>Sort By</legend>
<ul class="content"> <ul class="content">
<li><input type="radio" name="sort-by" value="downloads" checked> Downloads</li> <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"> Board Name (A to Z)</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"> Board Name (Z to A)</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> </ul>
</fieldset>
</div> </div>
</div> </div>
</div> </div>