Creating Accessible Forms Pamela Thomas Information Technology Services

What we will cover today • What makes a form accessible? • How to test keyboard navigation • Accessible Word, PDF, Excel forms • Tips for Frevvo, Qualtrics, and Word. Press • HTML forms • Using accessibility checkers forms (WAVE, Site. Improve, etc. ) • Common accessibility errors with forms 2

Accessibility § § People who rely on screen readers with limited dexterity using speech input software with cognitive disabilities 3

What makes a form accessible? 4

Form Instructions • • Instructions should clearly indicate required fields and fields with formatting constraints (field validation) Instructions should be clear and informative, should be available to assistive technologies. Should be programmatically linked to the associated form control. Instructions should not rely solely on color. 5

Keyboard Access • Visible tab focus • Logical tab order – Especially in forms with horizontal or mixed layout • No skipped elements • No keyboard traps – Example: Unable to move backwards from required field, or auto-advance doesn’t you to go back and correct mistake 6

Form Labels Every form element must have a programmatically associated label. Graphical input elements (buttons) must contain textual labels. Related form control elements must be grouped properly. • • Check boxes and radio buttons 7

User Notification • • • User must be notified of any dynamic form changes. Conditional questions, pop-ups, etc. User must be notified of field input errors and given instructions for how to correct errors. User must be notified of successful form submission. 8

Other Considerations • • CAPTCHA often poses difficulties for users of assistive technology. Avoid if possible. Placeholder text should not be used in place of a form field label or convey important information not presented as part of the label. Time limits, if used, should allow the user to extend if needed. Dynamic updates to form fields should be used with care. A form field should not dynamically update a previous field without user notification. 9

Testing Keyboard Navigation IF you want to. . . Move forward through form elements Move backward through form elements Navigate and select Radio Buttons Select/deselect boxes Move from box to box Open a List Box Go to the top of the page Go to the bottom of the page Refresh the screen Use this on a PC (Mac) Tab Shift + Tab Arrow Spacebar Tab ALT + Down arrow (Opt + Down Arrow) CTRL + Home (CMD+Down Arrow) CTRL + End (CMD+ Up Arrow) F 5 (CMD + R) 10

SU Form Types: Accessibility Tips 11

Microsoft Word 2016 Document itself must be accessible • • Headings, alternative text, etc. Legacy Tools only! • • • Active. X controls are not accessible Developer > Controls > Legacy Tools Text box and check boxes only • • Other form input types are not reliably accessible by keyboard or assistive technology users. Editing restrictions must be set • • Developer > Restrict Editing > Filling in Forms > Start 12

Fillable PDF Forms • • • Prepare Form Tool • Verify tab order • Field labels (Tooltips) • Identify required fields in the Tooltip • Radio button/check box options • Read only option for instructions Tagging form fields • Tags panel > Options Menu > Tag Annotations • Tabs panel > Find > Unmarked Annotations Save as Reader Extended PDF/Form fill-in and save 13

Fillable PDF Form: Resources • Accessible Forms in Acrobat (Web. AIM. org) • Adobe Acrobat Pro DC Accessible Forms and Interactive Documents (Adobe. com) • Advanced Accessible PDFS: Chapter 4/Working with Forms (Linkedin Learning, Chad Chelius) 14

Excel Forms • • Add form instructions in first cell (A 1) Set print area Hide unused cells Lock cells that aren’t used for input Shade input cells, but be mindful of potential contrast issues Provide input messages (Data validation > Input Message) Name worksheet tabs, delete unused tabs 15

Excel Forms: Resources • Accessible Excel Forms, Part 1 [You. Tube] • Accessible Excel Forms, Part 2 [You. Tube] (Texas Governor's Committee on People with Disabilities) 16

Frevvo Default tab order and keyboard focus are generally good Use Label field for both visible and programmatic labels Hint causes clickable info icon to appear Help field can be used for longer instructions, visible to users by using F 2 • Check Accessibility box in form property panel for required fields indicator and error handling. • If using tables in your form, use Summary property for instructions. Note: Screen reader reads Hint/Label/Help in that order. • • 17

Frevvo: Resources • Accessibility and Live Forms (frevvo. com) 18

Qualtrics • • • Many inaccessible question types Some themes lack keyboard accessibility – test! Accessibility Checker will check survey configuration and alert you to the use of inaccessible question types. Survey must have a title Must show question numbers Navigation buttons must have text 19

Qualtrics: Accessiblity of Common Question Types ACCESSIBLE • Descriptive text • Multiple choice • Text entry • Side by Side • File Upload NOT ACCESSIBLE • Slider • Rank order • Matrix • Hot spot 20

Qualtrics: Resources • Qualtrics Accessibility (UC Boulder) • Qualtrics: Check Survey Accessibility (qualtrics. com) 21

Word. Press Contact Form 7 creates forms with no labels Add Accessible Default plug-in to correct this Must re-create existing forms • • • Resources • • Contact Form 7: Accessible Defaults (wordpress. org) How to set up an accessible form using CF 7 in Word. Press (rianrietveld. com) 22

Accessible HTML Forms • WCAG 2. x Guidelines that apply to forms: • 1. 3. 1 Info and relationships • 2. 4. 6 Headings and Labels • 3. 3. 2 Labels or Instructions • 4. 1. 2 Name, Role, Value • W 3 C Forms tutorial (w 3. org) • Creating Accessible Forms (Web. AIM. org) • HTML & CSS: Creating Forms by Clarissa Peterson (Lynda. com) 23

HTML Forms: Keyboard Focus and Tab order • Focus is provided by the web browser and is typically shown as an outline around the focused element. • • • Avoid using CSS to hide the default focus Consider using CSS to make the focus indicator more visually apparent Tab order follows the DOM • • Default tab order includes only native links, buttons, and form controls Custom interactions require the developer to build keyboard access See WAI-ARIA Authoring Practices 1. 1 from W 3. org for detailed descriptions of expected keyboard behaviors for common interactive elements. 24

HTML Forms: Form instructions • • • Position overall instructions before the <form> element in the DOM. Include information about required fields and required formats. Provide inline instructions either within the form element label or by using • • ari-labelledby/aria-describedby Placeholder text is not a suitable substitute form instructions 25

HTML Forms: Labelling elements with HTML 5 Use the <label for= ></label> element For and ID attributes must exactly match the ID of the form control. 26

HTML Forms: Grouping Controls with Fieldset/Legend Grouping needs to be programmatic as well as visual. Techniques include: Using <fieldset> container with <legend> elements. 27

HTML Forms: Required fields Include the word required in the field label. Use the required attribute. Example: <label for’”suid”>What is your SUID? (Required)</label> <input type= “text” name=“suid” id=“suid” required> 28

HTML Forms: Buttons Input elements (submit/reset) require value attribute <input type="submit" name="submit" value="Submit "> Button elements cannot be empty <button>Upload file</button> Images that are acting as buttons require alternative text <input type="image" name=“placeorder" alt=“Place Order“ src=“waiter. png"> 29

HTML Forms: Error Handling HTML 5 has built-in error handling for the following: • Email • URL • Number • Range • Date • Time 30

HTML Forms: User Notifications • Users must be notified upon form submission whether the submission or action was successful or if errors occurred. • Techniques for successful form submission include: – Use the main H 1 of the landing page – The title of the landing page • Techniques for successful action include: – Use an alert dialog – Use an aria-live region 31

HMTL Forms: Error Notification • Errors detected upon field input: • Describe the nature of the error and offer tips to correct it • Error alert must be in proximity to the error • Errors detected upon form submission: • Reference the label of the form control • Describe the nature of the error and offer tips to correct it • Link to the first corresponding form control (if not inline) 32

Beyond HTML: Custom Controls • Native HTML form elements should be used whenever possible • Custom form elements should have appropriate names, roles, and values. • Custom form elements should act like native HTML form elements, to the extent possible • WAI-ARIA Authoring Practices 1. 1 (W 3 C) – Provides definitions, use cases, and expected keyboard interaction 33

Tools for Testing Web Forms • • • Test using screen reader/browser combinations Use the WAVE Accessibility Tool (Web. AIM. org) Use any of the free browser plugin tools: • • • Siteimprove Axe ARC Toolkit 34

• accessible. IT@syr. edu Contact us 35