How to use ARIA in forms

Transcript

Hello, everyone! Um, welcome again to the WordPress Accessibility Day 2020.

My name is Roberto Remedios and I live in San Jose, Costa Rica. I’m a web developer and also user experience, and user interface designer, uh I’m a accessibility advocate, organizer of accessibility here in Costa Rica. Our next speaker will be Rian Rietveld, and she will be talking about the, how to use the ARIA standard in forms. Um, Rian is a web accessibility specialist in a full-service workers agency, Level Level and a trainer at the A11y Collective, so thank you very much, thank you very much.

Rian: Thank you for having me! Yeah, okay, I have a pre-recorded talk. I will explain why and I will share my screen now.

Okay, here we go.

Roberto: Sorry, but the video is muted.

Sorry, Rian, can you check the volume of the video?

I think you need to mute yourself.

Rian: What do you want me to do?

Try to, try to play the video now?

[Video] 24 hours event of WordPress and accessibility. This talk is pre-recorded, because it contains…

Close, well, because we developers learn by looking at example code, and not by reading the specs. I know. So, demos it is. First, a bit about myself. And my name is Rian Rietveld. I’m a web accessibility expert for Level Level. That’s a full service WordPress agency in Rotterdam, the Netherlands.

[unintelligible] That’s a platform of online accessibility courses. What is ARIA? The abbreviation means “accessible rich internet applications” – you can forget that right away, but what you need to know is ARIA are attributes, HTML5 attributes, that give extra information and feedback to assistive technology, like, for example, screen readers.

In forms you can use it for naming form controls, describing extra information, and for giving feedback on dynamic changes. I will give you examples of that in the demos later. Before you start, you need to know: the first rule of ARIA is don’t use ARIA. There are five rules – go and look them up when you have time – but the first rule is the most important. Don’t use ARIA to fix meaningless and incorrect HTML5, use the already available elements, because then the browser and the screen reader knows how to operate and understand them. ARIA is about feedback not about fixing. If you want to join me or look up the code later, the example code is on lvl.li/aria-in-forms.

These examples contain very simplified forms, and before you start nagging, no data is submitted; no security checks; no translation; I just want to show you what happens in the front end, so you get the ARIA.

I will do the demos in Safari. It’s the browser works best together with the VoiceOver screen reader. First, I’ll talk you through how to properly name form controls, and we’re going to look at the accessibility tree, to show how that works. And then we’re going to look at two different forms and add descriptions and feedback. For all the people expecting me to show how to build new web components from scratch with ARIA, I’ll share at the end of this talk, my opinion about going fancy in forms. Naming and describing form controls.

Let’s do that.

Before you use ARIA, you have to have the basics in order. The basics – the basic HTML5 – must be correct. And then it’s super important that you give your form control a name – an accessible name. Okay. I will show you how that works for a screen reader. Here we have a label, “your question,” and a textarea. If you can see, you can see the label is put above the form, the form control – perfectly understandable.

But the label is not connected to the form control, so a screen reader doesn’t know what to announce here. You have to connect the label to the form control, and you can do that with a label for is pointing to the id of the form control. Here, the textarea has an id of id-textarea, so the label has a for with id-textarea – now, they are connected. I will start the screen reader and let you hear how important that is. Okay, let’s start VoiceOver.

VoiceOver: VoiceOver on. Safari. Naming and describing form controls window, toolbar.

Rian: Okay. When a screen reader enters a form, they jump into “form mode.” That gives the user the opportunity to type instead of operating the screen reader. and then you can jump with tab key from focusable element to focusable element. So, I’ll tab now in the first form control.

VoiceOver: Leaving toolbar. Entering Naming and Describing form controls web content. Edit text, blank.

Rian: About the form field textarea, it announces “edit text, blank.”

So, it is an edit text field. “Blank” is “I have no name.” If I tab to the next one, that has a for and id connection:

VoiceOver: your question edit text.

Rian: Then it says “your question, edit text.” And then a screen reader user knows what to fill out. So without a connection VoiceOver: “edit text. blank.” With a connection? VoiceOver: “Your question, edit text.”

Rian: Okay. That must be in order. Uh, you have to have a name for the form control. You can use a placeholder – is a placeholder replacement for a label? No, it isn’t, but screen readers get smarter and smarter. In this case, I have a textarea with a placeholder, “your question.” Let’s listen how that sounds.

VoiceOver: “Your question, edit text, blank. Your question.”

Rian: So the screen reader announces “your question,” the placeholder, and then tries to figure out what’s the name. Cannot come up with the name, so it guesses, okay, the placeholder must be the name. Not all screen readers do this, so don’t depend on this always working.

There’s also another issue with this. The placeholder text disappears when you start typing, or when the field is filled out with an autocomplete. People may forget what to fill out, or need to check if the right value is added to the right fields with an autocomplete. Always add a visual label to prevent errors.

So the next thing you can do with ARIA, is give a form control a name with an aria-label. In this case, textarea, aria-label “your question.” If I tab into this:

VoiceOver: Your question, edit text.

Rian: It’s announced perfectly well, but there’s no visual label.

You can have a placeholder and an aria-label:

VoiceOver: Your question, edit text, describe your question. Rian: The placeholder is announced in a different voice, “describe your question” and aria-label is “your question,” but still you have no visual label.

You can use an aria-labelledby. Instead of the element label, you can use, for example, a div – yay, a div.

But you have to connect both together, and that you do with aria-labelledby. You give the div an id and in the form control textarea you say labeled by referring to that id.

How is that announced?

VoiceOver: Your question, edit text.

Rian: Perfectly okay. I have no idea why you should use a div instead of a label, but maybe you have some obscure use case for this.

Next one. aria-describedby, and this is super useful. As I told you, you jump into form mode

and then, you only get announced what is connected to the form control. So in this case, if you have your new password, and you have an input for your password, and below that, the rules “please use a password of minimal eight characters,” that also must be connected to the input field. Otherwise, the screen reader doesn’t announce it, because the screen reader doesn’t know it’s connected. And that you do with aria-describedby.

The paragraph with extra information, you give that an id, and in the input field, the form control, you say aria-describedby referring to that id.

VoiceOver: Your new password, secure edit text with autofill menu.

Please use a password of minimal 8 characters.

Rian: You notice there is a time lapse between announcing the label and announcing the aria-describedby information, that’s a safari issues. [Unintelligible]

…which will solve it, soon but now you first hear the label and then you hear the added paragraph so you get all the information you need with a form control. Next topic: icons. How do you announce an icon? Which of course the screen reader cannot know what’s in an icon.

Well, in this form you have a label with a search, an input field, and a button. And the button has a class that this font also classes, displays an icon of a search and loop. If you can see this it’s perfectly okay, but how does this announce?

VoiceOver: Search, edit text.

Rian: If I give the button focus I hear nothing. So I have to give the button a name.

And that you can do with aria-label. aria-label="Submit search." you put that on the button all the content inside the button is omitted, only the aria-label is announced. Now, let’s see what it does.

VoiceOver: Search, edit text.

Rian: I still hear nothing – that’s weird! I put an aria-label on it. I will mute the screen reader now.

And now, I’m going to inspect the code.

And then, I see button class font-awesome, aria-label “submit search” and then font awesome added “aria-hidden”=true to it. That’s because font awesome thinks, “Okay, if it’s an icon, better hide it from screen readers, because they cannot pronounce it.” But if you put a font awesome icon directly on a focusable element, on an element that really makes sense, and you put an aria-hidden through that, the screen reader doesn’t know what it is. It omits it, think, “Okay, it doesn’t exist.”

What’s the workaround for that?

You move the class of the font awesome class out of the button. Of, actually, you move it inside the button, in a span and you give the class to a span. So the button has the aria-label only, and the span with the font awesome class with the loop icon is inside, and it’s in the span.

That way the label aria-label is announced. Now, let’s see what…

I’ll close this. So let’s move from the start.

VoiceOver: Search, edit text.

Rian: You hear nothing.

VoiceOver: Search, edit text.

Rian: Scroll up a bit, you hear nothing, and then, with the span inside the button:

VoiceOver: Search, edit text, submit search button.

Rian: Then the button is announced. Okay. Keep this in mind: not every, this aria-hidden is generated by font awesome so, don’t put it on an element that needs to be announced, that needs to have a label, because it will be hidden.

You can actually check what the accessible name is for a form control by checking the accessibility tree. Each browser generates an accessibility tree, and screen readers, or assistive technology, actually read that accessibility tree to know what to announce and how to operate a form control. I will show you in Chrome and in Firefox. This is the one in Chrome.

I will inspect.

And here, I chose the area – textarea without connected label.

And.. with a sec.. I can check the tab “accessibility” and here’s the accessibility tree, and then you can check out the name. So, when there’s no connection between the textarea and the label, it has no name. and it cannot find any name, in, for example, the title, the placeholder, aria-label, [unintelligible].

So this form control has no accessible name. If we check the next one, with the for/id construction, it has name “your question” and the name comes from the label, and the label is “your question.”

Next one: placeholder.

Name is “your question,” and it gets it from the placeholder. This is a screen reader workaround.

Aria-label.

Name is “your question” and it gets it from the aria-label. So this is a super easy way to actually see where the name comes from, and if it’s actually specified.

This is a placeholder and an aria-label, the name “your question.” It gets a name from the aria-label because that’s override the placeholder, overriding the placeholder.

This is work in Firefox, as seeing. Firefox has an inspector tab, accessibility properties.

And with Firefox you also get error warnings: form elements must be labeled. You didn’t get a label because it has no name.

Let’s pick properties for the next one. Name is “your question.” If you have for/id, so inspect that. Look if you have problems, look what the accessible name is. If you’re not sure did I label this. Well, as you noticed, naming form controls is essential for understanding how to fill out the form when you depend on your ears and your fingers. Check this in your work or the plugin you use. Well, let’s do some live coding and screen reader testing – the reason I pre-recorded this talk. This is a simple subscribe form to our newsletter form, with an indication, please fill out all the fields and agree to the privacy policy. Then name, input field, with the extra description, “give your first and last name,” then an email, and then a checkbox “I agree with the privacy policy,” and below that, a link to the privacy policies and the subscribe button. Let me go through this with a screen reader. Let’s start up VoiceOver.

VoiceOver: VoiceOver on. Safari. Let’s build a form. Window. Toolbar.

Rian: And now I tab through the form.

VoiceOver: Name, required, edit text, main. Email, required, edit text. I agree with the privacy policy, required, unchecked checkbox. Visited link, read our privacy policy. Subscribe button.

Rian: And now I submit the form.

And you hear nothing. If you can see, you see a big announcement – “There are errors in your form,” and below that there are links to the input fields with the error, with the description of what the error is. If I tab further,

VoiceOver: Visited link, “back to index” content information.

Rian: Then I go to, then the focus is on the next link.

So for a screen reader user it’s so hard to understand what’s happening. I hear nothing. This is with an ajax submit, so it’s “subscribe” submits on an onClick event. So let’s fix this. I use as my code editor PhpStorm,

and let’s look at the form.

Above the form, so it will be announced, em, there is the title “subscribe to our newslette”r and the information what to fill out in the form, and there’s a placeholder for the notifications. How do you set it up? It’s up to you and your framework, and your way of working. This is just a demo. Just, uh, right. So we need to announce the descriptions with the input field.

So we have to give the descriptions

an id. It’ll be connected to the input field, aria-describedby.

Description, “give your first and last name” will now be announced together with the input. But I also see a placeholder for the error messages. Will be very useful, as the error messages are also announced together with the input field. So, I can use in the aria-describedby more than one id, and you can put the error first, and then the description after that. I do the same with the email. There is no description, so I only have to have an aria-describedby to the error message.

That is email error.

Right. The checkbox for the terms has a description and an error message, so they need both input field.

This is the terms error.

And I have to get some description terms, and I have to give the terms an id.

Right. If this is okay, everything will be announced together now. Let’s see how that works.

VoiceOver: VoiceOver on. Safari. Let’s build a form. Window. Toolbar. Entering Let’s build a form web content. Name, edit text, main.

Rian: Wait for it…

VoiceOver: Give your first and last name.

Rian: Right.

VoiceOver: Email, required, edit text. I agree with the privacy policy, required, unchecked, checkbox.

Rian: That doesn’t work.

VoiceOver: VoiceOver off.

Rian: Let’s see what’s wrong.

Terms error, description terms, I forgot…

Welcome in a world of code editing. Repeater again,

VoiceOver: VoiceOver on. Safari. Let’s build a form. Window Toolbar.

Rian: That’s why testing is so important.

VoiceOver: Leaving toolbar, entering Let’s build a form web content. Name, required, edit text, main. Email, required, edit text. I agree with the privacy policy, required, unchecked, checkbox.

Rian: It’s description terms, description terms. That’s why it’s so important too text.

VoiceOver: VoiceOver on. Safari. Let’s build a form window. Leaving toolbar. Entering let’s build a form web content. Name, required, edit text, main,

give your first and last name. Email, required, edit text. I agree with the privacy policy, required, unchecked checkbox,

Read our privacy policy, visited link, read our privacy policy. Subscribe, button.

Rian: Okay. Let’s see if the error messages are announced together within, with, together with the input field.

VoiceOver: Name, required edit text.

Your name is missing. Give your first and last name. Email, required, edit text.

Your email address is missing. I agree with the privacy policy required, unchecked, checkbox.

Please agree to the terms. Read our privacy policy, visited link, read our privacy policy.

Rian: So now, everything is announced in a logical order. What do we do about the error messages? Let’s dive in the code. Let’s try aria-live.

I’ll put an aria-life on the notification.

Live is… let’s make it polite. For aria-live, the element must already be in the DOM, in the generated code. Because putting aria-live on an element makes the screen reader listen to changes inside that element. If the element is new to the DOM, then the screen reader cannot listen to it, so it needs to be present before you add an aria-live on it. You have aria-live is polite – then the screen reader waits until all interaction is done, and aria-live is assertive – then it announces right away.

VoiceOver: VoiceOver on. Safari. Let’s build a form, window, toolbar, leaving toolbar, an…email, with, one, I agree with the, privacy, visited link, subscribe, button.

Rian: Let’s go.

VoiceOver: There are errors in your form . Bullet. Please enter your name. Bullet. Please enter your email address. Bullet. Please agree to the terms.

Rian: Okay. And if I tab now:

VoiceOver: Visited link, back to index, content information.

Rian: There is a disadvantage on that aria-live. It reads everything inside. If you have like 20 errors. that’s a lot to listen to, and maybe someone forgets it. And we also have to fix the focus error – the focus must be on the announcement, and people can tab through the links, and go to the form, and fix them. So, truth…

Roberto: Rian, I think the video stop. Can you check the video please?

Hi, everyone. Um, we, we got a little technical issue with the presentation. We’re working on getting uh Rian video again, um, please, if you have any question use the YouTube chat, and we will be asking the questions at the end of the talk.

Exact same for the question, Ahmed. I mean, it have been awesome. Um, I really loved the first talk, about, uh that – well, Ahmed on the chat asked about my experience at, I think Rian is back.

Rian: So, okay should I, uh where did it go wrong? From where?

Roberto: Do you remember, it our first online event so it always something happened. Can you play the video again at the point that you…

Rian: Yeah, and the point was when it stopped, um ,so i start with, um

Roberto: I think it was minute 25, 27.

Rian: 25?

Um, okay. I’ll run it from here. I’ll share my screen. Sorry about this.

Roberto: Go ahead. No problem.

Rian: I’ll put an aria-live on the notification.

Roberto: Can you please share your screen?

Rian: Live is… let’s make it polite. For aria-live, the element must already be in the DOM, in the generated code. Because putting aria-live on an element makes the screen reader listen to changes inside that element. If the element is new to the DOM, then the screen reader cannot listen to it, so it needs to be present before you add an aria-live on it. You have aria-live is polite – then the screen reader waits until all interaction is done, and aria-live is assertive – then it announces right away.

VoiceOver: VoiceOver on. Safari. Let’s build a form, window, toolbar, leaving toolbar, an…email, with, one, I agree with the, privacy, visited link, subscribe, button.

Rian: Let’s go.

VoiceOver: There are errors in your form . Bullet. Please enter your name. Bullet. Please enter your email address. Bullet. Please agree to the terms.

Rian: Okay. And if I tab now:

VoiceOver: Visited link, back to index, content information.

Rian: There is a disadvantage on that aria-live. It reads everything inside. If you have like 20 errors. that’s a lot to listen to, and maybe someone forgets it. And we also have to fix the focus error – the focus must be on the announcement, and people can tab through the links, and go to the form, and fix them. So, two things we need to address. First, we address the focus issue.

I use jQuery, because I’m lazy,

But any framework, any JavaScript will do. It’s up to your own preference. I have a document, getElementBy, notifications, focus. But in safari that doesn’t work. You need to add something extra to your HTML5. And it is…[unintelligible]

…and focus it by giving it tabindex of minus one. Now, remove the aria-live, because that was too much to announce. But what do you do then with notification? [unintelligible]

Because you move the focus, people can reach from there. Well, with aria-live,

use

role=”alert.” It will be announced.

So remove the focus on the h3, “thank you for subscribing” or “there are errors in your form.” Let me add a role as “alert.”

Let’s see what happens.

VoiceOver: VoiceOver on, Safari, Let’s build a form, window, toolbar.

Rian: I’ll run through the form.

VoiceOver: Reading, toolbar, email, I agree with the, visited, subscribe, button, there are errors in your form.

Rian: Now the screen reader, it gives a ping – there’s an alert! And there are errors in your form. And when I start tabbing:

VoiceOver: Visited link. Please enter your name. List, three items.

Rian: Because this is an unordered list, it announces how many items there are in the list, so you immediately also know how many errors there are. Please enter your name, if I enter that:

VoiceOver: Name, required, edit text, main.

Rian: It jumps to the first field.

VoiceOver: Name, your name is missing, give your first and last name, Rian: Okay, add that,

VoiceOver: Name, edit text, typing, R I A N.

Rian:, Yeah, sorry.

VoiceOver: Your name is missing. Give your first and last name, email, required edit text, your email is h u p, hup @ h u p, hup, n l. I agree with the privacy policy, required, unchecked checkbox, I agree with the privacy policy, checkbox.

Rian: Okay.

VoiceOver: Visited link, read our privacy policy, subscribe, button.

Rian: Okay, what happens now. VoiceOver: Thank you for subscribing!

Rian: Now the screen reader gets music as feedback! This can do with some styling, I know, but this is the principle, how it works. In WordPress, we have a very elegant way to add aria-live to your code. They are not depending on elements being in the DOM or not. It’s a JavaScript method called wp dot a one one y dot speak, and it’s included into WordPress core. There is documentation on how to do it on the accessibility handbook of WordPress. That’s on make.wordpress.org slash accessibility slash handbook. And there, with the development best practices, there’s a chapter about wp.a11y.speak. Let’s look at another kind of dynamic change in form. This is a very simplified form for ordering a t-shirt. Now on sale, get one for only 10 euros. You can select the size and an amount, the total price is calculated, and there’s a submit button with order. Right. How does, how does that sound?

VoiceOver: VoiceOver on. Safari, Let’s calculate, window, toolbar.

Rian: Okay, I’ll jump to the size.

VoiceOver: lessons test talk, medium, size, pop up button, main.

Rian: Okay. Select a large.

VoiceOver: Three items, tick, medium, closing menu, large, size, pop-up, button.

Rian: Okay, I’ll select an amount.

VoiceOver: One, amount, pop-up, button, menu, three, two.

Rian: And then, if you can see, you see total price is 30 euros.

VoiceOver: Order, button.

Rian: How can you solve this for screen reader? There are several ways, let me talk you through them. Okay. In this case, the total price is added into a paragraph. So what we can do is add aria-live, then if it changes, it will be announced.

Let’s choose “polite.”

What happens.

VoiceOver: VoiceOver on, Safari, Let’s calculate, window, toolbar.

Rian: Okay, I’ll jump quickly to “amount.”

VoiceOver: Leaving toolbar, entering, one amount, pop-up button.

Rian: I’ll select two.

VoiceOver: Menu, three items, tick. One, two, closing menu, two, amount, pop up button, Twenty.

Rian: It announces twenty. Why is that?

VoiceOver: VoiceOver off.

Rian: If you look at aria-live=polite, it’s listening in this container: Total price, Euro ,and this span with the amount. And it only announces the changes within, and the only thing that changes is the number, so we have to tell to announce everything inside the container. And that’s with aria-atomic.

is true.

Then everything is announced. Let’s see what happens.

VoiceOver: VoiceOver on, safari, Let’s calculate, window, leaving toolbar, one, amount, pop-up button.

Rian: I’ll change the amount.

VoiceOver: Menu, three item, two, three, closing menu, three, amount, pop-up button, Total price Euros 30.

Rian: Okay, this makes sense. So everything is announced, but it’s not really attached to anything in the form, so if, when, someone changes things, and goes over the form, the information is not repeated – only on when the change happens. Now we saw several ways to solve this. You can add an aria-describedby to the amount, pointing to the total price, so, if someone focuses the amount, also the total price is announced.

Um, think about this, What will be the best way for your use case? Is it the best way to edit to your order button? It’s an aria-label? Personally, I think in this case you don’t need ARIA at all. What about making it a read-only field. Solving it with HTML.

A label for total with the total price.

And then you have an input field. The id is total, and it’s read only, and has an initial value of 10. Right. In your use case, or form, this may be far more complex, but I just want to show you the basics. So you can think about if this way may be better for you. How does this work? There’s a field added, “total price” and initial value of 10. Let’s listen to the screen reader.

VoiceOver: VoiceOver on, Safari, Let’s calculate, window, toolbar, leaving toolbar, entering, Let’s calculate web content, medium, size, pop up button, main, one, amount, pop-up button, menu, three it…, two, closing menu, two, amount, pop-up button, twenty, contents selected, total price, text, order, button.

Rian: So now the price is always announced even if it’s the initial price. In a normal HTML5 form field. Think about this. I hope these demos were useful for you to get a better idea how aria works, and how you can use it, and test for it. Please try this at home. And now iId like to answer a question I get a lot from developers and designers: Can I use “select2.” The short answer is no. And I will explain to you why. This is the demo page of select2. It’s on select2.org slash getting dash started slash basic dash usage. Here you have first a normal select, and after that what you can turn it into.

Now this normal select doesn’t have a label. I will tell you this because we’re going to read through this with the screen reader. So this should have a label like “select a state” but it doesn’t. Okay. And then there’s an example code, an example with a search box, and you can select a state, with your mouse if you want to, and if you search for new, you get all the states with the word,

I will start with the screen reader.

[VoiceOver[ VoiceOver on. Safari, Basic usage vertical lines Select2: the jquery replacement for select boxes, window, toolbar.

Rian: I will tab to the first select box.

VoiceOver: Leaving toolbar, link, getting started, link, anchor link for: single select boxes.

Rian: Okay, here it goes.

VoiceOver: Alaska, pop-up button.

Rian: Okay, it’s a pop-up button, it’s called Alaska, there’s no label, whatever. If I use the arrow key, I can go through the options.

VoiceOver: Menu 55 items, tick, Alaska, Hawaii, Pacific Time Zone, California, Nevada, Oregon, Washington

Rian: Sometimes a little

VoiceOver: Arizona

Rian:, sometimes Safari a bit of hesitates,

VoiceOver: Arizona, Idaho.

Rian: Okay.

If Safari were to work properly then everything is announced. Also the date, uh, section headings. This is regular HTML5. Okay, I’ll select Idaho.

VoiceOver: Closing menu, Idaho, pop up button.

Rian: Now I go to the example.

VoiceOver: Alaska. Alaska, menu pop-up, combo box.

Rian: Okay. Normally, I open this with the arrow down.

VoiceOver: left arrow select class equals js example basic single

Rian: No, that doesn’t work. It jumps out of it. So I move up again.

VoiceOver: Idaho, pop up, Alaska, Alaska, menu pop up, menu pop up, combo box.

Rian: I press enter.

VoiceOver: Search text field blank.

Rian: Okay. The search text field without label. Um, okay, I will want to see if I can look up “new” again.

VoiceOver: n e w. New.

Rian: Gives no feedback on what’s happening below. So if I want to select something, maybe I’ll arrow down and I can select it.

I can select it, but I hear nothing.

And there’s, now I have no idea to get out of this, then to select something, okay, return.

VoiceOver: New Mexico, New Mexico, menu pop-up, menu pop-up, combo box.

Rian: So this doesn’t work well. You get not the proper feedback for a screen reader about what you search for, how to select it, what the select options are. I hope you get the point. If you create something like this, you have to test it with all kinds of different devices. User test. Because select2 doesn’t work for everyone, and you want people to contact you, order with you, subscribe to your newsletter. Make that as easy as possible. Make that as predictable as possible. I want to quote Hayden Pickering: “People don’t want to be delighted. They want to do what they came for, and then get on with their lives.” That doesn’t mean that your form needs to be ugly. It can be pretty, and also usable for as many people as possible, and that’s the extra challenge. Discuss this with your designer.

I’ll end my ranting here.

If you want to learn more about how to create and code accessible web projects, I’d highly recommend you taking a course at the a11y collective at a11y-collective.com. My colleagues and I created courses for everyone involved in the web project. Business owners, stakeholders, project managers, content managers, designers, and, of course, developers. The course about accessible code will launch very soon, but to start there’s also a basic course, where you can get a broad overview of what accessibility actually is. If you’re not sure, take the free tryout course to get an impression of what the courses are like. I hope you got an idea on how ARIA can make a form understandable and give proper feedback. If you depend on a plugin for your forms, check if the plugin uses ARIA to describe and give feedback. If labels are properly connected to the form controls, now you know where to look out for. Research this before you implement a plugin on your production website. You want everyone to be able to understand your form, of course.

Well, I hope I gave you a lot of homework, and I hope you got a better understanding on how people use the web and your forms in a different way. Thank you for listening, please be safe.

Roberto: Awesome! Um, thank you, very much Rian, for the talk.

Rian: Sorry, for taking so much time!

Roberto: But don’t, don’t worry about it. I mean, thank you very, very much. We don’t have time for questions, but everybody, the questions are going to be on the website, and you can answer the, the questions over there. Thank you very much for your time, and I mean, that’s the, the last talk that I will be hosting. Um, the, the next hosting will be Ahmed. Don’t forget to attend the next talk: Your CMS is an Accessible Assitant, uh by,

Rian: Yeah, I really would recommend your next talk, that will be an awesome talk, yeah.

Roberto: Okay, it will be eight utc time, and thank you very much, Have a good day – see you in a bit.

Rian: Bye.