Well, without knowing the source of that accordion, I can’t readily say. You’d have to either edit the code producing the accordion or you’d have to add some custom JavaScript that added the labels after the accordion is rendered. Neither of these are particularly easy.
I’m not sure if that’s answered your question or not…
Thanks Joe.
I’ve decided to eliminate that particular accordion and use a more accessible “more tag.”
I’ll be honest with you, the more I bone up on accessibility, the more I realize I don’t know.
For example, I have a search form that the wave tool throws a duplicate labels error on. I’m pretty certain it can be remedied using aria-labelledby, but I’m not sure where and how I’d place it in the example below:
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div><label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" placeholder="Search Site" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>
Any advice more than welcomed.
The duplicate label is probably because the search form appears more than once on the page, and a given ID can only appear once. If you have two search inputs that both have the ID ‘s’, then both labels will apply to each input. Is that the case?
Thanks, Joe.
Yes, that is the case
Then what you actually need to do is modify the search form template in your theme. How this is done depends on the theme; some themes just use the native WordPress form, others provide a custom version. The simplest option is to have the searchform generate a random integer and append it to the ID and for values when it renders, so that the form IDs will be different. There is a chance that the random values could be the same, but as long as you choose a large enough integer range, it’s not *very* likely. There are other options, but this is the simplest choice:
<?php $id = 's' . wp_rand(); ?>
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div><label class="screen-reader-text" for="<?php echo $id; ?>">Search for:</label>
<input type="text" value="" placeholder="Search Site" name="s" id="<?php echo $id; ?>" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>
Nice. Thanks you so much, Joe!
