Making Forms Accessible to All Users


The Presentation inside:

Slide 0

RYAN SCHROEDER ACCESSIBLE FORMS


Slide 1

ACCESSIBLE FORMS BACKGROUND ▸ Overview ▸ Troubles with forms ▸ Why are forms important?


Slide 2

ACCESSIBLE FORMS INTRO TO HTML FORMS ▸ <form> ▸ declares the form for the browser ‣ action ‣ method ▸ <input> ‣ tells the browser what to show


Slide 3

ACCESSIBLE FORMS <INPUT> ▸ type=“ “ ▸ sets the type of input field ▸ name=“ “ ▸ name that gets submitted with the form ▸ value=“ “ ▸ optional (but encouraged) ▸ <p> tag?


Slide 4

ACCESSIBLE FORMS


Slide 5

ACCESSIBLE FORMS


Slide 6

ACCESSIBLE FORMS


Slide 7

ACCESSIBLE FORMS


Slide 8

ACCESSIBLE FORMS GROUPING ▸ <fieldset> ▸ grouping of like objects ▸ <legend> ▸ the title for each different grouping


Slide 9

ACCESSIBLE FORMS


Slide 10

ACCESSIBLE FORMS


Slide 11

ACCESSIBLE FORMS LABELS ▸ <label> or aria-labelledby ▸ for=“” ▸ added to the label tag ▸ id=“” ▸ added to the input tag ▸ “Label for=“ must match id=“”


Slide 12

ACCESSIBLE FORMS


Slide 13

ACCESSIBLE FORMS


Slide 14

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


Slide 15

ACCESSIBLE FORMS


Slide 16

ACCESSIBLE FORMS


Slide 17

ACCESSIBLE FORMS THANK YOU


Slide 18


×

HTML:





Ссылка: