One of the most common problems with websites I’m called in to fix are broken malformed incomplete inaccessible forms. There are few things that prosecutors or the lawyers of disabled plaintiffs laser-focus on as a form that users with disabilities cannot use for whatever reason.

Now, there are a LOT of ways a form can be “broken”… but the chief problems I come across all the time are:

1. No <label> tags.
2. <label> not properly wrapping form elements and/or lacking “for/id” relationships.
3. Using placeholder=”” to do <label>’s job
4. No <fieldset> around related radio/checkbox sets or around groups of user changeable form elements.
5. JavaScript being the only method by which the form is allowed to work.

Label Tags, Not Optional, And MUST Be Used Properly!

I’m often surprised how often this is the only thing wrong with a form. If you lack a proper LABEL around your INPUT / SELECT / TEXTAREA — or alternatively create the for=”inputId” relationship — there is nothing to tell screen readers, braille readers, or other “non screen media UA’s” what the blazes your form elements are even for! You should ALWAYS have a label for **EVERY **form element, even if you don’t want to show it for your screen layout.

Remember, your HTML is supposed to be for MORE than just what the perfectly sighted sitting at a screen are looking at. This is why if your stylesheet <link> or <style> lacks media=”screen” for your screen stylesheet, it’s incompetent garbage. It’s why slopping style=”” in the markup is 90%+ of the time incompetent garbage. It’s why if you use tags based on their default appearance and not their grammatical/structural meanings, it’s incompetent garbage.

Anyhow a normal text input’s code should look something like this:

<label>
  Username:<br>
  <input type="text" name="username" required><br>
</label>

Or like this:

<label for="login_username">Username:</label><br>
<input type="text" name="username" id="login_username" required><br>

#javascript #html #web-development #accessibility #web-design