Coding Accessible Forms for Beginners - Recorded Live Lecture

Forms are commonly used to provide user interaction on websites and in web applications. For example, login, registering, commenting, and purchasing. Aside from technical considerations, users usually prefer simple and short forms. Forms can be visually and cognitively complex and challenging to use. Accessible forms are easier to use for everyone, including people with disabilities.
In this video, we will explore how to code accessible forms, providing practical examples.
Questions? Comments? Concerns? Drop a comment down below!
Interested in learning more about Accessibility? Check out my top rated Udemy courses for more details!
Web Content Accessibility Guidelines: bit.ly/3kH6qlK
Creating Accessible Websites: bit.ly/35OFkTx
Feeling social? So am I. Connect with me and other accessibility enthusiasts on Facebook: / webaccessibilityeducation
Have some spare change? Buy me a coffee: ko-fi.com/stef
Thank you for your continued support in liking, sharing, and watching my videos. Hit the Subscribe Button for more educational accessibility content just like this :-)
- Stefany
Video Chapters:
0:00 Intro to Accessible Forms
0:44 Heading
2:15 Semantic HTML, Form Element, Labels
5:30 Placeholder
7:36 Labels & Input
8:40 aria-labelledby
10:35 aria-label
12:34 Screen readers & aria
13:55 Too Many Form Fields
16:44 Accessibility & Designers
17:37 Form Spacing
19:53 Star* Tips
22:54 aria-required="true"
27:00 tabindex
30:20 Inaccessible Forms

[@kiri.anderson]

Great tutorial - thank you!

[@cjcgaming7265]

Thank you for creating this video, it's very helpful!

[@Rohit_yadav27]

excellent description thanks

[@GameArts1]

Nice tutorial!

[@jamesdaniels6134]

Excellent tutorial. Thanks for putting this together.

[@WebAccessibility]

You're very welcome!

[@luv789able]

Awesome tutorial. Keep posting more!

[@WebAccessibility]

More to come!

[@yadav_sonu_kumartriloki4495]

You're doing a great job.

[@WebAccessibility]

Thank you!

[@PianoPlayerist]

First, thank you very much for this helpful tutorial, I’d appreciate it if you would announce what you are typing as I am a person with vision impairment myself and I’m trying to learn with accessibility so a lot of time you type in on your keyboard and you’re not seeing what codes are you using and I understand that this is a web site accessibility for beginners so thank you

[@WebAccessibility]

I am sorry about that, I will be more mindful to announce code in the future.

[@goroh83]

First of all, thanks for all your content. It's sad that accessibility doesn't get more attention.
I find your videos very helpful, since WCAG documentation can often be overwhelming...
My two cents regarding required attribute:
I read somewhere(Mozilla Developers Network I think it was) that it's still good to add aria-required="true" even if you arleady have required. THe reason was older browsers that may not recognize 'required' attribute.
And a quick quesiton:
If I want to include optional for each optional field would the following make sense:
First name(optional):
Would a screen reader announce aria-required="false" as 'not required'
Thanks again for all your content. Keep up the good work!

[@WebAccessibility]

Hi Peter,
Thank you very much for the encouragement, indeed, there is very little information on web accessibility, which makes developing accessible websites even more difficult.
About aria-required - most modern screen readers recognize the `required` attribute, the issue is that some of them would announce "required" twice on inputs, if you use both `aria-required` and `required`. Imagine having to fill in a very long form and having "required" repeated twice on each field. As for older browsers, if they are unfamiliar with the attribute, they probably aren't able to parse HTML5 correctly anyways, so the web experience will be quite bad for them, regardless which attribute you use. Additionally, if you use both attributes, you'd have to control `aria-required` which is more work with minimal returns.
However, if you don't want to use HTML5 form validation, which the `required` attribute embeds, then it is strongly recommended you use `aria-required`.
As for the second question, I'd just make the "(optional)" text readable for screen readers, i.e. remove the "aria-hidden". So far, NVDA and Windows Narrator doesn't announce "not required" for `aria-required=false`, so I wouldn't rely on it (I don't think any screen reader does, but I haven't tested)
For optional inputs, I usually just omit the `required` attribute and add an "optional" text like you did above it works just fine.