Styling a form is never an easy thing to do, but adding CSS3 on a HTML5 form is a task that shows a large variety of results when it comes to testing on different browsers. Check the test link.
When it comes to CSS3 not much can be done: but adding rounded corners, gradients and dropshadows is still more than nothing anf the overall aspect of the form is waaaaaaaaay better. But HTML5 is supported by few browsers (this HTML form only by Opera) and CSS3 also by few broswers – but different from the one supporting HTML5.
The result: impossible to see the result on one browser only: the rounded corners can be seen on Mozilla/Chrome/Safari and the HTML5 elements on Opera.
Internet Explorer? Better don’t ask. No support whatsoever.
So the results:
- Mozilla 3: rounded corners + / HTML 5 elements
- Chrome: rounded corners + (they look weird) / HTML 5 elements –
- Safari: rounded corners + / HTML 5 elements –
- Opera 9: rounded corners – / HTML 5 elements +
- IE (doesn’t matter which one): rounded corners – / HTML 5 elements –
Ric Ferrer sent us a screenshot with the behavior of Mobile Safari from his Ipod. Thank you
Check the Spanish version of this post:
Usando CSS3 para dar estilo a formularios escritos en HTML5
What can you answer to your client when you try to explain that your code is semantic, crossbrowser and…accessible and your client asks you “Good for you you’re coding accessible websites, but do you actually know any blind user?” Meaning, why should someone care about how you code a site as long as table-based code is still ok and cheap?
Well…you may remain speechless. Cause I really don’t know any blind person nor a person using assistive technology altough I do know people that need to increase the font-size or lower the screen resolution to be able to read better. But even if I did not “see” one that should not mean they don’t exist – but how can this be proved?
Since assistive technologies do not leave traces, maybe a solution is to see who’s clicking the a+ a++ buttons. This surely will leave some trace, right?
So we started an experiment: we wrote a script counting the number of clicks performed on the a+ a++ buttons (I know it’s not very scientific – anyone can click – but we’re counting on the fact that our users do not know about the experiment and that at least a small percentage of the clicks will be genuine). Every click is counted and written in a file. We compare it to the Google Analytics stats and hope to obtain some information about this aspect of the sites.
After a month of comparing both methods we saw that the a+/ a++ navigation was clicked on a daily basis (even though one site was selling Christmas decorations !!! ) and most of the time a++ was the star ! Between 5% and 8% of the visitors were clicking these links and that is more than the number of clicks on “about” or “contact” links.
Now, the question that started this article remains – what is the best answer for the client asking “Good for you you’re coding accessible websites, but do you actually know any blind user?”
I know almost every blogger wrote about this subject (lately all complaining about IE6 still being used by common users) – but this time I think we should take all this to the next level and start doing something about it.
I admit I don’t usually have contact with the final clients or have access to their websites stats – working as a freelancer made me lose contact with the real world and soon I started to believe that IE6 is slowly dissapearing. My sites’ stats show that Mozilla “rulz” when it comes to browsers and slowly, over the years, I began hoping that maybe one day I won’t have to code for IE6 anymore. The release of IE8 should have been the final stroke.
I was wrong. On most of the websites I code Internet Explorer is the master and mostly IE6 (I saw IE 5 too). We’re talking about brochure sites for small companies from Western Europe targeting users over 30years. Not IT sites read by coders who probably have all the existent brosers installed on their computers.
So it’s time to do something – we cannot talk to everybody asking to upgrade but we can add some custom message into our code to encourage users to upgrade. It’s safe, it’s free and it’s recommended. Starting from simple messages/ icons in the footer/sidebars of the websites you code to a more “extreme” solution like “IE6 Upgrade Warning Script” asking you to upgrade your browser and choose from IE8, Mozilla, Safari, Opera & Chrome. I think this kind of script scares people but maybe a small percentage will actually click.
I know I did not re-invent the wheel, coders wrote about this a long time ago – but no common user is reading IT blogs or actually talking about browsers at the pub – so I think a lot of messages shot blank by addressing to the wrong users. Asking permission from the final client to use their site help people move on from IE6 towards something better is my idea.
I look forward to reading about yours.
After writing an accessible form in XHTML and validating it with a PHP server side script & after that with a Mootools client-side script, I write today about a third way of approaching the subject – using future-to-come HTML5 (by saying that, I really hope to be able to use it waaaay before 2011).
The beauty consists in having all the above mentioned validation inside HTML code: we’ll have
- input type=”email” for email addresses
- type=”url” for urls
- type=”date” and “datetime” for date fields (usually done with JS calendars until now), or “month”, “week”, “time”
- type=”number” for number only inputs
- accessible sliders, with type=”range”
- ability to add extra validation conditions after writing the tag, like: required, read-only,disabled, autofocus, a minimum value, a maximum accepted value/length
The code for our simple contact form will be much lighter:
<form action="index.php" method="post" name="contactform" id="contact">
<label for="name">Name <span>(required)</span></label>
<input tabindex="1" type="text" name="name" id="name" required />
<label for="mail">Email <span>(required)</span></label>
<input tabindex="2" type="email" name="mail" id="mail" required />
<input tabindex="3" type="text" name="phone" id="phone" />
<textarea tabindex="4" cols="30" rows="10" name="message" id="message"></textarea>
<button tabindex="5" type="submit" name="submit" id="send">Submit</button>
The result will be a much easier way of writing and validating forms in an accessible manner, without adding extra load/code with PHP/JS scripts. All you have to do is place “required” to all the required fields and use the above mentioned minimum value, maximum accepted value, etc to control the user’s input.
The entire list of types and useful tables with the methods that apply to each state can be found on W3C site
The problem right now is the inabilityof the browsers to work with lots of HTML5 features. And the future does not look good either. So far the only browser that supports the new forms is Opera 9.5+. Internet Explorer 8 and below is not compatible and IE9 probably won’t be either (we’re talking about 2010). Chrome 2+, Safari 4+ will partially support some features while Mozilla won’t do it even in its 4.0 version (due to launch in 2010).
Now, the same contact form we used to play with, but written in HTML5, will look the same but behave much more nicely (the code is lighter too). It’s saving us a lot of time and headaches and it’s much more user friendly. Play with the new example – in Opera 9.5+ – and drop us a feedback if you consider that the subject is interesting enough to come back with more code-examples.
Check the Spanish version of this post:
Una tercera manera de escribir y validar formularios – HTML5
A good way to learn about accessibility is through examples and discussions. In this post I will try to translate the WCAG sometimes-hard-to-get rules into a copy-paste real contact form example. You can check the test link, download the code and/or keep reading a bit more.
As I mentioned before, contact forms are in great need of special markup in order to be accessible. And it seems that there’s always room for improvements – in case you have suggestions or your approach is different, I’d love to hear from you.
My suggestion is a simple 4 fields contact form with PHP server side validation. After the user submits the required information the page is reloaded and new messages are displayed depending on the user actions. Of course you all know that the form needs
tag and some sort of validation – everybody is writing about the need to display in an accesible way which fields are required and also the error messages (usually indicating the missing fields) – but few actually offer a simple straightforward code to copy-paste in our sites.
The stylesheet is very light – we have to style the form – but the novelty is a class for the fields that are required and not yet filled. This way after we validate we return the error message with links to the missing fields but we also hightlight them for a more usable and intuitive experience. The PHP part is reading the inputs, checks them and sees if the required ones were filled. A thank you message is displayed in case the user filled all the required fields.
The number of fields can easily be increased but don’t forget to validate them -when someone understands how the form works and which were the accessibility elements that were included then buiding more complex forms becomes just a matter of typing.
Check the Spanish version of this post:
Un básico copia y pega de un formulario de contacto accesible