1 / 19

Highlights of Accessible Online Forms for Improved User Experience

For successful completion of online forms, it is crucial for users to easily discern the requested information, find help text if needed, and promptly identify any submission errors. Google and Microsoft offer detailed forms with extensive ARIA features, while Qualtrics and Survey Monkey lack client-side error checking and clear indication of required fields. Testing with screen readers unveils inconsistencies in handling code. Additionally, challenges arise with checkboxes and radio buttons in tables, impacting the user experience.

elghayat
Download Presentation

Highlights of Accessible Online Forms for Improved User Experience

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Accessible Online Forms (Just the Highlights) Terrill Thompson Manager, IT Accessibility Team tft@uw.edu or @terrillthompson https://uw.edu/accessibility

  2. To successfully complete an online form, all users need to know… 1. what is being requested in the field that currently has focus 2. whether there is supplemental help text available 3. whether there are errors in their submission (and if so, exactly what those errors are)

  3. Text Field

  4. Text Field (Code) <label for="name">Your name <span class="required" aria-hidden="true">*</span> </label> <input type="text" id="name" required aria-describedby="help"> <div id="help"> Enter your full name (first, middle, and last) </div>

  5. Multiple Choice Field

  6. Multiple Choice Field (Code) <fieldset> <legend>Which of the following conferences have you attended?</legend> <div> <input type="checkbox" name="conf1" id="c1"> <label for="c1">Accessing Higher Ground</label> </div> <div> <input type="checkbox" name="conf2" id="c2"> <label for="c2">EDUCAUSE</label> </div> <div> <input type="checkbox" name="conf3" id="c3"> <label for="c3">Accessing Higher Ground</label> </div> </fieldset>

  7. Text Field in Survey Monkey (Momentive) <div id="question-field-1"> <h3 class="screenreader-only">Question Title</h3> <h4 id="question-title-1" <span>*</span> <span>1 <span>.</span> </span> <span> Your name </span> </h4> <input aria-labelledby="question-title-1" aria-required="true"> </div>

  8. Survey Monkey Outline • H1 - My Survey • H2 - (Skipped heading level) • H3 – Question Title • H4 – Your Name • H3 – Question Title • H4 – Your Email • H3 – Question Title • H4 – Your Birthdate • etc.

  9. Survey Monkey Default Color Contrast

  10. Text Field in Google Forms <div id="i1" role="heading" aria-level="3" aria-describedby="i4">Your name <span id="i4" aria-label="Required question">*</span> </div> <div id="i2"> Enter your full name (first, middle, and last)</div> <input type="text" aria-labelledby="i1" aria-describedby="i2 i3" required> <div aria-hidden="true">Your answer</div> <div id="i3" role="alert"></div>

  11. Overzealous Validation

  12. Text Field in Qualtrics <fieldset aria-describedby="Q1~VALIDATION Q1~SDPVALIDATION"> <legend> < <label label for for= ="QR~QID1" "QR~QID1"> >Your name Your name</ </legend> <div> < <input input type type= ="TEXT" "TEXT" id id= ="QR~QID1" "QR~QID1" aria aria- -describedby describedby= ="Q1~VALIDATION" "Q1~VALIDATION"> > </div> </fieldset> </label label> > <div id="Q1~VALIDATION" role="alert"></div> <div id="Q1~SDBVALIDATION" role="alert"></div>

  13. Radio Button in Qualtrics <td> <input type="radio" id="QR~QID7~1~1" name="QR~QID7~1" aria-labelledby="QID7-1-1-col-label" value="1"> <label for="QR~QID7~1~1" aria-hidden="true" aria-labelledby="QID7-1-1-col-label"> </label> <label for="QR~QID7~1~1" id="QID7-1-1-col-label" aria-labelledby="QID7-1-1-col-label"> <span>Excellent</span> </label> </td>

  14. Checkboxes vs Radio Buttons in Qualtrics

  15. Likert Scale: Is it a table or a form?

  16. Issues with Forms in Tables • JAWS and NVDA identify all radio buttons as "One of one" if they're in separate table cells • Screen readers announce table information (e.g., "Row 3 of 4", "Column 3 of 7") in addition to form information, which creates a lot of extra verbiage

  17. Summary: Survey Tools (1 of 2) • Both Google and Microsoft have highly sophisticated forms that use ARIA extensively, but perhaps excessively (forms are extremely verbose) • Neither Qualtrics nor Survey Monkey do client-side error checking; it's all server side. • Qualtrics doesn't even indicate whether fields are required (neither in the code nor in the user interface)

  18. Summary: Survey Tools (2 of 2) • Both Qualtrics and Survey Monkey have quirky code, and screen readers are quirky in how they handle it (inconsistent experience when testing with screen readers) • In the default Qualtrics theme, there is no visible difference between checkboxes and radio buttons. • The default Survey Monkey theme has very low color contrast.

  19. Resources • UW Accessible Technology Website https://uw.edu/accessibility • UW Accessible Technology Blog (recent post on this topic) https://uw.edu/accessibility/blog • These slides (plus expanded version for HighEdWeb) https://staff.washington.edu/tft/

More Related