Live Session (2026)

Hello and welcome back to this week's course on forms, which is I know a much more technical topic than we usually have. But it's also a topic that's very unavoidable because like on the web everywhere where you have interaction you basically also have a form interaction underneath it. And so it makes sense to like take a look at forms and how they work. and then also figure out you know why they are important and how how to review them from an accessibility standpoint. Um and so the first question is as always If you have any questions yourself , and if so, feel free to speak up or put stuff into the chat or anything like that. And if not, that's also totally okay. Do I have a couple of things to show? Alright, let's do it. I'm gonna share my screen and I'm gonna share Polypain again, like I shared this couple of of weeks ago as as this browser that basically gives you some accessibility testing tools as well. And I will show some of those and then also show you how to access them like outside of Polypain or in some cases you know how to do it. in another way. So if you you don't have to use it. Um I just think it's like the information is very well organized. So I think it makes a lot of sense to like look at it and and use it for this case. Um so So speaking about like everything is a form , if we go to the WCEC quick reference, we can filter the whole page. And everything that you see on the right is in the page and then we basically use JavaScript to hide and show individual things. Right. And so when I go in here and I have, you know, now currently checked buttons, arrows or forms. Well those should be all the text that I have checked. Then it only shows that on the right. And of course, this is a button. Um it's already in there and it is checked. It has this little check mark. and the the way you know that it's a button is because it looks like one and this is like a very reduced type of button you know usually you want to have like a little bit more affordance on it like here you have the height like chevron to show and hide the sidebar stuff like that makes it much clearer that this is a button but here in the context of text where you just add and and remove stuff. it makes sense to have it like a little bit more muted so that you know people can like go through and say like oh yeah of course I I check this and it's not like overwhelmingly like designed because then you break the continuation, it's it's much harder to read. Um and and yeah, that's why these buttons are a little bit more understated but in general you want to make it pretty clear what is a button and what isn't and so forth. the checked state we have basically done the change of contrast so the the High contrast on the back, the darker color on the back with the light text on the top, and then we also have a check mark for people who have Um issues with color interpretation just to make it very clear, okay, those are the The real like checked things and you could say like oh why is the check mark not at the front Um because someone designed this like that, and that one was I, and I'm not the best designer. Probably should be at the f at the front. Um Well also you don't want like with stuff like this, you also don't want to like you know, have space necessarily for a check mark somewhere where it's before the text and then you get t or you get a text shift and then everything breaks like Um you know there are m multiple considerations around that. But it's it's is it's basically buttons and they have an ARIA pressed if when they are pressed and Aria pressed false if they are not pressed. So they are what we call toggle buttons. Um but these are also buttons and normal form fields like the check boxes here like the drop down box here all you know, form elements. Um and that's basically what I w you know want to show is like even if it doesn't necessarily look like this is a form or this is like interaction. it can still be like these full description toggles, they are buttons. So you know, stuff that you have for forms also applies to them. Um then you have this share box which like looks like a link a little bit but is also you know is also a button that opens this little window also form elements in there like the input field. Then you have the understanding, which this links actually out. This is not a button, although it looks like one. So you get those those fun little things in there as well. And and so yeah, buttons are everywhere. Buttons and like other UI elements, you get them always. and that's why thinking about forums and how they interact with accessibility is so important because if the checkbox is not properly labeled someone who cannot perceive the checkbox, who cannot see it, , you know, or who can only see the checkbox, like if you're using a screen reader. Might just hear checkbox checked and they don't know that it's for developing or interaction design or whatever. So that's why forms are so important And we use them all the time, especially also in like shops, when you put something in your cart, you press a button, when you change the amount of the thing in your cart. It's all all like little forms that you're using. So forms are very important. And we can use here in PolyPay in the forms inspector. And there is actually an online version of this, which I don't oh yeah, which I have here to show you how it works And then we just press track once and then it checks for forms and it says there is no form found because there's no I guess there's no form element on this. a little bit interesting because I I was sure there like it would recognize that. That's what that's what you get for like improvising some of these things. But yeah, these should be I don't know why it doesn't doesn't like this as a form because it clearly is like if we inspect element here, there's a select in there. Ah, but there is no form element. I think that's true. Um because everything happens on the page, so you don't need to go back to the server necessarily. to do it. So apparently it doesn't think that's a proper form, which is fine. I just would not have thought about that this way I have to I think I have to give feedback to PolyPane for that because it should show stuff. Um if you go into the elements panel where we just were you can actually under LA here you can see what the accessible name is. So in this case it's a WCAG version, what is here on the top. And you can see that we assigned that with the label element. And we just styled it bold. And then it goes it has a for to wikek ver which is coincidentally the ID of the select that we're just like inspecting so that's how they know from each other what their the label is. and then we see we also have an as accessible description which is this node underneath clear filters will not change the selected version And that's the verhint, version hint, which we have here at the bottom, id verhint, and we're pointing to it using the area described by and this means that a screen reader who encounters this form field will say WickHack version drop down depends a little bit on the screen reader. Um most screen readers would probably say like something like drop down or something. Um and then it would say note clear filters will not change the selected version. and it will also read what is selected, so it will say we cack two point two, so we cak two point two, we cack version. Um Drop down node clear filters will not change the selected version and then you get all the information you know that this belongs to this one control. Super useful. Um and just to also show this button here Didn't select it for me. Do it. There we go. So it has button aria press true. And we talk about ARIA in next week's lecture so I will not get into it, but basically it like Aria pressed says that this button is pressed down, like on a cassette player or something like that. you young people, I know that you are, you know, again What cassette players are. And so you you have that and then it says Aria press true, which basically means that when a screen reader announces it It would now announce buttons, button as the accessible name and the role, and then it would say it's that it's pressed. And you know, depending on the screen reader, they might say selected. Or pressed. And if you unpress it, it gets the ARIA pressed false. It was visible there for a second Do it here again. Gets aria pressed false and then that would be communicated that Aria press is now false. Usually when you go back. from the check the button and back to it. Not all of these ARIA attributes are just announced by the screen reader all the time because that would be too much. for most most users and as always you can change the verbosity on that. Um Yeah, I like to show some of these examples that are in this and I I link to that from our from the page. So these are basically beautifully designed forms for from 2023 and now the title of the entrance has changed to 2026, which is always fun to see how like oh everything w that was beautifully designed a few years ago is still beautifully designed Now that we put that we can change dynamically the the color of the the the the the number of the year. So here if we go to the outline again and we go to forms, no, that was not focus order is not what I wanted. forms. This because this has a form element shows the full form inspector. And it's quite a good way to like get your head around a form because forms can be pretty tricky. So first it gives you this like overview, seven total fields, two required fields, one button. Now what we already see from this like booking form for a restaurant is that we don't know what the required fields are. So it's good to know that there are two, but you know, you wouldn't know without like looking into the source code what is required. Um we see here in the elements table that the your name and the your phone number fields are both required and the rest is all optional. So sh that would be like an error, like error prevention issue. and so you would know that, but you can see that like These are properly labeled, so that's good. They're using the placeholder attribute and might come from depends on the implementation Um which is not optimal because like once you start typing your name, it is gone. In this case, they made it actually available at the top, but now it's very small, it's not optimal. So we generally advise against like these floating label things. Just put the label on top of the field, it's not that hard. Plus there's always like movement and then the it's small and then you have to double check. Um just harder to see what you have filled out and what you haven't filled out for a lot of people. Like if you have filled out this time as well and this food like the mush mushrooms so they now even have the same color as the phone number here so like okay what's like what's going on here And you will also notice that oh we have set 6pm and assorted mushrooms as our like menu, but They don't show up in this elements view, right? We only have seven elements and they are your name and your phone number. And then the inputs for the table selection and then you have the one button with which is book now. So there are input fields missing like drop down selects missing So you already know there's something wrong here. And we can enable the overview so we can actually see what it like recognized. Um and yeah the problem is that these are not real select boxes as you would have them in a in a normal form. And that also means that if we go to the focus order, they don't show up in the focus order Like focus goes somewhere like over here on the left. But it's completely we completely don't know, and it actually goes to the four, which is like out of the way. So you don't you don't actually really know what's going on. So if you're using the keyboard, you know you put in your phone number and then you're somewhere you can't see it. So focus visible issue. And then we can, you know, change the number of persons by using the arrow keys. but it's you know it's not not obvious that you just focused on that. And then you can click on book now and then book it. But now the question is so these were not shown as like things that you have to select when loading the page are these still required? So it would reload and I oh No, can do it. Um so we can now click book now and then it says like okay, we have to fill this out. And then we also have to fill the other one out because these are the required true things. So it needs to be a number. There we go This is my actual phone number. And then you click on book now and it looks like it works. So these are only demo form fields so you know could could be anything but but it looks like they are not required fields after all which is like Yeah, I mean if I book a restaurant I probably need to put in at least the time and you know stuff like that. Um But yeah, these are not real form fields and we see that all the time. You know, if we inspect this in the elements panel are here. Let's do it like that. You see that these are just like lists with values in them And then it has like the lists that drop out, drop down, they are like other lists. So this is not a drop-down that, you know, that anyone with a screen reader or keyboard can use. It's just like inaccessible for everyone. Which like great great job everyone And we see that quite often because select fields are some of the few HTML elements that you cannot properly styled because they come historically from the operating system. So when you see a dropdown, it usually if it's a native dropdown, you know, asterisk asterisk stuff. It's basically not the browser rendering it. It's basically the browser going to the operating system and saying, like, oh, I need a select field there. and it needs to have these values and then the operating system does that. Which like and this is probably like now ten, fifteen years ago, like a long time ago. it used to be when you did a screenshot from the DOM from inside the browser and it had dropdowns in it, that those would not render. Because they were rendering on a different plane outside of the browser completely. So there was like it was like a while time. This is not the case for now long time. And we're getting customizable selects in in in in a while. probably it takes another I would say another year or two, so twenty twenty eight maybe we get like fully stylable selects and I should should show the proposal open UI select customizable Oh, I'm better typing. Custom my sub No, I do not need another new browser. Oh there we go, customizable select element. Um and basically they go into all the like reasons why we don't have it and what what we should know need and what how the HTML parser needs to change. It's really interesting. but basically you say appearance based select, which tells the browser, hey, you shouldn't use the standard. rendering thing. Um you just should use your select and and and show it to me as like a baseline thing and then That means it's HTML and you can just style it with CSS as normal. And that also means that you can put images in there So if you have a flag which like a lot of people want to have in their dropdowns that used to be like used to not work and then people used emojis which like Not the best from an accessibility perspective because like their their names can be relatively long. Um and also not all countries or like all use cases use flags that are in Unicode so you get like into like natural limitations of like the technology. But now you can just put images in there including text alternatives and stuff like that. So it's it's really nice. Um and you can even use a button to trigger a select that is defined somewhere else on the page. Um like I don't like or or like you can you basically define in HTML, the button that you want to use to you to select the content from. It's a better way to to say it, because the other way I said it was wrong. And and yeah, and then you will be able to use like your custom basic styles, you know. You can use your rich content in there, like your flags in in this case you can replace the button with something else. so so here they put in the selected option. before the selected option. So you can do stuff like that, which is useful. You can rendering options different than they look in the bo in the button. Come on, let me scroll up. So in this case you have like heart and smile and stuff like that. And if you use ARIA Hidden True, it will just not show the hidden description. on the option. I think this is actually a very bad example to be to be honest. Like yeah I mean sure you have heart emoji and then heart, but but yeah I don't I don't like the area hidden true. But you can basically say like, okay, in my selected content the description because it has class description. I don't want to show it and then it doesn't show up. So it's you it's useful for for things like that or if you have like a drop down with a language selector You know, and you have all the flags, which you shouldn't have for language selectors, but that's completely other topic. You know, you can have the country names next to it, and then when you select it, it like goes back into the flag Again, bad bad thing. You shouldn't do that. Can even like put your options, your opt group into like Well you can label your option option groups, that's new, like that. and then you also can like put them into like a grid. Um or stuff, so you are m much more much more variety. I don't know why you would want to do something like that, maybe for a Calendar? I don't know. Sounds sounds like a bad idea if you ask me, but like, yeah, you 'll be able to do stuff. And you'll be also be able to like use animations which will make your UI look like it's slower than it actually is so that's fun. Um but yeah there are a lot of options on how to to use those Um and I think it makes a lot of sense to have all these like customization options and the these will all be like CSS stylable. So you have you will have like a lot of of options. But that's not where we are today. And so people are doing these types of drop-downs, which are not drop-downs, and then you have to make them accessible. And this is like one of the big things that we encounter when we do accessibility reviews and testing and all that fun stuff. Um Is that we look at this and and and we find that people are using, you know, non-standard UI controls and then they don't make it accessible because whenever you go and stray from the default from the built-in accessibility you get into UI that doesn't work as well. And the same goes for here. Here we have the four or the the other four, two, four, six, five, have the four radio buttons. Which work as radio buttons, right? I tap to it. Here's the input type radio, which is the current one. Um, so I can just tap to it. Of course it doesn't show so I will just quickly enable the track focus bookmark that Functionality so that we see where we are, and we don't because we're actually on the left outside of the screen. But then we can use, you know, we can go left and right, and we see You know, and it even wraps around like normal radio buttons too, because it's it is a normal radio button. it's just moved somewhere where we don't see it or where it doesn't doesn't make any sense. It's also not properly labelled, of course. And then we have here label four that still is here, and then the after is basically the person. But the input type radio, the actual input that is positioned left minus 999 pixels, if I remove that. and the absolute positioning and the height and the width. Then here we have the actual radio button. Now this this now looks very broken because that's some of the CSS that they're using. But now we have the same thing. I'm here at your phone number and I press tab. And now I'm at the current version and I use left and right arrow keys to go up and down. And that's how the styling corresponds to the selected thing and this is actually a good thing like using techniques like that although not perfect help you to to use like things that look fancy although they are like in the background using these like simpler technologies really, you know. So this is something you can do. You just have to like also account for for keyboard focus, for mouse hardware. and other assistive technology things, you know. So for example, select your dining space here is a label. should be a field set so that when you select the first like when you tap into the for which is the default here it would say for and then it would also say people because currently it's only the It's not in there, right? Especially if it's not active. But it should say four people and then it would read your di Select your dining space, which like the number of people is not a dining space, but like you know, don't don't get me started on that. Um yeah, so this is this is something actually we did all the time. Like a few years ago, this used to be like bread and butter things and like a really fun way to earn earn some money because like it's not it's not very trivial and it feels like this was a technique that used to be used like much more and now it's gone again and and it's still useful in in some cases So yeah, so that's how we would test for accessibility in this form. So what do you do when you don't have polypane? Um well you can Basically do it manually. You can just go through your DOM or your your HTML and look that everything is assigned. But that does that's Doesn't sound like fun. So what you can do is like look at the form here and then copy all the HTML. So I will just copy out the HTML And now we have all the forms HTML in our clipboard. And what we can then go do is to go to the online form inspector from PolyPane. And paste it there. Now we have pasted all the the whole form. And then we can click analyze form And we see the same analyz analyzation that we have seen before. So we have the form configuration, the action here. See how many fields, required fields, buttons, and we can see here the label as well. And here the value of the radio buttons. So you get all that information too and you can even see like what the idea is if you expand or collapse or if you have an ARIA label or stuff like that. You see that in the details as well. and then you have the form button at the at the bottom. So it's it's very useful and basically works pretty much the same as the the built-in inspector. but that's of course not everything. Like if we go to where did my So oh, this is polypain, so I don't have it. Um if we go to the copy that to my browser here. I will share my screen in a second.

Oh, I don't have the come on.

Well there we go, I will share. Give me a second. There we go. So here we have the same form now in Vivaldi, but that works in any In any browser, so we have basically check field labels on this page where we get the for and ID connection. So this is from the quick. Easy checks, not quick checks. That used to be the name a hundred years ago. From the easy checks, so it shows which fields are labeled. Again, you see that these pseudo-fields are not properly labeled, which makes sense. So so you can this is a way a good way to figure out, you know, if something is a real like drop down or something like that. Of course you can just use the tap key to go through. but then it's sometimes just hard to see where you are on the page and if I close that, we can also oh it broke that very very nicely. Um bookmarklets, they are mysterious sometimes. and you can of course go to Allie Tools. com, which also has a lot of those bookmarkers which I have shown before. Um, and there should be some forms as well So group fields for checkboxes, so that's a good one to put into into the Drop down. Ah come on. Not doing it? This used to work. Does it only not work with my new trackpad? It would be sad. No, it just doesn't want to do it today. That's fun. Interesting. I guessed something broke on this page Okay. So I will I will not show that. Um I will show that this is in the PolyPaint snippet store, so we should just be able to check it there. So I'm going to share you back

Oh yeah, but

Oh here we are. I don't know why it went back. Okay. Um and then we have from Ian Ian 's collections, so we have the Ali Tools things and it has misc stuff that's not what I want on the form stuff there we go so we go and install that folder I have not done this before so that's fun and it successfully imported the folder so if we go back to here and then we go instead of of here we go to snippets now we have all these forms And then we can run those group fields. No panes or portal selected. Well I have selected this pane. That way Hello? Maybe I have to reload after installation. Sometimes that happens. All paints. There we go. So we press run. And they say no group fields found in this page. Because that's one of the things that I didn't didn't show because I missed it. is that no, actually they can't because they must be grouped as being as having the same name here because otherwise you couldn't use them with the arrow keys. So they have name, number, people , and as you can see everyone, although they are different inputs they have the name number people and that makes that you can navigate it with the arrow keys. So it doesn't look for that. But the important thing is when you like submit it to the server, it will say, like it says here at the top. and number people equals four or if you have selected six and you click book now. Oh I just have to put in my name and my phone number Then I head hope that it removes the overlay. I will just click book now. It has now changed number people to six. So you don't have to like have different value variables and say like, oh Six people equals yes and four people equals no or something like that, it will do all of that automatically. And that's what you do with the name attribute. Um, which is maybe a good good detail to look at. and if they are named the same, which you can do for checkbo no you can do for radio buttons, which you can also do for checkboxes, then it will just have a comma separated list of all the values, which is which can be useful. For example, we do that in the how to meet. Like here at the top, you have errors and forms. And this is a different format for technical reasons. but basically that means that that is that means all of these because these are not checkboxes but basically that means they are in one data value form and not not multiples and you can do that with your stupid there too And then we can suggest autocomplete values. So this would be for like if you have your name and your phone number, these in BCAC need to be Because they're personal information, you should have a drop down to to fill them out from the browser or from your password manager or something like that. So it should let us pick autocomplete values for fields that lack them with easier to understand categories. I have never used this Let's see, so there are two fields that like autocomplete are present on the page. So for each, then press the I'm done button. Okay, let's see how what that does. Yeah, it has identified the two but the two fields and then pick an autocomplete value and now we can like just check from the whole list of what What is there? And for the name we want to give the full name. And then for the autocomplete value here for the phone number, we want to go to phone number Here we have tell full full number. And if you select autocomplete true, which it now has added, I think. Right one here. Yeah, input it now has autocomplete tell. This now gives my one password oh and done setting autocomplete I need to check that and this would now give my password manager a way to fill this out if this was my primary browser and I have unlocked it. Um but if it's like if you're using Chrome or Safari, they also have your data stored so you don't have to put it in. You see this all the time. It's like a very convenient feature. But that's how it's how it's done. And you have to add those auto-complete values. Yeah, and these are these are good things to think about. Um and I wanted to show a couple of other things as well. What happened? Oh, I'm still here. Just stopped sharing my screen for some reason, I think. Because something crashed. Did it? Now I'm very confused. Okay, I'm gonna go back here. This is fun. Okay, I'll try it again. Usually have less problems sharing stuff. No, it just doesn't show my my browser anymore. Okay. We heard. what do I do? What do I do?

I don't know what happened. I'm still the host.

This is fun. to do. Oh, this is all good. Don't want to share my whole desktop. There's nothing that has n has nothing for you to enjoy because it's very big. So you don't

Do you want to start

with the side? Oh there it is. No, it worked. I don't know why it worked, but it it worked. Very confusing. Okay. so yeah, so I want to show a couple of other forms things. Um So we talked about the how to meet, , and I talked about identify input purpose. This was the autocomplete stuff. where you basically have to put in your individual like pointers to to you know what data you expect and then it can be filled out automatically if if you want to give that to your to your browser f as as a user. Um and and the important thing is like This cannot be queried without your interaction. Like doing this is completely safe and completely private. So the user has to like pick a name to put in before like the the site can can read it and that's just a security measurement so you can you know Can't put in like, oh, give me your credit card number in this field and then your credit card number has like has like gone to to to better places. Um So yeah, this is this is really good and this is for personal data as well. So this is for your name and for your phone number. It's not like If you have an a general like add your contacts page, this is not the place for identify input purpose. right. That's only like if it's for the user who's in front of the screen then you you are required to do it otherwise it doesn't apply. I want to show this contact us field. Because I think it's pretty good, and that has nothing to do with like me helping to build this. So a couple of design considerations. first making very clear which of the input fields are required and not. Um helps everyone, especially people with disabilities who don't have like to submit and then retype and and and get to the form back. Um the other thing, very clear focus styles. So if we go here has very clear dark borders for the focus tiles and as you can see also asks me about my data which I could put in but I don't want to put them into a video. But basically that would be the interaction to make sure that like You don't get anyone else's data. And I can still input like you know, a different contact. Let's say I'm the assistant of someone, you know, I can still input there data or they ha m might have given me their data. So I could put in Testy Tester, which is my pseudonym when I'm when I'm doing accessibility testing and then it just fills out every every field that it has it doesn't fill out emails so you could put put that in there as well then you select what you're interested in Again, a little bit of fancy smansy stuff. So we have the additional outline like when you focus an input field But this is only a secondary field. So making it very light, just making it appear like a little bit thicker, and then the actual selected field making that much stronger. making sure that it's clear what you're selecting. Generally, I would advise against using input fields that are or or radio buttons especially where the whole group is empty. Like there should always be one selected. that's the best practice. But in this case I think it makes some sense and then you can use the arrow up and down keys to select What you want, tap for the message box, how did you hear about us? And then you have the submit button. And it's very clear when you tap through, like you know where you are. Um and that was like one of the big big things. Um not not super stoked about like the all uppercase stuff both for required as well as the I'm interested in text. Um Generally, all uppercase letters are hard to read. But yeah, that's that's how you can do it. The blue background comes from the autofill. so when a user fills it in some browsers it's yellow, in this browser it's blue. But you basically get an indicator where you have filled out content automatically so you can double check it. It is a useful thing and then if you submit it without without filling everything out you get like pushed back and this is just HTML form validation which is quite okay solid to use for for simple forms like this. In longer forms I would always save the data and reload the page and then have a list at the top with all the issues It also means we can take a look at our City Light Survey page where we have the before and after demo. Um and here we also have like tap issues, right? So we tap to none and then to select the city and then to the name and the email address and the That was actually the title and then the name and then retype the email. That doesn't make any sense. So it has a nice focus order issue. here and also these city parks they are all like not assigned to the form so just really quick showing you how to Use the form inspector from PolyPane in other browsers. So you go to inspect here and you can just click somewhere and then find the form. element and you do right click and basically copy HTML and you want to copy the outer HTML that makes sure that the form elements come with you. If you copy only inner HTML it only gives you everything inside of the form. That's the difference. So copy the outer HTML. Now we have copied all of that. And then we go to the form, which I should have. Like the form inspector, I should have copied that before because I cannot remember. So I would copy that, paste that here, and then I go into my Clipboard manager, clipot history. I didn't didn't properly do it. So let's go back to Satellites copy Auto HTML That was not intended.

d I guess I can just

paste it again. There we go. And then try it again. Go to Forms. Go to City Light Survey. Now you know the drill, copy outer HTML and then paste it here. There we go. Then you analyze the form And you scroll down and it says 12 total fields, three field sites, one button. that's true. Action it goes to survey. php with the post method, which is basically how how data is transferred to the server. It it's not a lot a lot of fun to think about, but basically if you have get, you get in the URL or the attributes. If you have post it doesn't show it in the URL at all. Um and so you know if you have something that needs to be bookmarked or something like that, then you want to use the yet method. And if you want to just submit something like a comment form or like a contact form or stuff like that, then you usually use post method. It really depends, like if you if you want to reuse it. But that's the general distinction. And then you have here f favorite park and says the group form fields under this field set. So Alright , farmfield , you got non, central park, Grand Park, Jurassic Park. So these are properly labeled. Are they properly labeled because I'm on the Accessible version of it? Yes. and of course I wanted to actually show the inaccessible version, so that's fun. Well you can do that too, but basically now you know already how it should be looking. So let's duplicate that. that URL and then re paste in the the inaccessible version. Let go Make this wider no. tools inspect. There we go. This also has a form because this is old-timey code, but then also has a table in it, which is not as we call it colloquially good. We copy the HTML, we go over here, paste it all in, and then we analyze the form. So this is the same form but the wrong one So here we have the form fields, they are not grouped in our field sets. It should have

you know

should should have looked. And this input has the value one, but it has no label, so you don't know one, two, three, four, five, six Don't know which park you are selecting. If you look at the the other view, it says like what's your favorite park? And then you have non -Central Park, Grand Park, Jurassic Park, South Park, or other So you have the different values, you know, they are only in the background. Um, and then you have the different radio buttons. Um, and that makes much more sense. You also see that the name RES is the same. Don't know why they used rest back in the day. I would have used something like Park , but it's probably for response Um and this is here too, so they are grouped here as well. Then you have here select one CC, which this is for the For the city is the greenest, so that's the C C dropdown. Um And you wouldn't know what this is asking about because it doesn't have a label, it doesn't have anything in there, so it's a really, really bad type of dropdown. And if you look at the accessible form, first it is inside of a field set. So you know you're thinking now about a different thing. It will be V very well announced. Um, and then it doesn't have a label, which like that's wrong. It should have a label. Oh, it it uses title for the label, which like you wouldn't do that in these days and ages. Like this is actually a bad example now, although it used to be a good one. And then you have the newsletter. And there if you look at the here like you have the input Mr. and Mrs. Not very inclusive from that standpoint alone, but then you have the EM and then n and then ev, which like they don't have labels at all. So it would it would say input type text or like you know and enter text and you wouldn't know what type what you should be typing in. Um so that's bad. and if we look at the accessible version it says Mr. and Mrs. and then name, email address and retype email for EM and EV. So it's email mail, I guess, and email verification for the two two input fields. but this is basically how you can see that like okay one one is not as good and also like here you have the name here at the top and then the two e two times the email. And here you have the email first and then the name and then the email verification. So that's that's no good at all. So we wouldn't do that. And then there's a button at the bottom which just says submit. Um and I think we did the same thing here. Submit your form field. So yeah. So Usually these days submit is not the best name for it, like you would say send or Buy our usual thing. I mean that doesn't apply to this type of survey where submit is probably something you still would use, but like Usually save something like that is is more used than that. these are more of these same like really bad forms. Did did I show you the right thing? Yeah, I did. Just clicked on the wrong thing here at the top. Okay. My bad. Um What do I want to talk about next? I want to talk a little bit about disabled buttons. Um, we see them a lot still in like forms and especially they are problematic when they are at the bottom of a form, like if you have a submit button or save button or send button, something like that, and it's disabled and the yuff it's not clear for the user. immediately why. So first they have poor contrasts like the example here. This is from Humpus from 2017. So like this problem is around for a while, almost 10 years. Um and it was around before then, so but the article is like ten years ten years old and you have things like here the add friend and follow buttons on what used to look this is this is what Facebook look used to look like. And basically they are grayed out and you don't know why. Um and so it's very hard to know. Um what happens and the same goes like for the send button. So why is this grayed out? Maybe because you haven't put in like a a text, you know, into in into the form field. and so it's always like you always should try to to avoid using them, especially to submit or register or whatever, because it's just like Okay, do I have to put in all of that or not? Or what you know what's what's important there. So yeah, disable buttons, not good. Um Generally don't use them. If you use them, you really have to know what to do. So for example, going back to the quick reference, here we're using them once you have selected like only this. this checkbox is disabled. if you have s if you have everything selected, this select all gets disabled because you cannot select all if all is already selected, right? Um and also doesn't make sense to like have it have it select only one of them because which one would you choose, right? So if you if you click on it, so that's why it's it's disabled. but in the grand scheme of things you want to avoid disabling buttons wherever you can. In this case it was like a very convenient and good way to communicate that you cannot interact with this element anymore. Yeah, I want to talk a little bit about placeholders, but I think we all need a break. Um but I know that I need a break But I give the break to all of us. It's that's how generous I am. so let's do ten minute break and get back at fourteen fifteen and yeah, see you in a second. And unpause the screen share if I know how to do that. Nope, I can only stop it for some reason. Ah okay So good question in the chat and I will pick it right up after the break because otherwise we're getting tired again. Um so for those who who watch the video just pause now and and like stand up and walk around for ten minutes. and then come back because it's a WCAG question. And the question is from Maya. When it comes to instruction form labels, would you explain the difference between 246 headings and labels and 332 labels or instructions? An example would be very helpful. Okay. This is a bit of a Terrible question because like it's not as easy as you would want it to be to to answer it. Um so if we go to 246 Leave the instructions that just go to to proper Wicke here. Um and we go to two for six. So headings and labels the very simple success criterion like you you couldn't make it easier right like people always say like oh why why is wicks so complicated and then you have stuff like this headings and labels describe topic or purpose That's all of the success criterion. So super easy, right? And then we have 332, , which I'll just duplicate this so we Can have them next to each other in a second. So 332 labels or instructions is the following Labels or instructions are provided when content requires user input. Also very simple. Should be easy, right? Oh, let's put them next to each I didn't want to put everything next to each other. That was that was a mistake I think I can do this and then I can right click and tie from here. Yeah, I think that makes more sense. Okay, and it of course remove m made everything like scramble everything up because like would be would have been too easy Three three two and two four six. Because I think for these even I as like doing it for a long time. I always have to bring them next to each other to under to really understand the difference. So the first thing is they are in different principles. So 246 is in the operable principle, and 332 is in the understanding principle principle. And that makes a difference, right? Um The the operation operating principle is about like how you can interact with the page and making sure that everything that is visible on the page makes sense inside. And the understanding makes sure that that when you have to in in this case for 332 may b b basically ensures that you have instructions when you require user input. Um and they are very similar But they are different. So I will start with 332 first because I think it's easier to understand that way around. So what 332 wants you to do, especially for like forms, is that if you have input You have to have labels or instructions. As soon as the user can input something like text or like data, whatever it is. You need to explain how to do it. And to do that, you use labels and use instructions That's the deal. What 246 says is when you have those headings and labels, then they must describe the topic or purpose. So 332 says you can have any label you want or any instruction you want. And 246 says, oh, and by the way, they need to describe what topic and purpose it is. So this is weirdly split up into two things. It should be one success criterion from my point of view, right? Because like having a label that just says like put text in here would be three three two would qualify for three three two but it would not qualify for two four six because it doesn't describe the topic or purpose. So, and the reason why we have those two is because they are split by WCAG level So 332 is level A. So the basic most basic level is just convey that like oh put something in here, give me input, whatever it is, it doesn't really matter. And then the level higher is describe what you actually want from me. And so that's why we have these two success criteria. And I'm on the record for a long time to like remove A and A as success criteria, make it one thing. And I think in that case, in that, you know, by doing that, you could like unify these two success criteria really easily and say like labels or instructions must be provided and must describe to topic and purpose and you would be good. And because we are in EN and you know other otherware, we are only testing for level AA. Um it's basically yeah, it it basically has become like one success criterion. So I don't I don't actively distinguish between those two. Um and usually you also fail both. Like when you know, w it's it's very seldom that there is a form field that has a label but the label is wrong. Almost never happens. Either there is no label Um and then it fails or there is a label and it meets the requirements Those are the two things. Like I don't think I I think this is nuance without a point at this at this point. But yeah, that's that's the difference. So 332, just any label will do And two for six says like no, it has to be specific to the topic and purpose of what you're doing. Um Technically any instructions are still meeting level A and you know you don't they don't need to be exact for level A, but like yeah, that's let's not go down that rabbit hole yeah, so there's a lot lot that we can do. Um I want to Point to a few things, mostly just you know things that you can use in your day-to-day to like underscore some of the learnings or some of the things about forms when you get into into discussions, you know, and stuff like that. Um and one of that is this Nios Norman group or how they are calling themselves now NN group. Um about forms. And this these are old old articles because like honestly the modern stuff that N Group is doing are sometimes very weird, especially for accessibility. Like I don't I don't know. Um lot of opinion. I don't know if they have like the the that level of expertise for accessibility. But this this is a good article. At least I like it. And basically it goes through like good form designs like this is a counterexample obviously from the TSA. And of course now these are How old? May 1st, 2016, 10 years old examples. So but the good thing is these are evergreen things right so these good forms designing good forms evergreen skill so so I do I think they still apply and they do have These things where they basically talk about like this is a form and it's not being intentionally made bad. But that's actually the problem. A lot of forms, a lot of interaction with users especially is not particularly designed Um and then being undesigned means it's a bad user experience, right? It's not actively like designed as a bad user experience, but it's like Yeah, it's it's just bad. So it's not intentionally bad. And so they have best practices for form design in there. and I like them. I think they are very easy to put into your own design system and stuff like that. So the first short short forms are better forms. group stuff. So you know if we go back to the contact form here at nobility very clearly grouped what you're interested in so you know oh this all belongs together there's a heading at the top stuff like that that can help to group forms. If they're longer forms you want to have more headings and field sets in them Then you want to present fields in a single column layout. Multicolumns are always bad. That's just how it is. Just read from top to bottom, especially for mobile use. it's almost like it's just just bad. logical sequencing. So when you're When you talk about something, you know, date and time, you want to date first, then the time, stuff like that. credit card numbers, they have a certain certain like sequence that they are they are having so start with the credit card number then the expiration date then the security code then name If you want to have the user choose something, make the most desirable or the most standard thing at the top and then provide other things. And then you can use at frequency and stuff like that. So if something, if you like do user testing and you analyze that a field is used more often We want to push that higher up and make the rest optional so that users can just select their preferred thing and then go to to the next one. Avoid placeholder text. We will talk about placeholder text in a second. Match fields to the type and size of the input. So this is basically making sure that the expectation of what the user is going to submit. matches the visual style, that can be a very effective way to just ensure that your that your form is easier to fill out. You know, if you have like I don't know if you if you want to buy something and like you know a reasonable amount is between zero and ninety-nine You don't need like a long text field to input that number. Just a small text field is good enough. Um but also don't constrain it too much. Because then like when someone resizes the text or something like that, you know, it it goes out of the window. So you have to find a like a good A good balance, I guess, , which is all what design is, so fun. Um distinguish optional and required fields. My personal preference is to mark required fields and leave non-required fields alone. I know that a lot of people are doing it the opposite way now. leaving required fields without a notification and then make mark stuff that's optional as optional. I'm not the biggest fan of that. Um it's just not how my brain works, but but both are okay to do. As long as it's clear. Um then you want to explain any input or formatting requirements. This is when you have, you know, how your password needs to look or how your like if you put in a date, how that needs to look, if you have if you are weird like Americans and you put the day in in the middle between the year and the and the month, then you know nobody can help you. But please explain. You want to avoid reset and clear buttons. So these are browser default buttons that you can put into a form. And if you click it, it will just erase what's in the form field. And that was useful before people knew how the web works. Um so people were concerned that if they close the browser window There were no tabs back then. If they closed the browser window, the browser would send their data to the website. So what the clever people from the web did was they put in a button that erased the the form and then you know you knew there was nothing in there. Although the technology to send stuff to the server that has not been like when you don't click on submit did not exist. People were just concerned. They did you know new technology. And so this functionality is still in the standard input button basically that you can use in in HTML and don't don't use it because nowadays people know as long as they don't submit it's not getting submitted unless the The website submits it using JavaScript in the background, but then that happens anyway, and you can't and it doesn't matter if you have a button or not. So So yeah, it's it's so easy to click them and then you know your your form is empty and especially if it's a long form and has a lot of of values It can be really bad for users, especially people with disabilities of course, because they have you know disability tax, everything is harder. So So you have to know more. And then provide highly visible and specific error messages. So you want to use icons, you want to use you know bold fonts, you want to use like big outlines and make sure that that you have you know that it's clear what is an error and what isn't. I think these are very they are very straightforward. I don't think these are rocket science things. But it's a nice list to just rem remember what's important with forms. You know, very basic design considerations. And then there's this even older article from 2014 about placeholders. And this was basically in HTML5. The web introduced placeholders and people went nuts and put placeholders everywhere. And they are bad. And this article goes into details. I don't want to be too go go into too much detail here, but basically Usually you want to have a label and a form field and then you can have placeholder text inside it as like a hint of what to input. Like here must have at least six characters in this password field. Generally a good idea, but what happens when you start typing stuff in inside of a password field? The placeholder text gets removed. This is true for every placeholder text because it's just a placeholder text And that means that you don't you lose sight of this requirement. And now it's an easy requirement to just have six characters But if it's like the format of your date, if it's like the you know, if if it would also say like, oh, and your password needs to have a symbol in it, and these are the example symbols That goes out of the way if you use placeholder text. So in general you want to never use placeholder texts. Um That's just the advice. This is a bad thing. We shouldn't have put that into the web, but we did. So disappearing placeholder text strains users short-term memory. Especially important for people with short term memory loss and stuff like that. Without labels, users cannot check their work before submitting a form. So this is basically if you're using the placeholder instead of a label. Which happens all the time. That means that you have like a a form that has like your name and then your address and then your you know your city and stuff like that And you fill it all out and then you want to review it and you don't know you know that you have put in stuff into the form, but you don't know if you put the right thing into the right form field because it's just like it's the same it all looks the same. So that's bad. Um error messages they say like hey you have you know you forgot to add the symbol to your password and then you need to like look through all the f prefilled fields which one is the password field that might not be as easy Um yeah, and and then there are some things that are not as much as of a problem anymore, like placeholder text that disappears when the cursor is placed into a form field is irritating for users navigating with the keyboard. This used to be a problem when it wasn't in HTML5. So this is not not a problem anymore if you're using HMFI placeholder text. If you're using still like 15 year old JavaScripts to do it. Then I can help you like this is this is your own like responsibility to not do that. Um Fields with stuff in them are less noticeable, so this is like when users are scanning fields for for things to fill out. If there's already a placeholder text in it, they might just it might just not register for them that they need to fill something out. I have this happen to me at least. once a month I want to say, that I'm like opening a form field and I fill out all the things and then I press submit. It's just like, hey, you didn't fill out the form field and I'm like, w wait, it it looked like I filled out everything and then like, oh no, this thing has a placeholder text in it and you just didn't didn't notice it because that happens. Um Users may mistake placeholder for data that was automatically filled in or filled in. This is especially with the autofill that I showed before. can easily happen that like user thinks oh this was pre-filled and then I have seen users being like oh no Why does this form field think my email address is something else? What is broken? Where does this data get from? Can be quite quite bad. And again, 7 is for if you're using like very old technology. You used to need like delete the placeholder text manually because it wasn't placeholder text, it was just text inside of the form field. looking like placeholder text. This is not a problem anymore. So you know you can can ignore that. And you always want to add it like if you need to have placeholder text. It sometimes can be useful for example if you have a date or if you have an example that you know, the then yeah, it can can make some sense, but yeah in general you should just avoid it and have like a description underneath the field. much easier easier to see. Also has higher contrast. The accessibility considerations This did not make it into like the normal considerations for for fears. I I think that's an interesting way to split this up. Um But yeah, light gray color makes it harder to read. and then cognitive and motor impairments. Um have have problems with the above mentioned things. And not all screen readers read placeholder text aloud. I think that's not true anymore. Like they they are much better. than that. Then there's something about floating labels, which are also , you know, bad, as I s s see previous discussion on that so what else do we have? If here the t-shirt, I did add this later and I forgot why I did add this example. Oh yeah, it was because of the color ch choice. Like if you if I go to the color and now it's very hard to see, like when it's focused, it has like a thicker, but more grey color so it's basically from the from the weight of the focus style it's very samey and I don't even know if it comes across through like the screen share. It's probably hard to see now. I'm on the yellow, red, orange, green, and and blue, and it's like really subtle focus, so you want to fix that. But if we go into the developer tools and inspect the page source, we see that This is a mess of a of of code right. So you have this UL road radio group. So it basically says like, oh, this is a radio group, and we'll talk about ARIA stuff, you know, next week a lot. But this is basically making radio buttons out of other elements and using ARIA to like have them announced. as radio buttons and you can see that they have ARIA checked faults here and tab index zero and you basically you have to do all the heavy lifting or the keyboard navigation yourself. So you click through the here and you want to do green and you can check it with the spacebar but you cannot uncheck it Which is fun because they're technically radio buttons and radio buttons cannot be unchecked. But because they are announced as radio buttons, and we know that because they have the role radio here users would expect to be able to use the arrow keys to navigate through them and that's impossible because they're not real radio buttons so you need to use JavaScript to fix that and stuff like that. So Yeah, these manual manually made form elements they are always problematic and this is this you know this is a good example like you could have that just as radio buttons with the color next to it Very easy to do and you can even like remove like we've seen in the previous example you can even like take the radio button and move it out of the of the view or make it like transparent or whatever So so so you still have like real radio buttons and you don't have to use any JavaScript for that. But that's not what they decided to do. Um and we see this type of stuff like All the time, like every like Stuff like that where form elements are getting rebuilt for user interfaces, I will I want to say I see every single audit. Like this is something that's really everywhere and like come on we we have to fix that. Um last topic I think is this error summary. I talked a little bit about like what my favorite way to handle errors is and this basically is it so this is gov. uk which is the UK government's website and basically what they do is like when you have an error message you get this like really big prompt and it says like there is a problem enter your full name And the date of your passport was issued must be in the past. So if you click on enter full name, oh it doesn't actually show it anymore in the conjunction with the Form field. Oh, there it is. Like let's open this in new tab then. So there is a problem, enter your full name, and then it also highlights the field other field set of the of the issue and puts in the error message like basically in line and that way you have it like signaled basically three times where your issue is and if you if you're using like you know zoom which a lot of people do Not what I wanted. Um what did I do? Oh this is a fun mode. I should use that more. Um if you if you're zooming in and you only see like the left side of the screen. with the red line, you know, all the like non-error form fields would just be on the left, but with the with the line on the left, thick line on the left, very easy to scan and see, oh, here is something I need to do and then you can enter your full name. And at the bottom you can just click on the link and it will like select the form field. In this case it drops out my autocomplete because that's you know it's marked up as the full name. But if I was using a keyboard, you know, I can just press return, I go to the field that I need to fill out. Screen reader user, same thing. I would go there directly and it would say like hey this is the full name field please type it out and then you can do that yeah, and that's that's my favorite way to do it here the same thing. when what's your passport issue? Passport issue date must include a year. I also love that they have very specific error messages. I think that's very good. Um and then you can basically in your form Press return, you just jump over all the nonsense you don't want to fill out. Like you don't have to navigate through the day and the month. Just go directly to the date and it gives that to you and you go like I don't know 2023 And then you would submit it, which you know they don't simulate, but that's that's the idea. Same goes here, nothing is selected, so you have to select something and they they will focus on the first checkbox. Assume they are checkboxes. Are there radio buttons? No, it can be citizens of multiple countries. Um cool. Um Yeah, and they basically and then they talk a little bit more about like where the the error field, error message should be like at the top of the main content. and yeah, I think this is a a really great approach to like making sure that like it's really clear that there are errors, where are errors and how to fix them. And I wish more websites would do this because I think it's really, really outstanding stuff. All right, any other questions? because if not, I'm going to close this out. Stop fairing. Going, going, gone. Okay. Next week is our last, like, in person. Well not in person, but like at the same time meeting for this semester. There are still a couple of slots open for you know one-on-one questions and stuff like that. I just want to remind you that you can use those. Open the Excel file and and and put your name in. Um I have no problem chatting with you after these. So so yeah if you if you have specific questions, you know, about the exam or about like anything that you want Feel free to ask them in one-on-one or in these meetings, or as always, put them in Slack. Yeah, and thank you very much for being here and taking the time to like either be here like live or on in the recording and see you all next week thank you very much goodbye see you