Accessible Forms Gaby de Jongh, IT Accessibility Specialist

Slides:



Advertisements
Similar presentations
KRAD Collections UI Review of UI design challenges – work in progress.
Advertisements

Learning about software Interfaces.  In this lab, you will examine  Excel Spreadsheet Interface  Access Database Interface  You will also learn about.
Guide to Oracle10G1 Introduction To Forms Builder Chapter 5.
A Guide to Oracle9i1 Introduction To Forms Builder Chapter 5.
Multimedia Design. Table of Content 1.Navigational structures 2.Storyboard 3.Multimedia interface components 4.Tips for interface design.
LOGO Chapter V Formattings 1. LOGO Overview  Conditional formatting  Working with tables  Filtering  Sorting  Freeze panes  Pivot tables  How to.
Chapter 9 Collecting Data with Forms. A form on a web page consists of form objects such as text boxes or radio buttons into which users type information.
WEBINAR SERIES: ACCESSIBLE INTERACTIVE DOCUMENTS Week 3: Accessible Web Forms Norman Coombs
Systems Analysis and Design in a Changing World, 6th Edition
Forms - Getting the most out of your website visitorsby Frank West, 6 August 2013 Frank West Front end web developer Lover of
1 State Records Center Entering New Inventory  Versatile web address:  Look for any new ‘Special Updates’ each.
HTML5 & WAI-ARIA Forms with jQuery Validation Paul J. Adam Accessibility
My First ACCESSIBLE Flash Movie. Course notes Detailed course notes, a printable copy of my slides, and all the samples shown today can be downloaded.
New Features in Release 9.2 (July 27, 2009). 2 Release 9.2 New Features Updated Shopping Experience Home/Shop page Shop at the top search New Hosted Supplier.
Automating Database Processing Chapter 6. Chapter Introduction Design and implement user-friendly menu – Called navigation form Macros – Automate repetitive.
Sarah Bourne Chief Technology Strategist Usable and Accessible Web Forms.
 INSTRUCTOR: Formatting Assistant Arlene Zimmerly, Coauthor Gregg College Keyboarding & Document Processing, 11e Note: This presentation is.
Chapter 8 Collecting Data with Forms. Chapter 8 Lessons Introduction 1.Plan and create a form 2.Edit and format a form 3.Work with form objects 4.Test.
WEB ACCESSIBILITY. WHAT IS IT? Web accessibility means that people with disabilities can use the Web. Web accessibility encompasses all disabilities that.
Copyright © 2012 W3C (MIT, ERCIM, Keio) BAD: Before and After Demo Shadi Abou-Zahra W3C Web Accessibility Initiative (WAI)
1 What to do before class starts??? Download the sample database from the k: drive to the u: drive or to your flash drive. The database is named “FormBelmont.accdb”
Technical Paper Review Designing Usable Web Forms – Empirical Evaluation of Web Form Improvement Guidelines By Amit Kumar.
INFO 355Week #71 Systems Analysis II User and system interface design INFO 355 Glenn Booker.
IFS310: Module 12 User Interface Design - Navigation/Communication between the system and users.
G063 - Human Computer Interface Design Designing the User Interface.
Report Writing Format If you have been asked to write a report, one question you may have is “What is the report writing format?” Following is information.
IT Accessibility Committee Accessible Forms Prepared by the NYS Forum IT Accessibility Committee
Spreadsheet Engineering Builders use blueprints or plans – Without plans structures will fail to be effective Advanced planning in any sort of design can.
Fall 2003Sylnovie Merchant, Ph.D. ACCESS Tutorial Note: The purpose of this tutorial is to provide an introduction to some of the functions of ACCESS in.
User Interface Components Lecture # 5 From: interface-elements.html.
LECTURE 18 16/11/15. MAKING THE INTERFACE CONSISTENT Consistency is one way to develop and reinforce the users conceptual model of applications and give.
Have a conversation  You encounter a stranger who asks:  What is your name?  What is your address?  What is your phone number, …?  What is your.
Chapter 16 Designing Effective Input Systems Analysis and Design Kendall and Kendall Fifth Edition.
TABLE OF CONTENTS 2014 BasmahAlQadheeb. What is a report? A report is a clearly structured document that presents information as clearly as possible.
Creating Accessible Web Forms Sandy Clark Constella Group
Web page design. Web Site Design Principles Design for the Medium What is meant by Hyper Media? Hypertext links.
Writing to Guide - Procedures Chapter 3. Relate Task to Meaningful Workplace Activities A Procedure is a step-by-step series of commands for accomplishing.
Learning Aim C.  In this section we will look at how text, tables, forms and frames can be used in web pages.
Homework 2 Hints. General Tips Remember what FORM view you are in! – Design, form, and layout view TABLE views include: – Design and Datasheet view.
Designing Effective Input. Design input forms for users of business systems Design engaging input displays for users of information systems Design useful.
Web Accessibility. Why accessibility? "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."
Creating and Processing Web Forms
Spreadsheet Engineering
Multimedia Design.
NOODLETOOLS SIGN-IN Student ID #
Title of your poster here: if you have a really long title,
Chapter 7: Getting Input From Users
DATA INPUT AND OUTPUT.
Chapter 2 Hix & Hartson Guidelines.
Color Theory in Web Design
Objectives Design a form Create a form Create text fields
User Interface Components
System Design Ashima Wadhwa.
Tables and Frames.
Designing Information Systems Notes
Chapter 8 Designing the Human Interface
Agenda: 10/05/2011 and 10/10/2011 Review Access tables, queries, and forms. Review sample forms. Define 5-8 guidelines each about effective form and report.
Database Applications – Microsoft Access
Draw a Venn Diagram and assign the details to “Fiction” or “Nonfiction
How many times have you been faced with a pressing school nutrition question and couldn’t quickly locate the answer? We have just the tool to make that.
Giving instructions on how to do something
Presentation Controls
MBI 630: Week 11 Interface Design
JavaScript Form Validation
Two methods to observe tutorial
Provide Effective Feedback and Guidance and Assistance
CHAPTER 17 The Report Writer Module
Elements of Effective Web Design
CMPE 280 Web UI Design and Development April 16 Class Meeting
Accessibility Evaluation
Presentation transcript:

Accessible Forms Gaby de Jongh, IT Accessibility Specialist UW-IT, Accessible Technology Services gabyd@uw.edu | uw.edu/accessibility

Things to Consider People with cognitive disabilities can better understand the form and how to complete it, making forms accessible improves the layout structure, instructions, and feedback. People using speech input can use the labels via voice commands to activate controls and move the focus to the fields that they must complete. People with limited dexterity benefit from large clickable areas that include labels, especially for smaller controls, such as radio buttons and checkboxes. People using screen readers can identify and understand form controls more easily because they are associated with labels, field sets, and other structural elements. In a database context, a form is a window or screen that contains numerous fields to enter data. Each field holds a field label so that any user who views the form gets an idea of its contents. Forms can be visually and cognitively complex and challenging to use. Accessible forms are easier to use for everyone, including people with disabilities.

Common Mistakes of Designing Forms: Gestalt Perspective (1 of 5) Lack of Guidance for Mistakes/Unclear Error Messages Provide guidance and information to clarify why a form entry isn’t correct. If possible, provide feedback in real time so the user does not have to complete a form and hit submit before being informed of a mistake. Great forms specify details about an entry that may cause confusion. They provide in-context, specific, and actionable feedback to ease the process for a correct entry. Avoid only using color to indicate error. Instead, provide contextual guidance to correct the error by the form field where it occurs. Ana will cover the technological aspects of accessible forms; I would like to go over common errors in designing forms as that contributes to the overall usability of the form itself.

Common Mistakes of Designing Forms: Gestalt Perspective (2 of 5) Lack of Sequencing Apply a logical sequence when asking for information in a form. Having questions in an intuitive sequence allows users to predict what they may be asked next. For longer forms, break up logical sections and show progress on the form to give more context for the user.

Common Mistakes of Designing Forms: Gestalt Perspective (3 of 5) Multiple Columns Creating multiple columns disrupts a user’s flow of reading from top to bottom, left to right. Avoid having multiple columns in forms unless the entries are logically related. Do not use table formatting to structure a form.

Common Mistakes of Designing Forms: Gestalt Perspective (4 of 5) Disappearing Labels/Using Captchas Don’t hide important labels for the sake of space and don’t make assumptions that the user will remember your prompt Captchas are sometimes necessary but are generally very annoying. In web forms they can present a real barrier to conversion.

Common Mistakes of Designing Forms: Gestalt Perspective (5 of 5) Overcomplicating/Making Data Entry Harder Than It Should Be Only ask for crucial details in a form. Most users don’t have patience for a long form and may find it easy to drop off and/or make errors if the process is lengthy. It should be as easy as possible to complete a form. The smoother the process, the more likely users will complete them.

Conclusions Provide clear instructions about what information is desired Make sure the order in which form elements are accessed is logical and easy to understand Instructions, cues, required form fields, field formatting requirements, etc. should be clearly identified to users

Resources https://envato.com/blog/designing-form-avoid-6-common- mistakes/ https://www.w3.org/WAI/tutorials/forms/ https://webaim.org/techniques/forms/