EASI 4‑part Webinar Series:

Making Accessible Forms

May 7, 2013

 NORM COOMBS: Good morning, everyone. I want to make a couple announcements before we actually begin. As some of you know, if you have a mic, you've been able to hold down the control key and talk. The problem is it's a global control key. If you think you're out of the room and using a control key in another program that also triggers the Mic. We kept having people grabbing the Mic in the middle of everything and causing chaos. So I've turned off your Mics. Beth and I have a working Mic. But you won't. The text chat window is still there. Beth is going to watch the text chat and she'll try to ‑‑ okay. I lost my mic. Okay. So I will start and first I want to say a couple words about EASI. As you know being here, we have webinars, free webinars and fee‑based webinars. We also have a number of courses that will lead to a certificate in accessible information technology. And you can read about those by going to our home page EASI.CC. And click on courses or webinars.

I also want to tell you about our membership program. The fee‑base webinars as you probably are aware of $225 for the series. All the single webinars are free. If you come to the fee based webinars it adds up over the years so you can become an EASI individual member for $460. Just barely over two paid webinars. You can come to any and all of them. You also get a 20 percent reduction on the courses. Your institution can sign up for the same thing and that will let anybody from your institution come to any and all webinars and also get a reduction on the courses. So that's enough of the promo. We'll move on to today's webinar.

So let's look at the agenda for the day. First we're going to talk about some of the problems related to web forms. Then we'll talk about the legislation and standards. We'll talk about screen readers and forms. We'll look at text boxes, the ID tag, the input tag. We'll talk about required fields. Talk about errors and error checking. Talk about field sets, legends, check boxes. We'll briefly talk about script. Because you're not going to learn script not from me in any case. But you're going to need to use some script in your pages. You can do like I do and that is cut and paste. We'll give you some examples and we'll talk about that later. But the reason for the script is the script will take the input that the user puts into the form and process it. Sometimes process it right on that page. More often it will send the data that was input to a file on a server which will then process it. That server could then send the results to you in e‑mail. It could then process the results for a user name or a password. Various kinds of things. So we'll try to give you a brief overlook at pretty much all of those things.

And let me make a proviso here. I'm barely a web creator. I do use Dreamweaver often. I often use notepad and just put it in some code by hand. When I use dream weaver, I like to use it in split mode. Half of it is WYSIWYG, what you see is what you get. And the other half shows the code which helps me be a little sure of what's going on. But we're going to give you some code that you can understand. And I must confess that this code I understand only in a limited way. I'm good at cutting and pasting. But when you're cutting and pasting it helps if you understand a little bit of what's going on.

For example, one of the things that leaves me out in the cold is I hear people talking about web elements, web attributes, web tags. I wonder what are they. I see different people talk about the same thing and sometimes call it an element, sometimes an attribute. It had me very confused for a while. And I did some Googling and found out that often times elements and attributes can be used interchangeably. But sometimes that they're different. But I never understood come is which. So much of what I'm going to be describing to you is stuff I've learned how to use by reading it, copying it, trying to understand what it does even if that's not really understanding how and why it does it. I understand what it does then I have some idea of how to use it. But I'll do my best. I'm going to put a bunch of resources on the archive page. They're not there now but they will be by tomorrow. And it will point you towards lots of resources where you can go and try and learn a little bit more.

So what are forms? What are forms for? Forms allow users to input data into a web page. That data then is either processed on the page does something with it, or as I said earlier is set to a server and processes and does something with it. The data may be in the form of a text box, a radio button, check boxes, and others. And as I said, related to it is script that helps to process that data and do things that you want to do with it.

And as we go through some of what's here, I hope that overview will make a little more sense. But that's what we're looking at. And particular what we're looking at is how to be sure that your form elements are going to be accessible to users with disabilities.

We'll go to the next page. Code requests the users input. Code on behind the web page is requesting input from the user. And it has to tell the user what input it's looking for. It then has to be able to accept the users giving it the information or data. And then that code has to interact with the user's adaptive technology when we talk about disabilities. And also has to be able to let the user know whether the input he put in worked.

Also the code has to be such that the user can respond using the keyboard and not only a mouse. So those are the things that we need to be looking at when we're talking about accessibility. So it's not all that hard if you know a little code. So you think everybody was doing it all the time. Well the next slide will tell us an interesting survey. I was talking to some people last week who had conducted a survey of 20,000 university web pages that had forms on them. And out of those 20,000 forms, only 29 percent of them were genuinely accessible. That's either disappointing or surprising or upsetting or whatever. To be sure that your forms are accessible, you have to use accessible labeling. You've got to require an understanding of the labeling and you also have to know something about how screen readers work so that what you're doing has some meaning and makes sense.

So again, that's a preview of where we're going. What I'm trying to do here at the beginning is give you an overview of what you have to know and what you have to learn. I always find if I have a context for what I'm learning it makes much more sense. So next screen shows that we have guidelines and standards. The web accessibility initiative has a number of guidelines. Going to give you the URL for where you can find those. But all the URLs that I give you in this presentation will also end up in the archive resource for this series. And again, they're not there today but they will be there tomorrow. So if you want the web accessibility stuff, you go to www.w3.org/TR/WCAG/ so that will take you to the world wide initiative Web content accessibility guidelines.

You probably have already heard about the section 508 standards. That's part of the rehabilitation act. And you can find those by going to www.section508.gov. Another resource that I think is pretty valuable, the University of Illinois, in fact the State of Illinois has put together some help for doing web pages and rather than talking about technical standards, they like to talk about best practices. You can get their best practices by going to HTML.CITA.Illinois.edu. And again, these will all be on the resources page.

Next slide, couple slides talk a little bit about the WCAG guidelines. They cover all about web design not just forms. And I think the ones that are most relevant is the WCAG 2.4 guideline. And it talks about the importance of someone using a screen reader or someone with a cognitive disability being able to locate things on the page and navigate the page in a particular locating and navigating forms.

So navigating, locating material and including locating and navigating forms using a screen reader is basic. Also some of those things can be difficult for someone with a cognitive disability to understand if things aren't simple and clear and visually clear, someone with a cognitive disability or a learning disability could have trouble with it.

So now we'll move on to the next slide. Next slide talks about WCAG 3.3. It says that your form should be designed in such a way to help someone with a screen reader or cognitive disability to fill out the form without making mistakes. That it can be clear what you want and that they can do it without making a mistake. Also, not only avoid making a mistake but help you correct the mistake. For example, I've gone to a web page where I had to put in a user name and password and got to a field and it did tell me user name, that was nice. And it did tell me password and that was nice. I logged it. Next thing I knew the page was the same, it just sent me back to user name and password. I thought what am I doing back here? I did it. I assumed I must have done something wrong. I wonder what. So I tried putting it in again and I still get back again. This could be a problem for people without disabilities. What it should do is come back and say wrong username or password. That's even better if it comes back as wrong username or incorrect password. So the error is corrected ‑‑ is specific then it is better. I filled out a form at a bank or something very complicated and it comes back and says it was wrong but it gives me back all the fields I put in and tells me which one or two fields were wrong. So you need help making out your form but you also can use help in knowing how to correct your form. We'll talk a bit about that further on.

So we'll go to the next slide. And it really talks about who are we talking about when we're talking about making accessible forms. And I suppose I didn't need to put in this slide because I already basically said we're talking about users of screen reading software or people with cognitive disabilities. And although the pages I looked at didn't list it, I think I would tend to include people with visual processing disabilities. So I think I've already implied that and there really is no reason for me to dwell on it and we can move on to another page.

So what we're looking at here is along with talking about forms, if you have a really nice accessible form and it's a messy horrible page that's in the middle of, I shouldn't end a sentence with a preposition. You really want to start off with a nice clean web page. That it's basic accessible web page. That it's well organized. The page is well organized. That the page has good foreground and background color contrast. That the page is using good crisp font. If you're using some weird gothic font that could sometimes be hard for people to read without puzzling it. So good crisp font that a person could recognize readily. Usually they recommend the sans serif fonts, usually the ones without the curly Qs. Every image on the page should have alternate text.

And the page that have simple navigation rather than something that's confusing. Then we'll move on another page. The form should convey the necessary information to screen reader users. Not just what it's asking is what the form is asking is understandable for someone with vision. But the form should convey that information to someone using a screen reader. The form should also be accessible by keyboard, as we mentioned before. And the person who puts the input into it should have clear idea that what he put in worked, was successful, that he succeeded in doing what he wanted to do.

The next screen I call when forms are black holes. All of us who are screen reader users have gone to a form and when we moved into an edit field, our screen reader said edit. And that let me know I was in an edit field. And my question was what do they want? I recall going to a form on a learning management system course whichever you call it. And I had to put in user for a class. And I could tell in the beginning that it was asking a bunch of things like first name or middle initial, last name, e‑mail, street address, birthday, and five or six or seven other things. So I knew that was coming. And I got to the first field. It said first name edit. So I put in the first ‑‑ the student's first name. Middle initial edit. I put in their middle initial. Last name edit. And the next field said edit. The next field said edit. The next field said edit. I suppose if I got up and read the 12 things it wanted, I might have been able to guess which would be the next one and work my way through it. But chances of screwing it up were pretty good. So it's very frustrating when you go to a form and you don't know is it looking for your e‑mail address first, your name first, other things. So that's why what we're talking about here is crucial. Because if it's not done properly, you may see what's being requested in the field. My screen reader might not be able to tell me that.

Now the next slide talks about drop‑down menus. I'm not really going to talk about how to do them. I just want to alert you to one problem some happy designers create so that you'll avoid it or if you see it on a web page at your school, you can tell them to correct it.

I've gone to a drop‑down menu and it drop down select one of the following ten classes. And it read the first one was science 101. And I wanted music 303 so I hit my down arrow key to go down the list. Next thing I knew I was in the science 101 course syllabus. I didn't press enter. How did I get there? What they did was had a command in the code that says on change go to something. So that anytime it saw a change it took it that that was your making a choice. It was me looking for a choice. If you came in with a mouse, you click your mouse to music 303, on change would see that and bang, you'd be there. But for me, it would go to the first one. If I went back and did a down arrow, it would read the title of the second item and take me there. I could back up and down arrow again, you know. When you get something that klutzy, you soon give up and quit. So if you have the drop‑down menu such that it takes a click or a keyboard action instead of just on change then it works just fine. But as I said, we're not going to show you how to make drop‑down menus. But when you make one of them or see one at your school, [Indiscernible] it makes it really unusable.

Go to the next slide for one comment before we start looking at form elements and such. A lot of people creating forms will use a WYSIWYG operating through dream weaver, front page, something of that kind. And that's okay. Each one is a little different. So if I were to try to discuss how to use a WYSIWYG editor, we'd have to teach three or four of them. We can't do that. If you're using a WYSIWYG editor, it would be helpful if you split it so that you saw the code as well as what you see is what you get part. You could do your creating and what you see is what you get part, then look at the code to see whether the results it created look like what you're going to need. We're going to use notepad. And the assignment I give you in the end going to have you use notepad. So you're going to learn a little bit of what's under the hood looking at some HTML code.

First we're going to look at code for inputting information into a textbox. And reading it for those who can't see it is ugly. But I'm going to try to do that. So the first line of the code ‑‑ hello. Hello. Oh good. I thought I wasn't there. So what you do for the code is you have the left angle bracket, the word label space the word for F‑O‑R equals quote first quote close angle bracket. And then on that same line we have the two words first name and then we have the close label, the opening angle bracket slash close angle bracket. So you have the code there. What the screen ‑‑ what is going to show is first name. So it's going to say first name and my screen reader is going to read that to me. The next line of code starts off with open angle bracket input space ID equals quote first quote and so that equates to the word first in quotes on the label line. Again, input ID equals quote first quote type equals text name equals quote text unquote size equals quote 12 and close angle bracket. And the size is limiting the size of what somebody can put into that field. So the first part has some stuff in there that script is going to be looking for. And the next part says textbox where you can type in text and that limits the size. And we'll go on to the next page which helps explain that which to some extent I've already been doing. The label and ID element for first gets carried over to script. And then there was the place where it said first name. The input of a textbox wants you to input text and the size limits the size of the text box. So I think we've covered that already.

Next slide. The HTML elements that we have here should do two things. They should ask for the information. They should interact with the screen reader. And then they should be able to interact with the script which we'll do something with that information. Either processes the script that's on this page or send it to a server. The example I'm going to be giving you for assignment will send it to a server on the EASI page and turn around processing it and then mail it to you. So you can have someone fill out the form and they'll mail you the results. The next screen is also important for input text information. Often times particularly if you're filling out something for credit card number, many of those fields are required. They're not optional. Sometimes they may not need your home phone number or they may not need your cell phone number, something of that kind. But there are some fields that are required or else they don't want the input at all. So how do we deal with required? The two things that we need is first the instructions have to be seen by the script to see whether you actually did fill it out or did it. And they also have to interact with the screen reader so that the screen reader tells its user that the field is required.

Next screen will show how simple it can be. And if you think back to where we saw the input for your first name, we saw the two words first name that were going to be shown on the screen or verbalized to a screen reader. And so one easy way to do it is to type in first name paren required closed paren so that the screen reader says first name required. We'll go on to the next screen. A lot of web designers think that solution looks pretty ugly. Often times what they do is mark that item in red, which isn't much help to a screen reader user. And yet they don't want to have the word required hanging out there as an ugly item. What do they do? [Indiscernible] one of the easiest solutions is to put in a 1 pixel image. You can make it the same color as your background color and nobody is going to see it. But you add an alt text tag to that image that says required. So what will show is asking for your first name the invisible image will tell the screen reader user that it's required. There are some fancier ways using CSS to move the stuff about required off to the left of the screen so nobody sees it but the screen reader is going to read it. But I'm not going to touch that one.

So the next screen comes back to what we talked about earlier, error correction. So I suggest that what you should do with error, if a script detects that there's an error, instead of just going back to the fields asking a person to more or less do it again, it helps if you one, tell them they made a mistake rather than the page is locked or something. But secondly, if possible, tell them what the error is. And basically this is a matter of script. So we're not going to go into it. If you're creating something like this, you can be sure that your person designing the script, the script that you get has some way to detect the error and identify the error and then put up a note on the screen one way or another, either another page or a pop‑up that says there was an error and tells them what the error is. So that's a helpful thing to have. And obviously the script is out of our capacity here. But if you have some way to do that in the code that I'll be giving there usually is a line that says failure which will go to the web page. Which tells you you did something wrong. Do it over. Our script is pretty primitive.

We'll move on. So we've talked about input text boxes. Now we're going to talk about check boxes input. Text boxes, radio buttons, things of that kind. So the first line of script here is open angle bracket input type equals quote radio quote. So that's telling us it's a radio button. Continuing on the line. ID equals quote male quote. So that the person checks it it's going to be male. Name equals gender close bracket. And the next line open angle bracket label space for F‑O‑R equals male quote male quote close angle bracket. Male which is going to be spoken and then the close label. You repeat those same two lines only you say female instead. And you've got check boxes asking you to check whether the gender is male or female. And this will make more sense in a slightly more complex page. But those are the basic lines that we're looking for. The other two web code things we'll need we'll see on the next page which are field set and legend. Field set is a way of organizing a group of things into an identifiable group so that the page knows these are a group not to be treated as a group. And legend is like a caption that will relate to each item in the field set. So the field set is opening group. And legend is caption for each item in the group. And then we have a close field set command that is field set is open angle bracket field set close bracket and the closing one is open angle bracket slash field set close angle bracket. Now we'll see how that works in real life.

We'll go to the next page. Page 24. And so what we see on the first line is open bracket field set. This is sort of repeating what I was saying before. But the legend has a description for each items. So could be which fruit do you like and then when you count the name of each fruit, strawberry or raspberry or whatever. It will say which field do you like raspberry. Which field do you like? Strawberry or gender male, gender female. So that if you're looking at the page you are reminded of the overall category which could be which fruit do you prefer or which gender. For someone using a screen reader part way on the page you may lose that sense of context. So the legend has it repeated all the way down and makes it much clearer. And then you ended up with a closing field bracket. We'll get a concrete example of it by going to the next page. Page 25. So we start off on page 25 with open bracket field set close angle bracket. Then the next slide ‑‑ or you could put it on the same line. Open [Indiscernible] close bracket. Gender question mark open angle bracket slash legend close angle bracket. Then below that we have input type equals quote radio quote id equals quote male quote name equals quote gender quote close bracket. And the next line is input [Indiscernible] quote id equals quote female quote name equals quote gender quote close bracket. And then we have the same for the label for female and then we end up with the closing field set.

So each time you go down there to check box it would read gender male unchecked. Gender female unchecked. Or you could hit the space bar and check it. And I think this will become much clearer when you get the assignment we have two sample HTML files in the assignment I'm going to give you. One is a page that will ask you for your first name, your last name and then there's some check boxes which pizza topping do you prefer. It gives you pepperoni, cheese, mushroom or something like that. You can check one or more of them because maybe you like all of them. And then at the bottom is a submit button. And if we do it correct it will mail the results to you. The second example file is called template HTM. And it has the code at the beginning, the code at the bottom and leaves blank where you can fill in the HTML code. So the next ‑‑ we're almost at the end ‑‑ is going to show you a little bit of script which you will never need to write. But you may need to cut and paste and may need to change it. So it starts off with open angle bracket form. Which says that it's a form. Action equals. And then there's a web page HTTP colon slash slash and I wrote in here dummy dot com at some web address slash PHP slash test dot PHP. And then says method equals post. So what that is telling the form is what it's to do is to take an action and it's to post the results of the form to that web page which has a PHP server file. And if you understand that much, you could probably check and see that the code is right when the only real thing you're going to worry about is if you got the right address for the script that you need to go to.

Then the next line says input equals hidden unquote. I don't know why it does that. Name equals quote. And here, name equals quote submit underline to quote value equals and you put in the e‑mail address that you want the results sent to. So again, its name equals submit underline ‑‑ quote submit underline to quote value equals and the e‑mail address you want it to go to.

On the first form I give you that works, I want you to go in there and take out my e‑mail address and put in yours, please. I don't want to get all of your things. Then after that basically you're going to have space where you put in your form. First name, last name, whatever. And then after that you're going to have some more code you're going to need. And the remaining code, am I on or off? Hello? Hello? Hello?

 We can hear you fine.

 NORM COOMBS: Hello? Hello? Anybody hear me? Okay. I'm going to finish. I got no confirmation from my second computer but I'll trust that it's working. Okay. Now let me see if I can see where I was. We're looking at the HTML form. Oh. So after you do your part of the form, you have a couple lines that say input type equals quote submit quote value equals quote send quote input type equals reset quote value equals reset quote and then you have your closing form which is the left angle bracket form slash form right angle bracket and then the rest of your win page.

So on the resource page when you go there, you should have the recording. I'll have all these web pages you saw. I'll put up the original link to the original PPT file. And zip file with read me and two sample web form pages. And a whole bunch of links to resources in Illinois at web content accessibility guidelines and webbing probably are the best pages. So I think that's the end of it. I hope I can hear somebody else. I'll turn off my mic and turn on your mics.

 We have some questions here. Way back in the beginning when you were talking about the agenda, you made a reference to script and Chris was asking if that was JavaScript and I think the answer is no but I wanted to make sure. He also wanted to know how do you determine the ‑‑ oops! Sorry. We had some questions. Chris was wondering back when you were referring to script on the agenda, he wonder if that was JavaScript and I believe the answer is no but just to verify, you can answer that. And then he was also wondering how do you determine color contrast.

 NORM COOMBS: Okay. I don't think it's JavaScript but I'm too stupid to know to tell you the truth. I've seen it in various places and copied it. Oh I will be putting a link on the resources page to a thing called responsomatic where you can go. A wizard will walk you through making a form. It will have the scripts on it. And then you [Indiscernible] if not, rip it out and put in what you think looks right. I'm only going to leave the page that processes your script the EASI page a temporary file. I'm only going to leave it there probably until the end of June. I can't take on processing script for everybody in the world off of our server.

Color contrast. It's sort of a judgment call. One you don't want a lot of patterning on the background. And there are things out there that you can go to that will grade your colors. And personally from what I can understand I think it's as much personal taste as it is a scientific measurement. And so I hate to say anything definite. My only advice is next time you go out driving down the highway at night take a look at the road signs because they want those to be pretty readable.

 So then Jamie said he wanted confirmation that we need to make sure onchange event is not selected and is that correct?

 NORM COOMBS: That is correct. What I understand is if anything happens, that drop down where it has onchange notices something, like you put your mouse on top of it, it goes. And so if I'm trying to arrow down to find an item to select it, every time I arrow down to the next one it selects it and goes there. So we don't want onchange. We want to be sure that you have input either by right clicking ‑‑ either by left clicking your mouse twice or by pressing the enter key or something like that.

 Suzanne said, does text 33 limit the number of characters that could be input. So someone couldn't have a first name longer than 33 characters? And then Chris made a reference to the size limits the input to 12 characters. And I think size limits it to the height of the text but you might want to verify that.

 NORM COOMBS: I knew somebody was going to ask that. I copied that and I don't know why it had text 33. It seemed to work for me and I don't understand it. I'm confessing my stupidity. And the one that size equals 12 is the number of characters you can put into the line which is 12. So you could make it 50 if you wanted or 78 or you could put in some other code that specified they can type on two or three or five columns or something of that kind. So there's a lot of variety you can do with size.

 Chris says that text 33 is a variable name. And Susan is asking Chris to define a variable name. And I'm guessing he's doing that. Meanwhile, Khaleel was wondering about using ARIA tags and if that would help.

 NORM COOMBS: I understand ARIA is making this easier and I haven't got into that too much. Some browsers still don't support it. I understand that HTML5 is also going to make this a lot simpler and I haven't got into that at all either.

 And then I have one other question. Where did it go? Chris wanted to know how is the variable gender assigned of value and then his question was by ID.

 NORM COOMBS: Yeah. It was covered by both label for equals quote first quote then id equals quote first quote. My understanding is that you probably could get by without using both. I have often gotten by without using both. The people I know who know what they're talking about say for some reason or another it's much better coding to use both. So I think they know what they're talking about. And I know I'm not able to tell.

 Then Todd was wondering if you could give the form wizard one more time.

 NORM COOMBS: It will be on the archive resource page. It's responsomatic. I think that's probably RESPONSOMATIC. If you do it for free somewhere in the middle of filling out the form, maybe when they thank you for doing it, responsomatic pays for the add. If you're [Indiscernible].

Now what I found is the when they filled out the input fields and stuff, they weren't always as accessible as they might be. But when I don't know anything about the script it's a godsend.

 I think that's it for questions. I could be wrong.

 NORM COOMBS: If anybody wants to come back and talk about this next week, e‑mail me. My plan will be to be here from about 10 minutes to the hour until 10 minutes after the hour even if nobody comes. If people comes, I'll stay as long as you want.

 Chris' last question was are you familiar with survey gizmo and is it accessible?

 NORM COOMBS: Yes, it is fairly accessible. Even going to it and using it to make out a form it's fairly accessible. And then I usually had somebody help with that. It was just too many options and conflicts. But I had gone to it, found the form people had filled out, found the place to download it and was able to get the results of the form. So it's not bad would be my guess. I understand that what is it survey monkey or something like that, it has some real possibilities as well.

 And Khaleel is asking what about qualtrics. I don't know that I've even heard of them.

 NORM COOMBS: No. If you're on the accessibility list, you can ask and see if anybody knows. If you're not a full-fledged web designer or script designer or user, you've got to rely on cut and paste. But I've also found that you can create a whole mess with cut and paste if you don't know anything about what you're doing. I hope what I've given you here is enough where you can do some things. So you will find a sample form that will ask you for your name and e‑mail address and ask you to choose pizza toppings. Go into that form. Please replace my e‑mail address with yours. And it will send it to our server. It will process it and should send you the results. Then there's a template page which actually I took from the other one but then I cut out the lines for first name, last name. The check boxes. I just left you with the beginning and ending scripts and left the middle for you to play with. And suggest if you're going to play with it that you play with a copy of it and keep the original so you can get back and start all over if you make a mess like I usually do.

As I've said, we have a couple more free webinars this month. And I'm hard at work trying to make a webinar on accessible science technology, engineering and math for June. I think I've got four presenters lined up. And should be up on our web page by the end of this week. Thank you everybody for coming. And I hope I haven't created more problems than I solved.

 Thank you, Norm.