Custom error handling

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?

Thanks, Tijmen. According to https://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>

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)? https://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.

FYI: JS, forms, and accessibility: https://a11yproject.com/posts/myth-screen-readers-dont-use-javascript/ and https://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

*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?

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.

I will e-mail you what I have now.

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.