Here's what the post submit URL looks like:
default.cfm?fuseaction=Seasons.edit&sid=2569#errors
I've added an internal anchor to my errors. The code looks like this:
<a name="errors"/>
<div id="errors">
<p>An error has occured:</p>
<ul>
<li><label for="name">Missing or invalid season name, click to jump there</label></li>
</ul>
</div>
<form action="#errors" id="gronk" method="post">
<fieldset>
<legend>Edit Season</legend>
<div class="row">
<span class="cell">
<label for="name"><span class="required">* </span>Season name<span class="wcag_hide"> Required string</span></label>
<input type="text" name="name" id="name" class="formFields" value="" />
</span>
</div>
...
Is this a valid way to make error reporting accessible?
I had thought of putting this instead, but it only works in IE I believe:
...
<li>Missing or invalid season name, click to jump there</li>
...
I think in the scenario of returning to a form with errors, the main thing you want is to:
Focus your user's browser to the input which has an error
Alert your user that there is an error & what has caused it (e.g. invalid email)
So possibly, rather than bringing the user back to default.cfm#errors you could focus them on the first field with an error — e.g. bring them back to default.cfm#name and inject the error message into the field label:
<li>
<label for="name"><span title="Error">Missing or invalid season name. Please enter a </span>Season name</label>
<input id="name" name="name" type="text"/>
</li>
This then gives a semantic link between the error and the field itself.
Additionally, even before hitting errors, it may be useful to include some text in the label that specifies that the field is required to begin with. While the asterisk is a good visual clue, it mightn't come across as strongly when using a screen reader.
In these types of scenarios, you could create a class that will hide the text content off screen (not display:none, as this will be ignored by screenreaders also) in order to provide more contextual info to users, e.g.:
<label for="name">Season name *<span class="contextInfo">(this is a required field)</span>:</label>
The main thing though is to test things with an actual screen-reader. While you're not going to have the same experience as a blind user (as you won't be used to browsing with it, it may seem strange), you will be alerted to what is and isn't read out.
NVDA is an open-source screen-reader & JAWS, one of the most popular, has a trial available. You can't beat testing with the real thing.
No it isn't. A form element can only have one label. Your second approach is better, but I would remove the "click to jump" part.
Change your link to .... for it to work. I think Chrome has an issue with inpage links still, but that is beyond our control.
Related
I'm currently facing a situation that I have never faced before. I need to create a list of users, each item of the list is editable and automatically sends data to our backend.
The basic example that I can give is the following:
<ul>
<li>
<label for="username">User name</label>
<input id="username"/>
<label for="enabled">Enabled</label>
<input id="enabled" type="checkbox" />
</li>
</ul>
This is just a simple example, but it is basically the structure, as you can see I have not added any form and that is the question that I have.
Based on my knowledge of semantic HTML or each item is a form:
<ul>
<li>
<form>
<label for="username">User name</label>
<input id="username"/>
<label for="enabled">Enabled</label>
<input id="enabled" type="checkbox" />
</form>
</li>
</ul>
Or I would do a single form for the entire list:
<form>
<ul>
<li>
<label for="username">User name</label>
<input id="username"/>
<label for="enabled">Enabled</label>
<input id="enabled" type="checkbox" />
</li>
</ul>
</form>
But, my first attempt before coming here to ask, I tried to look on some websites, like youtube, twitch, gmail and even here, on stackoverflow to see how they do it, and I found this on Twitch that made me think if a form is even necessary. If you click on your avatar on twitch, it give you two options:
Inspecting the page I could only find a label and an input for each of those options, but looking at the remaining HTML I could not find any form nor a div with form role.
So I'm thinking, is semantically correct to have input outside of any forms? If so, what are the conditions to have a form or not?
Because as far I could understand, whenever you need to submit data somewhere, you should have a form for semantically reasons.
Although is a best practice, sometimes yout your input tag doesn't need to be inside a form or a div with form role. On this case you can simply create the elements and handle the inputs through JS. I don't think there's actually a clear rule for whether using form or not. It was most commonly used before along with the type="submit" to pass data easily on the URL, but with AJAX and web frameworks there's no more need for that and the action attribute might actually trick you.
Check out these references:
MDN article
This SO answer
One other reason you might not find a form or equivalent role on your HTML inspection is because most (if not all) of these platforms run on top of various javascript frameworks, like React, Angular, etc. and the role is injected through js.
I need your help with an error that i met. I want my website(eshop) to pass WCAG AA accessibility tests (webaim, achecker, w3validator). Plenty of errors came up and since there isn’t any tool to autofix it, and not temp fix upon loading like UserWay, i am correcting it one by one.
One of the plugins that i used is Contact Forms 7. Before i proceed on the problem, i must mention that i use a theme from envato market called Metro, Elementor, Woocommerce, WPML.
The report of wave.webaim.org found an error in the following page
https://benetialingerie.gr/contact/?lang=en (and in its translation).
The error is:
Missing form label
A form control does not have a corresponding label.
You may find below the code.
<div class=”metro-contact-form” aria-label=”contact form”>
<h3 class=”rtin-title” aria-label=”title area”>Send Us a Message</h3>
<div class=”row” aria-label=”name area”><div class=”col-md-6 form-group”>[text* your-name class:form-control placeholder “Name *”]</div><div class=”col-md-6 form-group”>[email* your-email class:form-control placeholder “Email *”]</div></div>
<div class=”row” aria-label=”subject area”><div class=”col-md-6 form-group”>[text* your-subject class:form-control placeholder “Subject *”]</div><div class=”col-md-6 form-group”>[tel your-phone class:form-control placeholder “Phone”]</div></div>
<div class=”form-group” aria-label=”text area”>[textarea* your-message class:form-control placeholder “Message *”]</div>
<div class=”form-group” aria-label=”Submit button”>[submit “Submit”]</div>
[response]
</div>
As i undestand, the code must have elements. Since i am not familiar in coding and my developing skills are limited, can you please help me out? Any advices?
Thanks in advance.
Nikos
The code you are displaying is the widget code people need to insert in their WordPress pages to render the form.
That is not the actual code generating the forms, as that code is in the PHP files of the plugin itself.
My suggestion is to hire a web dev who can go into those files.
In terms of accessibility you need to make sure that each input field has a label (specifics of this apply).
Bad example, missing label: <input type="text">
Good example: <label for="nameField">Insert name</label><input id="namefield" type="text">
So, you need to have a label and that label also needs to be connected with the actual input field via the for attribute pointing to the id of the input.
Like #Manuel Cheta said you need to wrap your input field with a label tag. For example:
<label for="**your-email**">[text* your-email **id:your-email** placeholder "your email"]</label>
but you also need to add the id of this input field.
Although, Contact form 7 supports HTML directly. So, if you have code like this:
<div>
<p><input name="your-email" aria-label="Your Email" /></p>
<p><input name="your-name" aria-label="Your Name" /></p>
</div>
you could also have aria-label="Email" attribute. That works fine to me too!
Basically, I've got an input & an associated label, both with the same ID. However, Google Accessibility Review is failing it, with the following response:
Form elements do not have associated labels
To me, because the id is the same and the label is pointing towards the input, then I can't see what's failing here?
Am I missing something blindingly obvious!?
<div class="field additional">
<label class="label" for="street_2">
<span>Address</span>
</label>
<div class="control">
<input type="text" name="street[]" value="" title="Street Address 2" id="street_2" class="input-text " autocomplete="off" aria-required="true">
</div>
</div>
Many things may explain this :
you may have another label linking to the same element conflicting for the same form element,
elements with the same id may appear elsewhere in the same HTML document,
this message may concern another form element,
the label itself might not be visible
The fact that your input name is an array (name="street[]") let me think that we have not all the elements to conclude on one of those choices.
In my application there are few field validations which fires on blur. Error message container is wrapped with a DIV which has role=alert. So when user entered an invalid input and then press tab key screen reader announce the error message to user but this cut off the reading the label and relevant information currently user is in now.
This is scenario has been identified as an accessibility issue. Any assistance to fix this issue would be very helpful.
Sample markup as follows.
<label class="label" for="view-184">Payment amount</label>
<input id="view-184" type="text" autocomplete="off" placeholder="Please enter a dollar value" aria-describedby="form-input-text-error-view166-required">
<div class="error" role="alert" aria-live="polite" style="">
<span id="form-input-text-error-view166-custom-format" class="error-custom-format" style="display: none;">Enter a valid dollar value</span>
<span id="form-input-text-error-view166-required" class="error-required">Dollar value is required.</span>
</div>
I was able to meet an accessibility consultant and able get the answer. His answer was we don't need to add role="alert" for error messages which triggers on blur/change. All we have to do is when user click on submit button focus on the first field which is invalid. Also we can link field with error messages using aria-describedby tag.
Do not use inline error messages this always create focus issues and encounter failing success criteria Level A 2.4.3 Focus Order and 1.3.2 Meaningful Sequence. Rather than using inline error message use on submit summary message providing same error message at the beginning of form. This may handy for Assistive Technologies and will solve your problem with the same code.
I'd like to have a required email input on a form, and I'd like to augment the input's label to show validity with specific messages. I tried the markup below (simplified, and a few variants). The actual can be found at this fiddle illustrating the problem.
<label for="email">Email
<small class="help-inline" ng-show="form.email.$invalid-required"> (required)</small>
<small class="help-inline" ng-show="form.email.$invalid-email"> (email)</small>
</label>
<div class="input-group">
<input type="email" placeholder="Email" name="email"
ng-model="model.email" required>
I'd like the 'required' message to appear when the input is empty, and when it's non-empty, I'd like the 'email' message to appear conditionally if angular email validation passes.
As you'll see in the fiddle, both messages appear and disappear together, even though, as I use the chrome inspector, the $invalid classes on the input seem to change appropriately. This casts suspicion on the ng-show expression for the errors, but no matter what I try there I get the same behavior.
I've seen a couple answers (like this one) that use a lot of code, but that answer seems a little roundabout. I'm new to web, and already appalled by how bulky the html/code can get (each time I learn about a new streamlining idea, mine seems to double in size)
Thanks in advance.
Change the expression for required to
<label for="email">Email <small class="help-inline" ng-show="!form.email.$viewValue">
and it would work.
The problem with Angular is that it does not allow invalid data in the model. So unless you provide a valid email value the linked model property remains empty and both the required and email validation fail.