Even in technically fully valid forms, there can be a lot messed up semantically, making it hardly accessible in many ways. Be it missing or improperly implemented elements – here we show the most common problems and explain them. Most accessibility problems regarding form are caused due to bad semantics. So if you haven’t done…
Admittedly, browsers have a quite peculiar opinion on how to visually style <fieldset>/<legend> structures, and it is quite hard to override their preferences. So if for visual (or any other serious) reason you cannot use standard <fieldset>/<legend>, you may take ARIA to the rescue: Working Example Gender Male Female Explanation As always, we highly recommend to use traditional…
Groups of radio buttons are used as possible answers to a certain question, and as such they are always related to each other. Hence they are always grouped, while the <fieldset>‘s <legend> contains the question and each control’s <label> contains an answer. Working Example Gender Male Female Explanation This is also reflected by the fact that each radio button’s name attribute is…
Grouping form controls in a meaningful way can make them much easier to handle for everyone. While most controls can be grouped, some must be grouped. The fieldset/legend structure is available for exactly that – it can even be nested. And if its visual limitations are a problem, ARIA can be of help. Groups of…
Your address First name Last name Street City Additional details Biography Image Age Group 0 to 9 Years 10 to 19 Years 20 to 29 Years 30 to 39 Years 40 to 49 Years 50 to 59 Years 60 to 69 Years 70 to 79 Years 80 to 89 Years 90 to 99 Years Interests…
Grouping form controls in a meaningful way can make them much easier to handle for everyone. While most controls can be grouped, some must be grouped. The fieldset/legend structure is available for exactly that – it can even be nested. And if its visual limitations are a problem, ARIA can be of help. Nesting <fieldset>/<legend> structures are…