Rabab Gomaa, profile picture
Uploaded byRabab Gomaa
PPT, PDF2,420 views

Accessible & Usable Web Forms. Your How To Guide!

This guide outlines coding techniques to create accessible and usable web forms, particularly for individuals using screen readers or keyboards. It includes explanations of vital concepts such as WAI-ARIA, labeling controls, and form instructions, while also providing examples and best practices for enhancing user interaction. By applying these principles, web forms can be made more inclusive and easier to navigate for all users.

Embed presentation

Downloaded 57 times
Accessible & Usable Web Forms. Your How To Guide! Rabab Gomaa @RubysDo Confoo.ca. March 11th , 2017 http://bit.do/webforms
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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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

More Related Content

PDF
Accessibility - A feature you can build
byMonika Piotrowicz
 
PDF
a11yTO - Web Accessibility for Developers
byMonika Piotrowicz
 
PDF
Web Accessibility - A feature you can build
byMonika Piotrowicz
 
PPTX
Mobile applications for SharePoint using HTML5
byChristian Heindel
 
PDF
Web Standards
byHelior Colorado
 
PDF
Dreamweaver CS6, jQuery, PhoneGap, mobile design
byDee Sadler
 
PDF
EuroPython 2011 - How to build complex web applications having fun?
byAndrew Mleczko
 
PDF
Building & Scaling a Front End Practice & Team
byMonika Piotrowicz
 
Accessibility - A feature you can build
byMonika Piotrowicz
 
a11yTO - Web Accessibility for Developers
byMonika Piotrowicz
 
Web Accessibility - A feature you can build
byMonika Piotrowicz
 
Mobile applications for SharePoint using HTML5
byChristian Heindel
 
Web Standards
byHelior Colorado
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
byDee Sadler
 
EuroPython 2011 - How to build complex web applications having fun?
byAndrew Mleczko
 
Building & Scaling a Front End Practice & Team
byMonika Piotrowicz
 

What's hot

PPTX
Practical Accessibility Testing
byGlenda Sims
 
PDF
Wrangling Large Scale Frontend Web Applications
byRyan Roemer
 
PDF
HTML5--The 30,000' View (A fast-paced overview of HTML5)
byPeter Lubbers
 
ZIP
HTML5 Report Card
byMichael(tm) Smith
 
ZIP
Looking into HTML5
byChristopher Schmitt
 
PPTX
Introduction to HTML5 & CSS3
byPradeep Varadaraja Banavara
 
PDF
Web Frameworks of the Future
byelliando dias
 
PDF
Attacking and Defending Mobile Applications
byJerod Brennen
 
KEY
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
bydavyjones
 
PDF
The Future of the Web: HTML5
byDerek Bender
 
PDF
HTML5 and web platform
bydynamis
 
PDF
HTML5 & Web Platform
bySwapSkills
 
PPT
Augmented Reality (AR) - The Future of Mobile Applications?
byCarin Campanario
 
PDF
Sandboxing JS and HTML. A lession Learned
byMinded Security
 
PPTX
SharePoint 2010 Web Standards & Accessibility
byMavention
 
PDF
Web Standards: Fueling Innovation [Web Design World Boston '08]
byAaron Gustafson
 
PDF
Usability in the GeoWeb
byDave Bouwman
 
PDF
Access by Default
byGreat Wide Open
 
PDF
Innovation vs. Impatience - keynote at JSOpenDay London 2015
byChristian Heilmann
 
PPTX
HTML5: An Overview
byNagendra Um
 
Practical Accessibility Testing
byGlenda Sims
 
Wrangling Large Scale Frontend Web Applications
byRyan Roemer
 
HTML5--The 30,000' View (A fast-paced overview of HTML5)
byPeter Lubbers
 
HTML5 Report Card
byMichael(tm) Smith
 
Looking into HTML5
byChristopher Schmitt
 
Introduction to HTML5 & CSS3
byPradeep Varadaraja Banavara
 
Web Frameworks of the Future
byelliando dias
 
Attacking and Defending Mobile Applications
byJerod Brennen
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
bydavyjones
 
The Future of the Web: HTML5
byDerek Bender
 
HTML5 and web platform
bydynamis
 
HTML5 & Web Platform
bySwapSkills
 
Augmented Reality (AR) - The Future of Mobile Applications?
byCarin Campanario
 
Sandboxing JS and HTML. A lession Learned
byMinded Security
 
SharePoint 2010 Web Standards & Accessibility
byMavention
 
Web Standards: Fueling Innovation [Web Design World Boston '08]
byAaron Gustafson
 
Usability in the GeoWeb
byDave Bouwman
 
Access by Default
byGreat Wide Open
 
Innovation vs. Impatience - keynote at JSOpenDay London 2015
byChristian Heilmann
 
HTML5: An Overview
byNagendra Um
 

Viewers also liked

PPTX
Monitoring system with Grafana and StatsD
byArtur Prado
 
PDF
The Progressive Web and its New Challenges - Confoo Montréal 2017
byChristian Heilmann
 
PDF
Design in Tech Report 2017
byJohn Maeda
 
PPTX
Microservices
byArtur Prado
 
PDF
The Soul in The Machine - Developing for Humans
byChristian Heilmann
 
PDF
Securing MicroServices - ConFoo 2017
byMajid Fatemian
 
PDF
WAI-ARIAの考え方と使い方を整理しよう
byNozomi Sawada
 
PDF
London Growth Marketing Power Session @ London Startup Growth Meetup - 27 Jan...
byGrowth Tribe
 
PPTX
Channel Marketing Scorecard
byAveretek
 
PDF
Programme d'Emmanuel Macron
byEmmanuel Macron
 
PDF
Notes are not enough! Why relying on your notes will lead you down the garden...
byAsh Donaldson
 
PDF
政府債務の償還と財源の通貨発行権（借換債と交付債）
byKenji Katsuragi
 
PPTX
Google AMP 1 an après : quel bilan, quelles perspectives ?
byVirginie Clève - largow ☕️
 
PPTX
Creative & Digital Business Briefing - March 2017
byThe Knowledge Transfer Network Creative, Digital & Design
 
PDF
うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移
byまべ☆てっく運営
 
PDF
Spark Summit - Stratio Streaming
byStratio
 
PDF
サーバーレスでシステムを開発する時に⼤切な事
byHiroyuki Hiki
 
PDF
Content Creation Process
bySujan Patel
 
Monitoring system with Grafana and StatsD
byArtur Prado
 
The Progressive Web and its New Challenges - Confoo Montréal 2017
byChristian Heilmann
 
Design in Tech Report 2017
byJohn Maeda
 
Microservices
byArtur Prado
 
The Soul in The Machine - Developing for Humans
byChristian Heilmann
 
Securing MicroServices - ConFoo 2017
byMajid Fatemian
 
WAI-ARIAの考え方と使い方を整理しよう
byNozomi Sawada
 
London Growth Marketing Power Session @ London Startup Growth Meetup - 27 Jan...
byGrowth Tribe
 
Channel Marketing Scorecard
byAveretek
 
Programme d'Emmanuel Macron
byEmmanuel Macron
 
Notes are not enough! Why relying on your notes will lead you down the garden...
byAsh Donaldson
 
政府債務の償還と財源の通貨発行権（借換債と交付債）
byKenji Katsuragi
 
Google AMP 1 an après : quel bilan, quelles perspectives ?
byVirginie Clève - largow ☕️
 
Creative & Digital Business Briefing - March 2017
byThe Knowledge Transfer Network Creative, Digital & Design
 
うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移
byまべ☆てっく運営
 
Spark Summit - Stratio Streaming
byStratio
 
サーバーレスでシステムを開発する時に⼤切な事
byHiroyuki Hiki
 
Content Creation Process
bySujan Patel
 

Similar to Accessible & Usable Web Forms. Your How To Guide!

PDF
Building accessible web components without tears
byRuss Weakley
 
PPTX
Web accessibility workshop 4
byVladimir Tomberg
 
PDF
Accessibility and JS: side-by-side
byFelipe de Albuquerque
 
PDF
ARIA Techniques for Accessible Web Forms
byAidan Tierney
 
PPTX
Accessibility and universal usability
bySarah Hudson
 
PPTX
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
bySteven Faulkner
 
KEY
Making your jQuery Plugins More Accessible
bycolinbdclark
 
PPTX
A Primer on Web Accessibility for Teams
byMikey Ilagan
 
PPT
An Introduction to WAI-ARIA
byIWMW
 
PPTX
Accessibility with Single Page Apps
byRoss Mullen
 
PDF
Html5 aria-css-ibm-csun-2016
byMaureen (Moe) Kraft
 
PPTX
Accessible web applications
bySteven Faulkner
 
PPTX
Web accessibility
byAGILEDROP
 
PDF
How you can become an Accessibility Superhero
byrobzonenet
 
PPTX
Rich internet application accessibility - a quick overview
byDavid Sloan
 
PPTX
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
byRadek Pavlíček
 
PDF
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
byPatrick Lauke
 
PDF
Keyboard and Interaction Accessibility Techniques
byJared Smith
 
PDF
Developing an Accessible Web
bygreenideas
 
PDF
HTML5 Accessibility
byAaron Gustafson
 
Building accessible web components without tears
byRuss Weakley
 
Web accessibility workshop 4
byVladimir Tomberg
 
Accessibility and JS: side-by-side
byFelipe de Albuquerque
 
ARIA Techniques for Accessible Web Forms
byAidan Tierney
 
Accessibility and universal usability
bySarah Hudson
 
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
bySteven Faulkner
 
Making your jQuery Plugins More Accessible
bycolinbdclark
 
A Primer on Web Accessibility for Teams
byMikey Ilagan
 
An Introduction to WAI-ARIA
byIWMW
 
Accessibility with Single Page Apps
byRoss Mullen
 
Html5 aria-css-ibm-csun-2016
byMaureen (Moe) Kraft
 
Accessible web applications
bySteven Faulkner
 
Web accessibility
byAGILEDROP
 
How you can become an Accessibility Superhero
byrobzonenet
 
Rich internet application accessibility - a quick overview
byDavid Sloan
 
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
byRadek Pavlíček
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
byPatrick Lauke
 
Keyboard and Interaction Accessibility Techniques
byJared Smith
 
Developing an Accessible Web
bygreenideas
 
HTML5 Accessibility
byAaron Gustafson
 

More from Rabab Gomaa

PPTX
The Recipe for Making Accessible Widgets!
byRabab Gomaa
 
PPT
Web Accessibility: Understanding & Practice!
byRabab Gomaa
 
PPTX
Accessibility Testing Using Screen Readers
byRabab Gomaa
 
PDF
Developing a Web Application
byRabab Gomaa
 
PPTX
Démonstration de JAWS – lecteur d’écran
byRabab Gomaa
 
PDF
Is It WCAG 2.0 Compliant?
byRabab Gomaa
 
The Recipe for Making Accessible Widgets!
byRabab Gomaa
 
Web Accessibility: Understanding & Practice!
byRabab Gomaa
 
Accessibility Testing Using Screen Readers
byRabab Gomaa
 
Developing a Web Application
byRabab Gomaa
 
Démonstration de JAWS – lecteur d’écran
byRabab Gomaa
 
Is It WCAG 2.0 Compliant?
byRabab Gomaa
 

Recently uploaded

PDF
From DeFi POC to Production MVP - A 12-16 Week Blueprint.pdf
byniahiggins21
 
PDF
Rustici Software: eLearning standards in the age of AI
byRustici Software
 
PDF
Getting Started with Apache Spark: Big Data Made Simple [Free Meetup]
byHaim Michael
 
PDF
Post-Hackathon-Learnings-Maximizing-Impact-Beyond-the-Event.pdf
byishantyadav1111
 
PPTX
Working Session — Build a Document Understanding Automation Using an OOTB ML ...
byDianaGray10
 
PDF
Configure and Manage Systemd Timers- RHCSA (RH134).pdf
byLinuxCert Guru
 
PDF
Mount File Systems using UUID and Label - RHCSA (RH134).pdf
byLinuxCert Guru
 
PDF
The Emergence of Empathic XR: AWE Asia 2026 keynote
byMark Billinghurst
 
PDF
UiPath Automation Developer Associate Training Series 2026 - Session 2
byDianaGray10
 
PDF
GenerationAI Paris 2025 | City of Light (COL)
byapidays
 
PDF
Track Phone Location via Number (2026)_ What Actually Works, What’s a Scam, a...
byEmily Woods
 
PDF
Poročilo odbora CIS (CH08873) za leto 2025 na letni skupščini IEEE Slovenija ...
byUniversity of Maribor
 
PDF
The Manifesto for AI-enabled Governance !
byYannis Charalabidis
 
PDF
Why Many Smart Device Platforms Fail to Scale?
byPromeraki Developments
 
PPTX
Automation Without Apprentices: How AI Challenges the Open Source Way
byIcinga
 
PDF
How to build hackthon projects from ZERO!
byishantyadav1111
 
PDF
Dev Dives: Build and deploy agentic automations - the unified way
byUiPathCommunity
 
PDF
Startup Formation Collapses While Acquisition Activity Hits New High!
byMemoori
 
PDF
Traditional-Security-Models-No-Longer-Work.pptx (1).pdf
byOhhproJunction
 
PDF
NTG -Company Profile_Software_Vendor_Company_in_MENA
byMustafa Kuğu
 
From DeFi POC to Production MVP - A 12-16 Week Blueprint.pdf
byniahiggins21
 
Rustici Software: eLearning standards in the age of AI
byRustici Software
 
Getting Started with Apache Spark: Big Data Made Simple [Free Meetup]
byHaim Michael
 
Post-Hackathon-Learnings-Maximizing-Impact-Beyond-the-Event.pdf
byishantyadav1111
 
Working Session — Build a Document Understanding Automation Using an OOTB ML ...
byDianaGray10
 
Configure and Manage Systemd Timers- RHCSA (RH134).pdf
byLinuxCert Guru
 
Mount File Systems using UUID and Label - RHCSA (RH134).pdf
byLinuxCert Guru
 
The Emergence of Empathic XR: AWE Asia 2026 keynote
byMark Billinghurst
 
UiPath Automation Developer Associate Training Series 2026 - Session 2
byDianaGray10
 
GenerationAI Paris 2025 | City of Light (COL)
byapidays
 
Track Phone Location via Number (2026)_ What Actually Works, What’s a Scam, a...
byEmily Woods
 
Poročilo odbora CIS (CH08873) za leto 2025 na letni skupščini IEEE Slovenija ...
byUniversity of Maribor
 
The Manifesto for AI-enabled Governance !
byYannis Charalabidis
 
Why Many Smart Device Platforms Fail to Scale?
byPromeraki Developments
 
Automation Without Apprentices: How AI Challenges the Open Source Way
byIcinga
 
How to build hackthon projects from ZERO!
byishantyadav1111
 
Dev Dives: Build and deploy agentic automations - the unified way
byUiPathCommunity
 
Startup Formation Collapses While Acquisition Activity Hits New High!
byMemoori
 
Traditional-Security-Models-No-Longer-Work.pptx (1).pdf
byOhhproJunction
 
NTG -Company Profile_Software_Vendor_Company_in_MENA
byMustafa Kuğu
 

Accessible & Usable Web Forms. Your How To Guide!

  • 1.
    Accessible & UsableWeb Forms. Your How To Guide! Rabab Gomaa @RubysDo Confoo.ca. March 11th , 2017 http://bit.do/webforms
  • 2.
    2 Objective To explore codingtechniques 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 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 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 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 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 Using WAI-ARIA (1) AccessibleRich 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 Using WAI-ARIA (2) AccessibleRich 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 Using WAI-ARIA (3) KeyboardDemo <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 Using WAI-ARIA (4) Repurposinga <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 Using WAI-ARIA (3) Underwhat 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 How screen readers navigateweb 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 Screen readers navigateweb 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 Labeling Controls • “Associatinglabels 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 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 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 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 Association of Labels ScreenReader 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 Invisible Labels • Labelis 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 Placeholder Attribute A placeholderattribute 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 Placeholder Attribute A placeholdercan 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 Visual Position ofLabel 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 Visual Position ofLabel 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 Grouping Controls • “Groupingrelated 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 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 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 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 Grouping Controls 2.<optgroup> insidea 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 Form Instructions • “Provideinstructions 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 Form Instructions 1. OverallInstruction • “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 Form Instructions 2.1 Instructionwithin <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 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 Form Instructions 2.2.arai-describedby (2) LabelingControls . 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 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 Form Instructions Screen Readerdemo 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 Form Instructions 3. Instructionbetween 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 Validating Input & UserNotification • 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 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 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 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 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 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 Multi-page Form • Dividelong 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 Multi-page Form Example Reference: W3C. WCAGG98: 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 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 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 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 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 Dialog Boxes (beforeand 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 Dialog Boxes (beforeand 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 Summary With the techniquesof 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 Questions Period Resources •Google AccessibilityCourse (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

Editor's Notes

  • #2 In case you wonder what those cute cows are, this just happened to be the template of the Agency and the purpose of this session is completely different!