Include hidden error message for screen readers

alphagov · Aug 19, 2024 · 4c410a9 · 4c410a9
1 parent d982370
commit 4c410a9
Showing 1 changed file with 9 additions and 0 deletions.
diff --git a/app/views/charge.njk b/app/views/charge.njk
@@ -188,6 +188,7 @@
                   {% if highlightErrorFields.cardNo %}
                     <p class="govuk-error-message" id="error-card-no">
                       {{ highlightErrorFields.cardNo }}
+                      <span class="govuk-visually-hidden">{{ highlightErrorFields.cardNo }}</span>
                     </p>
                   {% endif %}
 
@@ -260,6 +261,7 @@
                     {% if highlightErrorFields.expiryMonth %}
                       <p class="govuk-error-message" id="error-expiry-date">
                         {{ highlightErrorFields.expiryMonth }}
+                        <span class="govuk-visually-hidden">{{ highlightErrorFields.expiryMonth }}</span>
                       </p>
                     {% endif %}
                     <div class="govuk-date-input__item govuk-date-input__item--month govuk-date-input__item--with-separator">
@@ -309,6 +311,7 @@
                   {% if highlightErrorFields.cardholderName %}
                     <p class="govuk-error-message" id="error-cardholder-name">
                       {{ highlightErrorFields.cardholderName }}
+                      <span class="govuk-visually-hidden">{{ highlightErrorFields.cardholderName }}</span>
                     </p>
                   {% endif %}
 
@@ -347,6 +350,7 @@
                   {% if highlightErrorFields.cvc %}
                     <p class="govuk-error-message" id="error-cvc">
                       {{ highlightErrorFields.cvc }}
+                      <span class="govuk-visually-hidden">{{ highlightErrorFields.cvc }}</span>
                     </p>
                   {% endif %}
 
@@ -398,6 +402,7 @@
                           {% if highlightErrorFields.addressLine1 %}
                             <p class="govuk-error-message" id="error-address-line-1">
                               {{ highlightErrorFields.addressLine1 }}
+                              <span class="govuk-visually-hidden">{{ highlightErrorFields.addressLine1 }}</span>
                             </p>
                           {% endif %}
 
@@ -451,6 +456,7 @@
                           {% if highlightErrorFields.addressCity %}
                             <p class="govuk-error-message" id="error-address-city">
                               {{ highlightErrorFields.addressCity }}
+                              <span class="govuk-visually-hidden">{{ highlightErrorFields.addressCity }}</span>
                             </p>
                           {% endif %}
 
@@ -476,6 +482,7 @@
                           {% if highlightErrorFields.addressCountry %}
                             <p class="govuk-error-message" id="error-address-country">
                               {{ highlightErrorFields.addressCountry }}
+                              <span class="govuk-visually-hidden">{{ highlightErrorFields.addressCountry }}</span>
                             </p>
                           {% endif %}
 
@@ -505,6 +512,7 @@
                           {% if highlightErrorFields.addressPostcode %}
                               <p class="govuk-error-message" id="error-address-postcode">
                                 {{ highlightErrorFields.addressPostcode }}
+                                <span class="govuk-visually-hidden">{{ highlightErrorFields.addressPostcode }}</span>
                               </p>
                           {% endif %}
 
@@ -544,6 +552,7 @@
                           {% if highlightErrorFields.email %}
                               <p class="govuk-error-message" id="error-email">
                                 {{ highlightErrorFields.email }}
+                                <span class="govuk-visually-hidden">{{ highlightErrorFields.email }}</span>
                               </p>
                             {% endif %}