CSS for HTML5 validationĬontrol the visual presentation for a variety of states on your HTML5 inputs. That resource is a bit out of date as support has improved in many browsers. You can read more about HTML5 browser support at The Current State of HTML5 Forms - The required Attribute by Chris Coyier ( of CSS-Tricks fame. Of course the required attribute does not work on all browsers, Safari and Mobile Safari being the two where I miss support the most. Screenshots of Different Input Types with the Required Attribute in Action on Mac OS X Lion With the HTML5 required attribute and HTML5 input types you can put the responsibility of accessible form validation on the browser developer. Now that you’ve got the basics out of the way, adding HTML5 validation and usability enhancements is a piece of cake! Required Attribute SCR32: Providing client-side validation and adding error text via the DOM.SCR18: Providing client-side validation and alert.G85: Providing a text description when user input falls outside the required format or values. G83: Providing text descriptions to identify required fields that were not completed.Techniques for WCAG 2.0 - Success Criteria 3.3.1 (Error Identification), 3.3.2 (Labels or Instructions), 3.3.3 (Error Suggestion), and 3.3.4 (Error Prevention (Legal, Financial, Data)) When nothing happens after pressing the submit button they will assume your form is broken. Assistive Technology users will have no idea there’s something wrong if the screen reader goes blank or their magnifier does not move focus to the error. One of the biggest failures with forms is not sending keyboard focus to the field with an error or the list of error messages. Placing the error in a label will cause a screen reader to speak each error as the user tabs through the form fields. Help users out by providing useful error messages and suggestions to correct them. H90: Indicating required form controls using label or legend Error Messages Technique for WCAG 2.0 - Success Criterion 3.3.2 (Labels or Instructions) Indicate the field is required by placing a red * in the label or the text (required). No one enjoys filling out forms! If you want to get useful data and not scare your users away then only require the least amount of fields as is necessary. Required Fields, Error Messages, & Keyboard Focus
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |