Not at the moment. But not sure how to improve accessibility for that issue. I could have JS dynamically add text somewhere saying something about the problem, but would screen readers pick that up if it’s dynamically?
Thread Starter
new_B
(@new_b)
Thanks, Tijmen. According to http://webaim.org/techniques/formvalidation/#form, there should be a none JS fallback.
Would it be possible to add a form action? “Use a true URL action value for the form. You can still invoke client-side validation, and it would be processed first if scripting is enabled”
It just occurred to me that there is no <form reference in the default non JS code. (This may also explain the Search submit button not working when JS is disabled.)
<div class="wpsl-search wpsl-clearfix wpsl-filter">
<div id="wpsl-search-wrap">
<div class="wpsl-input">
<div><label for="wpsl-search-input">Your location</label></div>
<input autocomplete="off" id="wpsl-search-input" type="text" value="" name="wpsl-search-input" />
</div>
<div class="wpsl-select-wrap">
<div id="wpsl-radius">
<label for="wpsl-radius-dropdown">Search radius</label>
<select autocomplete="off" id="wpsl-radius-dropdown" name="wpsl-radius">
<option value="10">10 km</option><option value="25">25 km</option><option selected="selected" value="50">50 km</option><option value="100">100 km</option><option value="200">200 km</option><option value="500">500 km</option>
</select>
</div>
<div id="wpsl-results">
<label for="wpsl-results-dropdown">Results</label>
<select autocomplete="off" id="wpsl-results-dropdown" name="wpsl-results">
<option selected="selected" value="25">25</option><option value="50">50</option><option value="75">75</option><option value="100">100</option>
</select>
</div>
</div>
Thread Starter
new_B
(@new_b)
Would it be possible to use the “<form” tag and add an action(or just leave action blank to default it to the current page)? http://webaim.org/techniques/formvalidation/#form
I just realized the existing (non JS) code doesn’t use the “<form” tag. This also explains why the Search submit button doesn’t work when JS is disabled.
Here’s an example (from Joe Dolson, an accessibility expert) -https://www.joedolson.com – try out the sign up form on the right column. It works with JS disabled.
Is there currently a way to override these without hacking the plugin code (if you don’t have the time to do this). Otherwise, let me know if I can be of assistance to speed up this process.
We would really like to use this handy plugin but accessibility is a must. Thanks.
Thread Starter
new_B
(@new_b)
FYI: JS, forms, and accessibility: http://a11yproject.com/posts/myth-screen-readers-dont-use-javascript/ and http://www.w3.org/TR/WCAG20-TECHS/client-side-script.html
***After doing some more research, to fix the validation issue, in addition to adding the <form tags, the required Location input field should use HTML 5 required attributed and aria-required as well for more browser support. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute
Thread Starter
new_B
(@new_b)
*Note: I managed to get required field error validation to work by overriding the default.php template.
Would it be possible when you have the time to integrate this as the default code? I think it would be handy for everyone to have it more accessible by default. Thanks.
I added required and aria-required="true" to the location input field code.
I also added <form> and </form> around the whole form to use the default HTML 5 and ARIA aria handling related to the above.
Can you email me the template you have now with the form and aria code to tijmen at wpstorelocator.co?
Thread Starter
new_B
(@new_b)
Unfortunately, it’s more accessible but the functionality is now broken. Perhaps, it’s too dependent on the JS (as opposed to HTML form elements, submit button, for action, etc.) and stops functioning. When I hit “Submit”, it no longer returns any results, as expected.
I’m currently still looking into it.
Thread Starter
new_B
(@new_b)
I will e-mail you what I have now.
Thread Starter
new_B
(@new_b)
FYI: Here’s what I ended up with. Adding the <form, etc… just caused more problems than not and stopped the geocoding, etc. from happening properly.
To make the existing validation more user-friendly and accessible, I added an alert after the location field is highlighted (which indicates the field needs to be filled out).
wpsl-gmap.min.js – function searchLocationBtn
if ( !$( "#wpsl-search-input" ).val() ) {
$( "#wpsl-search-input" ).addClass( "wpsl-error" ).focus();
// Add an alert to make validation more usable and accessible.
alert("Please fill out the location field.");
...
The above would need to be adjusted to work with multilingual (e.g., WPML) text.
Would it be possible to add this without having to hack the plugin code?
Thanks again.
