Skip to content

Instantly share code, notes, and snippets.

@DougCrossDesign

DougCrossDesign/Web Accessibility - Form Structure

Last active November 26, 2017 00:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save DougCrossDesign/cba203858c174f6f60675b962edfabe4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save DougCrossDesign/cba203858c174f6f60675b962edfabe4 to your computer and use it in GitHub Desktop.
Download ZIP
Web Accessibility - Form Structure
Raw
index.html
<div id="example-wrapper">
<p>This form has tabbing capability, required HTML structure, error messages and value validity check.</p>
<form class="form-example" method="post">
<fieldset>
<legend>Personal Information</legend>
<label for="full-name">
Full Name
<span class="required">
(required)
</span>
<input id="full-name" name="full-name" required="" type="text">
<span class="error-message">
You must input a real name.
</span>
</label>
<label for="email">
Email
<span class="required">
(required)
</span>
<input id="email" name="email" required="" type="email">
<span class="error-message">
The email address you entered is not valid.
</span>
</label>
</fieldset>
<fieldset>
<legend>Credit Card Information</legend>
<label for="cc">
Credit Card Number
<span class="required">
(required)
</span>
<input id="cc" name="cc" required="" type="text" minlength='13' maxlength='20' pattern='\s*[0-9]+-?\s*[0-9]+-?\s*[0-9]+-?\s*[0-9]+-?\s*'>
<span class="error-message">
Your credit card number should be all numbers.
</span>
</label>
</fieldset>
<fieldset>
<label for='text-comments'>
Please leave your comments or questions here
<span class="required">
(required)
</span>
<textarea id='text-comments' required=''></textarea>
<span class="error-message">
Please give us a little more information about your inquiry.
</span>
</label>
</fieldset>
<fieldset>
<legend id='legend-1'>Can we add you to our email mailing list? <span class="required">(required)</span></legend>
<ul aria-labelledby='legend-1' role='radiogroup'>
<li>
<label for="yes">
<span class="error-message">
Please select yes or no.
</span><br/>
<input id="yes" required="" type="radio" name="answers" value="yes">
Yes
</label>
</li>
<li>
<label for="no">
<input id="no" type="radio" name="answers" value="no">
No
</label>
</li>
</ul>
</fieldset>
<fieldset>
<legend id='legend-2'>Which topics interest you? <span class="required">(required)</span></legend>
<ul aria-labelledby='legend-2' role='group'>
<li>
<label for="science">
<span class="error-message">
Please select at least one category.
</span><br/>
<input id="science" required="" type="checkbox" name="categories" value="science">
Science
</label>
</li>
<li>
<label for="children-programs">
<input id="children-programs" required="" type="checkbox" name="categories" value="children-programs">
Programs for Children
</label>
</li>
<li>
<label for="new-events">
<input id="new-events" required="" type="checkbox" name="categories" value="new-events">
New Events
</label>
</li>
</ul>
</fieldset>
<fieldset id="select">
<label for="options">Choose from the following:
<span class="required">
(required)
</span>
<select name="options" id="options" required=''>
<option value=''> Select </option>
<option value="value1">Option A</option>
<option value="value2">Option B</option>
<option value="value3">Option C</option>
</select>
<span class="error-message">
Please choose one of the following options.
</span>
</label>
</fieldset>
<button class='form-example-submit' type="submit">Submit Form</button>
</form>
</div>
Raw
script.js
function handleFormSubmission(){
$('.form-example input').on('keyup', function(e){
$(this).addClass('edited');
});
$('.form-example [type="submit"]').on('click.formValidation', function(e){
shouldPrevent = false;
errorList = [];
$form = $(this).parents('form');
$inputs = $form.find('input[required], textarea[required], select[required]');
$inputs.each(function(index, input){
errorMessageSelector = 'label[for="' + $(input).attr('id') + '"] .error-message';
$form.find(errorMessageSelector).removeAttr('aria-live');
error = $form.find(errorMessageSelector);
error.css('display', 'none');
if(!input.validity.valid){
error.css('display', 'inline-block');
shouldPrevent = true;
errorList.push(error);
}
else {
error.css('display', 'none');
}
});
if(!$form[0].checkValidity()){
e.preventDefault();
errorList[0].attr('aria-live', 'assertive');
}
});
}
$(document).ready(function(){
handleFormSubmission();
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Raw
style.scss
/*Example Reset*/
#example-wrapper{
max-width: 900px;
margin: 0 auto;
width: 100%;
}
/*Vars*/
form, .form-example{
font-family: "Helvetica", Arial, sans-serif;
ul{
margin: 0;
margin-bottom: 1em;
padding: 0;
li{
list-style-type: none;
margin: 0;
margin-bottom: .25em;
}
}
fieldset {
margin: 0;
margin-bottom: 1em;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
legend {
font-weight: 700;
margin: 0;
margin-bottom: 0.35em;
padding: 0;
}
&#select{
label {
font-weight: 700;
margin-bottom: 0.35em;
}
}
}
label {
display: block;
}
.error-message {
color: red;
font-style: italic;
display: none;
font-weight: 400;
margin: 0;
margin-bottom:0.35em;
}
input[type="search"], input[type="email"], input[type="password"], input[type="text"], input[type="tel"], input[type="number"], input[type="url"], textarea, select {
display: block;
margin-top: 0.25em;
margin-bottom: 0.5em;
padding: 0.9em 1em;
border-radius: 2px 2px;
color: #444;
margin-left: 0;
margin-right: 0;
width: 100%;
max-width: 500px;
border: 1px #ccc solid;
}
select {
height: 3em;
line-height: 2.5em;
background: #ffffff;
}
input{
&.edited{
&:invalid{
box-shadow: 0 0 5px 1px red;
}
}
&:focus{
&:invalid{
outline: none;
}
}
}
button, input[type="submit"]{
background: rgba(0, 0, 0, 1);
color: rgba(255, 255, 255, 1);
border: 0;
margin: 0;
padding: 1em;
font-size: 0.75em;
}
}
Raw
Web Accessibility - Form Structure
Web Accessibility - Form Structure
------------------------
An example of a proper web accessible form structure using necessary HTML form elements such as role attrtibutes, Aria labels field sets, legends, labels, inputs, radio buttons and checkboxes and submits. As well as javascript handles error messages and required elements.
A [Pen](https://codepen.io/DougCrossDesign/pen/gXYMZp) by [Doug Cross](https://codepen.io/DougCrossDesign) on [CodePen](https://codepen.io).
[License](https://codepen.io/DougCrossDesign/pen/gXYMZp/license).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment