Hi,
Is it possible to remove the ul and li tags, for WCAG compliance?
At the moment i'm building an accessible website. I love GF, but the UL and LI tags are not allowed for a form, messing up the output with a screen reader. Is there a way to remove them and rewrite some of the HTML so I can adjust the HTML structure of a form?
Kind regards,
Rian
Currently, there is no way to change the output code of the form as this would break multiple things, including conditional logic, validation messages, and more. If you could point to what isn't working in terms of WCAG, I'll pass it on to the developers so that they could maybe tweak it to better work in screen readers.
Hi David,
Thank you very much for your reply.
It's not semantically correct to add ul and li, it adds extra info to fields, but they are actually only there for mark up and not for info about what the content means. A screen reader tells the user there is a list with items, but all there is are labels and input fields. It's not wrong but it add to much info that is not relevant. And I had a debate with the people who will validate the website about this.
And another (bigger) problem is the items in an order form:
The main issue with screen readers: a label and the input field must have a one to one relationship. For example:
<li id='field_2_25' class='gfield gfield_price gfield_price_2_25 gfield_product_2_25' >
<label class='gfield_label' for='input_2_25'>Mastering the art of living and becoming a citizen of the world</label>
<div class='ginput_container'>
<input type='hidden' name='input_25.1' value='Mastering the art of living and becoming a citizen of the world' class='gform_hidden' />
<span class='ginput_product_price_label'>Prijs:</span><span class='ginput_product_price' id='input_2_25'>€ 11,00</span>
<input type='hidden' name='input_25.2' id='ginput_base_price_2_25' class='gform_hidden' value='€ 11,00'/>
<span class='ginput_quantity_label'>Amount:</span>
<input type='text' name='input_25.3' value='' id='ginput_quantity_2_25' class='ginput_quantity' size='10' tabindex='18'/>
</div>
</li>Here the label class='gfield_label' for='input_2_25' has no relation to the input field amount, so a screenreader can't tell that the field related to name='input_25.3' in <input type='text' name='input_25.3' value='' id='ginput_quantity_2_25' class='ginput_quantity' size='10' tabindex='18'/>. So a blind user can't order via this form.
Also: Modern screen readers can execute javascript, but's it difficult to see (hear) the update of the total amount.
I know it's difficult to keep everyone happy. And I agree some functionality is hard to get working for everyone.
Kind regards,
Rian
I am going to move this to Feature Requests, and ping the developers relating to this. I used to work in Government, and completely understand the need to be able to provide services to everyone. All my best!