CINXE.COM

<!DOCTYPE html> <html class="no-js" lang="en" dir="ltr" prefix="og: http://ogp.me/ns#"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script> document.documentElement.className = document.documentElement.className.replace('no-js', 'has-js'); function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "/WAI/assets/scripts/main.js?1732807903713432608"; document.body.appendChild(element); } window.addEventListener("load", downloadJSAtOnload, false); </script> <link rel="stylesheet" href="/WAI/assets/css/style.css?1732807903713432608"> <title> Grouping Controls | Web Accessibility Initiative (WAI) | W3C</title> <meta name="generator" content="Jekyll v4.3.3" /> <meta property="og:title" content="Grouping Controls" /> <meta name="author" content="W3C Web Accessibility Initiative (WAI)" /> <meta property="og:locale" content="en" /> <meta name="description" content="Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI)." /> <meta property="og:description" content="Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI)." /> <link rel="canonical" href="https://www.w3.org/WAI/tutorials/forms/grouping/" /> <meta property="og:url" content="https://www.w3.org/WAI/tutorials/forms/grouping/" /> <meta property="og:site_name" content="Web Accessibility Initiative (WAI)" /> <meta property="og:image" content="https://www.w3.org/WAI/content-images/tutorials/forms/social.png" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="https://www.w3.org/WAI/content-images/tutorials/forms/social.png" /> <meta property="twitter:title" content="Grouping Controls" /> <meta name="twitter:site" content="@w3c_wai" /> <meta name="twitter:creator" content="@W3C Web Accessibility Initiative (WAI)" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebPage","author":{"@type":"Person","name":"W3C Web Accessibility Initiative (WAI)"},"description":"Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).","headline":"Grouping Controls","image":"https://www.w3.org/WAI/content-images/tutorials/forms/social.png","url":"https://www.w3.org/WAI/tutorials/forms/grouping/"}</script>  <link rel="alternate" type="application/rss+xml" href="/WAI/feed.xml"> </head> <body id="top" class="page-grouping-controls "> <nav aria-label="Skip Link and Language Selector" id="controls" class="default-grid"> <ul> <li><a href="#main">Skip to Content</a></li> <li class="opt"> <a href="/WAI/meta/customize/">Change Text Size or Colors</a> </li> <li class="opt"> <a href="/WAI/translations/">All Translations <svg focusable="false" aria-hidden="true" class="icon-translations "><use xlink:href="/WAI/assets/images/icons.svg#icon-translations"></use></svg></a> </li> </ul></nav> <header id="site-header" class="default-grid with-gap"> <div class="logos"> <a lang="en" class="home w3c" href="https://www.w3.org/"> <svg role="img" aria-label="W3C" viewBox="0 0 68 34" xmlns="http://www.w3.org/2000/svg"><g><path d="m16.117 1.006 5.759 19.58 5.759-19.58h4.17 11.444v1.946l-5.879 10.128c2.065.663 3.627 1.868 4.686 3.615 1.059 1.748 1.589 3.799 1.589 6.155 0 2.914-.775 5.363-2.324 7.348s-3.555 2.978-6.017 2.978c-1.854 0-3.469-.589-4.845-1.767-1.377-1.178-2.396-2.773-3.058-4.786l3.256-1.35c.477 1.218 1.106 2.178 1.887 2.879.781.702 1.701 1.052 2.76 1.052 1.112 0 2.052-.622 2.82-1.866.768-1.245 1.152-2.74 1.152-4.489 0-1.933-.411-3.429-1.231-4.488-.954-1.244-2.45-1.867-4.489-1.867h-1.588v-1.906l5.56-9.612h-6.712l-.382.65-8.163 27.548h-.397l-5.958-19.937-5.957 19.937h-.397l-9.53-32.168h4.17l5.759 19.58 3.892-13.185-1.906-6.395z"/><path d="m64.92 1.006c-.819 0-1.554.295-2.111.861-.591.6-.92 1.376-.92 2.178s.313 1.545.887 2.128c.583.591 1.334.912 2.145.912.793 0 1.562-.321 2.161-.903.574-.557.887-1.3.887-2.136 0-.811-.321-1.57-.878-2.136-.584-.592-1.344-.904-2.171-.904zm2.643 3.065c0 .701-.271 1.351-.768 1.832-.524.507-1.174.777-1.892.777-.675 0-1.342-.278-1.84-.785s-.777-1.157-.777-1.849.287-1.368.802-1.891c.481-.49 1.131-.751 1.84-.751.726 0 1.376.271 1.883.785.49.489.752 1.147.752 1.882zm-2.559-1.807h-1.3v3.445h.65v-1.469h.642l.701 1.469h.726l-.769-1.57c.498-.102.785-.439.785-.929 0-.625-.472-.946-1.435-.946zm-.118.422c.608 0 .886.169.886.591 0 .405-.278.549-.87.549h-.549v-1.14z"/><path d="m59.807.825.676 4.107-2.391 4.575s-.918-1.941-2.443-3.015c-1.285-.905-2.122-1.102-3.431-.832-1.681.347-3.587 2.357-4.419 4.835-.995 2.965-1.005 4.4-1.04 5.718-.056 2.113.277 3.362.277 3.362s-1.452-2.686-1.438-6.62c.009-2.808.451-5.354 1.75-7.867 1.143-2.209 2.842-3.535 4.35-3.691 1.559-.161 2.791.59 3.743 1.403 1 .854 2.01 2.721 2.01 2.721z"/><path d="m60.102 24.063s-1.057 1.889-1.715 2.617c-.659.728-1.837 2.01-3.292 2.651s-2.218.762-3.656.624c-1.437-.138-2.772-.97-3.24-1.317s-1.664-1.369-2.34-2.322-1.733-2.859-1.733-2.859.589 1.91.958 2.721c.212.467.864 1.894 1.789 3.136.863 1.159 2.539 3.154 5.086 3.604 2.547.451 4.297-.693 4.73-.97s1.346-1.042 1.924-1.66c.603-.645 1.174-1.468 1.49-1.962.231-.36.607-1.092.607-1.092z"/></g></svg> </a> <a lang="en" class="home" href="/WAI/"> <span class="wai"><span class="wa">Web Accessibility</span> <span class="i"><span class="initieative">Initiative</span> <span>WAI</span></span></span> </a> <div class="claim"> <span>Strategies, standards, resources to make the Web accessible to people with disabilities</span> </div> <button class="button button-menu" aria-haspopup="true" aria-expanded="false" id="openmenu"><span><svg focusable="false" aria-hidden="true" class="icon-menu "><use xlink:href="/WAI/assets/images/icons.svg#icon-menu"></use></svg> Menu</span></button> </div> <div class="navigations"> <nav class="metanav" aria-label="Meta & Search" lang="en"> <ul> <li><a href="/WAI/about/participating/">Get Involved</a></li> <li><a href="/WAI/about/">About W3C WAI</a></li> <li> <form action="/WAI/search/" role="search"> <div> <label for="header-search"> <span class="visuallyhidden">Search:</span> <input id="header-search" type="search" name="q" placeholder="Search" aria-label="Search"> </label> <button class="button button-icon button-nobg button-noborder"><span><svg focusable="false" aria-label="Submit Search" class="icon-search "><use xlink:href="/WAI/assets/images/icons.svg#icon-search"></use></svg></span></button> </div> </form> </li> </ul> </nav> </div> </header><nav class="mainnav" aria-label="Main" lang="en"><ul><li><a lang="en" href="/WAI/fundamentals/"><span>Accessibility Fundamentals</span></a></li><li><a lang="en" href="/WAI/planning/"><span>Planning & Policies</span></a></li><li><a lang="en" href="/WAI/design-develop/"><span>Design & Develop</span></a></li><li><a lang="en" href="/WAI/test-evaluate/"><span>Test & Evaluate</span></a></li><li><a lang="en" href="/WAI/teach-advocate/"><span>Teach & Advocate</span></a></li><li><a lang="en" href="/WAI/standards-guidelines/"><span>Standards/<wbr>Guidelines</span></a></li></ul></nav><nav class="default-grid breadcrumb" aria-label="Breadcrumb" lang="en"> <ul style="align-self: center;"> <li><a href="/WAI/" lang="en">Home</a></li><li><a lang="en" href="/WAI/design-develop/"><span>Design & Develop</span></a></li><li><a lang="en" href="/WAI/tutorials/"><span>Tutorials</span></a></li><li><a lang="en" href="/WAI/tutorials/forms/"><span>Forms</span></a></li><li><a lang="en" href="/WAI/tutorials/forms/grouping/" aria-current="page"><span>Grouping Controls</span></a></li></ul> </nav> <div class="default-grid with-gap leftcol"> <div class="sidenav"><nav class="sn-contents" aria-label="Secondary"> <ul class="sidenav--list"> <li> <a lang="en" href="/WAI/design-develop/" class="page-link"><span>Design & Develop</span></a></li><li> <a lang="en" href="/WAI/tips/writing/" class="page-link"><span>Tips for Writing</span></a></li><li> <a lang="en" href="/WAI/tips/designing/" class="page-link"><span>Tips for Designing</span></a></li><li> <a lang="en" href="/WAI/tips/developing/" class="page-link"><span>Tips for Developing</span></a></li><li> <a lang="en" href="/WAI/media/av/" class="page-link"><span>Audio & Video Media</span></a><ul><li> <a lang="en" href="/WAI/media/av/users-orgs/" class="page-link"><span>User Needs</span></a></li><li> <a lang="en" href="/WAI/media/av/planning/" class="page-link"><span>Planning</span></a></li><li> <a lang="en" href="/WAI/media/av/av-content/" class="page-link"><span>Audio Content & Video Content</span></a></li><li> <a lang="en" href="/WAI/media/av/description/" class="page-link"><span>Description</span></a></li><li> <a lang="en" href="/WAI/media/av/captions/" class="page-link"><span>Captions/Subtitles</span></a></li><li> <a lang="en" href="/WAI/media/av/transcripts/" class="page-link"><span>Transcripts</span></a></li><li> <a lang="en" href="/WAI/media/av/transcribing/" class="page-link"><span>Transcribing Audio to Text</span></a></li><li> <a lang="en" href="/WAI/media/av/sign-languages/" class="page-link"><span>Sign Languages</span></a></li><li> <a lang="en" href="/WAI/media/av/player/" class="page-link"><span>Media Player</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/" aria-current="location" class="page-link"><span>Tutorials</span></a><ul><li> <a lang="en" href="/WAI/tutorials/page-structure/" class="page-link"><span>Page Structure</span></a><ul><li> <a lang="en" href="/WAI/tutorials/page-structure/regions/" class="page-link"><span>Page Regions</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/labels/" class="page-link"><span>Labeling Regions</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/headings/" class="page-link"><span>Headings</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/content/" class="page-link"><span>Content Structure</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/example/" class="page-link"><span>Full Example</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/menus/" class="page-link"><span>Menus</span></a><ul><li> <a lang="en" href="/WAI/tutorials/menus/structure/" class="page-link"><span>Structure</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/styling/" class="page-link"><span>Styling</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/flyout/" class="page-link"><span>Fly-Out Menus</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/application-menus/" class="page-link"><span>Application Menus</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/application-menus-code/" class="page-link"><span>Application Menu Example & Code</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/images/" class="page-link"><span>Images</span></a><ul><li> <a lang="en" href="/WAI/tutorials/images/informative/" class="page-link"><span>Informative Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/decorative/" class="page-link"><span>Decorative Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/functional/" class="page-link"><span>Functional Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/textual/" class="page-link"><span>Images of Text</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/complex/" class="page-link"><span>Complex Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/groups/" class="page-link"><span>Groups of Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/imagemap/" class="page-link"><span>Image Maps</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/decision-tree/" class="page-link"><span>An <code style="color: inherit;">alt</code> Decision Tree</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/tips/" class="page-link"><span>Tips and Tricks</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/tables/" class="page-link"><span>Tables</span></a><ul><li> <a lang="en" href="/WAI/tutorials/tables/one-header/" class="page-link"><span>One Header</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/two-headers/" class="page-link"><span>Two Headers</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/irregular/" class="page-link"><span>Irregular Headers</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/multi-level/" class="page-link"><span>Multi-level Headers</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/caption-summary/" class="page-link"><span>Caption & Summary</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/tips/" class="page-link"><span>Tips and Tricks</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/forms/" aria-current="location" class="page-link"><span>Forms</span></a><ul><li> <a lang="en" href="/WAI/tutorials/forms/labels/" class="page-link"><span>Labeling Controls</span></a></li> <li> <a lang="en" href="/WAI/tutorials/forms/grouping/" aria-current="page" class="page-link"><span>Grouping Controls</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/instructions/" class="page-link"><span>Form Instructions</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/validation/" class="page-link"><span>Validating Input</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/notifications/" class="page-link"><span>User Notifications</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/multi-page/" class="page-link"><span>Multi-page Forms</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/custom-controls/" class="page-link"><span>Custom Controls</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/carousels/" class="page-link"><span>Carousels</span></a><ul><li> <a lang="en" href="/WAI/tutorials/carousels/structure/" class="page-link"><span>Structure</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/functionality/" class="page-link"><span>Functionality</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/animations/" class="page-link"><span>Animations</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/styling/" class="page-link"><span>Styling</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/working-example/" class="page-link"><span>Working Example</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/full-code/" class="page-link"><span>Complete Code</span></a></li></ul></li></ul></li></ul></nav> </div> <main id="main" lang="en"> <header class="in-resource"> <h1> Grouping Controls </h1><p>in <a lang="en" href="/WAI/tutorials/forms/"><span>Forms Tutorial</span></a></p></header> <aside class="box box-full"><header class="box-h box-h-full"> <h2> Overview </h2></header><div class="box-i"> <p>Grouping related form controls makes forms more understandable for all users, as related controls are easier to identify. It also makes it easier for people to focus on smaller and more manageable groups rather than try to grasp the entire form at once.</p> </div></aside> <nav class="box box-simple" aria-labelledby="tocheading" id="toc"> <header id="tocheading" class="box-h box-h-simple"> Page Contents</header> <div class="box-i"> <ul id="markdown-toc"> <li><a href="#associating-related-controls-with-fieldset" id="markdown-toc-associating-related-controls-with-fieldset">Associating related controls with <code class="language-plaintext highlighter-rouge">fieldset</code></a> <ul> <li><a href="#radio-buttons" id="markdown-toc-radio-buttons">Radio buttons</a></li> <li><a href="#checkboxes" id="markdown-toc-checkboxes">Checkboxes</a></li> <li><a href="#related-fields" id="markdown-toc-related-fields">Related fields</a></li> </ul> </li> <li><a href="#associating-related-controls-with-wai-aria" id="markdown-toc-associating-related-controls-with-wai-aria">Associating related controls with WAI-ARIA</a></li> <li><a href="#grouping-items-in-select-elements" id="markdown-toc-grouping-items-in-select-elements">Grouping items in <code class="language-plaintext highlighter-rouge">select</code> elements</a></li> </ul> </div> </nav> <p>Grouping needs to be carried out visually and in the code, for example, by using the <code class="language-plaintext highlighter-rouge"><fieldset></code> and <code class="language-plaintext highlighter-rouge"><legend></code> elements to associate related form controls. Also, related entries of a <code class="language-plaintext highlighter-rouge"><select></code> element can be grouped using <code class="language-plaintext highlighter-rouge"><optgroup></code>.</p> <h2 class="ap" id="associating-related-controls-with-fieldset">Associating related controls with <code class="language-plaintext highlighter-rouge">fieldset</code></h2> <p>The <code class="language-plaintext highlighter-rouge"><fieldset></code> element provides a container for related form controls, and the <code class="language-plaintext highlighter-rouge"><legend></code> element acts as a heading to identify the group.</p> <p>The legend for a group of controls can also highlight common attributes of all controls, for example, to advise that all fields in the group are required.</p> <h3 class="ex inap" id="radio-buttons">Radio buttons</h3> <p>In the example below, there are three radio buttons that allow the user to choose an output format. Radio button groups should always be grouped using <code class="language-plaintext highlighter-rouge"><fieldset></code>.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example</header><div class="box-i"> <form method="post" action="#"> <fieldset style="border: 1px solid #888; padding: 5px;"> <legend>Output format</legend> <div> <input type="radio" name="format" id="txt" value="txt" checked="" /> <label for="txt">Text file</label> </div> <div> <input type="radio" name="format" id="csv" value="csv" /> <label for="csv">CSV file</label> </div> <div> <input type="radio" name="format" id="html" value="HTML" /> <label for="html">HTML file</label> </div> </fieldset> </form> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code Snippet</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><fieldset></span> <span class="nt"><legend></span>Output format<span class="nt"></legend></span> <span class="nt"><div></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"format"</span> <span class="na">id=</span><span class="s">"txt"</span> <span class="na">value=</span><span class="s">"txt"</span> <span class="na">checked</span><span class="nt">></span> <span class="nt"><label</span> <span class="na">for=</span><span class="s">"txt"</span><span class="nt">></span>Text file<span class="nt"></label></span> <span class="nt"></div></span> <span class="nt"><div></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"format"</span> <span class="na">id=</span><span class="s">"csv"</span> <span class="na">value=</span><span class="s">"csv"</span><span class="nt">></span> <span class="nt"><label</span> <span class="na">for=</span><span class="s">"csv"</span><span class="nt">></span>CSV file<span class="nt"></label></span> <span class="nt"></div></span> […] <span class="nt"></fieldset></span> </code></pre></div></div> </div></aside> <h3 class="ex inap" id="checkboxes">Checkboxes</h3> <p>In the example below, three checkboxes are part of an opt-in function for receiving different types of information.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example</header><div class="box-i"> <form method="post" action="#"> <fieldset style="border: 1px solid #888; padding: 5px;"> <legend>I want to receive</legend> <div> <input type="checkbox" name="newsletter" id="check_1" /> <label for="check_1">The weekly newsletter</label> </div> <div> <input type="checkbox" name="company_offers" id="check_2" /> <label for="check_2">Offers from the company</label> </div> <div> <input type="checkbox" name="assoc_offers" id="check_3" /> <label for="check_3">Offers from associated companies</label> </div> </fieldset> </form> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code Snippet</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><fieldset></span> <span class="nt"><legend></span>I want to receive<span class="nt"></legend></span> <span class="nt"><div></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"newsletter"</span> <span class="na">id=</span><span class="s">"check_1"</span><span class="nt">></span> <span class="nt"><label</span> <span class="na">for=</span><span class="s">"check_1"</span><span class="nt">></span>The weekly newsletter<span class="nt"></label></span> <span class="nt"></div></span> […] <span class="nt"></fieldset></span> </code></pre></div></div> </div></aside> <h3 class="ex inap" id="related-fields">Related fields</h3> <p>This example shows form fields to enter shipping and billing addresses. As the labels in both groups have the same text, the <code class="language-plaintext highlighter-rouge">fieldset</code> element also helps to distinguish the form fields by their groups. In case the <code class="language-plaintext highlighter-rouge"><legend></code> is not read by screen readers (see note below), labels for the first form control in each group should include the group’s name. This name can be hidden visually.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example</header><div class="box-i"> <form method="post" action="#"> <fieldset style="float: left; border: 1px solid #888; padding: 5px; margin-right: 10px;"> <legend>Shipping Address:</legend> <div> <label for="shipping_name"><span class="visuallyhidden">Shipping </span>Name:</label><br /> <input type="text" name="shipping_name" id="shipping_name" /> </div> <div> <label for="shipping_street">Street:</label><br /> <input type="text" name="shipping_street" id="shipping_street" /> </div> <div> <label for="shipping_number">Number:</label><br /> <input type="text" name="shipping_number" id="shipping_number" /> </div> <div> <label for="shipping_city">City:</label><br /> <input type="text" name="shipping_city" id="shipping_city" /> </div> <div> <label for="shipping_zip">ZIP code:</label><br /> <input type="text" name="shipping_zip" id="shipping_zip" /> </div> </fieldset> <fieldset style="float: left; border: 1px solid #888; padding: 5px;"> <legend>Billing Address:</legend> <div> <label for="billing_name"><span class="visuallyhidden">Billing </span>Name:</label><br /> <input type="text" name="billing_name" id="billing_name" /> </div> <div> <label for="billing_street">Street:</label><br /> <input type="text" name="billing_street" id="billing_street" /> </div> <div> <label for="billing_number">Number:</label><br /> <input type="text" name="billing_number" id="billing_number" /> </div> <div> <label for="billing_city">City:</label><br /> <input type="text" name="billing_city" id="billing_city" /> </div> <div> <label for="billing_zip">ZIP code:</label><br /> <input type="text" name="billing_zip" id="billing_zip" /> </div> </fieldset> </form> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code Snippet</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><fieldset></span> <span class="nt"><legend></span>Shipping Address:<span class="nt"></legend></span> <span class="nt"><div></span> <span class="nt"><label</span> <span class="na">for=</span><span class="s">"shipping_name"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"visuallyhidden"</span><span class="nt">></span>Shipping <span class="nt"></span></span>Name: <span class="nt"></label><br></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"shipping_name"</span> <span class="na">id=</span><span class="s">"shipping_name"</span><span class="nt">></span> <span class="nt"></div></span> <span class="nt"><div></span> <span class="nt"><label</span> <span class="na">for=</span><span class="s">"shipping_street"</span><span class="nt">></span>Street:<span class="nt"></label><br></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"shipping_street"</span> <span class="na">id=</span><span class="s">"shipping_street"</span><span class="nt">></span> <span class="nt"></div></span> […] <span class="nt"></fieldset></span> <span class="nt"><fieldset></span> <span class="nt"><legend></span>Billing Address:<span class="nt"></legend></span> <span class="nt"><div></span> <span class="nt"><label</span> <span class="na">for=</span><span class="s">"billing_name"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"visuallyhidden"</span><span class="nt">></span>Billing <span class="nt"></span></span>Name: <span class="nt"></label><br></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"billing_name"</span> <span class="na">id=</span><span class="s">"billing_name"</span><span class="nt">></span> <span class="nt"></div></span> <span class="nt"><div></span> <span class="nt"><label</span> <span class="na">for=</span><span class="s">"billing_street"</span><span class="nt">></span>Street:<span class="nt"></label><br></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"billing_street"</span> <span class="na">id=</span><span class="s">"billing_street"</span><span class="nt">></span> <span class="nt"></div></span> […] <span class="nt"></fieldset></span> </code></pre></div></div> </div></aside> <p><strong>Note:</strong> Depending on the configuration, some screen readers read out the legend either <em>with every form element</em>, <em>once</em>, or, rarely, <em>not at all</em>. To accommodate this consider the following:</p> <ul> <li>Make the legend as short as possible for situations in which it is read together with the label each time.</li> <li>Make the individual labels sufficiently self-explanatory for situations in which legends are not read aloud, without repeating the legend in every label.</li> </ul> <h2 class="ap" id="associating-related-controls-with-wai-aria">Associating related controls with WAI-ARIA</h2> <p>WAI-ARIA provides a grouping role that functions similarly to <code class="language-plaintext highlighter-rouge">fieldset</code> and <code class="language-plaintext highlighter-rouge">legend</code>. In this example, the <code class="language-plaintext highlighter-rouge">div</code> element has <code class="language-plaintext highlighter-rouge">role=group</code> to indicate that the contained elements are members of a group and the <code class="language-plaintext highlighter-rouge">aria-labelledby</code> attribute references the <code class="language-plaintext highlighter-rouge">id</code> for text that will serve as the label for the group.</p> <p>This technique provides additional styling possibilities.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example</header><div class="box-i"> <form method="post" action="#"> <div role="group" aria-labelledby="shipping_head" style="float: left; border: 1px solid #333; padding: 0 .5em .5em; margin-right: 1em;"> <div id="shipping_head" style="font-weight: bold; padding: .25em 0;">Shipping Address:</div> <div> <label for="aria_shipping_name"><span class="visuallyhidden">Shipping </span>Name:</label><br /> <input type="text" name="aria_shipping_name" id="aria_shipping_name" /> </div> <div> <label for="aria_shipping_street">Street:</label><br /> <input type="text" name="aria_shipping_street" id="aria_shipping_street" /> </div> <div> <label for="aria_shipping_number">Number:</label><br /> <input type="text" name="aria_shipping_number" id="aria_shipping_number" /> </div> <div> <label for="aria_shipping_city">City:</label><br /> <input type="text" name="aria_shipping_city" id="aria_shipping_city" /> </div> <div> <label for="aria_shipping_zip">ZIP code:</label><br /> <input type="text" name="aria_shipping_zip" id="aria_shipping_zip" /> </div> </div> <div role="group" aria-labelledby="billing_head" style="float: left; border: 1px solid #333; padding: 0 .5em .5em;"> <div id="billing_head" style="font-weight: bold; padding: .25em 0;">Billing Address:</div> <div> <label for="aria_billing_name"><span class="visuallyhidden">Billing </span>Name:</label><br /> <input type="text" name="aria_billing_name" id="aria_billing_name" /> </div> <div> <label for="aria_billing_street">Street:</label><br /> <input type="text" name="aria_billing_street" id="aria_billing_street" /> </div> <div> <label for="aria_billing_number">Number:</label><br /> <input type="text" name="aria_billing_number" id="aria_billing_number" /> </div> <div> <label for="aria_billing_city">City:</label><br /> <input type="text" name="aria_billing_city" id="aria_billing_city" /> </div> <div> <label for="aria_billing_zip">ZIP code:</label><br /> <input type="text" name="aria_billing_zip" id="aria_billing_zip" /> </div> </div> </form> </div></aside> <p>Because WAI-ARIA not fully supported in all web browser and screen reader combinations, a group identifier should be added to the first form control in the group.</p> <aside class="box box-example"><header class="box-h box-h-example"> Code Snippet</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-labelledby=</span><span class="s">"shipping_head"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">id=</span><span class="s">"shipping_head"</span><span class="nt">></span>Shipping Address:<span class="nt"></div></span> <span class="nt"><div></span> <span class="nt"><label</span> <span class="na">for=</span><span class="s">"shipping_name"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"visuallyhidden"</span><span class="nt">></span>Shipping <span class="nt"></span></span>Name: <span class="nt"></label><br></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"shipping_name"</span> <span class="na">id=</span><span class="s">"shipping_name"</span><span class="nt">></span> <span class="nt"></div></span> […] <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-labelledby=</span><span class="s">"billing_head"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">id=</span><span class="s">"billing_head"</span><span class="nt">></span>Billing Address:<span class="nt"></div></span> <span class="nt"><div></span> <span class="nt"><label</span> <span class="na">for=</span><span class="s">"billing_name"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"visuallyhidden"</span><span class="nt">></span>Billing <span class="nt"></span></span>Name: <span class="nt"></label><br></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"billing_name"</span> <span class="na">id=</span><span class="s">"billing_name"</span><span class="nt">></span> <span class="nt"></div></span> […] <span class="nt"></div></span> </code></pre></div></div> </div></aside> <h2 id="grouping-items-in-select-elements">Grouping items in <code class="language-plaintext highlighter-rouge">select</code> elements</h2> <p>For <code class="language-plaintext highlighter-rouge">select</code> elements with groups of options, the <code class="language-plaintext highlighter-rouge">optgroup</code> element can be used to indicate such groups. The <code class="language-plaintext highlighter-rouge">label</code> attribute of the <code class="language-plaintext highlighter-rouge">optgroup</code> element is used to provide a label for the group. This is especially useful for lists with many related options. In the example below, users can choose from lectures in one of three courses.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example</header><div class="box-i"> <form action="#" method="get"> <fieldset> <legend>Which course would you like to watch today?</legend> <label for="course">Course:</label> <select name="course" id="course"> <option></option> <optgroup label="8.01 Physics I: Classical Mechanics"> <option value="8.01.1">Lecture 01: Powers of Ten</option> <option value="8.01.2">Lecture 02: 1D Kinematics</option> <option value="8.01.3">Lecture 03: Vectors</option> </optgroup> <optgroup label="8.02 Physics II: Electricity and Magnestism"> <option value="8.02.1">Lecture 01: What holds our world together?</option> <option value="8.02.2">Lecture 02: Electric Field</option> <option value="8.02.3">Lecture 03: Electric Flux</option> </optgroup> <optgroup label="8.03 Physics III: Vibrations and Waves"> <option value="8.03.1">Lecture 01: Periodic Phenomenon</option> <option value="8.03.2">Lecture 02: Beats</option> <option value="8.03.3">Lecture 03: Forced Oscillations with Damping</option> </optgroup> </select> <input class="button" type="submit" value="▶ Play" /> </fieldset> </form> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code Snippet</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><select></span> <span class="nt"><optgroup</span> <span class="na">label=</span><span class="s">"8.01 Physics I: Classical Mechanics"</span><span class="nt">></span> <span class="nt"><option</span> <span class="na">value=</span><span class="s">"8.01.1"</span><span class="nt">></span>Lecture 01: Powers of Ten<span class="nt"></option></span> <span class="nt"><option</span> <span class="na">value=</span><span class="s">"8.01.2"</span><span class="nt">></span>Lecture 02: 1D Kinematics<span class="nt"></option></span> <span class="nt"><option</span> <span class="na">value=</span><span class="s">"8.01.3"</span><span class="nt">></span>Lecture 03: Vectors<span class="nt"></option></span> <span class="nt"></optgroup></span> <span class="nt"><optgroup</span> <span class="na">label=</span><span class="s">"8.02 Physics II: Electricity and Magnestism"</span><span class="nt">></span> <span class="nt"><option</span> <span class="na">value=</span><span class="s">"8.02.1"</span><span class="nt">></span>Lecture 01: What holds our world together?<span class="nt"></option></span> […] <span class="nt"></optgroup></span> […] <span class="nt"></select></span> </code></pre></div></div> </div></aside> <aside class="box box-large box-icon" id="related"><header class="box-h box-h-large box-h-icon box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-default "><use xlink:href="/WAI/assets/images/icons.svg#icon-default"></use></svg> Related WCAG resources</header><div class="box-i"> <p>These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG success criteria and techniques from different conformance levels:</p> <p><strong>Success Criteria:</strong></p> <ul><li><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-content-structure-separation-programmatic"><strong>1.3.1</strong> Info and Relationships:</a> Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)</li><li><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-minimize-error-cues"><strong>3.3.2</strong> Labels or Instructions:</a> Labels or instructions are provided when content requires user input. (Level A)</li></ul> <p><strong>Techniques:</strong></p> <ul><li><a href="https://www.w3.org/TR/WCAG20-TECHS/ARIA17">ARIA17: Using grouping roles to identify related form controls</a></li><li><a href="https://www.w3.org/TR/WCAG20-TECHS/H71">H71: Providing a description for groups of form controls using fieldset and legend elements</a></li><li><a href="https://www.w3.org/TR/WCAG20-TECHS/H85">H85: Using OPTGROUP to group OPTION elements inside a SELECT</a></li></ul> </div></aside> <nav class="pager" aria-label="Previous/Next Page" style="clear: both;"> <ul><li class="pager--item previous"> <a href="/WAI/tutorials/forms/labels/"> <svg focusable="false" aria-hidden="true" class="icon-arrow-left pager--item-icon"><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-left"></use></svg> <span class="pager--item-text"> <span class="pager--item-text-direction">Previous:</span> <span class="pager--item-text-target">Labeling Controls</span> </span> </a> </li><li class="pager--item next"> <a href="/WAI/tutorials/forms/instructions/"> <svg focusable="false" aria-hidden="true" class="icon-arrow-right pager--item-icon"><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-right"></use></svg> <span class="pager--item-text"> <span class="pager--item-text-direction">Next:</span> <span class="pager--item-text-target">Form Instructions</span> </span> </a> </li> </ul></nav><aside class="box box-icon box-space-above" id="helpimprove" aria-label="feedback"><header class="box-h box-h-icon box-h-space-above box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-comments "><use xlink:href="/WAI/assets/images/icons.svg#icon-comments"></use></svg> <h2> Help improve this page </h2></header><div class="box-i"><p>Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list.">wai@w3.org</a> or via GitHub.</p> <div class="button-group"> <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list." class="button"><span>E-mail</span></a><a href=" https://github.com/w3c/wai-website/edit/main/pages/design-develop/tutorials/forms/grouping.md " class="button"><span>Fork & Edit on GitHub</span></a><a href="https://github.com/w3c/wai-website/issues/new?template=content-issue.yml&wai-resource-id=wai-tutorials&wai-url=https://www.w3.org/WAI/tutorials/forms/grouping/" class="button"><span>New GitHub Issue</span></a></div></div></aside> <a class="button button-backtotop" href="#top"><span><svg focusable="false" aria-hidden="true" class="icon-arrow-up "><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-up"></use></svg> Back to Top</span></a> </main> </div> <footer id="wai-site-footer" class="page-footer default-grid" aria-label="Page"> <div class="inner"> <div><strong>Status:</strong> Updated 27 July 2019 </div> <div> Editors: <ul class="sentence"> <li><a href="https://www.w3.org/People/yatil/">Eric Eggert</a></li> <li><a href="https://www.w3.org/People/shadi/">Shadi Abou-Zahra</a></li> </ul>   Update Editor: <ul class="sentence"> <li>Brian Elton</li> </ul>   Contributors: <ul class="sentence"> <li>see <a href="/WAI/tutorials/acknowledgements/">Acknowledgements</a></li> </ul> </div> <p>Developed by the Education and Outreach Working Group (<a href="https://www.w3.org/groups/wg/eowg">EOWG</a>). Developed with support from the <a href="https://www.w3.org/WAI/ACT/">WAI-ACT project</a>, co-funded by the <strong>European Commission <abbr title="Information Society Technologies">IST</abbr> Programme</strong>.</p> </div> </footer><footer class="site-footer grid-4q" aria-label="Site"> <div class="q1-start q3-end about"> <div> <p><a class="largelink" href="https://www.w3.org/WAI/" lang="en" dir="auto" translate="no">W3C Web Accessibility Initiative (WAI)</a></p> <p>Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.</p> </div> <div class="social" lang="en" dir="auto" translate="no"> <ul> <li><a href="https://w3c.social/@wai"><svg focusable="false" aria-hidden="true" class="icon-mastodon "><use xlink:href="/WAI/assets/images/icons.svg#icon-mastodon"></use></svg> Mastodon</a></li> <li><a href="https://www.linkedin.com/company/w3c-wai/"><svg focusable="false" aria-hidden="true" class="icon-linkedin "><use xlink:href="/WAI/assets/images/icons.svg#icon-linkedin"></use></svg> LinkedIn</a></li> <li><a href="https://www.w3.org/WAI/feed.xml"><svg focusable="false" aria-hidden="true" class="icon-rss "><use xlink:href="/WAI/assets/images/icons.svg#icon-rss"></use></svg> Feed</a></li> <li><a href="https://www.youtube.com/channel/UCU6ljj3m1fglIPjSjs2DpRA/playlists/"><svg focusable="false" aria-hidden="true" class="icon-youtube "><use xlink:href="/WAI/assets/images/icons.svg#icon-youtube"></use></svg> YouTube</a></li> <li><a href="https://www.w3.org/WAI/news/subscribe/" class="button">Get News in Email</a></li> </ul> </div> <div lang="en" dir="auto" translate="no"> <p>Copyright © 2024 World Wide Web Consortium (<a href="https://www.w3.org/">W3C</a><sup>®</sup>). See <a href="/WAI/about/using-wai-material/">Permission to Use WAI Material</a>.</p> </div> </div> <div lang="en" dir="auto" translate="no" class="q4-start q4-end"> <ul style="margin-bottom:0"> <li><a href="/WAI/about/contacting/">Contact WAI</a></li> <li><a href="/WAI/sitemap/">Site Map</a></li> <li><a href="/WAI/news/">News</a></li> <li><a href="/WAI/sitemap/#archive">Archive</a></li> <li><a href="/WAI/about/accessibility-statement/">Accessibility Statement</a></li> <li><a href="/WAI/translations/"> Translations</a></li> <li><a href="/WAI/roles/">Resources for Roles</a></li> </ul> </div> </footer> <script src="/WAI/assets/scripts/details4everybody.js?1732807903713432608"></script>  <script src="/WAI/assets/scripts/svg4everybody.js?1732807903713432608"></script> <script> svg4everybody(); </script><script> var translationStrings = {}; </script> </body> </html>