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!
Related
As my title states, I am hoping somebody can confirm for me if the HTML input attribute Autocomplete works in Jquery Mobile 1.4.5 ?
I am just wanting the basic email and telephone etc to pre-populate with previously entered data.
I have searched the net and Stack Overflow for an answer but just can not find one. The support documentation for JQM is not helping me either.
Whilst searching for answers I have seen so many links for autocomplete plugins and widgets for Jquery etc and this is making me thing it is not supported natively, but most of these offer pre-populated lists or set lists.
An example of how I was hoping to get away with it, which unfortunately does not work.
<div class="ui-field-contain">
<label for="mobile-number-alerts1">Mobile number for SMS alerts:</label>
<input type="tel" id="mobile-number-alerts1" value="" data-clear-btn="true"
autocomplete="on">
</div>
<div class="ui-field-contain">
<label for="email-notifcation1">Email address for notifications:</label>
<input type="email" id="email-notifcation1" value="" data-clear-btn="true"
autocomplete="on">
</div>
If anybody could just confirm if it should work or not that would be greatly appreciated.
Thanks very much in advance.
Unfortunately this question earned me tumbleweed, I have not been able to use the standard html autocomplete function with in Jquery Mobile 1.4.5 so I can only assume that it is not supported.
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.
I want to use WordPress Contact Form 7 on my website, but I already have an HTML/CSS layout for it. So, I want to modify the plugin to use it with that custom HTML code.
<form id="contact_form" action="" method="post">
<div>
<label for="contact_name">Nombre</label>
<input id="contact_name" type="text" required aria-required="true" placeholder="Nombre">
</div>
<div>
<label for="contact_email">Email</label>
<input id="contact_email" type="mail" name="email" required aria-required="true" placeholder="su#example.com">
</div>
<div id="area_message">
<label for="contact_message">Mensaje</label>
<textarea id="contact_message" type="mail" required aria-required="true" placeholder="Mensaje"></textarea>
<input id="contact_btn" type="submit" value="enviar">
</div>
</form>
My question is: do I have to modify this code with some Contact Form 7 code or should I include this into the plugin administration?
No need to modify anything. Contact Form 7 supports this out of the box. Have you tried using it or looked at the documentation yet? If so, what is or isn't working for you?
Update based on comments below
Contact Form 7 gives you a shortcode for each field you generated. You can wrap the shortcode in HTML in the "Form" section. Using the example you provided in your question, that would look like this:
<div>
<label for="contact_name">Nombre</label>
[text* your-name 20/40 class:required "John Smith"]
</div>
You don't need to wrap this in a <form> tags - Contact Form 7 does that already (and assigns an ID).
In your WordPress text editor, use the form shortcode provided at the top of the Contact Form 7 interface to display your final output. If you'd prefer to put this in a PHP template, use this:
<?php echo do_shortcode("SHORTCODE GOES HERE"); ?>
Contact Form 7 also has a section for mail, where you would identify who the mail should go to and come from. Some hosting providers (DreamHost, for example), require the FROM email to be the same domain as the site itself (a form on http://example.com would need to send emails from hello#example.com, or a similar address). To make sure you can still reply to the right address, you would add a replyto header like this:
Reply-To: [email]
Only change [email] to match whatever the outputted shortcode for your email field was.
But seriously, this stuff is ALL in the documentation for Contact Form 7: http://contactform7.com/docs/
You can also use the WordPress plugin called Contact Form 7 Element Converter. All you have to do is copy and paste your HTML form into contact form 7 and it converts your elements into shortcodes. It speeds up a lot of my projects.
Here is the link: https://wordpress.org/plugins/cf7-element-converter/
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.
I already posted a similar question and got a jQuery solution that works. Now I want to do it with only CSS/HTML. I saved twitter's homepage locally and deleted all the js scripts and noticed that the effect I'm trying to achieve is with CSS/HTML (when you click on the username/pass the values "Username"/"Password" stay there until you enter text).
I'm a newbie at these kind of new CSS/HTML effects and have spent the last couple of hours trying to replicate it with no success.
Here's the html of twitter's login form:
<form action="#" class="signin" method="post">
<fieldset class="textbox">
<div class="holding username">
<input type="text" id="username" value="" name="session[username_or_email]" title="Username or email" autocomplete="on">
<span class="holder">Username</span>
</div>
<div class="holding password">
<input type="password" id="password" value="" name="session[password]" title="Password">
<span class="holder">Password</span>
</div>
</fieldset>
<fieldset class="subchck">
<label class="remember">
<input type="checkbox" value="1" name="remember_me">
<span>Remember me</span>
</label>
<button type="submit" class="submit button">Sign in</button>
</fieldset>
I've looked over the site's CSS but it's 10,000 lines and very complicated. How should the CSS look like? Or could you point me out to a tutorial on how to achieve the same effect as this is driving me nuts?
Thank you very much,
Cris
Set the HTML autofocus attribute:
<input type="text" placeholder="Type here ..." autofocus="autofocus" />
You can target elements that are focused or blured like so:
input:focus {color:red;}
You now need to nest the CSS to hide the span called holder inside the input.
span.holder input:focus {visibility:hidden;}
I have not tried this, but it would be something like this.
To clarify, I have just pulled the JavaScript twitter use and the source for their home page and I can confirm that they are using the following JavaScript function for focus on the field
inp.focus()
The JavaScript is quite lengthy but it looks like after a quick read that they are using jQuery that is setting focus based on the class being username.
I just looked at the autofocus property suggested by another poster and this method has worked for me in my web app currently under development.
The code for this is
<input type="text" id="username" value="" name="session[username_or_email]" title="Username or email" autocomplete="on" autofocus>
Note, per the documentation at the W3C website, the autofocus property can only be used once on the page. I have put it into a form that is hidden and shown in an inline element using Fancybox.
The grayed out text in the input field can be done with the place-holder element, something I'm already using, add the following into your input element
placeholder="Username"
NOTE: Both placeholder and autofocus are HTML5 properties and may not be supported by all major browsers yet, this is why JavaScript is still being used by sites like twitter.
The styling is done based on CSS/CSS3 greatly, an excellent resource is W3Schools. I would recommend for what you're wanting to achieve start at the CSS3 section looking at borders.
Another resource that is excellent but hasn't been updated for about a month and a half sadly is doctype.tv. Nick has some fantastic advise regarding styling your website along with some great insight into design.
Judging by the bolded text in your question (when you click on the username/pass the values "Username"/"Password" stay there until you enter text), I'm guessing what you want is the placeholder attribute, which #phihag has in his example.
<input type="text" placeholder="This text will disappear" />
The placeholder attribute works without Javascript in browsers that support it. For older browsers, you'll need some Javascript, and this is probably what Twitter is doing in their code.
See the Wufoo page on the Placeholder Attribute for more details, including how to do a javascript fallback and what browsers it is currently supported in.
See also this demo which shows how to style the ":placeholder" and ":active" states (at least for webkit and mozilla).