{"id":27,"date":"2008-08-27T23:42:40","date_gmt":"2008-08-28T03:42:40","guid":{"rendered":"http:\/\/www.jfciii.com\/blog\/2008\/08\/27\/how-to-hide-%e2%80%9crequired%e2%80%9d-from-visual-users-but-make-it-available-for-all-others\/"},"modified":"2012-08-26T07:54:03","modified_gmt":"2012-08-26T11:54:03","slug":"how-to-hide-%e2%80%9crequired%e2%80%9d-from-visual-users-but-make-it-available-for-all-others","status":"publish","type":"post","link":"http:\/\/www.jfciii.com\/blog\/2008\/08\/27\/how-to-hide-%e2%80%9crequired%e2%80%9d-from-visual-users-but-make-it-available-for-all-others\/","title":{"rendered":"How to Hide “Required” from Visual Users, but Make it Available for All Others"},"content":{"rendered":"

How do most people usually designate that a field is \u201cRequired<\/span>\u201d in a web FORM? I would think that it is with an asterisk (*) after the actual INPUT field and it is sometimes made \u201cbold<\/span>\u201d and \u201cRED<\/span>\u201d. There are other ways to do this that are simple, use web standards, good design principles, and are 508 compliant.<\/p>\n

When creating a FORM you should not make all fields required. By doing that nothing stands out to the person filling in your very important FORM. If most fields are required you should state at the top of the FORM or in the directions the fields that are NOT required.<\/p>\n

Instead of just placing an asterisks after either the LABEL or the INPUT field in a FORM for a required field as most people do. You can actually place the word \u201cRequired<\/span>\u201d within the LABEL. Of course your using LABELs for your FORMS, along with FIELDSETs and LEGENDs.<\/p>\n

Here is how to accomplish this for a web FORM and it can be easily accomplished by using a little CSS to hide the text that a field is \u201cRequired<\/span>\u201d to be filled in. The way to do this, that I use is to make it part your input fields LABEL. Here is an example of a few lines of code on how the code might look.<\/p>\n

<label for=\u201cusername\u201d><em>Required<em><\/span>User Name<\/label><\/p>\n

To hide the word\u201cRequired<\/span>\u201d you will be able to use the same CSS used for hiding \u201cSKIP NAVIGATION<\/a>\u201d by adding a new class or stating that LABELs with an \u201cEM<\/span>\u00e2\u20ac\u0153 in them will be displayed.hidden off the page.<\/p>\n

Reminder please do not use \u201cDISPLAY: NONE<\/span>\u201d in your CSS, since screen readers will not see it. Below is the CSS to visually hide the word \u201cRequired<\/span>\u201d from browsers.<\/p>\n

.skip a, .skip a:hover, .skip a:visited, label em<\/span> {
\nposition: absolute;
\nleft: -10000px;
\ntop: auto;
\nwidth: 1px;
\nheight: 1px;
\noverflow: hidden;
\n}<\/p>\n

As you can see the CSS positions the link absolutely with a position of \u201cLEFT<\/span>\u201d minus 10,000 pixels and a \u201cTOP<\/span>\u201d position of auto. This will allow screen readers, Blackberries, Treos, etc. to see it but not browsers. That is as long as their CSS in turned on.<\/p>\n

You can also place extra notes or instructions for a field inside the INPUT field with lighter text that is that will not go away once you start typing in the field. This can be done by using more CSS. Below is the XHTML code to accomplish this.<\/p>\n

<label for=\u201cusername\u201d><em>Required<em>User Name<strong>must not contain spaces<strong><\/span><\/label><\/p>\n

<input type=\u201ctext\u201d name=\u201cusername\u201d id=\u201cusername\u201d size=\u201c25\u201d maxlength=\u201c50\u201d value=\u201c\u201d\/><\/p>\n

The CSS to do this is fairly simple and follows below.<\/p>\n

label strong {
\ncolor: #aaa;
\nfont-size: .85em;
\nfont-style: normal;
\nposition: absolute;
\ntop: 0;
\nright: -275px;}<\/p>\n

Here is what the CSS is doing for the extra notes and instructions. It is first taking any STRONG elements within the LABEL and making it light gray color, the FONT-SIZE smaller and normal weight. After that it is absolutely positioned at the top left of the INPUT FORM field, as long as the LABEL is left or right justified to it and finally placing the information negative 275 pixels from the right of the beginning of the INPUT field.<\/p>\n

Don’t forget to listen to your FORMs by using the Firefox extension Fire Vox<\/a>. Here is an example how placing extra notes or instructions would look in a FORM<\/a>, along with some \u201cRequired<\/span>\u201d field examples.<\/p>\n

I hope this post is useful and further explains how to hide visual the word \u201cRequired<\/span>\u201d from my Accessibility presentation \u201cIs your Website Accessible?<\/a>\u201d, please look for the most current presentation closer to the top of the list.<\/p>\n","protected":false},"excerpt":{"rendered":"

How do most people usually designate that a field is \u201cRequired\u201d in a web FORM? I would think that it is with an asterisk (*) after the actual INPUT field and it is sometimes made \u201cbold\u201d and \u201cRED\u201d. There are … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,23,92,21,41,26,113,89,24,44,106,32,27,136,34,111,112,20],"tags":[],"class_list":["post-27","post","type-post","status-publish","format-standard","hentry","category-22","category-accessibility","category-adpative-technology","category-css","category-design-principles","category-development","category-fire-vox","category-firefox","category-forms","category-helpful-tips","category-helping-others","category-layout","category-programming","category-screen-reader","category-search","category-skip-nav","category-skip-navigation","category-web-standards"],"_links":{"self":[{"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/posts\/27","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/comments?post=27"}],"version-history":[{"count":4,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/posts\/27\/revisions"}],"predecessor-version":[{"id":92,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/posts\/27\/revisions\/92"}],"wp:attachment":[{"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/media?parent=27"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/categories?post=27"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/tags?post=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}