Forms are a very common interaction on the Internet, and you can see how they are used around the world – to gather input for the registration of products, also for navigation. The problem is that we do not use things in the way they were intended, and if we “stray” from the ideal state, problems. We, the webmasters do not always identify accessibility problems, so we can share code, but people with screen readers or other assistive technologies. Here are some tips for using the code accessible forms.
Screen readers are really buggy in the implementation of the Javascript so let it be, or ensure they are not affected by the normal operation of the fill and submit a form (as I done below). Certainly not to use the controls in the form of script to change the page. Forms must be, however, not used for navigation anyway – there are better ways to find the net asset value.
Leave us some important elements of the form, which should be sometimes forgotten, however, always be included.
The caption tag can keep important information on your form and should always be used to describe the spirit of the form.
If you have several separate areas or groups of fields FieldSets form be very useful. Thinking I several examples of information grouped into molds, but they believe that an address – for billing, shipping address, details of credit card. These three groups of information can be organized and displayed FieldSets. Each fieldset its own legend and legends in May to three group matches must descriptors.
The label tag is a very important day soon. The wrapping tag label entry around descriptions like “name” or “Name” is linked to a form element in your markup with the ‘for =’ attribute. A label must always be near the entrance for clarity. Think Fact: You can use a label as any other element with a CSS style.
Sometimes a picture is available in a form before it can be an interruption of the natural flow of the label / pair. Just make sure to remember that excessive creatively with the form layout is not a very good idea. Try to keep the stick in the usual manner and their labels form fields in the neighborhood.
Reflect Take a few minutes your target encoding before they can begin to avoid accessibility issues. According to the guidelines of W3C has decided to allow the encoding to eliminate a problem rule. Standards Code are consistent generally better optimized for search engines and screen readers alike.
Part II
Build a compact, accessible using JavaScript
So now you know a little about Internet accessibility and forms, we can implement this project through the development of a compact available. What is a compact, you say? A compact is a form that takes less space. It appears that you have the field name (name eg.first: blank) as a value in the box, but really it is a label that hovers. When the user clicks on the input data (form element, “focus” here), is the label swooshed off the screen, and when they click away from the entrance ( “Focus” and called “blur”), the script checks whether the data have been registered or not, and replace the label or leave it off the screen, depending on what it found.
Use Javascript for additional presentation is very popular these days, but here’s the caveat: Always make sure that you can use your Web site with JavaScript disabled. Toolbar for Firefox developer, I told you about last month is excellent for this type of test.
I have extensively documented the javascript in the working example, and I hope you will understand what I do. The general idea? – I use JavaScript to change the class name on the labels of the formula. There are three classes:
regLabel – how to activate display without Javascript
Compact label – the label appears above the form field
Shift label compact – under the label moved from the side so it is no longer visible
It is considered another possible condition that the situation where both JavaScript and CSS are covered disabilities. This opinion is based on the markup and pure as you can see the shape is still very useful and easy with the tab.