HTML5 & WAI-ARIA Forms with jQuery Validation Paul J. Adam Accessibility

Slides:

Advertisements

Similar presentations

Ch3: Introduction to HTML5 part 2 Dr. Abdullah Almutairi ISC 340 Fall 2014.

Advertisements

® Copyright 2008 Adobe Systems Incorporated. All rights reserved. ADOBE® ACCESSIBILITY AT Access to Flash and PDF Matt May 25 Mar 2010 Featuring.

JavaScript Forms Form Validation Cookies. What JavaScript can do  Control document appearance and content  Control the browser  Interact with user.

12 th Annual Accessing Higher Ground “Accessible Media, Web and Technology Conference” Dennis Lembree November 12, 2009 Westminster, Colorado This presentation.

Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.

Creating Web Page Forms

Modern JavaScript Develop And Design Instructor’s Notes Chapter 2- JavaScript in Action Modern JavaScript Design And Develop Copyright © 2012 by Larry.

  Just another way to collect pieces together (like div, section)  Anything can be in there  Formatting just like all other elements.

Form Handling, Validation and Functions. Form Handling Forms are a graphical user interfaces (GUIs) that enables the interaction between users and servers.

Scripted, Tab Accessible Tree Control Hierarchical view of data via tree control. Keyboard Navigation from initially closed tree to view above with focus.

Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.

1 Web Developer & Design Foundations with XHTML Chapter 6 Key Concepts.

WEBINAR SERIES: ACCESSIBLE INTERACTIVE DOCUMENTS Week 3: Accessible Web Forms Norman Coombs

IS1500: Introduction to Web Development

An Introduction to WAI-ARIA Dan Jackson Web Team Leader City University London.

Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.

Tutorial #9 – Creating Forms. Tutorial #8 Review – Tables Borders (table, gridlines), Border-collapse: collapse; empty-cells: show; and rowspan, colspan.

JavaScript Form Validation

HTML Forms What is a form.

Neal Stublen Improvements  New form elements  Assist with validation  Consistency across sites  Changes reduce the need for common.

© 2004 – 2014 Web Site Optimizers, LLC 1 HTML5 Forms Make Life Easy For Your Mobile Users Tom Bowen President Web Site

Forms and Applications Web Design Professor Frank.

Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.

8/22/12 Adapting and Access to Social Media for People with Disabilities.

Sarah Bourne Chief Technology Strategist Usable and Accessible Web Forms.

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.

 Whether using paper forms or forms on the web, forms are used for gathering information. User enter information into designated areas, or fields. Forms.

WEB ACCESSIBILITY. WHAT IS IT? Web accessibility means that people with disabilities can use the Web. Web accessibility encompasses all disabilities that.

LOGO FORMs in HTML CHAPTER 5 Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC229 Client-Side.

  Just another way to collect pieces together (like div, section)  Anything can be in there  Formatting just like all other elements  Always name.

1 Form Elements  Form elements have properties: Text boxes, Password boxes, Checkboxes, Option(Radio) buttons, Submit, Reset, File, Hidden and Image.

Creating Web Page Forms. Introducing Web Forms Web forms collect information from users Web forms include different control elements including: –Input.

HTML Forms. Slide 2 Forms (Introduction) The purpose of input forms Organizing forms with a and Using different element types to get user input A brief.

Dive into Mobile Guidelines for Testing Native, Hybrid, and Web Apps Susan Hewitt, Accessibility Consultant, Deque Systems Jeanine Lineback, Accessibility.

Web Forms. Survey or poll Contact us Sign up for an newsletter Register for an event Submit comments or feedback about our site Log in to a members-only.

Web Technologies Lecture 3 Web forms. HTML5 forms A component of a webpage that has form controls – Text fields – Buttons – Checkboxes – Range controls.

HTML Forms Forms, Controls, Fields, Inputs, Submission, Validation SoftUni Team Technical Trainers Software University

©SoftMooreSlide 1 Introduction to HTML: Forms ©SoftMooreSlide 2 Forms Forms provide a simple mechanism for collecting user data and submitting it to.

HTML5 Forms Forms are used to capture user input …

Week 10: HTML Forms HNDIT11062 – Web Development.

COS 125 DAY 17. Agenda  Assignment 7 not finished grading  Assignment 8 posted Due April 9  Capstone progress reports due  Quiz 2 Corrected 2 A’s,

Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating.

Creating Accessible Web Forms Sandy Clark Constella Group

USABLEANDACCESSIBLEFORMS. accessibility or Accessibility?

Becky Gibson Sr. Technical Staff Member IBM Emerging HTML5 Accessibility.

PEAT Talks: Sharing Success from the WWW+W4A Accessibility Hackathon May 19,

HTML FORM. Form HTML Forms are used to select different kinds of user input. HTML forms are used to pass data to a server. A form can contain input elements.

FORMS Explained By: Jasdeep Kaur. Lecturer, Department of Computer Application, PGG.C.G., Sector: 42, Chandigarh.

Creating and Processing Web Forms

Bulk Import 3104 E. Camelback Road #559, Phoenix, AZ 85016

HTML CS422 Dick Steflik.

Objectives Design a form Create a form Create text fields

>> More on HTML Forms

Creating Accessible Web Forms

Accessibility with WordPress

Strategy for Native Mobile App Testing Methodology iOS vs Android

Web Programming– UFCFB Lecture 17

Validation and Building Small Apps

IS333: MULTI-TIER APPLICATION DEVELOPMENT

Objectives Explore web forms Work with form servers

Forms, cont’d.

New Form Input Types.

HTML5 Form Types – Newer Available Fields

Form Validation (with jQuery, HTML5, and CSS)

Usability and Accessibility Implications of Various Date Picker Methods Andrew Downie.

Accessible Forms Gaby de Jongh, IT Accessibility Specialist

Murach's JavaScript and jQuery (3rd Ed.)

Presentation transcript:

HTML5 & WAI-ARIA Forms with jQuery Validation Paul J. Adam Accessibility

Connecting labels to inputs is easy! But what about: required fields error messages & keyboard focus?

Most Forms Fail Accessibility

Accessibility Considerations Screen Readers Screen Magnification Voice Control Keyboard-Only Users Small Click Targets Mobile Usability – Fat Fingers, Tiny Buttons Cognitive Accessibility

Every. Single. Field. Needs. A. Label. Click labels, does focus go into input? Use semantic, hidden labels to keep forms visually pleasing yet fully accessible. Use semantic, hidden labels to keep forms visually pleasing yet fully accessible.

Radio Buttons & Checkboxes Need a Fieldset & Legend Group related form elements Group related form elements

Are Input Formats Spoken? Indicate correct format for dates, phone numbers, etc. Indicate correct format for dates, phone numbers, etc. Are ALL instructions spoken?

Error Messages & Focus Keyboard focus sent to errors? Are Errors spoken and helpful? Errors in the label? Or list of Errors?

HTML5 Form Attributes Accessible Validation = Browser/OS Responsibility Input types – Tel – – Date Required Boolean Current State of HTML5 Forms Current State of HTML5 Forms

HTML5 Input Types

Required Attribute Demo Form w/ HTML5 Required Attributes Demo Form w/ HTML5 Required Attributes

aria-required="true" No HTML5? WAI-ARIA to the rescue! NVDA ignores * at default verbosity setting Demo Form w/ aria- required added Demo Form w/ aria- required added

Old Browsers? Old AT? jQuery Validation works on all JavaScript enabled browsers! jQuery Validation Even IE6!

Tweak the Validation Plugin Options for the validate() method Options for the validate() method errorPlacement errorElement Remove novalidate Focus Behavior – focusInvalid – invalidHandler Before Tweaks Demo After Tweaks Demo

Label Placement Top-aligned labels are good for Mobile and Screen Magnification. jQuery Mobile does responsive design for you. jQuery Mobile Fix Safari label bug Fix Safari label bug

Voice Input Siri Dragon Naturally Speaking Use real ’s or Chrome only <input type="text” speech x-webkit-speech />

DON’T MAKE ME THINK! Usability = Accessibility Users will love you for saving them one or two extra clicks! HTML5 input types progressively enhance your forms! Same with WAI-ARIAWAI-ARIA

Forms Can be Painful & Inaccessible! Let’s change this problem with data entry on the web!

Go Forth and Be Accessible!!!

Connecting with Deque Twitter LinkedIn Web Deque Systems deque.com