making forms accessible to all users

ACCESSIBLE FORMSRYAN SCHROEDER

ACCESSIBLE FORMS

BACKGROUND

▸ Overview

▸ Troubles with forms

▸ Why are forms important?

ACCESSIBLE FORMS

INTRO TO HTML FORMS

▸ <form>

▸ declares the form for the browser

‣ action

‣ method

▸ <input>

‣ tells the browser what to show

ACCESSIBLE FORMS

<INPUT>

▸ type=“ “

▸ sets the type of input field

▸ name=“ “

▸ name that gets submitted with the form

▸ value=“ “

▸ optional (but encouraged)

▸ <p> tag?

ACCESSIBLE FORMS

ACCESSIBLE FORMS

ACCESSIBLE FORMS

ACCESSIBLE FORMS

ACCESSIBLE FORMS

GROUPING

▸ <fieldset>

▸ grouping of like objects

▸ <legend>

▸ the title for each different grouping

ACCESSIBLE FORMS

ACCESSIBLE FORMS

ACCESSIBLE FORMS

LABELS

▸ <label> or aria-labelledby

▸ for=“”

▸ added to the label tag

▸ id=“”

▸ added to the input tag

▸ “Label for=“ must match id=“”

ACCESSIBLE FORMS

ACCESSIBLE FORMS

ACCESSIBLE FORMS

REQUIRED ELEMENTS

▸ add “(required)”

▸ this is to be added in the label

▸ “required”

▸ to be added in the input tag

▸ aria-required=“true”

▸ to be added in the input tag

ACCESSIBLE FORMS

ACCESSIBLE FORMS

ACCESSIBLE FORMS

THANK YOU