Category Archives: Accessibility

Semantic Fieldset Structure for General Use

Recently figured out a great way to build a form with good semantics and just enough hooks to style it just about any way I like. Just jotting it down here for future reference. The ordered list provides structure and order without using tabindex. The nested fieldsets continue the semantics and allow for alternate formatting of the radio and checkbox inputs which are always a pain.

<fieldset>
    <legend></legend>
    <ol>
        <li>
            <label></label>
            <input type="text" />
        </li>
        <li>
            <label></label>
            <input type="text" />
        </li>
        <li>
            <fieldset>
                <legend></legend>
                <ol>
                    <li>
                        <input type="radio" checked="checked" />
                        <label></label>
                    </li>
                    <li>
                        <input type="radio" />
                        <label></label>
                    </li>
                </ol>
            </fieldset>
        </li>    
        <li>
            <fieldset>
                <legend></legend>
                <ol>
                    <li>
                    <input type="checkbox" checked="checked" />
                    <label></label>
                    </li>
                    <li>
                    <input type="checkbox" />
                    <label></label>
                    </li>
                </ol>
            </fieldset>
        </li>
    </ol>
</fieldset>