Accessible & Usable Web Forms. Your How To Guide!

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 Techniques1. Labeling & Grouping Controls2. Form Instructions3. Validating Input & User Notifications4. Multi-page Forms5. Dialog boxes

• Summary• Questions (10 mins)


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


https://www.w3.org/TR/aria-in-html/

https://www.w3.org/WAI/intro/aria

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=zFv2myGVhl8Mouse stick and head Wand retrieved from from http://webaim.org/articles/motor/assistiveMouse stick user snapshot retrieved from https://www.w3.org/WAI/perspectives/keyboard.html


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


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



https://www.w3.org/WAI/intro/aria

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 possible

References: 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


Reliability Trend for aria-describedbyLast updated October 16, 2016Source: https://goo.gl/GRBTo7


https://www.w3.org/TR/WCAG20-TECHS/aria

https://www.powermapper.com/tests/screen-readers/labelling/input-text-aria-describedby/

9

Using WAI-ARIA (3)Keyboard Demo

<button> vs. <a role="button“> when pressing "spacebar" keyhttps://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.


<button> vs <a role=“button”>

https://youtu.be/KCyC9CUFiDw








10

Using WAI-ARIA (4)Repurposing a <div> to radio group


• Many considerations for keyboard interaction• Many WAI-ARIA roles, states and properties

involvedLearn 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?

https://www.w3.org/TR/wai-aria-practices-1.1/#radiobutton

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/


12

How screen readersnavigate 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.htmWebAIM. Creating Accessible Forms. Retrieved from http://webaim.org/techniques/forms/


http://www.freedomscientific.com/Training/Surfs-Up/Forms.htm

13

Screen readers navigate web formsHow does this matter?

Scenario of Failure : Jaws user fails to interact with a form

Non-accessibleMimic of form element coded using <div>s and <span>s

AccessibleForm 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 positionGrouping 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


Form

Instructions


Multi-page

Forms

Dialog Boxes


15

Association of labels1. <label> & for/id

• A <label> is attached to a specific form control through the use of for and id attributes.


Labeling


Form

Instructions


Multi-page

Forms

Dialog Boxes


16

Association of labels2. 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


Form

Instructions


Multi-page

Forms

Dialog Boxes


https://www.w3.org/TR/WCAG20-TECHS/ARIA9.html

17

Association of Labels3. 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.


Labeling


Form

Instructions


Multi-page

Forms

Dialog Boxes


18

Association of LabelsScreen Reader Demo

Labeling


Form

Instructions


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

https://youtu.be/PjKAusofvP0



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


Form

Instructions


Multi-page

Forms

Dialog Boxes

Summary

WET 4

class


20

Placeholder Attribute

A placeholder attribute can't be a replacement for a label.

Labeling


Form

Instructions


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 PRACTISENotice: The placeholder text disappears as soon as the user enters a value.


21

Placeholder Attribute

A placeholder can be used to display short hint while keeping a visible label.

Labeling


Form

Instructions


Multi-page

Forms

Dialog Boxes

Summary

Screenshot source: Government of Canada – Open data website

Notice: Each form control has a visible label!


22

Visual Position of Label textBest practises

• Which is best for accessibility and usability?Placing labels above OR beside the form fieldsLabeling


Form

Instructions


Multi-page

Forms

Dialog Boxes


23

Visual Position of Label textBest practises

• Placing labels above the form fields and position labels to the right of radio buttons and checkboxes.

Labeling


Form

Instructions


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


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


Labeling


Form

Instructions


Multi-page

Forms

Dialog Boxes


25

Grouping Controls1.<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


Form

Instructions


Multi-page

Forms

Dialog Boxes


26


• Important for related radio buttons and checkboxesLabeling


Form

Instructions


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


27


Labeling


Form

Instructions


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.


28

Grouping Controls2.<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


Form

Instructions


Multi-page

Forms

Dialog Boxes


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


Labeling


Form

Instructions


Multi-page

Forms

Dialog Boxes


30

Form Instructions1. 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)


Labeling


Form

Instructions


Multi-page

Forms

Dialog Boxes


31

Form Instructions2.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/H90W3C. G89: Providing expected data format and example. Retrieved from https://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/G89

Labeling


Form

Instructions


Multi-page

Forms

Dialog Boxes


32

Form Instructions2.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.htmlWCAG 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.htmlWEBAIM, Creating Accessible Forms. Retrieved from http://webaim.org/techniques/forms/advanced

Labeling


Form

Instructions


Multi-page

Forms

Dialog Boxes


33


Labeling


Form

Instructions


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


34


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.htmlWCAG 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.htmlWEBAIM, Creating Accessible Forms. Retrieved from http://webaim.org/techniques/forms/advanced

Labeling


Form

Instructions


Multi-page

Forms

Dialog Boxes


35

Form InstructionsScreen Reader demo

Form instructions demo - https://youtu.be/9rIT595KrZQ

Labeling


Form

Instructions


Multi-page

Forms

Dialog Boxes


https://youtu.be/9rIT595KrZQ



36

Form Instructions3. Instruction between form elements

• Add tabindex=“0“ to instruction between form elements to receive focus and be included in the natural tab order

Labeling


Form

Instructions


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>


37

Validating Input & User Notification

• Validating Input• User NotificationsLabeling


Form

Instructions


Multi-page

Forms

Dialog Boxes


38

Validating Input & User NotificationValidating 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


Form

Instructions


Multi-page

Forms

Dialog Boxes


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 NotificationValidating Input

2) Validating common input for input fields•HTML5 validates common types for an <input> element such as tel, email, url

Labeling


Form

Instructions


Multi-page

Forms

Dialog Boxes


40

Validating Input & User NotificationUser 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

Note: Notification of errors need to be informative e.g. should provide guidance on how to correct mistakes

Labeling


Form

Instructions


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.htmlScreenshot inspired from : Form validation Working examples - Web Experience Toolkit http://wet-boew.github.io/v4.0-ci/demos/formvalid/formvalid-en.html


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


Form

Instructions


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


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


Form

Instructions


Multi-page

Forms

Dialog Boxes


Rabab Gomaa

Add note on issue of radio input and required

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.


Labeling


Form

Instructions


Multi-page

Forms

Dialog Boxes


44

Multi-page FormExample

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


Form

Instructions


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


45

Multi-page FormIndicating 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


Labeling


Form

Instructions


Multi-page

Forms

Dialog Boxes


46


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>


Labeling


Form

Instructions


Multi-page

Forms

Dialog Boxes

Summary

<title>Step 2 of 4 : Billing Address - Camp Registration</title>


47


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


Form

Instructions


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>


Rabab Gomaa

HTML <progress> Vs. accessible progress bar- Add a good progress bar example

48


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>


Labeling


Form

Instructions


Multi-page

Forms

Dialog Boxes


Rabab Gomaa

HTML <progress> Vs. accessible progress bar- Add a good progress bar example

49

Dialog Boxes (before and after)

Labeling


Form

Instructions


Multi-page

Forms

Dialog Boxes


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 focusUser knows that he is in a dialog boxDialog box has a titleUser does not have access to the background page.

Example of a non-accessible dialog box:

https://youtu.be/cFW4VVzcec4?t=25s

https://youtu.be/cFW4VVzcec4?t=25s

50

Dialog Boxes (before and after)

Labeling


Form

Instructions


Multi-page

Forms

Dialog Boxes


HTML snippet:<div role="dialog" aria-labelledby="login"><h1 id="login">Log in to Kangaroo Kilometers</h1></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

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.


52

Questions Period

Resources•Google Accessibility Course (Lesson 5 – ARIA)https://www.udacity.com/course/web-accessibility--ud89•Creating Accessible Formshttp://webaim.org/techniques/forms/•Forms Conceptshttp://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 HTMLhttps://www.w3.org/TR/aria-in-html/•WAI-ARIA Authoring Practices 1.1https://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 Demoshttps://www.youtube.com/channel/UCVoa-B5tR08-T2c1ku5mhfA•How to Meet WCAG 2.0https://www.w3.org/WAI/WCAG20/quickref/


https://www.udacity.com/course/web-accessibility--ud89

http://webaim.org/techniques/forms/

http://www.w3.org/WAI/tutorials/forms/

Date post:	16-Apr-2017
Category:	Technology
Upload:	rabab-gomaa
View:	1,426 times
Download:	3 times

Accessible & Usable Web Forms. Your How To Guide!

Technology