I am going through an accessibility audit at the minute and need to fix some issues on a form - specifically with labelling for checkboxes and date input fields.
Is there a way to have the aria-label for a checkbox be based on the form value? The same for a date input field e.g. [DD] [MM] [YYYY].
Right now with checkboxes it has the name - which is based on the field value on the form.
e.g. a set of checkboxes for 3 fruit like below
Apple
Pear
Plum
Will have the name for each item as whatever the value is - e.g. Apple but there is no aria-label set for it.
So ideally I want to have the aria label be defined by whatever the field value is for each of the checkbox items in the group.
The same for the date input fields - the aria label should say MM or DD or YYYY to tell the user the format expected.
I managed to get this working the way I wanted - so I am going to post the code here in case it is useful for anyone else at some point looking to do the same thing. It takes the form value label for the checkbox and then uses that same value for the aria-label.
function add_aria_label_to_checkbox() {
?>
<script>
jQuery(document).ready(function($) {
// Change '.custom-aria-label' to the CSS class you assigned to your checkbox field.
$('.custom-aria-label input[type="checkbox"]').each(function() {
var checkboxValue = $(this).next('label').text();
$(this).attr('aria-label', checkboxValue);
});
});
</script>
<?php
}
add_action('wp_footer', 'add_aria_label_to_datefields', 20);
function add_aria_label_to_datefields() {
?>
<script>
jQuery(document).ready(function($) {
// Change '.custom-aria-label' to the CSS class you assigned to your checkbox field.
$('.custom-aria-label input[type="text"]').each(function() {
var datefieldValue = $(this).next('label').text();
$(this).attr('aria-label', datefieldValue);
});
});
</script>
<?php
}