Build Accessible Online Forms

Notice: This is a discussion thread for comments about the SitePoint article, Build Accessible Online Forms.


Great article, was really hoping to see some examples of code to adhere to.

Any good links to examples of good form formulas to follow? (please excuse the alliteration.)

What do youo mean by formulas?

Check: http://webaim.org/techniques/forms/

You’ll mostly get good form advice by typing in “accessible forms html” in a search engine, though not always.

Lloyd’s article is mostly still good (ok no more cursor: hand css…):

-Use label tags
-use their “for” attribute, which must match the id of the input they are labelling
-use fieldsets to group related form fields (this requires a legend in HTML4)

Some screen readers have a “Forms Mode” they go into when they enter a form. This means only form controls are read out. Paragraphs and other text not inside a form control may be skipped. So a general good rule of thumb is, if you have to explain something, do it outside (and before) the form.

If that’s unavoidable there are ARIA attributes. These are slowly getting supported by browsers and AT vendors.

Sites like WebAIM, UXMatters and UXBooth regularly publish articles about things like, making labels line up for dyslexics, making larger clickable areas, making sure labels and inputs are also visually clearly related to each other, and making sure your submit button actually says something more useful than "Submit’ : )

I know someone who republishes a regular list of accessible (in general, not just forms) articles which tend to be small, easy reads: