Make Newsletter Block Accessibility Compliant

Hello,

I'm looking for a solution to make the Newsletter Block sign-up form more accessible to meet ADA compliance. I keep getting flagged when I run it through an accessibility scanner. I've attached a screenshot from the audit for context.

Right now the default newsletter blocks don't allow for official form field labelling, but rather show the form field description as placeholder text. Unfortunately, placeholder text isn't read by screen readers and therefore doesn't meet accessibility compliance. 

I'm looking for a javascript solution that would allow me to add currently non-existent "aria-labels" to those form fields. I have found some options for this but they require the HTML to have the aria-label attributes in place—which this newsletter block does not.

Does anyone have a solution?

@BartelsCreativeCo The following JS should do the trick:
 

JavaScript

(function(){
  setTimeout(() => {
    
    document.querySelector('[name="fname"]').setAttribute('aria-label', 'First Name');
    document.querySelector('[name="lname"]').setAttribute('aria-label', 'Last Name');
    document.querySelector('[name="email"]').setAttribute('aria-label', 'Email Address');

  }, 500);
})()

Make sure you add it in the Footer section and in between <script> tags like so:

<script>
  // Add JS here
</script>

1 hour ago, jpeter said:

@BartelsCreativeCo The following JS should do the trick:
 

JavaScript

(function(){
  setTimeout(() => {
    
    document.querySelector('[name="fname"]').setAttribute('aria-label', 'First Name');
    document.querySelector('[name="lname"]').setAttribute('aria-label', 'Last Name');
    document.querySelector('[name="email"]').setAttribute('aria-label', 'Email Address');

  }, 500);
})()

 

Make sure you add it in the Footer section and in between <script> tags like so:

<script>
  // Add JS here
</script>

 

@jpeter that worked great for adding the labels, thank you!

I apparently still need to add an "Aria-required" designation though. 

Would you be able to show me how that factors into the code?

@jpeter thank you! That worked well!

Hi, I have the same problem and put the code into the footer as suggested and it still gives me errors on AccessScan. I was wondering if there is a delay or an issue with the code itself.

<script>

  // Aria-labels for newsletter
  (function(){
  setTimeout(() => {
    
    document.querySelector('[name="fname"]').setAttribute('aria-label', 'First Name');
    document.querySelector('[name="fname"]').setAttribute('aria-required', 'true');
    
    document.querySelector('[name="lname"]').setAttribute('aria-label', 'Last Name');
    document.querySelector('[name="lname"]').setAttribute('aria-required', 'true');
    

    document.querySelector('[name="email"]').setAttribute('aria-label', 'Email Address');
    document.querySelector('[name="email"]').setAttribute('aria-required', 'true');

  }, 500);
})()
</script>