Ideal options not accessible

Hey,

Thank you for this great plugin!

I need to use this plugin for a website and I saw an issue with selecting the iDeal issuer.
At the moment there is no label attached to the radio input, so someone using a screen reader (like someone who is blind) can’t select an iDeal issuer, and therefore can’t order.

I did some digging into the code and found the function payment_fields().

  <input type='radio' value='<?php echo $key; ?>' name='buckaroo-ideal-issuer' id='buckaroo-ideal-issuer' style="..."/>
  <div style="...">
    <?php echo _e($issuer["name"], 'wc-buckaroo-bpe-gateway')?>
  </div>

I suggest you change this into something like (untested):

  <input type='radio' value='<?php echo $key; ?>' name='buckaroo-ideal-issuer' id='buckaroo-ideal-issuer-<?php echo $key; ?>' style="..."/>
  <label style="..." for='buckaroo-ideal-issuer-<?php echo $key; ?>'>
    <?php echo _e($issuer["name"], 'wc-buckaroo-bpe-gateway')?>
  </label>

What changed:
The input field now has a label, that is connected with id/for. The id should be unique. So now a screen reader announces the label with the corresponding radio button.

There are more changes you can do, like add a legend to the fieldset and add an alt attribute to images.

But adding the label to the radio button is the most important thing here.
Please let me know if you have any questions about this.

Kind regards,
Rian Rietveld

• This topic was modified 6 years, 3 months ago by Rian Rietveld.