(watch this video in a new tab or window)
Here I'm going to walk you through WebPage08 which is a mailto link. Line 1 is the doctype. Line 2 sets the language. Line 3 through 10 contains the head element. Line 4 is for the favicon. Lines 5, 6, and 7 set the scale and describe the document. Line 8 defines the character set. Line 9 is the title. Lines 11 through 14 contain the body element. Line 12 is the h1. Line 13 is the mailto link.
The a href equals double quote starts the link. mailto colon then my email address followed by question mark and subject equals with my subject. I replaced spaces with non-breaking spaces. Ampersand body equals, then text for the body of the email. Close the link normally. My text is email me.
When I click on the link my mail program opens with the email address, subject, and message pre-filled.
I checked the code with validator.w3.org and you can see that there are no errors.
(watch this video in a new tab or window)
There are many times on a website that you want to collect data from your users. To do that, you usually need a form. Here is a sample form that meets WCAG 2.0 Level AAA standards that covers types of items you would find on a form:
<section>
<h1>Forms</h1>
<h2>This is a place holder for a web page that has a completely accessible web form</h2>
<form name="formMyHDGLocationManager" action="" METHOD="post" ENCTYPE="application/x-www-form-urlencoded">
<label for="a_text_field_01">Text field</label>
<input type="text" name="a_text_field_01" id="a_text_field_01" value="">
<label for="a_text_field_02">Another Text field</label>
<input type="text" name="a_text_field_02" id="a_text_field_02" value="">
<fieldset>
<legend>Radio Buttons</legend>
<br><input type="radio" name="gender" id="1st choice" value="1st choice"><label for="1st choice" class="radio">1st choice</label>
<br><input type="radio" name="gender" id="2nd choice" value="2nd choice"><label for="2nd choice" class="radio">2nd choice</label>
<br><input type="radio" name="gender" id="3rd choice" value="3rd choice"><label for="3rd choice" class="radio">3rd choice</label>
</fieldset>
<fieldset>
<legend>Checkboxes</legend>
<br><input type="checkbox" name="1st one" id="1st one" value="1st one"><label for="1st one" class="checkbox">1st one</label>
<br><input type="checkbox" name="2nd one" id="2nd one" value="2nd one"><label for="2nd one" class="checkbox">2nd one</label>
<br><input type="checkbox" name="3rd one" id="3rd one" value="3rd one"><label for="3rd one" class="checkbox">3rd one</label>
<br><input type="checkbox" name="4th one" id="4th one" value="4th one"><label for="4th one" class="checkbox">4th one</label>
</fieldset>
<label for="a_dropdown_list">Dropdown list</label>
<br><select name="a_dropdown_list" id="a_dropdown_list">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
<option value="Option 4">Option 4</option>
</select>
<p><label for="a_textarea">Textarea
<br><textarea name="a_textarea" id="a_textarea" rows="5" cols="55"></textarea></label></p>
<input type="submit" value="Submit">
</form>
(watch this video in a new tab or window)
Accessibility is a hot topic these days and I will say, when it comes to design, it does limit your options. Color schemes need to have a lot of contrast. It's a good thing though, because there are tools to check your pages to make sure they're accessible by everyone, which is really the goal. The main tool that I use is the WAVE extension for Google Chrome (http://wave.webaim.org/extension/). With this tool installed, you can even check pages that require you to login first, because the tool runs from your local machine. Install this tool and check some of your web pages.