De-duplicate legend

When we have one thing per page, our current pattern is to let the h1 be the question and then repeat but visually hide it in the legend (or label). That means screen readers will read the question twice, which is not a proper barrier but annoying and gets raised as an issue again and again, e.g. in #320 or on the cross-government accessibility mailinglist and from accessibility auditors. This changes that by moving the h1 into the legend. That is currently invalid but will be valid in HTML 5.2 [https://www.w3.org/TR/html52/sec-forms.html#the-legend-element] and the W3C validator passes it fine. Also see the reason for the change: w3c/html#724.
alphagov · Jun 28, 2017 · f1398c7 · f1398c7
1 parent 56c6acd
commit f1398c7
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 49 deletions.
diff --git a/app/views/examples/example_form_elements.html b/app/views/examples/example_form_elements.html
@@ -561,7 +561,7 @@ <h2 class="heading-medium">
 
       <div class="form-section">
         <h3 class="heading-medium">
-          These examples are one-question-per-page examples and use a heading for the question, with a visually hidden legend inside a fieldset.
+          These examples are one-question-per-page examples and use a heading for the question inside the legend of the fieldset.
         </h3>
         <!-- "Chunky" Radio buttons, stacked -->
         {% include "snippets/form_radio_buttons.html" %}

diff --git a/app/views/examples/example_radios_checkboxes.html b/app/views/examples/example_radios_checkboxes.html
@@ -27,15 +27,13 @@ <h1 class="heading-xlarge">
 
       <form action="/" method="post" class="form">
 
-        <h1 class="heading-large">
-          What is your nationality?
-        </h1>
-
         <div class="form-group">
           <fieldset>
 
             <legend>
-              <span class="visually-hidden">What is your nationality?</span>
+              <h1 class="heading-large">
+                What is your nationality?
+              </h1>
               <span class="body-text">If you have dual nationality, select all options that are relevant to you.</span>
             </legend>
 
@@ -64,15 +62,13 @@ <h1 class="heading-large">
           </fieldset>
         </div>
 
-        <h1 class="heading-large">
-          Where should we send your new<br> passport?
-        </h1>
-
         <div class="form-group">
           <fieldset>
 
-            <legend class="visually-hidden">
-              Where should we send your new passport?
+            <legend>
+              <h1 class="heading-large">
+                Where should we send your new passport?
+              </h1>
             </legend>
 
             <div class="multiple-choice">
@@ -87,14 +83,12 @@ <h1 class="heading-large">
 
             <div class="panel panel-border-narrow js-hidden" id="example-other-address">
 
-              <h2 class="heading-medium">
-                Your other address
-              </h2>
-
               <fieldset>
 
-                <legend class="visually-hidden">
-                  Your other address
+                <legend>
+                  <h2 class="heading-medium">
+                    Your other address
+                  </h2>
                 </legend>
 
                 <div class="form-group form-group-compound">
@@ -123,15 +117,13 @@ <h2 class="heading-medium">
           </fieldset>
         </div>
 
-        <h1 class="heading-large">
-          Which part of the Housing Act was your licence issued under?
-        </h1>
-
         <div class="form-group">
           <fieldset>
 
             <legend>
-              <span class="visually-hidden">Which part of the Housing Act was your licence issued under?</span>
+              <h1 class="heading-large">
+                Which part of the Housing Act was your licence issued under?
+              </h1>
               <span class="body-text">Select one of the options below.</span>
             </legend>
 

diff --git a/app/views/snippets/form_checkboxes.html b/app/views/snippets/form_checkboxes.html
@@ -1,10 +1,8 @@
-<h3 class="heading-medium">Which types of waste do you transport regularly?</h3>
-
 <form>
   <fieldset>
 
     <legend>
-      <span class="visually-hidden">Which types of waste do you transport regularly?</span>
+      <h3 class="heading-medium">Which types of waste do you transport regularly?</h3>
       <span class="body-text">Select all that apply</span>
     </legend>
 

diff --git a/app/views/snippets/form_inset_checkboxes.html b/app/views/snippets/form_inset_checkboxes.html
@@ -1,13 +1,11 @@
-<h1 class="heading-medium">
-  What is your nationality?
-</h1>
-
 <form>
   <div class="form-group">
     <fieldset>
 
       <legend>
-        <span class="visually-hidden">What is your nationality?</span>
+        <h1 class="heading-medium">
+          What is your nationality?
+        </h1>
         <span class="body-text">Select all options that are relevant to you.</span>
       </legend>
 

diff --git a/app/views/snippets/form_inset_radios.html b/app/views/snippets/form_inset_radios.html
@@ -1,12 +1,12 @@
-<h1 class="heading-medium">
-  How do you want to be contacted?
-</h1>
-
 <form>
   <div class="form-group">
     <fieldset>
 
-      <legend class="visually-hidden">How do you want to be contacted?</legend>
+      <legend>
+        <h1 class="heading-medium">
+          How do you want to be contacted?
+        </h1>
+      </legend>
 
       <div class="multiple-choice" data-target="contact-by-email">
         <input id="example-contact-by-email" type="radio" name="radio-contact-group" value="Yes">

diff --git a/app/views/snippets/form_radio_buttons.html b/app/views/snippets/form_radio_buttons.html
@@ -1,10 +1,10 @@
-<h1 class="heading-medium">Where do you live?</h1>
-
 <form>
   <div class="form-group">
     <fieldset>
 
-      <legend class="visually-hidden">Where do you live?</legend>
+      <legend>
+        <h1 class="heading-medium">Where do you live?</h1>
+      </legend>
 
       <div class="multiple-choice">
         <input id="radio-1" type="radio" name="radio-group" value="Northern Ireland">

diff --git a/app/views/snippets/form_radio_buttons_inline.html b/app/views/snippets/form_radio_buttons_inline.html
@@ -1,12 +1,12 @@
-<h1 class="heading-medium">
-  Do you already have a personal user account?
-</h1>
-
 <form>
   <div class="form-group">
     <fieldset class="inline">
 
-      <legend class="visually-hidden">Do you already have a personal user account?</legend>
+      <legend>
+        <h1 class="heading-medium">
+          Do you already have a personal user account?
+        </h1>
+      </legend>
 
       <div class="multiple-choice">
         <input id="radio-inline-1" type="radio" name="radio-inline-group" value="Yes">

diff --git a/app/views/snippets/form_radio_inline_yes_no.html b/app/views/snippets/form_radio_inline_yes_no.html
@@ -1,12 +1,12 @@
-<h1 class="heading-medium">
-  Do you yes/no ?
-</h1>
-
 <form>
   <div class="form-group">
     <fieldset class="inline">
 
-      <legend class="visually-hidden">Do you yes/no?</legend>
+      <legend>
+        <h1 class="heading-medium">
+          Do you yes/no?
+        </h1>
+      </legend>
 
       <div class="multiple-choice" data-target="yes-and-do-next">
         <input id="radio-yes-no-yes" type="radio" name="yes-no-group" value="Yes">