As we discussed in chapter 17, instructions is one way of warning the users about the data to be filled in. HTML5 and ARIA provides some attributes to programmatically inform mistake the user is attempting immediately. Eg: HTML5 invalid attribute or aria-invalid property can be used to inform the user if an invalid format is entered into the field. The attribute can be invoked immediately when the user moves away from the field and be notified to the user. The HTML5 required or aria-required property is also a similar attribute that helps the user avoid mistakes.
The new input type elements such as type=”tel”, type=”email” etc also get into the same category.
Example:
<label for=“email”>Email Id</label>
<input type=“email” id=“email” aria-required=“true” aria-invalid=“false” />
If user enters an invalid format of email i.e. info@maxability then invoke aria-invalid to true.
Web Accessibility Development
- Chapter 1 : Images
- Chapter 3 : Links
- Chapter 4 : Tables
- Chapter 2 : Charts and Graphs
- Chapter 5: Complex tables and fixed headers
- Chapter 6 : Headings
- Chapter 7: Lists
- Chapter 8: Tabindex
- Chapter 9: Duplicate Id values and Duplicate attributes.
- Chapter 10: Language
- Chapter 11: Page title
- Chapter 12: Other semantics
- Chapter 13: Offscreen text
- Chapter 14: Landmark Regions
- Chapter 15: Use of ARIA
- Chapter 16: Form labels
- Chapter 17: Form Instructions and Additional Help
- Chapter 18: Label And Instruction Relationships
- Chapter 19: Grouping Similar Fields
- Chapter 20a: Error Handling: part 1: Informing Field Types & Invalid Formats
- Chapter20b: Error Handling: part 2 Error messaging
- Chapter20c : Error Handling part 3: Error Identification
- Chapter 21: Reading Order
- Chapter 22: Focus Order
- Chapter 23: Focus Management
- Chapter 24: Dynamic Updates
- Chapter 25: Keyboard Navigation
- Chapter 26: Bypass Blocks
- Chapter 27: Focus Rings
- Chapter 28: OnMouseHover And OnFocus
- Chapter 29: Shortcuts And Access Keys
- Chapter 30: Other Navigation Patterns (Sitemap, TOC, Search).
- Chapter 31: Text Resize
- Chapter 32: Text reflow
- Chapter 33: Text Spacing
- Chapter 34: Session Timeout
- Chapter 35: Moving, Scrolling & Auto-Updating Content
- Toast Message ! Is it accessible?