Practical Accessibility for Web Developers: Form Controls from Udemy

Practical Accessibility for Web Developers: Form Controls

Have you noticed a communication gap between web developers and accessibility testers?Are you frustrated that the accessibility testers can't always tell you what needs to be fixed in order to be compliant?Are you struggling to conform to (or even make sense of) Section 508 or Web Content Accessibility Guidelines (WCAG)?

For me, yes to all three. That's why I created this course.

This course is for web developers that want to create accessible web forms; but don't want to hear someone comb through every criterion of WCAG.

In this course we'll cover the following form elements and talk about how to make sure they are WCAG 2.1/2.2 compliant:

Labels (Traditional and Hidden)
Fieldsets and Groups
Form Instructions
Textboxes
Select Controls
Radio Buttons
Checkboxes
Buttons
Marking Required Fields
and much more including ARIA attributes, screen readers, and pitfalls.

While this course is geared toward web developers - accessibility testers, designers, or anyone else that has a stake or interest in WCAG 2.1/2.2 compliant web forms gain value from it.

If you're considering taking this course, I recommend you have at least beginner-level knowledge of the following:

HTML
CSS
JavaScript/jQuery

What's inside

Learning objectives

How to make accessible web form controls (textboxes, select controls, radio buttons, checkboxes, button, etc.)
Make your web forms compliant with wcag 2.2 standards
Develop an accessibility mindset

Web accessibility in simple terms
Get an overview of wcag 3.0

How to make accessible web form controls (textboxes, select controls, radio buttons, checkboxes, button, etc.)
Make your web forms compliant with wcag 2.2 standards
Develop an accessibility mindset
Web accessibility in simple terms
Get an overview of wcag 3.0

Syllabus

Students will understand the scope and direction of this course.

Course Introduction
Who I am
Who can benefit from this course

Outline to the Introduction Module

This lecture will cover, at a very high level, what this course will cover.

I don't want you to purchase this course if you're looking for something else. So, as a courtesy, this lecture will cover what this course will not be covering.

This lecture will briefly go over some prerequisites for taking this course.

This lecture goes over every module that is included in this course.

This module will include a list of updates I have made to the course as well as those I plan to make.

This lecture will include a list of any updates made to the course.

You should have a deeper understanding of accessibility, the people that test your sites, those that require accommodations, and obstacles to accessibility compliance.,

This is the introduction to the course, which will include a description of what will be covered, what will not be covered, what you need to know first, and we'll end with a course outline.

Obstacles to Compliance

We'll cover the obstacles to accessibility compliance, the attitude you should have for accessibility and accessibility personnel, and the people that we are trying to accommodate.

Attitude About Accessibility Personnel

Accessible for Whom?

Students will understand some of the universal guidelines for all web form controls.

Introduction

Form Guidelines

Resources

Traditional Labels

Text and Style

Position

Explicit Labels

Implicit Labels

Bad Labels

Explicit and Implicit Labels

Hidden Labels

When to Use

Hide with CSS

ARIA Attributes

ARIA Attributes Continued

Using the Title Attribute

Test your knowledge of hidden label use.

Grouping Controls

Fieldsets

Fieldsets Guidelines

Roles

Roles Example

Grouping Controls Quiz

Instructions

Form Instructions

Form Instructions Example

Inline Instructions

Input Controls

Universal Guidelines

Pitfalls

Select the best answer for each question.

Textboxes

Implementing Guidelines

Inline Validation

Placeholders

Select Controls

Dropdowns

Listboxes

Multiple Select Listboxes

Datalists

Radio Buttons and Checkboxes

Radio Buttons

Checkboxes

Custom Controls

Buttons

Traditional Buttons

Pseudo-buttons

Marking Required Fields

Overall Guidelines

By Symbol

By Image

By Label

Practical Application

Description of the Web Form for the Visually Impaired

The Basics

Labels

Grouping

Instructions - Required Fields

Instructions - Help Text

Color Contrast

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Provides an overview of essential accessibility standards in WCAG 2.1

Covers various form controls, such as textboxes, select controls, radio buttons, checkboxes, and buttons, to ensure accessibility

Provides guidance on practical implementation scenarios and solutions for accessibility

Suitable for developers with beginner-level knowledge of HTML, CSS, and JavaScript/jQuery

Focuses on Section 508 and Web Content Accessibility Guidelines (WCAG) standards for web forms

Provides tips on avoiding common accessibility pitfalls and making forms accessible for screen readers

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Practical Accessibility for Web Developers: Form Controls with these activities:

Organize and review course notes and materials

Show steps

Enhance your retention by organizing and reviewing course materials regularly.

Show steps

Compile lecture notes, code samples, and other relevant materials.
Create a system for organizing and referencing the materials.
Review the materials regularly to reinforce your understanding.

Review basic HTML and CSS

Show steps

Review key HTML and CSS fundamentals.

Browse courses on HTML

Show steps

Re-familiarize yourself with the structure of an HTML document
Review basic HTML elements and attributes.
Implement basic CSS styles to format HTML elements.

Follow tutorials on building accessible forms

Show steps

Reinforce your understanding by following guided tutorials.

Show steps

Find tutorials on building accessible forms using HTML and ARIA attributes.
Follow the steps in the tutorial to create an accessible form.
Review the code and identify the techniques used to ensure accessibility.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Participate in study groups or online communities

Show steps

Engage with peers to enhance your understanding and motivation.

Show steps

Join study groups or online communities focused on web accessibility.
Discuss course material with peers, share insights, and learn from different perspectives.
Collaborate on projects or assignments to apply your knowledge.

Practice implementing different types of accessible form elements

Show steps

Solidify your skills by practicing different form element implementations.

Show steps

Create multiple text input fields with valid labels and ARIA attributes.
Implement accessible radio buttons and checkboxes.
Create a select control with accessible options.
Practice making your forms responsive for different screen sizes.

Build a small accessible web form

Show steps

Put your knowledge into practice by creating an accessible form.

Show steps

Define the purpose and requirements of your form.
Design the layout and structure of your form.
Implement accessible form elements using the techniques you've learned.
Test your form using screen readers and other accessibility tools.

Participate in online forums and provide guidance to others

Show steps

Share your knowledge and reinforce your understanding by mentoring others.

Show steps

Join online forums related to web accessibility.
Answer questions and provide guidance to other developers on implementing accessible forms.
Engage in discussions and learn from the experiences of others.

Career center

Learners who complete Practical Accessibility for Web Developers: Form Controls will develop knowledge and skills that may be useful to these careers:

UX Designer

UX Designers focus on the user experience and journey. They strive to ensure that users find websites easy and enjoyable to navigate. This course is a good fit for UX Designers who are interested in specializing in accessibility design. Accessibility features can greatly impact the overall user experience, and this course provides knowledge on how to implement those features in a compliant, optimized way.

See salaries and explore the career path for UX Designer

Accessibility Auditor

Accessibility Auditors ensure websites are in compliance with accessibility standards and help make recommendations for remediation when standards are not met. This course is directly relevant to Accessibility Auditors as it covers WCAG 2.2/2.3 standards for accessible web forms, which are aspects that an Accessibility Auditor would be expected to know.

See salaries and explore the career path for Accessibility Auditor

Web Developer

Web Developers specialize in the coding aspects of websites, and are the people who make the websites functional and accessible. They ensure the proper execution of dynamic layouts, including seamless navigation, interactive elements, and accessibility features. This course in particular is a good fit for Web Developers who want to specifically improve their knowledge of accessibility features and WCAG 2.2 standards. This could lead to roles with higher pay and responsibility, and could open new doors for those working in related fields.

See salaries and explore the career path for Web Developer

Front-End Developer

Front-End Developers focus on the aesthetics and functionality of a website. They write code that ensures the website visually looks and functions as intended on different web browsers and devices. This course in particular would be useful for Front-End Developers who want to ensure that the websites they work on are accessible to everyone.

See salaries and explore the career path for Front-End Developer

Software Engineer

Software Engineers develop, maintain, and troubleshoot software applications. This course provides advanced knowledge of web accessibility features and standards, which can be applied to the development and maintenance of software applications.

See salaries and explore the career path for Software Engineer

Web Analyst

Web Analysts monitor and analyze website traffic to help improve the user experience. They often make recommendations for improving accessibility features, and this course will provide insights into the importance and implementation of these features.

See salaries and explore the career path for Web Analyst

Product Manager

Product Managers ensure that a product meets customer needs and is successful in the market. This course may be useful for Product Managers who are looking to develop accessible products.

See salaries and explore the career path for Product Manager

Technical Writer

Technical Writers create instruction manuals, tutorials, and other documentation for software and hardware products. This course may be helpful for Technical Writers who are working on documentation for web-based products or services.

See salaries and explore the career path for Technical Writer

QA Tester

QA Testers test software applications to ensure they meet quality standards. This course may be useful for QA Testers who are responsible for testing the accessibility of software applications.

See salaries and explore the career path for QA Tester

Information Architect

Information Architects create the organizational structure of websites and other information systems. This course may be helpful for Information Architects who are interested in creating accessible information systems.

See salaries and explore the career path for Information Architect

Project Manager

Project Managers plan and execute projects. This course may be useful for Project Managers who are responsible for managing projects that involve the development of accessible websites or other digital products.

See salaries and explore the career path for Project Manager

Business Analyst

Business Analysts analyze business needs and develop solutions to meet those needs. This course may be useful for Business Analysts who are working on projects that involve the development of accessible websites or other digital products.

See salaries and explore the career path for Business Analyst

Content Strategist

Content Strategists develop and manage the content of websites and other digital products. This course may be useful for Content Strategists who are interested in creating accessible content.

See salaries and explore the career path for Content Strategist

Sales Manager

Sales Managers lead and manage sales teams. This course may be useful for Sales Managers who are interested in selling accessible products or services.

See salaries and explore the career path for Sales Manager

Marketing Manager

Marketing Managers develop and execute marketing campaigns. This course may be useful for Marketing Managers who are interested in creating accessible marketing materials.

See salaries and explore the career path for Marketing Manager