WCAG / Accessibility Fix

[rachel.martin37Participant]

Problem: Inputs not encapsulated in a fieldset. This triggers some accessibility errors, we use Site Improve for scanning. I believe I have the solution to the problem on my local test environment, but I would like to see it (or another fix) rolled out in an update so we don’t have to maintain it on our site.

Update to file- asp.shortcode.custom_post_types.php
Update the last if statement to wrap the inputs into a fieldset with a legend. Final code below.
——-
if ( count($hidden_types) > 0 ) {
?><fieldset><legend>Custom Types</legend><?php
foreach ($hidden_types as $k => $v) {
?>
<input type=”checkbox”
style=”display: none !important;”
value=”<?php echo $v; ?>”
aria-label=”<?php echo asp_icl_t(‘Hidden label’, ‘Hidden label’); ?>”
aria-hidden=”true”
id=”<?php echo $id; ?>customset_<?php echo $id . (100+$k); ?>”
name=”customset[]” checked=”checked”/>
<?php
}
?></fieldset><?php
}

[Ernest MarcinkoKeymaster]

Hi,

Thank you for your suggestion!

There is an aria-hidden=”true” as well as the styling is explicitly set to “display:none”, so this is not going to conflict with accessibility readers – these two attributes strongly suggest, that this is a non-input (which is correct). WCAG tools may trigger a warning message (some does not recognize the aria-hidden and the invisible styling), but because of the invisibility, this is not an input.
Wrapping around a fieldset with a legend is probably not a good idea, as an actual reader may think, that there is useful input there, while this is a hidden field, and should be ignored.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[rachel.martin37Participant]

OK, I get what your saying Site Improve still throws errors (which sucks since the search is on every page of the site and my agency uses it to help asses things).
I have found though that the aria-hidden can be added to the new fieldset and legend. I went ahead and implemented this change with jQuery, which at least will resolve it for my site without having to edit the plugin itself.

Example output:
<fieldset aria-hidden=”true” id=”hiddenset” style=””>
<legend aria-hidden=”true” style=”transition: none 0s ease 0s;”>Custom Set</legend>
<input type=”checkbox” style=”display: none !important;” value=”page” aria-label=”Hidden label” aria-hidden=”true” id=”2_1customset_2_1100″ name=”customset[]” checked=”checked”>
<input type=”checkbox” style=”display: none !important;” value=”tribe_events” aria-label=”Hidden label” aria-hidden=”true” id=”2_1customset_2_1101″ name=”customset[]” checked=”checked”>
</fieldset>

[Ernest MarcinkoKeymaster]

That sounds like a good solution, I suggest leaving it there then. Although that fieldset is redundant, but if the validator likes it that way more, it should be all right.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts