Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Accessible & Usable Web Forms. Your How To Guide!

2 206 vues

Publié le

Last updated: March 10th, 2017
http://bit.do/webforms
(Formerly called Accessibility of Web Forms)
Web forms can present obstacles to users when they have not been developed to be accessible and usable. These obstacles can be torn down by following techniques for labeling form controls, validating user input, handling multi page forms and WAI-ARIA. Screen reader demonstrations will be used to highlight these features. The session will allow you to improve the design and development of your web forms.
* Formerly called Accessibility of Web Forms
Slides versions:
(March 2017) - updates include sample of keyboard users, why use native element, examples of form validation, how to fix a dialog box,
(Feb 2017) - updates include example of Other instruction and update to user agent support URL
(Dec 2016) - updates include example of placeholder
(Nov 2016) - updates include examples on usability of forms and ARIA misuse
(May 2016) - updates include new examples and more details on Validation of input and user notification
(Feb 2016) - Original version

Publié dans : Technologie
  • Identifiez-vous pour voir les commentaires

Accessible & Usable Web Forms. Your How To Guide!

  1. 1. Accessible & Usable Web Forms. Your How To Guide! Rabab Gomaa @RubysDo Confoo.ca. March 11th , 2017 http://bit.do/webforms
  2. 2. 2 Objective To explore coding techniques that make web forms accessible and usable for all users and in particular for people who use screen readers or keyboards. @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  3. 3. 3 Table of Contents • What is an “accessible & usable” web form? • Keyboard users examples • What is WAI-ARIA & how screen readers navigate web forms? • Coding Techniques 1. Labeling & Grouping Controls 2. Form Instructions 3. Validating Input & User Notifications 4. Multi-page Forms 5. Dialog boxes • Summary • Questions (10 mins) @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  4. 4. 4 What is an “accessible and usable” web form? • A web form that users with disability can understand, perceive, interact with without barriers • A web form that is designed to be easy to use! References: W3C (2015, May 21). Notes on Using ARIA in HTML. Retrieved from https://www.w3.org/TR/aria-in-html/ WAI-ARIA Overview (2016, Jan 15). Retrieved from https://www.w3.org/WAI/intro/aria @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  5. 5. 5 Keyboard Users Examples (1/2) • Blind users {use of screen reader e.g. JAWS, NVDA, Voice Over, etc.} • Motor / physical disability {Parkinson disease, hand tremor, heart attack consequence} Snapshot sources: Keyguard retrieved from from https://www.youtube.com/watch?v=zFv2myGVhl8 Mouse stick and head Wand retrieved from from http://webaim.org/articles/motor/assistive Mouse stick user snapshot retrieved from https://www.w3.org/WAI/perspectives/keyboard.html @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms Keyguard is raised above the keyboard to guide him to the specific key without making mistakes Mouse stick Rubber tip to give better traction on keyboard, and end to insert into the mouth. Head Wand: A person moves the head to make the head wand type characters, navigate through web pages
  6. 6. 6 Keyboard Users Examples (2/2) • Temporary limited mobility {broken arm} • Computer problem {Mouse is not functional} • Preference / situations {Use of laptop on the bed, standing up in metro or airport, carry a baby with one hand} References: snapshot of keyguard from https://www.youtube.com/watch?v=zFv2myGVhl8 @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  7. 7. 7 Using WAI-ARIA (1) Accessible Rich Internet Applications (WAI-ARIA) • WAI-ARIA defines a way to make Web content and Web applications more accessible to people with disabilities. • Example: References: W3C (2015, May 21). Notes on Using ARIA in HTML. Retrieved from https://www.w3.org/TR/aria-in-html/ WAI-ARIA Overview (2016, Jan 15). Retrieved from https://www.w3.org/WAI/intro/aria @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  8. 8. 8 Using WAI-ARIA (2) Accessible Rich Internet Applications (WAI-ARIA) User Agent Support for WAI-ARIA: •“User Agent support for WAI-ARIA varies, but overall support for WAI- ARIA is improving” (W3C, ARIA Techniques for WCAG 2.0.) First rule of using ARIA: •Use a native HTML element instead of ARIA as long as it is possibleReferences: W3C (2015, May 21). Notes on Using ARIA in HTML. Retrieved from https://www.w3.org/TR/aria-in-html/ W3C, ARIA Techniques for WCAG 2.0. Retrieved from https://www.w3.org/TR/WCAG20-TECHS/aria @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms Reliability Trend for aria-describedby Last updated October 16, 2016 Source: https://goo.gl/GRBTo7
  9. 9. 9 Using WAI-ARIA (3) Keyboard Demo <button> vs. <a role="button“> when pressing "spacebar" key https://youtu.be/KCyC9CUFiDw Notice: Pressing “Spacebar” key on a link makes the page scroll down. The link is not activated. •<button> can be activated using “Enter” or Spacebar” keyboard keys . •<a>, <a role=“button”> can be activated using “Enter” key only. @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms <button> vs <a role=“button”>
  10. 10. 10 Using WAI-ARIA (4) Repurposing a <div> to radio group @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms • Many considerations for keyboard interaction • Many WAI-ARIA roles, states and properties involved Learn More on required effort: https://www.w3.org/TR/wai-aria-practices-1.1/#radiobutton When possible use native HTML element e.g. radio group instead of repurposing <div> to function as a radio group. Why?
  11. 11. 11 Using WAI-ARIA (3) Under what circumstances? • “If the feature is available in HTML [HTML5.1] but it is not implemented or it is implemented, but accessibility support is not. • If the visual design constraints rule out the use of a particular native element, because the element cannot be styled as required. • If the feature is not currently available in HTML.” (W3C, Notes on Using ARIA in HTML) Reference: W3C (2015, May 21). Notes on Using ARIA in HTML. Retrieved from https://www.w3.org/TR/aria-in-html/ @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  12. 12. 12 How screen readers navigate web forms? • Screen readers inform users when they have entered into a form “Forms Mode” by playing a sound • In “Forms Mode” : • User can edit input fields and interact with form elements • User generally navigate through a form using the TAB key for next control and SHIFT+TAB for previous control • Demos of today are done using JAWS 17 Reference: Freedom Scientific. Using Forms with JAWS and MAGic L. Retrieved from http://www.freedomscientific.com/Training/Surfs-Up/Forms.htm WebAIM. Creating Accessible Forms. Retrieved from http://webaim.org/techniques/forms/ @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  13. 13. 13 Screen readers navigate web forms How does this matter? Scenario of Failure : Jaws user fails to interact with a form Non-accessible Mimic of form element coded using <div>s and <span>s Accessible Form element coded using HTML form controls <label>& <select> Snapshot 1 captured from JIRA Issue Tracking v7.1 • Developer used <div>s and <span>s and on-hover event (and not on focus) to edit assignee name instead of select element • Jaws user hears no switch to forms mode and missed the edit feature (1) (2) Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  14. 14. 14 Labeling Controls • “Associating labels with form controls allows assistive technology to recognize the label and present it to the user”WCAG WG, EOWG (2015, March 2) • Possible ways of associating labels and form controls: 1. <label> & for/id attributes (recommended) 2. aria-labelledby attribute 3. wrapping <label> around text and control Reference: WCAG WG, EOWG (2015, March 2). Forms Concepts. Retrieved from http://www.w3.org/WAI/tutorials/forms/ Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  15. 15. 15 Association of labels 1. <label> & for/id • A <label> is attached to a specific form control through the use of for and id attributes. Reference: WCAG WG, EOWG (2015, March 2). Forms Concepts. Retrieved from http://www.w3.org/WAI/tutorials/forms/ Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  16. 16. 16 Association of labels 2. aria-labelledby • With aria-labelledby, the form field indicates which element labels it by referencing its id attribute Reference: W3C (2014). ARIA9: Using aria-labelledby to concatenate a label from several text nodes. Retrieved from https://www.w3.org/TR/WCAG20-TECHS/ARIA9.html Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  17. 17. 17 Association of Labels 3. Associating labels implicitly • When form controls cannot be labelled explicitly, the label element is used as a container for both the form control and the label text, so that the two are associated implicitly. Reference: WCAG WG, EOWG (2015, March 2). Forms Concepts. Retrieved from http://www.w3.org/WAI/tutorials/forms/ Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  18. 18. 18 Association of Labels Screen Reader Demo Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary Association of labels demo - https://youtu.be/PjKAusofvP0 @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  19. 19. 19 Invisible Labels • Label is visually hidden to avoid redundancy for users who can derive the purpose from the visual cues Warning! Screen readers hide elements from their users when they are styled using display: none; and visibility: hidden;Reference: WCAG WG, EOWG (2015, March 2). Forms Concepts. Retrieved from http://www.w3.org/WAI/tutorials/forms/ Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary WET 4 class @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  20. 20. 20 Placeholder Attribute A placeholder attribute can't be a replacement for a label. Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary Reference: W3C (October, 2014). A vocabulary and associated APIs for HTML and XHTML. Retrieved from https://www.w3.org/TR/html5/forms.html#the-placeholder-attribute “Use of the placeholder attribute as a replacement for a label can reduce the accessibility and usability of the control for a range of users including older users and users with cognitive, mobility, fine motor skill or vision impairments.” (W3C, placeholder-attribute) BAD PRACTISE Notice: The placeholder text disappears as soon as the user enters a value. @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  21. 21. 21 Placeholder Attribute A placeholder can be used to display short hint while keeping a visible label.Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary Screenshot source: Government of Canada – Open data website Notice: Each form control has a visible label! @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  22. 22. 22 Visual Position of Label text Best practises • Which is best for accessibility and usability? Placing labels above OR beside the form fields Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  23. 23. 23 Visual Position of Label text Best practises • Placing labels above the form fields and position labels to the right of radio buttons and checkboxes.Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary GOODLearn More! W3C. G162: Positioning labels to maximize predictability of relationships. Retrieved from https://www.w3.org/TR/WCAG20-TECHS/G162.html @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  24. 24. 24 Grouping Controls • “Grouping related form controls makes forms more understandable for all users, as related controls are easier to identify. It also makes it easier for people to focus on smaller and more manageable groups rather than try to grasp the entire form at once.”WCAG WG, EOWG (2015, March 2) • Possible ways of grouping form controls include: 1. <fieldset> and <legend> elements 2. <optgroup> to group items inside a selection list Reference: WCAG WG, EOWG (2015, March 2). Forms Concepts. Retrieved from http://www.w3.org/WAI/tutorials/forms/ Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  25. 25. 25 Grouping Controls 1.<fieldset> & <legend> (1) • <fieldset> has a <legend> that is the label of the group • Important for related radio buttons and checkboxes Reference: W3C. WCAG H71: Providing a description for groups of form controls using fieldset and legend elements. Retrieved from https://www.w3.org/TR/WCAG20-TECHS/H71 Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  26. 26. 26 Grouping Controls 1.<fieldset> & <legend> (2) • Important for related radio buttons and checkboxes Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary Reference: W3C. WCAG H71: Providing a description for groups of form controls using fieldset and legend elements. Retrieved from https://www.w3.org/TR/WCAG20-TECHS/H71 @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  27. 27. 27 Grouping Controls 1.<fieldset> & <legend> (3) Heading H1-H6 now allowed inside a <legend> (HTML 5.2 Working Draft) Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary Reference: W3C, HTML 5.2 <legend>. Retrieved from https://www.w3.org/TR/html52/ Remember ! - To do a screen reader test before to determine the level of support. @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  28. 28. 28 Grouping Controls 2.<optgroup> inside a selection list • Group <option> in a selection list using <optgroup> • Label <optgroup> with label attribute for users to know what to expect inside the group Reference: W3C. H85: Using OPTGROUP to group OPTION elements inside a SELECT. Retrieved from https://www.w3.org/TR/WCAG20-TECHS/H85 Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  29. 29. 29 Form Instructions • “Provide instructions to help users understand how to complete the form and use individual form controls. ”WCAG WG, EOWG (2015, March 2) • Types of Instructions: 1. Overall Instruction (instructions that apply to the entire form) 2. In-line instructions (specific to a form element) (example of input , instructions on filling a field) • 2.1 Instruction within <label> • 2.2 Instruction associated with control using <aria-describedby“ 3. Instruction between form controls Reference: WCAG WG, EOWG (2015, March 2). Forms Concepts. Retrieved from http://www.w3.org/WAI/tutorials/forms/ Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  30. 30. 30 Form Instructions 1. Overall Instruction • “Where relevant, provide such instructions that apply to the entire form before the <form> element to ensure that it is read aloud by screen readers before they switch to “Forms Mode”.WCAG WG, EOWG (2015, March 2) Reference: WCAG WG, EOWG (2015, March 2). Forms Concepts. Retrieved from http://www.w3.org/WAI/tutorials/forms/ Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  31. 31. 31 Form Instructions 2.1 Instruction within <label> • Within <label> for simple use cases indicating: • required form controls • expected data format and example References: W3C. H90: Indicating required form controls using label or legend. Retrieved from https://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/H90 W3C. G89: Providing expected data format and example. Retrieved from https://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/G89 Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  32. 32. 32 Form Instructions 2.2.arai-describedby (1) • Use aria-describedby to associate instructions with form fields while there is a form label. • Instructions will be available to users when the form control has focus Reference: W3C, ARIA1: Using the aria-describedby property to provide a descriptive label for user interface controls. Retrieved from https://www.w3.org/TR/WCAG20-TECHS/ARIA1.html WCAG WG, EOWG (2015, March 2). Forms Concepts. Retrieved from http://www.w3.org/WAI/tutorials/forms/ W3C, WCAG 3.3.2 Labels or Instructions. Retrieved from http://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html WEBAIM, Creating Accessible Forms. Retrieved from http://webaim.org/techniques/forms/advanced Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  33. 33. 33 Form Instructions 2.2.arai-describedby (2) Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary Instruction Government of Canada - Statistic Canada, 2016 Census Screenshot Reference: Government of Canada - Statistic Canada, 2016 Census - Start questionnaire. Retrieved from https://www133.statcan.gc.ca/census-recensement/en/login-connexion/open-ouvrir @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  34. 34. 34 Form Instructions 2.2.arai-describedby (3) Reference: W3C, ARIA1: Using the aria-describedby property to provide a descriptive label for user interface controls. Retrieved from https://www.w3.org/TR/WCAG20-TECHS/ARIA1.html WCAG WG, EOWG (2015, March 2). Forms Concepts. Retrieved from http://www.w3.org/WAI/tutorials/forms/ W3C, WCAG 3.3.2 Labels or Instructions. Retrieved from http://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html WEBAIM, Creating Accessible Forms. Retrieved from http://webaim.org/techniques/forms/advanced Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  35. 35. 35 Form Instructions Screen Reader demo Form instructions demo - https://youtu.be/9rIT595KrZQ Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  36. 36. 36 Form Instructions 3. Instruction between form elements • Add tabindex=“0“ to instruction between form elements to receive focus and be included in the natural tab order Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary <p tabindex=“0”>Once Click offers you convenient features to modify your online content</p> <p tabindex=“0”>Please ensure accuracy of input before submitting the form</p> @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  37. 37. 37 Validating Input & User Notification • Validating Input • User Notifications Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  38. 38. 38 Validating Input & User Notification Validating Input 1) Validating required input fields •Indicate required fields in the label text •Add required attribute to form controls to indicate that user input is required before submission W3C. ARIA2: Identifying a required field with the aria-required property. Retrieved from https://www.w3.org/TR/WCAG20-TECHS/ARIA2.html Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms required=“required” When user clicks submit without filling a mandatory field, user agent indicates to the user that input is required before submission “Please fill out this field” aria-required=“true” provided redundantly to support web browsers that don’t communicate the required attribute to assistive technology to inform assistive technologies about required controls so that they are appropriately announced to the users (as opposed to validating the input)
  39. 39. 39 Validating Input & User Notification Validating Input 2) Validating common input for input fields •HTML5 validates common types for an <input> element such as tel, email, urlLabeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  40. 40. 40 Validating Input & User Notification User Notifications Provide feedback to users about the results of their form submission. Error messages need to be informative - should provide guidance on how to correct mistakes. •Notification summary of errors: Overall feedback with list of errors that occurred provided after user submission of the form provided at the top of the page •Notification on form control: Inline specific feedback provided at or near the form controls Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary Reference: WCAG WG, EOWG (2015, March 2). Forms Concepts. Retrieved from http://www.w3.org/WAI/tutorials/forms/ W3C. Error Identification: Understanding SC 3.3.1. https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-identified.html Screenshot inspired from : Form validation Working examples - Web Experience Toolkit http://wet-boew.github.io/v4.0-ci/demos/formvalid/formvalid-en.html @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  41. 41. 41 Validating Input & User Notification Form Validation Demo Example uses WET 4 validation of input and error message handling (http://wet-boew.github.io/v4.0-ci/demos/index-en.html) Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary Notification on form control: •Error message placed within the <label> to not be missed •Error message provides guidance on how to correct mistakes Notification summary of errors: •Focus moved from the submit button to list of errors •Notification placed at the top of the form and list all errors •Each error linked to the relevant control @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  42. 42. 42 Validating Input & User Notification Form Validation Demo Web Experience Toolkit (WET 4) “Form validation” provides example on validation of input and error message handling Screenshot source: WET 4 Working examples - Web Experience Toolkit. Retrieved from http://wet-boew.github.io/v4.0-ci/demos/index-en.html Hint: Google “WET 4 examples” to find this page! Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  43. 43. 43 Multi-page Form • Divide long forms into multiple smaller forms that constitute a series of logical steps or stages, and • Inform users about their progress. Reference: WCAG WG, EOWG (2015, March 2). Forms Concepts. Retrieved from http://www.w3.org/WAI/tutorials/forms/ Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  44. 44. 44 Multi-page Form Example Reference: W3C. WCAG G98: Providing the ability for the user to review and correct answers before submitting. Retrieved from https://www.w3.org/TR/WCAG20-TECHS/G98.html Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary Repeat overall instructions on every page before <form> Indicating progress in each step (title, h1, nav) The ability to review and correct answers before submitting @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  45. 45. 45 Multi-page Form Indicating progress (1) • “Each step should inform the user about the progress they are making” WCAG WG, EOWG (2015, March 2) • Possible techniques include using: 1. Page <title> 2. The main heading <h1> 3. HTML5 <progress> element 4. Step-by-step indicator Reference: WCAG WG, EOWG (2015, March 2). Forms Concepts. Retrieved from http://www.w3.org/WAI/tutorials/forms/ Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  46. 46. 46 Multi-page Form Indicating progress (2) 1. Page <title> (The progress information should precede other information provided in the title) 2. The main heading <h1> (Include progress in prominent heading) <h1>Billing Address (step 2 of 4)</h1> Reference: WCAG WG, EOWG (2015, March 2). Forms Concepts. Retrieved from http://www.w3.org/WAI/tutorials/forms/ Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary <title>Step 2 of 4 : Billing Address - Camp Registration</title> @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  47. 47. 47 Multi-page Form Indicating progress (3) 3.1 HTML5 <progress> element (Inform users about the progress such as in a survey) Note: Some browsers do not support <progress> functionality natively which requires a polyfill to emulate the same functionality using generic HTML and WAI-ARIA. •<div role="progressbar" aria-valuenow="29" aria-valuemin="0" aria- valuemax="100">29 %</div> 3.2 Custom progress bar (personal preference!) Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary Screenshot Source: WCAG WG, EOWG (2015, March 2). Forms Concepts <div><span class="wb-inv">Progress:</span> <span id="ProgressText">29</span>% <span class="wb-inv"> complete</span></div> @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  48. 48. 48 Multi-page Form Indicating progress (3) 4. Step-by-step indicator (known number of steps to be completed) <ol class="breadcrumb"> <li class="h5"><a href="childinfo.html"> <span class="glyphicon glyphicon-ok"> </span> <span class="wb-inv">Completed:</span> Child Information</a></li> <li class="h5"><span class="glyphicon glyphicon-unchecked"> </span> <span class="wb-inv">Current:</span> Billing Address</li> <li>Review Registration</li> <li>Complete Registration</li> </ol> Reference: WCAG WG, EOWG (2015, March 2). Forms Concepts. Retrieved from http://www.w3.org/WAI/tutorials/forms/ Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  49. 49. 49 Dialog Boxes (before and after) Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms Non-accessible dialog box issues https://youtu.be/cFW4VVzcec4?t=25s •User has access to background page •Dialog box has not title When developing a dialog box, ensure that: The dialog box receives focus User knows that he is in a dialog box Dialog box has a title User does not have access to the background page. Example of a non-accessible dialog box:
  50. 50. 50 Dialog Boxes (before and after) Labeling Controls . Association of labels . Invisible labels . Visual position Grouping Controls Form Instructions Validating Input & User Notifications Multi-page Forms Dialog Boxes Summary @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms HTML snippet: <div role="dialog" aria-labelledby="login"> <h1 id="login">Log in to Kangaroo Kilometers</h1> <!-- input fields --> </div>  The dialog box receives focus  User knows that he is in a dialog box  Dialog box has a title JS pseudo code: // When dialog box is opened //Select the background page main wrapper and give it aria hidden="true" document.querySelector('.wrapper').setAttribute('aria-hidden', true); // When dialog box is closed //change the background page main wrapper to aria-hidden="false" document.querySelector('.wrapper').setAttribute('aria-hidden', false);  User does not have access to the background page. A role="dialog" interrupts the current processing in order to prompt the user to enter information or require a response Accessible Dialog box example https://www.youtube.com/watch? v=nLjAqr6YDZE
  51. 51. 51 Summary With the techniques of labeling & grouping controls, Form instructions , validating Input, user notifications and multi-page forms your web forms will be easier to understand and more accessible for all users. @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms
  52. 52. 52 Questions Period Resources •Google Accessibility Course (Lesson 5 – ARIA) https://www.udacity.com/course/web-accessibility--ud89 •Creating Accessible Forms http://webaim.org/techniques/forms/ •Forms Concepts http://www.w3.org/WAI/tutorials/forms/ •User Agent Support Notes for HTML and XHTML Techniques https://www.w3.org/WAI/WCAG20/Techniques/ua-notes/ Thank you for your attention! Rabab Gomaa @RubysDo http://bit.do/webforms •Notes on Using ARIA in HTML https://www.w3.org/TR/aria-in-html/ •WAI-ARIA Authoring Practices 1.1 https://www.w3.org/TR/wai-aria-practices-1.1/ •Buttons, Submits, and Divs, Oh Hell http://adrianroselli.com/2016/01/links-buttons-submits-and-divs- oh-hell.html •JAWS Screen reader Demos https://www.youtube.com/channel/UCVoa-B5tR08- T2c1ku5mhfA •How to Meet WCAG 2.0 https://www.w3.org/WAI/WCAG20/quickref/ @RubysDo “Accessible & Usable Web Forms. Your How To Guide!” http://bit.do/webforms

×