Marking up an accessible form

I’m trying to find the “best” way to mark up a form so it is accessible. The form includes radio buttons, select and checkboxes.

I know an ordered list used to be the way to go although I’m not sure that works well with radio buttons and checkboxes.

I have knocked up a page here. If anyone has any suggestions…

That looks pretty good to me and I would have done something similar.

I never bought into the idea that form elements are a list and in most cases it just complicates the html when it doesn’t need to be. I could see the need perhaps for a list for a load of check or radio boxes but not for normal inputs and selects.

Using a break in forms is one of the valid uses for them but of course you don’t need them when a block element follows.

If, however you are making a more complicated form with error checking and error messages then it becomes useful to wrap every pair (label and input) in a div so that you can add an error class to the div to change the colour of the label and input and perhaps show a hidden message by simply adding one class.

1 Like

Thanks for that Paul. I can now look at styling it. I guess wrapping each field in a div might also help in styling - making a block element that can have padding and margins?

Yes it makes it easier to lay out consistently when you have a wrapper on each pair. Don’t be afraid of extra mark up when it makes life easier and makes things simpler to make work and understand,

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.